Foundations

The decisions every component inherits: the palette, the type scale, the spacing steps and the icon set. Components are in the rail on the left — each one shows its variants, its generated props table, and the rules for using it.

Colour

Labelled token-first. The old guide named four shades per hue, and those were embedded into the 50–950 ramps at whatever step matched their lightness — so they sit at different steps per hue (navy at 500–900, blue at 300–700, gold under yellow-*). The guide name alone doesn’t tell you which class to type, which is why both are shown.

navy-500 · navy lighter #466285

navy-600 · navy light #2e4056

navy-700 · navy #233142

navy-900 · navy dark #18222e

blue-300 · blue lighter #52e2ff

blue-400 · blue light #0bd5ff

blue-600 · blue #00c3eb

blue-700 · blue dark #00aacc

red-200 · red lighter #fdbbbb

red-400 · red light #fa7777

red-600 · red #f95959

red-700 · red dark #f83b3b

green-300 · green lighter #66f0bf

green-400 · green light #25eaa4

green-600 · green #15db95

green-700 · green dark #12bf82

yellow-200 · gold lighter #fee7b2

yellow-300 · gold light #fdd16c

yellow-400 · gold #fcc74e

yellow-500 · gold dark #fbbd30

grey-200 #d2d5d8

grey-300 #abb0b7

grey-400 #9ba1a9

grey-600 (text) #6b737c

grey-50 · light-grey #f5f8f9

grey-100 · light-grey dark #e2ebee

grey-600 is the lightest grey allowed for text

The guide’s own grey-400 is 2.60:1 on white and fails WCAG AA. grey-200/grey-300 are for borders and decorative glyphs — empty rating stars, placeholder icons — where contrast requirements don’t apply.

The status colours are not text colours

green-600 is 1.81:1 on white, red-600 3.18:1, yellow-500 1.69:1. So Alert and Toast split colour by role: the brand hue keeps the border and the filled circle, the text drops to that hue’s -900 step, and the glyph inside the circle is navy-700 rather than white. Don’t darken a whole variant to fix its text — that was the first attempt, and it turned the warning brown, because darkening yellow shifts its apparent hue in a way darkening red and green doesn’t.

Typography

Six components over one scale. Header and SubHeader carry the display face; Text, Caption, MetaText and Quote the reading face. Sizes are px because the old guide’s rems were on a 10px root, and translating them by hand is how a 36px heading becomes 3.6rem of something else.

Header lg

Header md — the default

Header sm

SubHeader lg

SubHeader md

SubHeader sm

Text lg — 18px

Text md — 16px, body copy

Text sm — 14px

Caption — 12px, muted by defaultMetaText — labels and metadata

Quote — a pulled sentence, not a blockquote element

Full props for each are on the Typography page.

Spacing

Four steps, shared by Stack, Row and Grid. Use the token, not a one-off margin — a page built from the scale stays aligned when a component’s internal padding changes, and one built from arbitrary values doesn’t.

xs

5px

sm

10px

md

20px

lg

40px

Surfaces

One radius, one border, one shadow, one hover wash. They are this small on purpose: a system with three shadows has no shadow language at all.

3px radius

grey-200 hairline

standard shadow

grey-50 hover wash

Icons (206)

One icomoon font, one Icon component, three sizes (sm 16 / md 20 / lg 25). Every name below is a valid name prop — the type is generated from this list, so a typo is a compile error rather than an invisible empty box.

flag-active

heart-active

heart

menu-new

star-active

thumbs-up-active

alarm

align-center

align-justify

align-left

align-right

anchor