Nøktern is the norwegian mode. Its trait is grounded. Its code id is noktern: set data-mode="noktern" on the <html> element.
Rules
- Norway Blue is the main color for bands, links, buttons and stat numbers.
- Norway Red appears only in the Cross: a red stripe with a white line on each side, along the top of the blue band.
- Red is never on text, form controls, validation, cards or interactive states.
- Dark uses deep navy surfaces. The selection highlight is a Norway Blue tint.
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 Nøktern. 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 | norway/blue/900 #00102D |
| Brand band | --arche-surface-brand-primary |
norway/blue/500 #003698 | norway/blue/500 #003698 |
| Brand tint | --arche-surface-brand-primary-subtle |
norway/blue/50 #E5EBF5 | norway/blue/700 #002567 |
| Yellow band | --arche-surface-brand-secondary-band |
sweden/yellow/500 #FFCD00 | sweden/yellow/500 #FFCD00 |
| Links and brand text | --arche-text-brand-primary |
norway/blue/500 #003698 | norway/blue/200 #9EB3D8 |
| Accent rule | --arche-accent-rule |
norway/blue/500 #003698 | norway/blue/200 #9EB3D8 |
| Stat numerals | --arche-accent-numeral |
norway/blue/500 #003698 | norway/blue/200 #9EB3D8 |
| Selection | --arche-selection-background |
norway/blue/200 #9EB3D8 | norway/blue/200 #9EB3D8 |
| 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 Nøktern, 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 | 18.88:1 Pass |
| Body copy on the page | 4.5:1 | 17.40:1 Pass | 14.99:1 Pass |
| Captions and meta on the page | 4.5:1 | 5.74:1 Pass | 9.01:1 Pass |
| Links and brand text on the page | 4.5:1 | 10.60:1 Pass | 8.90:1 Pass |
| Stat numbers on the brand tint | 4.5:1 | 8.85:1 Pass | 6.77:1 Pass |
| Captions on the brand tint | 4.5:1 | 4.79:1 Pass | 6.86:1 Pass |
| Error text on the page | 4.5:1 | 7.56:1 Pass | 7.02:1 Pass |
| Headings on the brand band | 4.5:1 | 10.60:1 Pass | 10.60:1 Pass |
| Body text on the brand band | 4.5:1 | 8.85:1 Pass | 8.85:1 Pass |
| Secondary text on the brand band | 4.5:1 | 7.31:1 Pass | 7.31:1 Pass |
| Text on the yellow band | 4.5:1 | 11.59:1 Pass | 11.59:1 Pass |
| Primary button label | 4.5:1 | 10.60:1 Pass | 8.90:1 Pass |
| Primary button label on the band | 4.5:1 | 10.60:1 Pass | 10.60:1 Pass |
| Selected text | 4.5:1 | 8.20:1 Pass | 8.20:1 Pass |
| Form field bar at rest (non-text) | 3:1 | 3.95:1 Pass | 4.78:1 Pass |
| Focus ring on the page (non-text) | 3:1 | 21.00:1 Pass | 18.88:1 Pass |
| Accent rule on the page (non-text) | 3:1 | 10.60:1 Pass | 8.90:1 Pass |
| Stat numerals on the page | 3:1 | 10.60:1 Pass | 8.90:1 Pass |
What differs from Canon
51 of 116 roles have a different Light or Dark value in Nøktern. The rest match Canon.
Show the 51 roles
| Role | Light | Dark |
|---|---|---|
--arche-surface-neutral-base |
neutral/white | norway/blue/900 |
--arche-surface-neutral-raised |
neutral/white | norway/blue/800 |
--arche-surface-brand-primary |
norway/blue/500 | norway/blue/500 |
--arche-surface-brand-primary-subtle |
norway/blue/50 | norway/blue/700 |
--arche-border-neutral-default |
neutral/200 | norway/blue/700 |
--arche-border-brand-default |
norway/blue/500 | norway/blue/400 |
--arche-border-on-brand-divider |
norway/blue/300 | norway/blue/300 |
--arche-text-brand-primary |
norway/blue/500 | norway/blue/200 |
--arche-text-on-brand-body |
norway/blue/50 | norway/blue/50 |
--arche-text-on-brand-secondary |
norway/blue/100 | norway/blue/100 |
--arche-text-on-brand-switch-selected |
norway/blue/500 | norway/blue/500 |
--arche-icon-brand-default |
norway/blue/500 | norway/blue/300 |
--arche-interactive-button-primary-fill-default |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-primary-fill-hover |
norway/blue/400 | norway/blue/100 |
--arche-interactive-button-primary-fill-pressed |
norway/blue/700 | norway/blue/300 |
--arche-interactive-button-secondary-fill-default |
neutral/white | norway/blue/900 |
--arche-interactive-button-secondary-fill-hover |
norway/blue/50 | norway/blue/800 |
--arche-interactive-button-secondary-fill-pressed |
norway/blue/100 | norway/blue/700 |
--arche-interactive-button-secondary-fill-disabled |
neutral/white | norway/blue/900 |
--arche-interactive-button-secondary-border-default |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-secondary-border-inverse |
neutral/white | norway/blue/900 |
--arche-interactive-button-primary-fill-active |
norway/blue/700 | norway/blue/300 |
--arche-interactive-button-secondary-fill-active |
norway/blue/50 | norway/blue/800 |
--arche-interactive-progress |
norway/blue/500 | norway/blue/300 |
--arche-interactive-link-nav-indicator |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-primary-label-default |
neutral/white | norway/blue/900 |
--arche-interactive-button-primary-indicator |
neutral/white | norway/blue/900 |
--arche-interactive-button-secondary-border-pressed |
norway/blue/700 | norway/blue/100 |
--arche-interactive-button-secondary-label-default |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-secondary-label-pressed |
norway/blue/700 | norway/blue/100 |
--arche-interactive-button-secondary-indicator |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-tertiary-fill-hover |
norway/blue/50 | norway/blue/800 |
--arche-interactive-button-tertiary-fill-pressed |
norway/blue/100 | norway/blue/700 |
--arche-interactive-button-tertiary-fill-active |
norway/blue/50 | norway/blue/800 |
--arche-interactive-button-tertiary-label-default |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-tertiary-label-hover |
norway/blue/600 | norway/blue/100 |
--arche-interactive-button-tertiary-label-pressed |
norway/blue/700 | norway/blue/50 |
--arche-interactive-button-tertiary-label-active |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-tertiary-indicator |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-secondary-on-brand-fill-pressed |
norway/blue/700 | norway/blue/700 |
--arche-interactive-link-default |
norway/blue/500 | norway/blue/200 |
--arche-interactive-button-primary-on-brand-label |
norway/blue/500 | norway/blue/500 |
--arche-interactive-button-secondary-on-brand-fill-hover |
norway/blue/400 | norway/blue/400 |
--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 |
norway/blue/50 | norway/blue/50 |
--arche-interactive-link-on-brand-disabled |
norway/blue/100 | norway/blue/100 |
--arche-interactive-button-primary-on-brand-indicator |
norway/blue/500 | norway/blue/500 |
--arche-selection-background |
norway/blue/200 | norway/blue/200 |
--arche-accent-rule |
norway/blue/500 | norway/blue/200 |
--arche-accent-numeral |
norway/blue/500 | norway/blue/200 |