Design system

Every token, primitive and control in the kit. Switch palettes with the toggle to see the whole drawing re ink at identical contrast.

Each swatch below is bound to its token, so it follows the toggle. The hex printed under it is the Graphite canonical value, kept as the reference the ratios were measured against.

Ink

Explicit hexes rather than rgba, so every ratio below is a measured number and the contrast walker resolves them exactly. All four clear AA on white and on placeholder fill, so this kit ships no justified low contrast text.

Ink

#2b2b2b · 14.17:1

Ink soft

#4a4a4a · 8.21:1

Ink muted

#616161 · 6.19:1

Ink quiet

#767676 · 4.54:1

Line work and grounds

None of these three ever carries text, so none has a contrast floor. Line is every box stroke, line soft is the copy bars, fill is placeholder fill.

Line

#9a9a9a

Line soft

#cfcfcf

Fill

#e8e8e8

Paper alt

#f4f4f4

Paper

#ffffff

Accent

A ground, not a text colour. White on the accent measures 5.10:1 and passes AA; ink on the accent measures 2.78:1 and does not, so nothing in this kit sets the accent as type on paper.

Accent

#6e6e6e · white 5.10:1

Accent hover

#565656 · white 7.34:1

Accent deep

#3d3d3d · white 10.86:1

Tint

#efefef

Type

Inter for everything a reader reads. IBM Plex Mono only for slot labels, dimensions and pattern ids, never as a label above a heading.

display / h1 · clamp 38 to 62

HEADLINE

h2 · clamp 28 to 42

Section heading

h3 · clamp 20 to 26

Card and row heading

h4 · 18

Step and column heading

lede · 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.

body · 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

small · 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

kit-note · 11 mono
Image 4:3

Buttons

Square, uppercase, two registers. Primary is the accent ground with white type. Outline is the boxed CTA from the reference wireframe's nav.

Primary large Primary Primary small Outline Outline small

Buttons on the dark ground

Primary inverts to white rather than staying accent on accent. Every dark ground selector in the kit gets this rule by name, because a dark band does not always carry the on-dark class and an outline button inheriting ink then renders ink on near ink.

Primary inverted Outline on dark Outline small

Wireframe primitives

The vocabulary every pattern is built from. All of it is CSS gradients and borders, so all of it re inks with the palette and none of it can 404.

wf-slot · 16:9
Image 16:9
wf-slot · 4:3
Image 4:3
wf-slot · 1:1
Image 1:1
wf-slot · 3:4
Portrait 3:4
wf-map
Map embed slot
wf-logo
wf-bars
wf-icon and wf-avatar
step-num and tick
01

Form fields

Labels sit above their inputs, not inside them as placeholders, so the wireframe does not bake in an accessibility problem that surfaces two rounds later. No text input ever renders below 150px wide.

Cards

Image 4:3

Inset card

Image 16:9
Date and category

Flush card