Orbit

Call sheet

Prod. no. 08

Production: Orbit
Client: Orbit HQ
Category: SaaS · Design system
Year: 2024
Role: Design system, React library
Team: 3 people
Director: StackBridge

Shipped 2024

Colourful interface components floating on a dark background

A-cam · orbit-design-system

The short version

One design system for three product teams, from tokens to code.

Outcome

120

Components in Figma and React, from one source

SC 01

The brief

Orbit had three product teams, three button styles and a growing pile of almost-identical components. Design and code drifted further apart with every release.

We set out to give them one source of truth: tokens, Figma components and a React library that stay in sync, with docs good enough that teams use them by choice.

SC 02

What we did

01Audited every screen across the three products and counted the duplicates
02Defined colour, type and spacing tokens that export to both Figma and code
03Built 120 components in Figma and React with matching names and props
04Wrote docs and examples, and paired with each team on its first migration
05Set up versioned releases so one update reaches every product in a single PR

SC 03

Design → code

One crew on both sides. The frame on the left is the Figma file; the panel on the right is the code that shipped. Type, spacing and colour carry straight across, and nothing gets lost in a handoff.

Hero / Desktop

Orbit

1440 × 900

orbit-design-system/Hero.tsxTSX