Skip to content

service 03

Product Design

Interfaces and design systems that survive contact with a real backlog and a real team.

Timeline
4 to 12 weeks depending on surface area
Starts at
From $5K
Works with
UI/UX, Design systems, Prototypes

A design system is not a Figma library. It is the set of decisions nobody has to make twice, and it only counts once it exists in code.

what you get

  • 01

    Tokens that live in the codebase

    Colour, type, spacing and motion defined once, consumed everywhere. A rebrand becomes one file rather than an archaeology project.

  • 02

    Components with their states

    Default, hover, focus, active, disabled, loading, error, empty. The states nobody designs are the ones that ship broken.

  • 03

    Accessibility built in

    WCAG AA contrast, keyboard paths, focus order and reduced motion designed at the token layer rather than retrofitted at audit time.

  • 04

    Documentation developers read

    Short, in the repo, next to the component. Usage and the reasoning, not a screenshot of the thing they are already looking at.

process

  1. 01

    Inventory

    Every component, spacing value and colour currently in use. The count is usually the argument for doing this at all.

  2. 02

    Define the tokens

    Collapse what exists into a defensible scale, then check the ramp against contrast requirements before anything is styled.

  3. 03

    Build the primitives

    The twenty components that make up most screens, with every state, in code.

  4. 04

    Migrate and document

    Move real screens onto the system so it is proven rather than asserted, then write it up.

deliverables

  • Token sheet in code
  • Component library with all states
  • Accessibility audit and fixes
  • Migration of key screens
  • Usage documentation in the repo

related work

questions

  • Both, in that order, but the code is the source of truth. A token that only exists in Figma is a suggestion.

  • Usually the better option. Extending and repairing what a team already knows beats replacing it, unless the foundation genuinely cannot carry the work.

  • No. The system is built in whatever they already use, and the documentation sits in the repo rather than in another tool.

Need thisbuilt?

Product Design engagements start at From $5K. Tell us the scope and we will come back with a fixed number.

hello@kraftline.org