Color

Color families

Each family runs from 50 (lightest) to 900 (darkest). The 500 step is the base color. The CSS name is under each swatch. Norway Blue and Sweden Blue are used by one mode each. Swiss red (--arche-swiss-red-web #FF0000, and --arche-swiss-red-print #DA291C for print) is used only in Klarheit and is also the Alert color.

Greece Blue

Structure and meaning: bands, links, buttons, stat numbers. Ethos uses it as its only color.

• 50#E6ECF3--arche-greece-blue-50
• 100#CCDAE7--arche-greece-blue-100
• 200#9EB8D2--arche-greece-blue-200
• 300#7196BC--arche-greece-blue-300
• 400#396DA2--arche-greece-blue-400
• 500#014488--arche-greece-blue-500
• 600#013A74--arche-greece-blue-600
• 700#012E5C--arche-greece-blue-700
• 800#002244--arche-greece-blue-800
• 900#001429--arche-greece-blue-900

Sweden Yellow

Identity: the name on the home page, the Credits band, the selection highlight and, in Omtanke, the yellow band and the primary button on blue.

• 50#FFFAE6--arche-sweden-yellow-50
• 100#FFF5CC--arche-sweden-yellow-100
• 200#FFEC9E--arche-sweden-yellow-200
• 300#FFE370--arche-sweden-yellow-300
• 400#FFD838--arche-sweden-yellow-400
• 500#FFCD00--arche-sweden-yellow-500
• 600#D9AE00--arche-sweden-yellow-600
• 700#AD8B00--arche-sweden-yellow-700
• 800#806600--arche-sweden-yellow-800
• 900#4C3E00--arche-sweden-yellow-900

Norway Red

The logo and, in Canon, the end mark. Nøktern uses it in the Cross. It is never on text, controls, validation or cards.

• 50#FAE7EB--arche-norway-red-50
• 100#F6CFD6--arche-norway-red-100
• 200#EEA4B2--arche-norway-red-200
• 300#E6798D--arche-norway-red-300
• 400#DC4561--arche-norway-red-400
• 500#D21034--arche-norway-red-500
• 600#B20E2C--arche-norway-red-600
• 700#8F0B23--arche-norway-red-700
• 800#69081A--arche-norway-red-800
• 900#3F0510--arche-norway-red-900

Norway Blue

Nøktern's main color. No other mode uses it.

• 50#E5EBF5--arche-norway-blue-50
• 100#CCD7EA--arche-norway-blue-100
• 200#9EB3D8--arche-norway-blue-200
• 300#708EC5--arche-norway-blue-300
• 400#3862AF--arche-norway-blue-400
• 500#003698--arche-norway-blue-500
• 600#002E82--arche-norway-blue-600
• 700#002567--arche-norway-blue-700
• 800#001B4C--arche-norway-blue-800
• 900#00102D--arche-norway-blue-900

Sweden Blue

Omtanke's main color. No other mode uses it.

• 50#E5EEF4--arche-sweden-blue-50
• 100#CCDCE9--arche-sweden-blue-100
• 200#9EBDD6--arche-sweden-blue-200
• 300#709EC2--arche-sweden-blue-300
• 400#3878AB--arche-sweden-blue-400
• 500#005293--arche-sweden-blue-500
• 600#00467D--arche-sweden-blue-600
• 700#003763--arche-sweden-blue-700
• 800#00294A--arche-sweden-blue-800
• 900#00182C--arche-sweden-blue-900

Neutral

Text, surfaces and borders.

• white#FFFFFF--arche-neutral-white
• 50#F5F5F5--arche-neutral-50
• 100#E5E5E5--arche-neutral-100
• 200#CCCCCC--arche-neutral-200
• 300#B3B3B3--arche-neutral-300
• 400#999999--arche-neutral-400
• 500#808080--arche-neutral-500
• 600#666666--arche-neutral-600
• 700#4D4D4D--arche-neutral-700
• 800#333333--arche-neutral-800
• 900#1A1A1A--arche-neutral-900
• black#000000--arche-neutral-black
• black-alpha-50#000000@50%--arche-black-alpha-50
• black-alpha-90#000000@90%--arche-black-alpha-90

Alert

Errors and alerts only. The same in every mode.

• 50#FFE6E6--arche-alert-50
• 100#FFCCCC--arche-alert-100
• 200#FF9E9E--arche-alert-200
• 300#FF7070--arche-alert-300
• 400#FF3838--arche-alert-400
• 500#FF0000--arche-alert-500
• 600#D90000--arche-alert-600
• 700#AD0000--arche-alert-700
• 800#800000--arche-alert-800
• 900#4C0000--arche-alert-900

Success

Status only. The same in every mode.

• 50#EAF6EC--arche-success-50
• 100#D4EDDA--arche-success-100
• 200#ADDEB8--arche-success-200
• 300#87CE97--arche-success-300
• 400#57BA6E--arche-success-400
• 500#28A745--arche-success-500
• 600#228E3B--arche-success-600
• 700#1B722F--arche-success-700
• 800#145422--arche-success-800
• 900#0C3215--arche-success-900

Warning

Status only. The same in every mode.

• 50#FFF3E6--arche-warning-50
• 100#FFE7CC--arche-warning-100
• 200#FFD19E--arche-warning-200
• 300#FFBB70--arche-warning-300
• 400#FFA038--arche-warning-400
• 500#FF8500--arche-warning-500
• 600#D97100--arche-warning-600
• 700#AD5A00--arche-warning-700
• 800#804200--arche-warning-800
• 900#4C2800--arche-warning-900

Which color does which job

These are Canon's jobs. Proportions are about 60 percent neutral, 30 percent blue and 10 percent accent. Blue is the structural color. Yellow and red stay sparing and single-purpose. Other modes give the same roles different colors: see Color modes.

Contrast

WCAG AA needs 4.5:1 for text and 3:1 for large text and interface parts such as borders and focus rings. These ratios are calculated from the token values when the site builds, so they are never typed by hand.

One known limit: a black focus ring on the Blue 500 band is only 2.18:1, which fails. That is why on-blue surfaces use a separate white ring token, --arche-border-focus-ring-on-brand.

Dark mode

Role tokens have two values, Light and Dark, in each mode. Canon's Light sits on :root. Dark is written in two places: once for visitors who chose it with the theme toggle, and once for visitors whose browser is set to dark and who have not chosen. Every other mode adds the same pair of blocks, selected with data-mode.

:root[data-theme="dark"] {
  --arche-surface-neutral-base: var(--arche-neutral-900);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --arche-surface-neutral-base: var(--arche-neutral-900);
  }
}

Use the Dark button to try it on this page. It is in the header from 1024px up, and in the footer below that.

All role tokens

116 tokens in total. Each group opens to show its Canon Light and Dark values and the primitive it points at. A role that another mode changes says so on that mode's page.