Today (record)
Record: contrast reported, not enforcedThe values web and DocuCert ship on 2026-10-29, transcribed as the comparison baseline (spec §5.2 P0). Not a theme to adopt.
9 of 30 gated contrast pairs are under WCAG AA.
Colour roles
Apps write these roles, never a palette class (D11, D12).
Text
Primary text. DocuCert --color-ink, kit --ink.
Secondary text. DocuCert --color-ink-2.
Muted text and captions. DocuCert --color-mute.
Faint text, placeholders. DocuCert --color-faint (198 text uses); web text-gray-400 / slate-400 (497).
Surfaces
Page background. DocuCert --color-canvas, kit --bg.
Card and panel surface. DocuCert --color-panel.
The viewer's dark canvas. web and DocuCert --color-plan.
web and DocuCert --color-plan-deep.
Lines and focus
Borders and dividers. DocuCert --color-line.
Subtle dividers. DocuCert --color-line-2.
A control's edge. web inputs: border-gray-300. DocuCert inputs draw it with line (gray-200).
Focus ring. web's shadcn --ring; the kit has none.
Brand
Brand. DocuCert --color-brand, kit --brand.
web empty-state CTA hover: hover:bg-blue-600. The shadcn Button hovers at blue-500/90 instead.
text-white on the blue buttons.
Active nav, links. Kit --accent (not in DocuCert's styles.css).
Kit --accent-bg; web active nav bg-blue-50.
Kit --accent-line.
Logo
The logo's folder and wordmark, #346DFF.
The logo's tab, #FFB526.
The logo's bar, #3AB56B.
Status
Kit --ok. DocuCert writes green-700 directly.
Kit --ok-bg.
Kit --ok-line.
Kit --bad.
Kit --bad-bg.
Kit --bad-line.
Kit --warn.
Kit --warn-bg.
Kit --warn-line.
Re-review. Kit --re.
Kit --re-bg.
Kit --re-line.
"N new". DocuCert --color-new.
DocuCert --color-new-bg.
Internal notes. DocuCert --color-int.
DocuCert --color-int-ink.
DocuCert --color-int-bg.
DocuCert --color-int-line.
DocuCert --color-int-2.
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 | 17.74 | 4.5 | Pass | Body text on a panel |
| Aa Sample | color.ink on color.canvas | 16.98 | 4.5 | Pass | Body text on the page |
| Aa Sample | color.ink-2 on color.panel | 10.31 | 4.5 | Pass | Secondary text |
| Aa Sample | color.mute on color.panel | 4.83 | 4.5 | Pass | Muted text and captions on a panel |
| Aa Sample | color.mute on color.canvas | 4.63 | 4.5 | Pass | Muted text on the page |
| Aa Sample | color.faint on color.canvas | 2.43 | 4.5 | Fail | Faint text on the page |
| Aa Sample | color.faint on color.panel | 2.54 | 4.5 | Fail | Faint text. G17: either disabled / decorative only, or dark enough to pass |
| Aa Sample | color.brand on color.panel | 4.40 | 4.5 | Fail | Brand-coloured text |
| Aa Sample | color.accent on color.panel | 6.70 | 4.5 | Pass | Links and the active nav item |
| Aa Sample | color.brand-fg on color.brand | 4.40 | 4.5 | Fail | Primary button label |
| Aa Sample | color.brand-fg on color.brand-2 | 5.17 | 4.5 | Pass | Primary button label, hover and pressed |
| Aa Sample | color.accent on color.accent-bg | 6.16 | 4.5 | Pass | Active nav item, info tag |
| Aa Sample | color.ink on color.accent-bg | 16.30 | 4.5 | Pass | Text on a selected row |
| Aa Sample | color.ok on color.ok-bg | 4.79 | 4.5 | Pass | Status word on its tint: ok |
| Aa Sample | color.bad on color.bad-bg | 5.91 | 4.5 | Pass | Status word on its tint: bad |
| Aa Sample | color.warn on color.warn-bg | 4.84 | 4.5 | Pass | Status word on its tint: warn |
| Aa Sample | color.re on color.re-bg | 7.07 | 4.5 | Pass | Status word on its tint: re-review |
| Aa Sample | color.new on color.new-bg | 5.98 | 4.5 | Pass | "N new" on its tint |
| Aa Sample | color.int on color.int-bg | 9.45 | 4.5 | Pass | Internal-note text on its tint |
| Aa Sample | color.int-ink on color.int-bg | 13.35 | 4.5 | Pass | Internal-note body text on its tint |
| Aa Sample | color.ring on color.panel | 20.01 | 3 | Pass | Focus ring (non-text) |
| Aa Sample | color.ring on color.canvas | 19.14 | 3 | Pass | Focus ring on the page (non-text) |
| Aa Sample | color.line-strong on color.panel | 1.47 | 3 | Fail | 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.16 | 3 | Advisory | Status tag border. Advisory: decorative while the word names the tag |
| Aa Sample | color.bad-line on color.bad-bg | 1.32 | 3 | Advisory | Status tag border. Advisory |
| Aa Sample | color.warn-line on color.warn-bg | 1.20 | 3 | Advisory | Status tag border. Advisory |
| Aa Sample | color.re-line on color.re-bg | 1.33 | 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) |
| Aa Sample | legacy.button-default-fg on legacy.button-default-bg | 3.68 | 4.5 | Fail | web primary Button: white on bg-blue-500 |
| Aa Sample | legacy.shadcn-muted-foreground on color.panel | 4.76 | 4.5 | Pass | web text-muted-foreground |
| Aa Sample | legacy.email-accent on legacy.email-card-bg | 3.29 | 4.5 | Fail | Email accent and link text |
| Aa Sample | legacy.email-body on legacy.email-card-bg | 12.63 | 4.5 | Pass | Email body text |
| Aa Sample | legacy.email-muted on legacy.email-card-bg | 7.46 | 4.5 | Pass | Email muted text |
| Aa Sample | legacy.email-faint on legacy.email-card-bg | 2.85 | 4.5 | Fail | Email faint text |
| Aa Sample | legacy.email-footer-text on legacy.email-footer-bg | 3.37 | 4.5 | Fail | Email footer text |
Type
Banksia Rise OC · Condition 14(b) · 2,418 items
ADR 0031 UI face. The tail is Tailwind's default stack, so a failed load renders the OS face.
Banksia Rise OC · Condition 14(b) · 2,418 items
ADR 0031 data face.
Shape
44px: the touch target (V5 L8). G10 grows interactive hit areas to it under pointer: coarse.
shadcn Button sm: h-9.
shadcn Button default: h-10.
shadcn Button lg: h-11.
Requirements rows: about 60px, set by the 36px due-date chip.
md:px-8.
Outside the roles
Colours that ship today without a role. Recorded so the contrast report can name them. Never emitted to CSS.