16 · Twelve steps between light and shadow

Neutral scale and surfaces

Without color, hierarchy is built with a scale of neutrals. There are thirteen named values: the whole manual and the website are built from them.

The scale

Manual surfaces

Role	Dark theme	Light theme
Background	#08090A	#FAFAFA
Surface 2 (cards)	#0F1011	#FFFFFF
Text	#F7F8F8 (n-50)	#0B0C0D (n-950)
Secondary text	#9AA0A9 (n-400)	#5B5F66 (n-600)
Thin line	White at 8%	Black at 10%
Strong line	White at 16%	Black at 18%
Subtle surface	White at 3.5%	Black at 3%
Strong surface	White at 7%	Black at 7%
Accent (primary button)	n-50 with n-950 text	n-950 with white text

Approved text pairs

Only these pairs are used for text. If a pair is not on the list, measure it first.

Text	Background	Ratio	Level
n-950 #0B0C0D	n-0 #FFFFFF	19.58:1	AAA
n-950 #0B0C0D	n-100 #F2F2F3	17.50:1	AAA
n-600 #5B5F66	n-0 #FFFFFF	6.42:1	AA
n-600 #5B5F66	n-100 #F2F2F3	5.73:1	AA
n-500 #8A8F98	n-950 #0B0C0D	6.03:1	AA
n-400 #9AA0A9	n-950 #0B0C0D	7.44:1	AAA
n-0 #FFFFFF	n-950 #0B0C0D	19.58:1	AAA
n-0 #FFFFFF	n-900 #121315	18.59:1	AAA
n-500 #8A8F98	n-0 #FFFFFF	3.25:1	Large text only
n-300 #C9CBCF	n-950 #0B0C0D	12.05:1	AAA

Text at 18 px regular (or 14 px bold) or larger counts as large and needs 3:1; everything else needs 4.5:1.

Matrix with the brand colors

Contrast between text (rows) and background (columns)
Text \ Background	Black	Slate	Smoke	Mist	White
Black	·	3.05:1 Large text only	6.03:1 AA	17.50:1 AAA	19.58:1 AAA
Slate	3.05:1 Large text only	·	1.97:1 Fail	5.73:1 AA	6.42:1 AA
Smoke	6.03:1 AA	1.97:1 Fail	·	2.90:1 Fail	3.25:1 Large text only
Mist	17.50:1 AAA	5.73:1 AA	2.90:1 Fail	·	1.12:1 Fail
White	19.58:1 AAA	6.42:1 AA	3.25:1 Large text only	1.12:1 Fail	·

Scale tokens

:root {
  --nitente-n-0: #FFFFFF;
  --nitente-n-25: #FAFAFA;
  --nitente-n-50: #F7F8F8;
  --nitente-n-100: #F2F2F3;
  --nitente-n-200: #E3E4E6;
  --nitente-n-300: #C9CBCF;
  --nitente-n-400: #9AA0A9;
  --nitente-n-500: #8A8F98;
  --nitente-n-600: #5B5F66;
  --nitente-n-700: #3E4045;
  --nitente-n-800: #2F3034;
  --nitente-n-900: #121315;
  --nitente-n-950: #0B0C0D;
}

{
  "nitente-n-0": "#FFFFFF",
  "nitente-n-25": "#FAFAFA",
  "nitente-n-50": "#F7F8F8",
  "nitente-n-100": "#F2F2F3",
  "nitente-n-200": "#E3E4E6",
  "nitente-n-300": "#C9CBCF",
  "nitente-n-400": "#9AA0A9",
  "nitente-n-500": "#8A8F98",
  "nitente-n-600": "#5B5F66",
  "nitente-n-700": "#3E4045",
  "nitente-n-800": "#2F3034",
  "nitente-n-900": "#121315",
  "nitente-n-950": "#0B0C0D"
}

@theme {
  --color-nitente-n-0: #FFFFFF;
  --color-nitente-n-25: #FAFAFA;
  --color-nitente-n-50: #F7F8F8;
  --color-nitente-n-100: #F2F2F3;
  --color-nitente-n-200: #E3E4E6;
  --color-nitente-n-300: #C9CBCF;
  --color-nitente-n-400: #9AA0A9;
  --color-nitente-n-500: #8A8F98;
  --color-nitente-n-600: #5B5F66;
  --color-nitente-n-700: #3E4045;
  --color-nitente-n-800: #2F3034;
  --color-nitente-n-900: #121315;
  --color-nitente-n-950: #0B0C0D;
}