Dimension AI

Short Explanation

Dimension AI is a B2B SaaS product that acts as an AI coworker — connecting to tools like Gmail, Google Calendar, Slack, Notion, Jira, and more to help teams reduce repetitive busywork. I joined the team and worked on the frontend for roughly 7–8 months, from early MVP to a polished beta release.

What I Worked With

The product is built on a React + TypeScript frontend, with a GraphQL API layer via Apollo Client. We used Tailwind CSS extensively throughout the UI and leaned heavily on Radix UI primitives for accessible components.

Key tools and libraries:

• React Router — client-side navigation and data loading
• Apollo Client — GraphQL queries, mutations, and optimistic updates
• Radix UI — headless, accessible primitives (Dialog, Dropdown, Tooltip)
• TipTap — rich text editor for task/note inputs
• Framer Motion — microinteractions and page transitions

App Demos

Task Inbox

The task inbox aggregates action items from every connected integration into a single prioritised view. Users can triage, delegate, or snooze items without leaving Dimension.

Calendar Assistant

The calendar assistant drafts meeting agendas and follow-up emails automatically after each event, using context from the connected integrations.

Curated Works

Design System

We built a token-based design system from scratch, covering colour, spacing, typography, and motion. Components were built as Radix UI wrappers with Tailwind variant tokens.

components/
├── button/
│   ├── Button.tsx          # primary, secondary, ghost
│   └── IconButton.tsx
├── dialog/
│   └── Dialog.tsx          # Radix Dialog + custom animation
├── input/
│   ├── Input.tsx
│   └── Textarea.tsx
└── typography/
    └── Text.tsx

Microinteractions

Small interactions that make the product feel alive:

• Search dialog — opens with a scale + fade, results stream in as you type.
• Upload animation — a progress ring that morphs into a checkmark on completion.

Rich Text Editor

We integrated TipTap as the editor for task descriptions and meeting notes. Key customisations: @mention for teammates, /slash commands for inserting blocks, and a custom toolbar that appears on selection.

Lessons Learned

Working on Dimension reinforced how much product quality lives in the details — the difference between a component that "works" and one that feels right is usually a handful of well-placed transitions and focus states.

Customising Radix

Radix primitives are powerful but opinionated about DOM structure. A few patterns we settled on:

1. Always wrap portal content in a ThemeProvider so tokens propagate correctly.
2. Use asChild to compose with your own anchor/button elements rather than duplicating variants.
3. Test keyboard navigation manually — aria-* attributes alone are not enough.