16 · Doce pasos entre luz y sombra

Escala neutra y superficies

Sin color, la jerarquía se construye con una escala de neutros. Son trece valores con nombre: todo el manual y la web se arman con ellos.

La escala

Superficies del manual

Rol	Tema oscuro	Tema claro
Fondo	#08090A	#FAFAFA
Superficie 2 (tarjetas)	#0F1011	#FFFFFF
Texto	#F7F8F8 (n-50)	#0B0C0D (n-950)
Texto de apoyo	#9AA0A9 (n-400)	#5B5F66 (n-600)
Línea fina	Blanco al 8 %	Negro al 10 %
Línea fuerte	Blanco al 16 %	Negro al 18 %
Superficie sutil	Blanco al 3,5 %	Negro al 3 %
Superficie fuerte	Blanco al 7 %	Negro al 7 %
Acento (botón principal)	n-50 con texto n-950	n-950 con texto blanco

Pares permitidos para texto

Solo se usan estos pares para texto. Si no está en la lista, se mide antes.

Texto	Fondo	Relación	Nivel
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	Solo grande
n-300 #C9CBCF	n-950 #0B0C0D	12,05:1	AAA

Texto de 18 px normal (o 14 px en negrita) o más cuenta como grande y necesita 3:1; el resto, 4,5:1.

Matriz con los colores de marca

Contraste entre texto (filas) y fondo (columnas)
Texto \ Fondo	Negro	Pizarra	Humo	Niebla	Blanco
Negro	·	3,05:1 Solo grande	6,03:1 AA	17,50:1 AAA	19,58:1 AAA
Pizarra	3,05:1 Solo grande	·	1,97:1 No pasa	5,73:1 AA	6,42:1 AA
Humo	6,03:1 AA	1,97:1 No pasa	·	2,90:1 No pasa	3,25:1 Solo grande
Niebla	17,50:1 AAA	5,73:1 AA	2,90:1 No pasa	·	1,12:1 No pasa
Blanco	19,58:1 AAA	6,42:1 AA	3,25:1 Solo grande	1,12:1 No pasa	·

Tokens de la escala

: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;
}