Evolution

Contrast gate enforced

P1 direction (G11). Today's language, done properly: the logo's #346DFF kept as the control, one cool neutral ramp in place of gray + slate, Geist set on a real type scale, tighter controls and radius.

All 23 gated contrast pairs pass WCAG AA.

Colour roles

Apps write these roles, never a palette class (D11, D12).

Text

--color-ink

#1d232c

Primary text.

--color-ink-2

#424852

Secondary text.

--color-mute

#5a606b

Muted text and captions.

--color-faint

#6c717c

Faint text and placeholders. G17: darkened to pass 4.5:1, so it can carry text.

Surfaces

--color-canvas

#f9fafd

Page background.

--color-panel

#ffffff

Card and panel surface.

--color-plan

#1d232c

The viewer's dark canvas.

--color-plan-deep

#10151d

Lines and focus

--color-line

#e1e4ea

Dividers and card outlines. Decorative: no contrast minimum.

--color-line-2

#f2f4f8

Subtle dividers and quiet fills.

--color-line-strong

#8d929c

A control's edge: input, select and checkbox borders. 3:1 on panel (WCAG 1.4.11).

--color-ring

#346dff

Focus ring.

Brand

--color-brand

#255aeb

Brand fill: the primary button, the selected segment.

--color-brand-2

#1a48cb

Brand fill, hover and pressed.

--color-brand-fg

#ffffff

Text and icons on a brand fill.

--color-accent

#1a48cb

Links and the active nav item.

--color-accent-bg

#f1f6ff

Active nav, selected row and info tints.

--color-accent-line

#c7d9fe

Edge of an accent tint.

Logo

--color-logo

#346dff

The logo's folder and wordmark (G7).

--color-logo-tab

#ffb526

The logo file's amber, kept: Evolution is the logo control (G7).

--color-logo-bar

#3ab56b

The logo file's green, kept (G7).

Status

--color-ok

#007b30

Accepted, done.

--color-ok-bg

#edfdf1

--color-ok-line

#b6e7c2

--color-bad

#cc262e

Changes requested, rejected, overdue.

--color-bad-bg

#fff8f5

--color-bad-line

#ffd1c9

--color-warn

#a65300

Waiting on someone: not submitted, due soon.

--color-warn-bg

#fff9ea

--color-warn-line

#fdd4aa

--color-re

#5758df

In review and re-review.

--color-re-bg

#f5f9ff

--color-re-line

#d0daff

--color-new

#8544de

"N new".

--color-new-bg

#f8edff

--color-int

#424852

Internal notes.

--color-int-ink

#2e333e

--color-int-bg

#f2f4f8

--color-int-line

#cbd0d7

--color-int-2

#e1e4ea

Contrast (G17)

WCAG 2.x ratio. 4.5 for text, 3 for large text and non-text UI. Advisory pairs are reported and never fail a build.

Sample	Pair	Ratio	Min	Result	Use
Aa Sample	color.ink on color.panel	15.80	4.5	Pass	Body text on a panel
Aa Sample	color.ink on color.canvas	15.14	4.5	Pass	Body text on the page
Aa Sample	color.ink-2 on color.panel	9.21	4.5	Pass	Secondary text
Aa Sample	color.mute on color.panel	6.32	4.5	Pass	Muted text and captions on a panel
Aa Sample	color.mute on color.canvas	6.06	4.5	Pass	Muted text on the page
Aa Sample	color.faint on color.canvas	4.69	4.5	Pass	Faint text on the page
Aa Sample	color.faint on color.panel	4.89	4.5	Pass	Faint text. G17: either disabled / decorative only, or dark enough to pass
Aa Sample	color.brand on color.panel	5.61	4.5	Pass	Brand-coloured text
Aa Sample	color.accent on color.panel	7.41	4.5	Pass	Links and the active nav item
Aa Sample	color.brand-fg on color.brand	5.61	4.5	Pass	Primary button label
Aa Sample	color.brand-fg on color.brand-2	7.41	4.5	Pass	Primary button label, hover and pressed
Aa Sample	color.accent on color.accent-bg	6.84	4.5	Pass	Active nav item, info tag
Aa Sample	color.ink on color.accent-bg	14.57	4.5	Pass	Text on a selected row
Aa Sample	color.ok on color.ok-bg	5.14	4.5	Pass	Status word on its tint: ok
Aa Sample	color.bad on color.bad-bg	5.15	4.5	Pass	Status word on its tint: bad
Aa Sample	color.warn on color.warn-bg	5.18	4.5	Pass	Status word on its tint: warn
Aa Sample	color.re on color.re-bg	5.14	4.5	Pass	Status word on its tint: re-review
Aa Sample	color.new on color.new-bg	4.78	4.5	Pass	"N new" on its tint
Aa Sample	color.int on color.int-bg	8.36	4.5	Pass	Internal-note text on its tint
Aa Sample	color.int-ink on color.int-bg	11.49	4.5	Pass	Internal-note body text on its tint
Aa Sample	color.ring on color.panel	4.40	3	Pass	Focus ring (non-text)
Aa Sample	color.ring on color.canvas	4.21	3	Pass	Focus ring on the page (non-text)
Aa Sample	color.line-strong on color.panel	3.12	3	Pass	A control's edge: input, select and checkbox borders (non-text). line itself is decorative.
Aa Sample	color.ok-line on color.ok-bg	1.31	3	Advisory	Status tag border. Advisory: decorative while the word names the tag
Aa Sample	color.bad-line on color.bad-bg	1.31	3	Advisory	Status tag border. Advisory
Aa Sample	color.warn-line on color.warn-bg	1.32	3	Advisory	Status tag border. Advisory
Aa Sample	color.re-line on color.re-bg	1.31	3	Advisory	Status tag border. Advisory
Aa Sample	color.logo on color.panel	4.40	3	Pass	Logo mark. Advisory: logotypes are exempt (WCAG 1.4.3)

Type

--font-sans

Banksia Rise OC · Condition 14(b) · 2,418 items

Geist, the control (G19): today's face, set on a real scale.

--font-mono

Banksia Rise OC · Condition 14(b) · 2,418 items

Geist Mono.

--text-title

28px / 34px · 700

Page title.

--text-display

22px / 26px · 700

Figures that are the point: count tiles, stats.

--text-heading

16px / 22px · 600

Card, section and dialog titles.

--text-body

14px / 20px · 400

Default UI text.

--text-label

14px / 20px · 500

Buttons, nav, form labels, emphasised cells.

--text-small

13px / 18px · 400

Secondary lines under a title.

--text-caption

12px / 16px · 400

Meta, helper text, tags.

--text-eyebrow

11px / 16px · 600

Uppercase section and field labels (set uppercase in markup).

Shape

--radius-sm

4px

--radius-md

6px

--radius-lg

10px

--radius-pill

9999px

--shadow-sm

--shadow-md

--shadow-lg

--spacing-tap = 2.75rem

44px: the touch target (V5 L8). G10 grows interactive hit areas to it under pointer: coarse.

--spacing-control-sm = 28px

Height of a sm control (G10).

--spacing-control-md = 32px

Height of a md control: the default.

--spacing-control-lg = 40px

Height of a lg control.

--spacing-row = 52px

Minimum height of a list or table row.

--spacing-gutter = 32px

Page side padding at desktop width.