Foundations

Color

Every color in the kit comes from a CSS custom property in :root. Use the token name in your styles, never a raw hex, so a single edit in wireframe.css updates every wireframe.

Ink — text & foreground
Ink
--ink
#0f1115
Primary text
Ink 2
--ink-2
#2a2e36
Secondary text
Ink 3
--ink-3
#5a616d
Tertiary text
Mute
--mute
#8a919e
Placeholders, disabled

Body text uses --ink-3 by default. Headings use --ink. Meta and metadata (eyebrows, captions) use --mute.

Surface — backgrounds
White
--white
#ffffff
Component bg
Paper
--paper
#f6f6f4
Page bg
Paper 2
--paper-2
#eeeeea
Hover, tinted

The page itself sits on --paper. Cards, panels, and inputs sit on --white. Hover states and quiet emphasis use --paper-2.

Line — borders & dividers
Line
--line
#d7d9de
Standard borders
Line 2
--line-2
#e7e8ec
Light dividers

Borders on cards, inputs, and section rules use --line. Inner dividers (rows in a list, hairlines inside a card) use --line-2.

Icon — Font Awesome tints
Icon
--icon
#5a616d
Default on light
Icon Lighter
--icon-lighter
#a8b0ba
Quieter on light
Icon Light
--icon-light
#e8e8e8
On dark
Icon Faint
--icon-faint
rgba 25%
Quieter on dark

Font Awesome icons inherit color. The kit sets a default i { color: var(--ink-3) } globally. Override with the utility classes .icon-lighter and .icon-faint (see Icons).

Accent — interactive & status
Accent
--accent
#2a66c8
Primary, links, focus
Accent 2
--accent-2
#2a7a52
Approved, up trend
Accent 3
--accent-3
#7952c8
In-progress badge
Accent 4
--accent-4
#d32f2f
Alert, down trend

Accent colors are used sparingly in wireframes: buttons, focus rings, links, status badges. Replace these in the design phase to match the brand.

Canvas — pattern frames
Canvas Bg
--canvas-bg
#ffffff
Pattern background
Canvas Border
--canvas-border
#d7d9de
Pattern border

Used by the Wireframe Deck pattern frames in kit-wireframe-deck.html. Mirrors --white and --line today; kept as separate tokens so pattern chrome can re-skin without touching component surfaces.