Design system · internal reference

Styleguide

Every colour and reading size on the site comes from these tokens. Swatches show live WCAG and APCA contrast against the page ground — APCA is the number to trust for perceived readability on dark. The design-lint gate blocks anything off-system at build time.

Text tokens

Contrast measured against --cass-bg. AA floor: 4.5:1 body, 3:1 large. APCA: aim ≥75 for body, ≥60 large/secondary.

ink — the quick brown fox --cass-ink · body & headings

— —

ink2 — the quick brown fox --cass-ink2 · secondary / long-form

— —

muted — the quick brown fox --cass-muted · labels ≥12px only

— —

accent — the quick brown fox --cass-accent · links (needs underline/weight)

— —

cat-1 — the quick brown fox --cass-cat-1 · RevOps

— —

cat-2 — the quick brown fox --cass-cat-2 · CRM

— —

cat-3 — the quick brown fox --cass-cat-3 · AI

— —

cat-4 — the quick brown fox --cass-cat-4 · Strategy

— —

disabled — the quick brown fox --cass-disabled · sub-AA by design

— —

Surfaces

ink on bg ink2 secondary copy --cass-bg

ink on surf ink2 secondary copy --cass-surf

ink on surf2 ink2 secondary copy --cass-surf2

Type scale

Body/reading copy never below 16px. 12–14px is labels & captions only. Nothing below the 12px functional floor.

Cassidium 49px · display

Cassidium 39px · display

Cassidium 31px · heading

Cassidium 25px · heading

Cassidium 20px · subhead

Cassidium 16px · body (floor)

Cassidium 14px · label / caption

Cassidium 12px · label (min)

Prose & blessed components

This is on-system prose. Body copy renders at 17px on ink2, headings on ink, links on accent — all from the Typography config, which is pointed at cass tokens. Compose pages from these; do not hand-roll colour and size.

Blessed component: Callout

Body copy in cards inherits the 16px reading floor — the readability fix that started this work. Labels and eyebrows may sit at 12–14px; body may not.

Blessed component: Key Takeaway

When you need a page element, reach for a component like this before writing raw utility classes. That is what keeps every future page on-system.