Canon is the mode in use
Canon is the mode in active use. The other four are explorations: they are kept and checked, but not developed. A mode ships only when there is a named piece of content that needs it.
All five modes
Each mode takes its character from one of the four national traditions in my heritage, Swiss, Norwegian, Swedish and Greek, plus a default. Each has a Light and a Dark version.
| Mode | Code id | Tradition | Trait | In one line |
|---|---|---|---|---|
| Canon | canon |
Default | Systematic | The full palette. Greece Blue is structure, Sweden Yellow is identity, and Norway Red closes the page. |
| Klarheit | klarheit |
Swiss | Clean | Neutral surfaces and type, with Swiss red as the one decorative color. |
| Nøktern | noktern |
Norwegian | Grounded | Norway Blue as the main color, with Norway Red in one small device. |
| Omtanke | omtanke |
Swedish | Generous | Sweden Blue with Sweden Yellow as a second voice. |
| Ethos | ethos |
Greek | Principled | Greece Blue as the only color, with no accent. |
What a mode changes
A mode changes only the semantic color roles, such as --arche-surface-brand-primary or --arche-text-brand-primary. Primitives, type, spacing, grid, corner radius, motion and component structure are identical in every mode. Components read roles, never primitives, so they follow the mode without changes.
Status colors do not change by mode. Alert, Success and Warning mean the same thing everywhere. In every mode, the main text, button, border and mark pairs pass WCAG AA in Light and Dark. The check runs with every build.
How to use a mode
Two attributes on the <html> element pick the colors. data-mode picks the mode and data-theme picks Light or Dark. With no data-mode, the page uses Canon. With no data-theme, it follows the browser's Light or Dark setting.
<html data-mode="omtanke" data-theme="dark">In tokens.css, Canon's values sit on :root. Each other mode has a block that lists only the roles that differ from Canon, with a Dark version after it. Pick the mode with an attribute and the right values apply.
Trying a mode on this site
Each mode page has a button, "View this page in" followed by the mode name. It sets data-mode on that page only. Nothing is saved, so the next page you open is Canon again. The button is for these docs only. Components never read it.
Three accent roles, in plain words
Three role names sound alike. They do different jobs.
--arche-accent-ruleis the thin line. It is Canon's end mark, the red rule under the last column of text, or under the last content block when the page has no text column. It sits 24px above the rule (base/24) and is 4px thick. Each mode sets its own color for it: Norway Red in Canon, Swiss red in Klarheit, and the mode's blue in the others.--arche-accent-numeralcolors the big numbers in a stat strip. Greece Blue in Canon and Ethos, Swiss red in Klarheit, and each mode's own blue in Nøktern and Omtanke.--arche-surface-brand-accentis a filled area of accent color, not a line. Only Nøktern's Cross reads it, as the red stripe along the top of the blue band. It holds Norway Red in every mode, but the other modes do not use it.
Canon's end mark reads accent-rule, not surface-brand-accent, even though both hold Norway Red there today. They are separate roles so that each can change without moving the other.
One page per mode
Each mode has a color page with its rules, its main colors, the contrast ratios for the pairs that matter, and the roles that differ from Canon.