Identidad

Color

Cuatro neutros, Paper como superficie separada, los colores de marca y los funcionales, con su escala y su contraste medido.

La paleta tiene cuatro neutros y una superficie Paper, además de los colores de marca, los funcionales y la escala completa de cada tono. Para separar dos bloques usa gray #e9e9e9 ; para un borde que se vea, darkGray #afafaf . Cada color se copia con un clic. Al final está la tabla de contraste, con la razón medida de cada par.

La paleta

Clic en cualquier color para copiar su hex.

Neutros

Superficie

Colores de marca

Primary #f9be4a

Green #7fbf80

Blue #2797c4

Lila #674a98

Pink #e887a7

Orange #da7835

Deep blue #114f82

Colores funcionales

Link #114f82

Success #7fbf80

Info #2797c4

Warn #f9be4a

Danger #b3362a

Escala de color

Cada tono va del tinte más claro al más oscuro. El anillo marca el paso cuyo valor es el relleno de un color de énfasis.

Primary

Lila

Pink

Orange

Green

Blue

Red

Neutral

Colores de énfasis

Hay siete colores de énfasis. Se eligen con la prop accent, que cambia el color de un componente sin tocar su rol ni su geometría. Cada uno trae tres tokens del canon v5.0.1: el relleno, el color del texto que va encima y la versión que aguanta como texto sobre fondo claro. No marcan estado: el error y el aviso van en los colores funcionales.

Laboratorio de color

Elige un color y la vista previa cambia al instante. La prop accent solo alcanza a esta tarjeta: no hay un modo global que tiña la página entera.

Elige un color para cambiar la vista previa.

CategoríaÉnfasis

Tarjeta de ejemplo

El mismo Button, Badge y chip del kit, re-teñidos solo por la prop accent — sin cambiar rol, aria ni geometría.

accent="amber"

La prop sobre componentes reales

Amber

accent="amber"

El color por defecto y el más fuerte de los siete. De relleno funciona a cualquier tamaño; como texto no llega, así que para escribir en amber se usa su tono text-safe. En cifras y titulares suele leerse mejor el black.

Énfasis · Amber

texto sobre el relleno: 8.89:1 AAA
el color como texto (sobre claro): 5.63:1 AA
borde UI · 1.4.11: 5.63:1 ≥3:1

Lila

accent="lila"

El color frío de la pareja habitual con amber. De relleno lleva whitesmoke encima. Es el que mejor se lee como texto, aunque también se escribe con su tono text-safe.

Énfasis · Lila

texto sobre el relleno: 6.40:1 AA
el color como texto (sobre claro): 9.01:1 AAA
borde UI · 1.4.11: 9.01:1 ≥3:1

Blue

accent="blue"

Un azul frío que equilibra una paleta con muchos tonos cálidos. Su relleno es el azul profundo, no el azul de marca, y encima va whitesmoke. Para escribir en azul sobre claro está su tono text-safe.

Énfasis · Blue

texto sobre el relleno: 7.82:1 AAA
el color como texto (sobre claro): 8.29:1 AAA
borde UI · 1.4.11: 8.29:1 ≥3:1

Ink

accent="ink"

El negro de marca usado como color de énfasis. Sirve de relleno y de texto, y se lee bien en las dos formas.

Énfasis · Ink

texto sobre el relleno: 13.70:1 AAA
el color como texto (sobre claro): 14.94:1 AAA
borde UI · 1.4.11: 14.94:1 ≥3:1

Orange

accent="orange"

Un naranja de primera clase, no una variante del amber. De relleno lleva black encima; para escribirlo, su tono text-safe.

Énfasis · Orange

texto sobre el relleno: 4.78:1 AA
el color como texto (sobre claro): 8.02:1 AAA
borde UI · 1.4.11: 8.02:1 ≥3:1

Pink

accent="pink"

El más claro de los siete y el que menos aguanta el texto. De relleno lleva black encima; para escribir en pink, su tono text-safe.

Énfasis · Pink

texto sobre el relleno: 6.01:1 AA
el color como texto (sobre claro): 7.13:1 AAA
borde UI · 1.4.11: 7.13:1 ≥3:1

Green

accent="green"

El mismo verde que marca el éxito entre los funcionales; aquí es énfasis, no estado. De relleno lleva black encima; para escribirlo, su tono text-safe.

Énfasis · Green

texto sobre el relleno: 6.88:1 AA
el color como texto (sobre claro): 6.48:1 AA
borde UI · 1.4.11: 6.48:1 ≥3:1

Combinar con criterio

Un color por superficie, el black de estructura y como mucho un apoyo. Tres colores al mismo peso compiten entre sí: si te hace falta un tercero, bájalo a un borde o a un fondo suave. Amber y lila son la pareja habitual de la marca.

Contraste

Cada par se mide con los hexes del canon: si un token se mueve, la cifra se mueve con él.

Black sobre primary 8.9:1 · AAA

Black sobre paper 14.2:1 · AAA

Whitesmoke sobre black 13.7:1 · AAA

Whitesmoke sobre lila 6.4:1 · AA

Reglas de contraste

El texto pequeño sobre fondo claro va en black #272727 . El primary #f9be4a no funciona como texto: para escribir en amber usa su tono text-safe #8d5d27 .
El whitesmoke #f5f5f5 lleva texto sobre fondo oscuro —black #272727 y lila #674a98 — y sirve como superficie secundaria; sobre primary se escribe en black.
darkGray #afafaf sirve para bordes y decoración. Si el dato tiene que leerse, va en black #272727 .
Paper #faf9f7 es el único canvas claro de marca para el sitio y los documentos; para superficies secundarias usa whitesmoke #f5f5f5 y para separar bloques, gray #e9e9e9 .