Signal
Fictional practice data
This product uses the exact exported semantic CSS.
Inspect the design system & download actual files
operations / system-sans / compact / 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 ↗Independent CSS integration ↗
{
"themes": [
{
"id": "paper",
"colors": {
"canvas": "#101e22",
"surface": "#182a30",
"ink": "#e5f5f4",
"muted": "#adc9ca",
"primary": "#8ce5d0",
"on-primary": "#123b35",
"border": "#739c9d",
"success": "#234c35",
"on-success": "#d2f4d1",
"danger": "#542a24",
"on-danger": "#ffd9cc",
"focus": "#8ce5d0"
}
},
{
"id": "midnight",
"colors": {
"canvas": "#edf5f4",
"surface": "#ffffff",
"ink": "#173633",
"muted": "#4a6965",
"primary": "#186657",
"on-primary": "#ffffff",
"border": "#73958f",
"success": "#e2efdf",
"on-success": "#24452e",
"danger": "#fbe0d9",
"on-danger": "#862f25",
"focus": "#186657"
}
}
]
}
Exact opaque token contrast
| Theme | Use | Ratio | Threshold | Result |
|---|---|---|---|---|
| paper | Body text | 15.191983:1 | 4.5:1 | Pass |
| paper | Card text | 13.236247:1 | 4.5:1 | Pass |
| paper | Secondary text | 9.736733:1 | 4.5:1 | Pass |
| paper | Secondary card text | 8.483277:1 | 4.5:1 | Pass |
| paper | Primary button text | 8.359378:1 | 4.5:1 | Pass |
| paper | Success text | 8.161404:1 | 4.5:1 | Pass |
| paper | Danger text | 9.257524:1 | 4.5:1 | Pass |
| paper | Focus against canvas | 11.56416:1 | 3:1 | Pass |
| paper | Focus against surface | 10.075451:1 | 3:1 | Pass |
| paper | Input boundary | 4.934664:1 | 3:1 | Pass |
| midnight | Body text | 11.767591:1 | 4.5:1 | Pass |
| midnight | Card text | 13.02809:1 | 4.5:1 | Pass |
| midnight | Secondary text | 5.419925:1 | 4.5:1 | Pass |
| midnight | Secondary card text | 6.000486:1 | 4.5:1 | Pass |
| midnight | Primary button text | 6.824806:1 | 4.5:1 | Pass |
| midnight | Success text | 8.976838:1 | 4.5:1 | Pass |
| midnight | Danger text | 6.851716:1 | 4.5:1 | Pass |
| midnight | Focus against canvas | 6.16449:1 | 3:1 | Pass |
| midnight | Focus against surface | 6.824806:1 | 3:1 | Pass |
| midnight | Input boundary | 3.268696: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.