iterate design system

Dark-first aubergine

One system, every service.

Tokens + components shared across everything Iterate builds. Dark by default; add data-theme="light" for the light theme.

Palette

--primary #533362
--primary-600
--accent #E6A15C
--accent-deep
--dark-3 #1A1020
--surface #271831
--paper #F6F2EE
--ink #241A28

Type

Heading one

Heading two

Heading three

Lead paragraph in Geist.

Geist Mono for code / labels / eyebrows.

Buttons

Tabs

Fields

Card + list

Panel

A list row tag
Secondary metadata line
Another row
Reflows on mobile

States

LoadingSomething went wrong

Reference page for @iterate/design. Consumed live by restore.iterate.nz and help.iterate.nz.