Design systems

Create reusable components and interaction patterns that make future development faster and more consistent.

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 every state
  • 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.

Readability auditDesign sprintsDashboard designPrototypingDesign systemsViewingHandoff & QA