Docs › Getting started

Design principles

The rules behind every component, from the design system document in the repository.

Surfaces

The page is a warm cream, never pure white. Cards are one step lighter, floating chrome such as a menu is white, and dark mode keeps the same steps on a near-black ladder.

Type

One family, Sofia Sans. Body text is weight 450, headings 500 with tight tracking, and uppercase is reserved for the small eyebrow label with its accent dot.

Corners

Corners come from a gapped scale: 6, 20, 24 and 40 pixels, pills and circles, and nothing in between. Rounded inside rounded steps down one place, so a field inside a card is never as round as the card.

Color carries meaning

Signal orange is only for consent and legal actions. Clay means unsaved. Error and success mean exactly that. None of them is ever decoration, not even in sample content.

Measured, not chosen by eye

Every color pairing is checked against WCAG contrast in both modes, and every control boundary clears 3:1. The full reasoning, with each measurement, is in the design system document.

esc

↑ ↓ to move↵ to open