Introduction

Inbox is a design system that exists in two places at once: a Figma library, and the React components on this site. The Figma file is the source of truth for colour, type, spacing and elevation — those are exported to design/tokens.json and compiled into CSS custom properties, so a component never hardcodes a hex value and every token carries both a light and a dark value.

What that buys you

A component does not know which theme it is in. bg-raised resolves to white in light and to a lifted grey in dark, so there is no dark: variant to forget and no second set of classes to keep in step.

How the components are organised

Primitives are the pieces with no domain knowledge — buttons, tags, fields, avatars. They take props and render; they never fetch, and they never assume a screen.

Composed components know a little about the product — a stat strip, a task row, a phone frame. They are still presentational, but their shape comes from a specific Figma component rather than from first principles.

The rule this system is built on

Colour means one thing at a time. Green and red are reserved for gain and loss — success and error — so they are never borrowed to tell one category from another. Anything a person acts on is brand blue. When a category needs to be distinguishable, that is an identity hue, and identity hues carry no sentiment at all.

The practical version: if you find yourself reaching for green because a chart needs a fourth colour, reach for an identity hue instead.