Klarheit is the swiss mode. Its trait is clean. Its code id is klarheit: set data-mode="klarheit" on the <html> element.
Rules
- Neutral 900 does the work that blue does in Canon: the band, links, buttons and borders.
- Swiss red is decoration: one red device per page, either a rule above the title or large numerals in stepped flows.
- Red never appears on form controls, validation, cards or interactive states.
- Swiss red is #FF0000 on screen and #DA291C in print.
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 Klarheit. 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 |
neutral/900 #1A1A1A | neutral/800 #333333 |
| Brand tint | --arche-surface-brand-primary-subtle |
neutral/50 #F5F5F5 | neutral/700 #4D4D4D |
| Yellow band | --arche-surface-brand-secondary-band |
sweden/yellow/500 #FFCD00 | sweden/yellow/500 #FFCD00 |
| Links and brand text | --arche-text-brand-primary |
neutral/900 #1A1A1A | neutral/white #FFFFFF |
| Accent rule | --arche-accent-rule |
swiss/red/web #FF0000 | swiss/red/web #FF0000 |
| Stat numerals | --arche-accent-numeral |
swiss/red/web #FF0000 | swiss/red/web #FF0000 |
| 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 Klarheit, 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 | 10.84:1 Pass |
| Links and brand text on the page | 4.5:1 | 17.40:1 Pass | 17.40:1 Pass |
| Stat numbers on the brand tint | 4.5:1 | 15.96:1 Pass | 8.45:1 Pass |
| Captions on the brand tint | 4.5:1 | 5.27:1 Pass | 5.26: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 | 17.40:1 Pass | 12.63:1 Pass |
| Body text on the brand band | 4.5:1 | 17.40:1 Pass | 12.63:1 Pass |
| Secondary text on the brand band | 4.5:1 | 13.82:1 Pass | 10.03:1 Pass |
| Text on the yellow band | 4.5:1 | 11.59:1 Pass | 11.59:1 Pass |
| Primary button label | 4.5:1 | 17.40:1 Pass | 13.82:1 Pass |
| Primary button label on the band | 4.5:1 | 17.40:1 Pass | 17.40: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 | 4.00:1 Pass | 4.35:1 Pass |
| Stat numerals on the page | 3:1 | 4.00:1 Pass | 4.35:1 Pass |
What differs from Canon
45 of 116 roles have a different Light or Dark value in Klarheit. The rest match Canon.
Show the 45 roles
| Role | Light | Dark |
|---|---|---|
--arche-surface-brand-primary |
neutral/900 | neutral/800 |
--arche-surface-brand-primary-subtle |
neutral/50 | neutral/700 |
--arche-border-brand-default |
neutral/900 | neutral/white |
--arche-border-on-brand-divider |
neutral/600 | neutral/600 |
--arche-text-neutral-secondary |
neutral/600 | neutral/200 |
--arche-text-brand-primary |
neutral/900 | neutral/white |
--arche-text-on-brand-body |
neutral/white | neutral/white |
--arche-text-on-brand-secondary |
neutral/100 | neutral/100 |
--arche-text-on-brand-switch-selected |
neutral/900 | neutral/900 |
--arche-icon-brand-default |
neutral/900 | neutral/white |
--arche-interactive-button-primary-fill-default |
neutral/900 | neutral/100 |
--arche-interactive-button-primary-fill-hover |
neutral/800 | neutral/50 |
--arche-interactive-button-primary-fill-pressed |
neutral/black | neutral/200 |
--arche-interactive-button-secondary-fill-hover |
neutral/50 | neutral/800 |
--arche-interactive-button-secondary-fill-pressed |
neutral/100 | neutral/700 |
--arche-interactive-button-secondary-border-default |
neutral/900 | neutral/white |
--arche-interactive-button-primary-fill-active |
neutral/black | neutral/200 |
--arche-interactive-button-secondary-fill-active |
neutral/50 | neutral/800 |
--arche-interactive-progress |
neutral/900 | neutral/white |
--arche-interactive-link-nav-indicator |
neutral/900 | neutral/white |
--arche-interactive-button-primary-label-default |
neutral/white | neutral/900 |
--arche-interactive-button-primary-indicator |
neutral/white | neutral/900 |
--arche-interactive-button-secondary-border-pressed |
neutral/900 | neutral/white |
--arche-interactive-button-secondary-label-default |
neutral/900 | neutral/white |
--arche-interactive-button-secondary-label-pressed |
neutral/900 | neutral/white |
--arche-interactive-button-secondary-indicator |
neutral/900 | neutral/white |
--arche-interactive-button-tertiary-fill-hover |
neutral/50 | neutral/800 |
--arche-interactive-button-tertiary-fill-pressed |
neutral/100 | neutral/700 |
--arche-interactive-button-tertiary-fill-active |
neutral/50 | neutral/800 |
--arche-interactive-button-tertiary-label-default |
neutral/900 | neutral/white |
--arche-interactive-button-tertiary-label-hover |
neutral/900 | neutral/white |
--arche-interactive-button-tertiary-label-pressed |
neutral/900 | neutral/white |
--arche-interactive-button-tertiary-label-active |
neutral/900 | neutral/white |
--arche-interactive-button-tertiary-indicator |
neutral/900 | neutral/white |
--arche-interactive-button-secondary-on-brand-fill-pressed |
neutral/black | neutral/900 |
--arche-interactive-link-default |
neutral/900 | neutral/white |
--arche-interactive-button-primary-on-brand-label |
neutral/900 | neutral/900 |
--arche-interactive-button-secondary-on-brand-fill-hover |
neutral/800 | neutral/700 |
--arche-interactive-button-primary-on-brand-fill-hover |
neutral/50 | neutral/50 |
--arche-interactive-button-primary-on-brand-fill-pressed |
neutral/100 | neutral/100 |
--arche-interactive-link-on-brand-pressed |
neutral/white | neutral/white |
--arche-interactive-link-on-brand-disabled |
neutral/100 | neutral/100 |
--arche-interactive-button-primary-on-brand-indicator |
neutral/900 | neutral/900 |
--arche-accent-rule |
swiss/red/web | swiss/red/web |
--arche-accent-numeral |
swiss/red/web | swiss/red/web |