Atelier
Fictional practice data
This product uses the exact exported semantic CSS.
Inspect the design system & download actual files
editorial / editorial-serif / 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 ↗Independent CSS integration ↗
{
"themes": [
{
"id": "paper",
"colors": {
"canvas": "#f7f0e7",
"surface": "#fffaf4",
"ink": "#38221f",
"muted": "#725047",
"primary": "#782e3b",
"on-primary": "#ffffff",
"border": "#96776a",
"success": "#e2efdf",
"on-success": "#24452e",
"danger": "#fbe0d9",
"on-danger": "#862f25",
"focus": "#782e3b"
}
},
{
"id": "midnight",
"colors": {
"canvas": "#25191c",
"surface": "#322328",
"ink": "#fbf0e6",
"muted": "#d6bcb2",
"primary": "#ecc2a6",
"on-primary": "#3e2426",
"border": "#af897d",
"success": "#234c35",
"on-success": "#d2f4d1",
"danger": "#542a24",
"on-danger": "#ffd9cc",
"focus": "#ecc2a6"
}
}
]
}
Exact opaque token contrast
| Theme | Use | Ratio | Threshold | Result |
|---|---|---|---|---|
| paper | Body text | 13.109444:1 | 4.5:1 | Pass |
| paper | Card text | 14.281003:1 | 4.5:1 | Pass |
| paper | Secondary text | 6.287474:1 | 4.5:1 | Pass |
| paper | Secondary card text | 6.84937:1 | 4.5:1 | Pass |
| paper | Primary button text | 9.322704: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.245164:1 | 3:1 | Pass |
| paper | Focus against surface | 8.982014:1 | 3:1 | Pass |
| paper | Input boundary | 3.933499:1 | 3:1 | Pass |
| midnight | Body text | 15.154936:1 | 4.5:1 | Pass |
| midnight | Card text | 13.299815:1 | 4.5:1 | Pass |
| midnight | Secondary text | 9.473912:1 | 4.5:1 | Pass |
| midnight | Secondary card text | 8.314207:1 | 4.5:1 | Pass |
| midnight | Primary button text | 8.641411: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.39619:1 | 3:1 | Pass |
| midnight | Focus against surface | 9.123588:1 | 3:1 | Pass |
| midnight | Input boundary | 4.761008: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.