Omtanke is the swedish mode. Its trait is generous. Its code id is omtanke: set data-mode="omtanke" on the <html> element.
Rules
- Sweden Blue is the main color. Its blue band carries Yellow 50 type and a yellow primary button.
- The yellow band carries Sweden 800 type.
- One type color per colored field.
- Dark uses Sweden 900 surfaces. The selection highlight is Yellow 500.
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 Omtanke. 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 | sweden/blue/900 #00182C |
| Brand band | --arche-surface-brand-primary |
sweden/blue/500 #005293 | sweden/blue/500 #005293 |
| Brand tint | --arche-surface-brand-primary-subtle |
sweden/blue/50 #E5EEF4 | sweden/blue/700 #003763 |
| Yellow band | --arche-surface-brand-secondary-band |
sweden/yellow/500 #FFCD00 | sweden/yellow/500 #FFCD00 |
| Links and brand text | --arche-text-brand-primary |
sweden/blue/500 #005293 | sweden/blue/200 #9EBDD6 |
| Accent rule | --arche-accent-rule |
sweden/blue/500 #005293 | sweden/blue/200 #9EBDD6 |
| Stat numerals | --arche-accent-numeral |
sweden/blue/500 #005293 | sweden/blue/200 #9EBDD6 |
| 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 Omtanke, 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.99:1 Pass |
| Body copy on the page | 4.5:1 | 17.40:1 Pass | 14.28:1 Pass |
| Captions and meta on the page | 4.5:1 | 5.74:1 Pass | 8.58:1 Pass |
| Links and brand text on the page | 4.5:1 | 7.99:1 Pass | 9.17:1 Pass |
| Stat numbers on the brand tint | 4.5:1 | 6.80:1 Pass | 6.20:1 Pass |
| Captions on the brand tint | 4.5:1 | 4.89:1 Pass | 5.80:1 Pass |
| Error text on the page | 4.5:1 | 7.56:1 Pass | 6.69:1 Pass |
| Headings on the brand band | 4.5:1 | 7.64:1 Pass | 7.64:1 Pass |
| Body text on the brand band | 4.5:1 | 7.64:1 Pass | 7.64:1 Pass |
| Secondary text on the brand band | 4.5:1 | 7.64:1 Pass | 7.64:1 Pass |
| Text on the yellow band | 4.5:1 | 11.59:1 Pass | 11.59:1 Pass |
| Primary button label | 4.5:1 | 7.99:1 Pass | 9.17:1 Pass |
| Primary button label on the band | 4.5:1 | 9.88:1 Pass | 9.88: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.56:1 Pass |
| Focus ring on the page (non-text) | 3:1 | 21.00:1 Pass | 17.99:1 Pass |
| Accent rule on the page (non-text) | 3:1 | 7.99:1 Pass | 9.17:1 Pass |
| Stat numerals on the page | 3:1 | 7.99:1 Pass | 9.17:1 Pass |
What differs from Canon
58 of 116 roles have a different Light or Dark value in Omtanke. The rest match Canon.
Show the 58 roles
| Role | Light | Dark |
|---|---|---|
--arche-surface-neutral-base |
neutral/white | sweden/blue/900 |
--arche-surface-neutral-raised |
neutral/white | sweden/blue/800 |
--arche-surface-brand-primary |
sweden/blue/500 | sweden/blue/500 |
--arche-surface-brand-primary-subtle |
sweden/blue/50 | sweden/blue/700 |
--arche-border-neutral-default |
neutral/200 | sweden/blue/700 |
--arche-border-brand-default |
sweden/blue/500 | sweden/blue/400 |
--arche-border-on-brand-divider |
sweden/blue/300 | sweden/blue/300 |
--arche-text-brand-primary |
sweden/blue/500 | sweden/blue/200 |
--arche-text-on-brand-primary |
sweden/yellow/50 | sweden/yellow/50 |
--arche-text-on-brand-body |
sweden/yellow/50 | sweden/yellow/50 |
--arche-text-on-brand-secondary |
sweden/yellow/50 | sweden/yellow/50 |
--arche-text-on-brand-name |
sweden/yellow/50 | sweden/yellow/50 |
--arche-text-on-brand-switch-selected |
sweden/blue/500 | sweden/blue/500 |
--arche-text-on-brand-title |
sweden/yellow/50 | sweden/yellow/50 |
--arche-icon-brand-default |
sweden/blue/500 | sweden/blue/300 |
--arche-interactive-button-primary-fill-default |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-primary-fill-hover |
sweden/blue/400 | sweden/blue/100 |
--arche-interactive-button-primary-fill-pressed |
sweden/blue/700 | sweden/blue/300 |
--arche-interactive-button-secondary-fill-default |
neutral/white | sweden/blue/900 |
--arche-interactive-button-secondary-fill-hover |
sweden/blue/50 | sweden/blue/800 |
--arche-interactive-button-secondary-fill-pressed |
sweden/blue/100 | sweden/blue/700 |
--arche-interactive-button-secondary-fill-disabled |
neutral/white | sweden/blue/900 |
--arche-interactive-button-secondary-border-default |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-secondary-border-inverse |
neutral/white | sweden/blue/900 |
--arche-interactive-button-primary-fill-active |
sweden/blue/700 | sweden/blue/300 |
--arche-interactive-button-secondary-fill-active |
sweden/blue/50 | sweden/blue/800 |
--arche-interactive-progress |
sweden/blue/500 | sweden/blue/300 |
--arche-interactive-link-nav-indicator |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-primary-label-default |
neutral/white | sweden/blue/900 |
--arche-interactive-button-primary-indicator |
neutral/white | sweden/blue/900 |
--arche-interactive-button-secondary-border-pressed |
sweden/blue/700 | sweden/blue/100 |
--arche-interactive-button-secondary-label-default |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-secondary-label-pressed |
sweden/blue/700 | sweden/blue/100 |
--arche-interactive-button-secondary-indicator |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-tertiary-fill-hover |
sweden/blue/50 | sweden/blue/800 |
--arche-interactive-button-tertiary-fill-pressed |
sweden/blue/100 | sweden/blue/700 |
--arche-interactive-button-tertiary-fill-active |
sweden/blue/50 | sweden/blue/800 |
--arche-interactive-button-tertiary-label-default |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-tertiary-label-hover |
sweden/blue/600 | sweden/blue/100 |
--arche-interactive-button-tertiary-label-pressed |
sweden/blue/700 | sweden/blue/50 |
--arche-interactive-button-tertiary-label-active |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-tertiary-indicator |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-secondary-on-brand-border |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-button-secondary-on-brand-label |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-button-secondary-on-brand-fill-pressed |
sweden/blue/700 | sweden/blue/700 |
--arche-interactive-link-default |
sweden/blue/500 | sweden/blue/200 |
--arche-interactive-button-primary-on-brand-fill |
sweden/yellow/500 | sweden/yellow/500 |
--arche-interactive-button-primary-on-brand-label |
sweden/blue/800 | sweden/blue/800 |
--arche-interactive-button-secondary-on-brand-fill-hover |
sweden/blue/400 | sweden/blue/400 |
--arche-interactive-button-primary-on-brand-fill-hover |
sweden/yellow/400 | sweden/yellow/400 |
--arche-interactive-button-primary-on-brand-fill-pressed |
sweden/yellow/600 | sweden/yellow/600 |
--arche-interactive-link-on-brand-default |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-link-on-brand-hover |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-link-on-brand-pressed |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-link-on-brand-disabled |
sweden/yellow/50 | sweden/yellow/50 |
--arche-interactive-button-primary-on-brand-indicator |
sweden/blue/800 | sweden/blue/800 |
--arche-accent-rule |
sweden/blue/500 | sweden/blue/200 |
--arche-accent-numeral |
sweden/blue/500 | sweden/blue/200 |