Canon is the default mode. Its trait is systematic. Its code id is canon: set data-mode="canon" on the <html> element, or set nothing, because Canon is the default.
Rules
- Greece Blue is the structural color: bands, links, buttons and stat numbers.
- Sweden Yellow is a fill with near-black text, plus the selection highlight.
- Norway Red is the logo and one end mark per page: a flat 4px rule under the last column of running text (under the last content block when the page has no text column), 24px above it, never on text, controls, validation, cards or interactive states.
- Stat numbers sit in the Greece Blue tint panel. Dark uses neutral surfaces.
- No Sweden Blue.
These rules hold in every mode: primitives, type, spacing, grid, corner radius, motion and component structure stay the same, and Alert, Success and Warning never change.
Main colors
The roles that show the character of Canon. Each role points at a primitive, and the hex value is read from the token file when the site builds.
| Job | Role token | Light | Dark |
|---|---|---|---|
| Page | --arche-surface-neutral-base |
neutral/white #FFFFFF | neutral/900 #1A1A1A |
| Brand band | --arche-surface-brand-primary |
greece/blue/500 #014488 | greece/blue/500 #014488 |
| Brand tint | --arche-surface-brand-primary-subtle |
greece/blue/50 #E6ECF3 | greece/blue/700 #012E5C |
| Yellow band | --arche-surface-brand-secondary-band |
sweden/yellow/500 #FFCD00 | sweden/yellow/500 #FFCD00 |
| Links and brand text | --arche-text-brand-primary |
greece/blue/500 #014488 | greece/blue/200 #9EB8D2 |
| Accent rule | --arche-accent-rule |
norway/red/500 #D21034 | norway/red/400 #DC4561 |
| Stat numerals | --arche-accent-numeral |
greece/blue/500 #014488 | greece/blue/200 #9EB8D2 |
| Selection | --arche-selection-background |
sweden/yellow/500 #FFCD00 | sweden/yellow/500 #FFCD00 |
| Cross / end-mark surface | --arche-surface-brand-accent |
norway/red/500 #D21034 | norway/red/400 #DC4561 |
Three accent roles sound alike but do different jobs. See the note on accent roles.
Contrast
WCAG AA needs 4.5:1 for text and 3:1 for large text and interface parts. These are the main pairs for Canon, calculated from the token values when the site builds. The build also checks a longer list of pairs for every mode.
| Pair | Needs | Light | Dark |
|---|---|---|---|
| Headings on the page | 4.5:1 | 17.40:1 Pass | 17.40:1 Pass |
| Body copy on the page | 4.5:1 | 17.40:1 Pass | 13.82:1 Pass |
| Captions and meta on the page | 4.5:1 | 5.74:1 Pass | 8.30:1 Pass |
| Links and brand text on the page | 4.5:1 | 9.62:1 Pass | 8.49:1 Pass |
| Stat numbers on the brand tint | 4.5:1 | 8.09:1 Pass | 6.62:1 Pass |
| Captions on the brand tint | 4.5:1 | 4.83:1 Pass | 6.48:1 Pass |
| Error text on the page | 4.5:1 | 7.56:1 Pass | 6.47:1 Pass |
| Headings on the brand band | 4.5:1 | 9.62:1 Pass | 9.62:1 Pass |
| Body text on the brand band | 4.5:1 | 8.09:1 Pass | 8.09:1 Pass |
| Secondary text on the brand band | 4.5:1 | 6.75:1 Pass | 6.75:1 Pass |
| Text on the yellow band | 4.5:1 | 11.59:1 Pass | 11.59:1 Pass |
| Primary button label | 4.5:1 | 9.62:1 Pass | 9.05:1 Pass |
| Primary button label on the band | 4.5:1 | 9.62:1 Pass | 9.62:1 Pass |
| Selected text | 4.5:1 | 11.59:1 Pass | 11.59:1 Pass |
| Form field bar at rest (non-text) | 3:1 | 3.95:1 Pass | 4.41:1 Pass |
| Focus ring on the page (non-text) | 3:1 | 21.00:1 Pass | 17.40:1 Pass |
| Accent rule on the page (non-text) | 3:1 | 5.43:1 Pass | 4.20:1 Pass |
| Stat numerals on the page | 3:1 | 9.62:1 Pass | 8.49:1 Pass |
All roles
Canon is the base. Every other mode lists only the roles whose value differs from it. All 116 roles, with their Canon values, are on the Color page.