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.

Common questions
When is a design system worth building?
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.
What does the design system include?
Design tokens for colour, type, spacing, radius and elevation, a core component set with variants and every state, usage specs with do and do-not guidance, and a Figma library aligned with the existing codebase where possible.
How long does it take?
Three to six weeks. Larger UI and design system work sits at the top of that range.
Readability auditDesign sprintsDashboard designPrototypingDesign systemsViewingHandoff & QA