Northstar
Fictional practice data
Independent document imports the delivered CSS files.
Inspect the design system & download actual files
planning / system-sans / comfortable / 20/20 opaque token checks
Use named semantic roles, clear typographic hierarchy, purposeful spacing and explicit recovery states. Keep light and dark themes equally usable; reserve saturated color for actions and feedback.
Native tokens ↗Components ↗App recipes ↗App behavior ↗Design contract ↗Editable input ↗Token JSON ↗Contrast CSV ↗Changes ↗Tailwind adapter ↗Implementation checklist ↗File manifest ↗Product room ↗
{
"themes": [
{
"id": "paper",
"colors": {
"canvas": "#f4f5fb",
"surface": "#ffffff",
"ink": "#192239",
"muted": "#525d75",
"primary": "#343ea3",
"on-primary": "#ffffff",
"border": "#7b829c",
"success": "#e2efdf",
"on-success": "#24452e",
"danger": "#fbe0d9",
"on-danger": "#862f25",
"focus": "#343ea3"
}
},
{
"id": "midnight",
"colors": {
"canvas": "#13182c",
"surface": "#1c2440",
"ink": "#f0f3ff",
"muted": "#b7c1dc",
"primary": "#b9c3ff",
"on-primary": "#172044",
"border": "#7f8cb8",
"success": "#234c35",
"on-success": "#d2f4d1",
"danger": "#542a24",
"on-danger": "#ffd9cc",
"focus": "#b9c3ff"
}
}
]
}
Exact opaque token contrast
| Theme | Use | Ratio | Threshold | Result |
|---|---|---|---|---|
| paper | Body text | 14.520159:1 | 4.5:1 | Pass |
| paper | Card text | 15.798654:1 | 4.5:1 | Pass |
| paper | Secondary text | 6.066737:1 | 4.5:1 | Pass |
| paper | Secondary card text | 6.600911:1 | 4.5:1 | Pass |
| paper | Primary button text | 8.883507:1 | 4.5:1 | Pass |
| paper | Success text | 8.976838:1 | 4.5:1 | Pass |
| paper | Danger text | 6.851716:1 | 4.5:1 | Pass |
| paper | Focus against canvas | 8.164615:1 | 3:1 | Pass |
| paper | Focus against surface | 8.883507:1 | 3:1 | Pass |
| paper | Input boundary | 3.807587:1 | 3:1 | Pass |
| midnight | Body text | 15.877699:1 | 4.5:1 | Pass |
| midnight | Card text | 13.788237:1 | 4.5:1 | Pass |
| midnight | Secondary text | 9.772142:1 | 4.5:1 | Pass |
| midnight | Secondary card text | 8.486155:1 | 4.5:1 | Pass |
| midnight | Primary button text | 9.282195:1 | 4.5:1 | Pass |
| midnight | Success text | 8.161404:1 | 4.5:1 | Pass |
| midnight | Danger text | 9.257524:1 | 4.5:1 | Pass |
| midnight | Focus against canvas | 10.306159:1 | 3:1 | Pass |
| midnight | Focus against surface | 8.949897:1 | 3:1 | Pass |
| midnight | Input boundary | 4.612565:1 | 3:1 | Pass |
Token change review
No previous token changes supplied.
Opaque sRGB token pairs only. Normal-text threshold 4.5:1, input-boundary/focus threshold 3:1. Not a WCAG conformance audit; layout, states, keyboard, content, gradients and actual font rendering require browser and manual review.