Ethos is the greek mode. Its trait is principled. Its code id is ethos: set data-mode="ethos" on the <html> element.
Rules
- Greece Blue is the only brand color. Emphasis comes from type weight and size plus the tint panel.
- The accent rule and stat numerals are blue.
- Ethos never uses Alert red for decoration.
- The selection highlight is a Greece 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 Ethos. 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 |
greece/blue/500 #014488 | greece/blue/200 #9EB8D2 |
| Stat numerals | --arche-accent-numeral |
greece/blue/500 #014488 | greece/blue/200 #9EB8D2 |
| Selection | --arche-selection-background |
greece/blue/200 #9EB8D2 | greece/blue/200 #9EB8D2 |
| 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 Ethos, 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 | 8.49:1 Pass | 8.49: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 | 9.62:1 Pass | 8.49:1 Pass |
| Stat numerals on the page | 3:1 | 9.62:1 Pass | 8.49:1 Pass |
What differs from Canon
5 of 116 roles have a different Light or Dark value in Ethos. The rest match Canon.
Show the 5 roles
| Role | Light | Dark |
|---|---|---|
--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-button-primary-on-brand-indicator |
greece/blue/500 | greece/blue/500 |
--arche-selection-background |
greece/blue/200 | greece/blue/200 |
--arche-accent-rule |
greece/blue/500 | greece/blue/200 |