12 · Solar, el amarillo que cuida

Color

El amarillo es la marca, no una advertencia. Sobre fondos claros casi nunca es texto, y en toda la interfaz el significado lo llevan el ícono y la palabra, no el color.

El amarillo es la marca, no una advertencia

En casi todos los sistemas, el amarillo significa «cuidado». Aquí no: Solar es el color de Heliodore y de su símbolo. Por eso ningún aviso, alerta o estado se codifica con amarillo, y todo estado lleva ícono y palabra. Las reglas están en Estados clínicos.

No: Solar como texto sobre claro, 1,7:1

Cita confirmada

Sí: Ámbar profundo sobre Marfil, 5,3:1

Guardar cita

Sí: Cristal sobre Solar, 10,2:1

Paleta

Color de la marca y del símbolo.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 1,79:1 · negro: 11,74:1

Símbolo sobre oscuro, botones primarios (con texto Cristal) y fondos de énfasis. Nunca texto sobre claro.

Acento sobre fondos oscuros.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 1,44:1 · negro: 14,54:1

Enlaces, cifras y símbolo sobre Noche (13,6:1).

Luz del ícono Reflect.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 1,51:1 · negro: 13,94:1

Resplandor y brillos del símbolo. No es color de texto.

Acento de texto sobre fondos claros.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 5,65:1 · negro: 3,72:1

Enlaces y énfasis en el tema claro (5,3:1 sobre Marfil).

Acento gráfico sobre claro.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 3,73:1 · negro: 5,63:1

Líneas, gráficos y texto muy grande (3,5:1). No para texto normal.

Parte alta del fondo del ícono Reflect.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 4,65:1 · negro: 4,52:1

Degradado a #2e1f00 en el ícono y en portadas cálidas.

Parte baja del fondo del ícono Reflect.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 16,00:1 · negro: 1,31:1

Fondos oscuros de marca; fondo de los negativos blancos.

Texto y símbolo sobre amarillo.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 18,27:1 · negro: 1,15:1

Etiquetas de botones primarios y símbolo oscuro sobre Solar (10,2:1).

Fondo oscuro de la interfaz.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 19,67:1 · negro: 1,07:1

Superficies elevadas del tema oscuro.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 19,00:1 · negro: 1,11:1

Texto sobre fondos claros.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 18,01:1 · negro: 1,17:1

Fondo claro de la interfaz.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 1,06:1 · negro: 19,78:1

Superficies y documentos impresos.

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 1,00:1 · negro: 21,00:1

Texto secundario sobre claro (7,1:1).

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 7,53:1 · negro: 2,79:1

Texto secundario sobre oscuro (7,9:1).

HEX
RGB
HSL
CMYK ≈

Texto blanco encima: 2,50:1 · negro: 8,40:1

