Our product’s brand voice, interaction patterns, and technical stack have unique requirements that off-the-shelf systems couldn’t meet without heavy overrides. Starting from first principles let us define tokens, components, and governance that fit the team’s exact workflow and scale cleanly as the product evolves.

Each token and component is tied to a variable mode for Desktop, Laptop, Tablet, and Mobile. Switch the mode once, and every instance across the file redraws itself—sizes, paddings, and typographic scales included—so designers don’t duplicate artboards or manually resize elements.

Airtable is our single source of truth. Formula columns auto-generate token names from category and breakpoint fields, guaranteeing a consistent convention. Designers pull those names straight into Figma Variables, eliminating typos and one-off labels.

Components are split into two layers: a universal file for atomic elements (Button, Avatar, Input) and separate domain-specific files for larger patterns (Card, Carousel, Data-Viz). This separation reduces file size, speeds up loading, and lets designers focus on the right abstraction without wading through unrelated variants.

Yes. We separate primitive colour tokens (raw hues) from semantic tokens (roles like text/default or state/error). Swapping a theme simply remaps primitive values—no component refactor needed. Variable modes in Figma then apply the new palette across every breakpoint automatically.

Submit a proposal in the design-system backlog describing the use-case, states, and accessibility needs. The core team reviews it in weekly triage, aligns on naming and token usage, and then pairs with the requester to design, build, and document the new component before it enters the shared library.