Color

La familia fría en un matiz, el terracota como detalle y la proporción que los mantiene en su lugar.

Acción · el navy del founder

El ultramarino #1E3CE6 sigue siendo la acción del sistema vivo. La propuesta del dashboard lo cambia por el navy que el founder eligió mirando pantallas oscuras: #183E75 en oscuro, #2457A8 en claro. Es el mismo color, un paso más claro donde hay luz.

Hasta 2026-09-20 la acción fue el ultramarino #1E3CE6 en claro y #7086FF en oscuro. El ultramarino sigue en la paleta de marca y en el gradiente Depth; lo que dejó de ser es el color de los botones.

Contactar#183E75
blanco 10.58:1 AA
el navy en oscuro
Contactar#2457A8
blanco 6.99:1 AA
el navy en claro

El azul se gasta en cuatro cosas

Botón primario, enlace, la marca «nuevo» y la esfera de Amanda. La barra de meta y la señal alta son la misma cuarta cosa: el azul marcando el progreso del agente.

Fuera de esas cuatro, no aparece. Pestaña, fila y navegación seleccionadas van en gris al 6 % y peso de texto — seleccionado es neutro. El terracota sigue siendo «persona», no un segundo acento repartido.

Contactar
1 · botón primario
ver los tres huecos
2 · enlace
Nuevo
3 · marca «nuevo»
4 · la esfera de Amanda
Fila seleccionada
no lo lleva · fila seleccionada, gris al 6 %

Por qué el enlace sube de tono en oscuro

El navy sostiene letra blanca con holgura, pero como letra sobre la isla se cae. Es el mismo color en los dos casos: lo que cambia es de qué lado está.

Por eso el navy es superficie de resalte y nada más — nunca texto, nunca línea, nunca ícono suelto. El enlace y el anillo de foco suben a #7aa3f0, que sí se lee sobre la superficie elevada. En claro el problema no existe: #2457A8 sobre blanco pasa, así que ahí el enlace se queda en el color de acción.

Contactar#183E75
10.58:1 AA
el navy como superficie
ver los tres huecos
1.74:1 no pasa
el mismo navy como letra
ver los tres huecos
6.31:1 AA
el tono al que sube el enlace

Un valor de la escalera no pasa AA

El texto apagado #707070 sobre la isla queda por debajo de 4,5:1. En el estudio sólo lleva metadatos en mono de 10–11 px (la hora de una fila, la etiqueta de una señal), nunca prosa.

Queda anotado acá porque es lo único de la propuesta que no pasa medido, y es una decisión, no un descuido: si el founder aprueba, o ese gris sube, o se escribe la regla de que nunca lleva texto que haya que leer.

#707070#707070
3.72:1 no pasa
texto apagado, medido contra la isla oscura

Los valores

Acción · oscuro
#183E75
Acción · claro
#2457A8
Enlace / foco · oscuro
#7AA3F0
Enlace / foco · claro
#2457A8
Chip Nuevo · oscuro
fondo navy · letra #DBE7FF
Chip Nuevo · claro
#E6EDF8 · letra #2457A8
Esfera de Amanda
radial 32% 28% · #9DBCFF → navy → #0D2347
Seleccionado
gris neutro, nunca azul
Persona · traspaso
terracota, sin cambio

Canon vivo

La paleta

Ink

#0C0D13
HSL 231, 23%, 6%
RGB 12, 13, 19

Paper

#EFF0F6
HSL 231, 28%, 95%
RGB 239, 240, 246

Navy → Depth

#181D3A
#1E2967

Ultramarino

#1E3CE6
HSL 231, 80%, 51%
RGB 30, 60, 230

Terracota

#C46B45
HSL 18, 52%, 52%
RGB 196, 107, 69

Graphite

#434551
HSL 231, 9%, 29%
RGB 67, 69, 81

Fog

#D5D7E2
HSL 231, 18%, 86%
RGB 213, 215, 226

White

#FFFFFF
HSL 0, 0%, 100%
RGB 255, 255, 255

Todo lo frío es un solo matiz

Tinta, navy, grafito, niebla y el azul de acción son el mismo azul a distintas intensidades — no grises neutros con un acento encima. Eso es lo que hace que la paleta se lea como sistema y no como colores surtidos.

El terracota es lo único que sale de la familia, y sale a propósito.

  • Inkmatiz 231
  • Navymatiz 231
  • Depthmatiz 231
  • Ultramarinomatiz 231
  • Graphitematiz 231
  • Fogmatiz 231
  • Papermatiz 231
matiz medido de cada valor frío

Proporción: el terracota es un detalle

El volumen lo cargan el papel, la tinta y el navy. El ultramarino es la única acción. El terracota vive en piezas chicas: un chip, un badge, un subrayado, un control secundario, un nodo en un diagrama.

Nunca es fondo de página, nunca es un campo grande, nunca una superficie mayor que un control. Si una vista se lee como «azul y naranjo», el naranjo se pasó.

Papel y blanco
~75%
Tinta y navy
~15%
Ultramarino
~7%
Terracota
~3%
una vista cualquiera, en porcentaje de área

El terracota lleva tinta, nunca blanco

Es consecuencia de ser mate, no un defecto. Un terracota lo bastante claro para que el blanco pase ya dejó de ser mate y se convirtió en naranjo señal.

Para texto terracota sobre fondo claro existe el paso --sds-terracotta-700, que sí pasa sobre papel.

Intervino una persona

tinta 5.11:1 AA

Intervino una persona

blanco 3.79:1 no pasa
misma superficie, dos textos

Rampas

Solo dos. Los estados de producto no tienen rampa propia: usan sus tokens semánticos, que están en 11 · Densidad y estados.

ultramarino

e7eafdc8cff97384e81e3ce61732cf0f2395

terracota

f7ede9ebcec2d89c83c46b45a65430813f22

Roles semánticos

  • Black

    Solo la marca. Nunca texto ni superficie.

  • Ink

    Texto primario y campos oscuros. Lleva una traza del azul de la familia.

  • Navy

    Profundidad de marca. Carga el volumen junto al papel.

  • Depth

    Paso intermedio del gradiente navy → ultramarino.

  • Ultramarino

    Marca y gradiente Depth. Hasta 2026-09-20 fue también la acción del producto; ahora la acción es el navy (#2457a8 claro · #183e75 oscuro).

  • Paper

    Atmósfera de página. Las superficies van en blanco puro.

  • White

    Superficies elevadas y evidencia de producto.

  • Fog

    Divisiones y atmósfera. No sirve como borde de control.

  • Graphite

    Texto secundario y chrome tranquilo.

  • Terracota

    Detalle. Tope ~3% de la vista. Lleva tinta, nunca blanco.

  • Jade

    Resuelto, conectado, sano. Solo producto.

  • Honey

    Oportunidad y revisión. Solo producto.

  • Crimson

    Error y bloqueo. Solo producto.

Los dos modos

La landing es clara en esta fase. El producto necesita los dos, y el azul de acción no es el mismo valor en cada uno: #1e3ce6 sobre una superficie oscura da 2.3:1 y es ilegible.

Claro

Lead calificado

Responde en 4 minutos

ContactarVer hiloIntervino una persona

Oscuro

Lead calificado

Responde en 4 minutos

ContactarVer hiloIntervino una persona
Matiz de la familia
231
Acción · claro
#1E3CE6
Acción · oscuro
#7086FF
Acento · matiz
18
Acento · saturación
52%
Tope de terracota
~3% de la vista