HEX es el valor de verdad. CMYK es una aproximación sin perfil ICC: el amarillo de pantalla (#f5b800) se ve distinto en papel, más aún en papel de oficina. Hasta imprimir una prueba en la imprenta elegida no es un valor aprobado. Pantone se define comparando con el abanico físico, no por pantalla.

Roles en la interfaz

Rol	Tema claro	Tema oscuro
Fondo de la página	Marfil #fbf8ef	Noche #0d0b06
Superficie	Blanco #ffffff	Noche 2 #131008
Texto principal	Tinta #1b160a	#f5f5f2
Texto secundario	Gris cálido #5b5441	Gris claro #a3a3ad
Botón primario (fondo)	Solar, con borde #8a5f00	Solar
Texto del botón primario	Cristal #1c1400	Cristal #1c1400
Enlaces y acento de texto	Ámbar profundo #8a5f00	Brillo #ffd23f
Anillo de foco	Tinta, 3 px, con halo Solar	Brillo, 3 px

Sobre claro, el botón Solar lleva un borde de 1 px en Ámbar profundo: así su forma se distingue del fondo (1,7:1 por sí solo) y el texto Cristal sigue dando 10,2:1.

Proporción de uso

Marfil y Noche 56% Fondos
Tinta y grises 26% Texto y apoyo
Solar 12% Marca y acción principal
Ámbar y reflejos 6% Texto de acento y fondos de marca

Contraste

Cada par se verifica contra WCAG 2.2: 4,5:1 para texto normal, 3:1 para texto grande y componentes de interfaz. Lo que no pasa, no se usa para texto.

Contraste entre texto (filas) y fondo (columnas)
Texto \ Fondo	Solar	Brillo	Ámbar profundo	Ámbar	Cristal	Noche	Tinta	Marfil	Gris cálido
Solar	·	1,24:1 No pasa	3,16:1 Solo grande	2,09:1 No pasa	10,21:1 AAA	11,00:1 AAA	10,07:1 AAA	1,68:1 No pasa	4,21:1 Solo grande
Brillo	1,24:1 No pasa	·	3,91:1 Solo grande	2,58:1 No pasa	12,65:1 AAA	13,62:1 AAA	12,47:1 AAA	1,36:1 No pasa	5,21:1 AA
Ámbar profundo	3,16:1 Solo grande	3,91:1 Solo grande	·	1,51:1 No pasa	3,23:1 Solo grande	3,48:1 Solo grande	3,19:1 Solo grande	5,32:1 AA	1,33:1 No pasa
Ámbar	2,09:1 No pasa	2,58:1 No pasa	1,51:1 No pasa	·	4,90:1 AA	5,27:1 AA	4,83:1 AA	3,51:1 Solo grande	2,02:1 No pasa
Cristal	10,21:1 AAA	12,65:1 AAA	3,23:1 Solo grande	4,90:1 AA	·	1,08:1 No pasa	1,01:1 No pasa	17,20:1 AAA	2,43:1 No pasa
Noche	11,00:1 AAA	13,62:1 AAA	3,48:1 Solo grande	5,27:1 AA	1,08:1 No pasa	·	1,09:1 No pasa	18,52:1 AAA	2,61:1 No pasa
Tinta	10,07:1 AAA	12,47:1 AAA	3,19:1 Solo grande	4,83:1 AA	1,01:1 No pasa	1,09:1 No pasa	·	16,96:1 AAA	2,39:1 No pasa
Marfil	1,68:1 No pasa	1,36:1 No pasa	5,32:1 AA	3,51:1 Solo grande	17,20:1 AAA	18,52:1 AAA	16,96:1 AAA	·	7,09:1 AAA
Gris cálido	4,21:1 Solo grande	5,21:1 AA	1,33:1 No pasa	2,02:1 No pasa	2,43:1 No pasa	2,61:1 No pasa	2,39:1 No pasa	7,09:1 AAA	·

Tokens

:root {
  --heliodore-solar: #f5b800;
  --heliodore-brillo: #ffd23f;
  --heliodore-destello: #ffcc33;
  --heliodore-ambar: #8a5f00;
  --heliodore-ambar2: #b07a00;
  --heliodore-reflejo: #9a6c00;
  --heliodore-sombra: #2e1f00;
  --heliodore-cristal: #1c1400;
  --heliodore-noche: #0d0b06;
  --heliodore-noche2: #131008;
  --heliodore-tinta: #1b160a;
  --heliodore-marfil: #fbf8ef;
  --heliodore-blanco: #ffffff;
  --heliodore-gris: #5b5441;
  --heliodore-gris-claro: #a3a3ad;
}

{
  "heliodore-solar": "#f5b800",
  "heliodore-brillo": "#ffd23f",
  "heliodore-destello": "#ffcc33",
  "heliodore-ambar": "#8a5f00",
  "heliodore-ambar2": "#b07a00",
  "heliodore-reflejo": "#9a6c00",
  "heliodore-sombra": "#2e1f00",
  "heliodore-cristal": "#1c1400",
  "heliodore-noche": "#0d0b06",
  "heliodore-noche2": "#131008",
  "heliodore-tinta": "#1b160a",
  "heliodore-marfil": "#fbf8ef",
  "heliodore-blanco": "#ffffff",
  "heliodore-gris": "#5b5441",
  "heliodore-gris-claro": "#a3a3ad"
}

@theme {
  --color-heliodore-solar: #f5b800;
  --color-heliodore-brillo: #ffd23f;
  --color-heliodore-destello: #ffcc33;
  --color-heliodore-ambar: #8a5f00;
  --color-heliodore-ambar2: #b07a00;
  --color-heliodore-reflejo: #9a6c00;
  --color-heliodore-sombra: #2e1f00;
  --color-heliodore-cristal: #1c1400;
  --color-heliodore-noche: #0d0b06;
  --color-heliodore-noche2: #131008;
  --color-heliodore-tinta: #1b160a;
  --color-heliodore-marfil: #fbf8ef;
  --color-heliodore-blanco: #ffffff;
  --color-heliodore-gris: #5b5441;
  --color-heliodore-gris-claro: #a3a3ad;
}