Design systems

Give your team patterns to reuse as the product grows.

Start a project
Components

Synced library · 24 primitives

DarkLight
ButtonPrimary
name@studio.com
InputText
SwitchOn
In review
BadgeStatus
CheckboxGroup
SliderRange
AvatarStack
OverviewActivity
TabsNav
ProgressBar
RadioGroup
Workspace▾
SelectMenu
SpinnerLoading
Saved ✓
TooltipHint
Tokens

Neutral ramp

Accent

Spacing

space.xs4px
space.sm8px
space.md16px
What you get
  • Design tokens — colour, type, spacing, radius, elevation
  • Core component set with variants and key states
  • Usage specs with clear do / don’t guidance
  • Figma library aligned with the existing codebase where possible
  • Basic accessibility guidance for key components
  • Migration notes for adopting it incrementally
How it runs
  1. 1

    Audit current UI

    Inventory what exists and where it diverges.

  2. 2

    Tokenise

    Pull the primitives into a single source of truth.

  3. 3

    Build core components

    Variants, states and composition rules.

  4. 4

    Document + hand off

    Specs the team can build against without me.

Example

Taomarketcap: Swap, Send and Stake share one transaction box, with one amount input, half and max presets, and one primary action.

Common questions

When your team re-decides the basics on every new screen. If spacing, colour, and component behaviour are argued about more than once a sprint, a system pays for itself.

Design tokens for colour, type, spacing, radius and elevation, a core component set with variants and key states, usage specs with do and do-not guidance, and a Figma library aligned with the existing codebase where possible.

Three to six weeks. Larger UI and design system work sits at the top of that range.