Paleta Jerte

<div class="jerte">
  <div class="jerte-barra">
    <span class="jerte-blanco" style="flex: 60">60 %</span>
    <span class="jerte-oliva" style="flex: 20">20 %</span>
    <span class="jerte-sombra" style="flex: 10">10 %</span>
    <span class="jerte-tierra" style="flex: 7">7 %</span>
    <span class="jerte-cielo" style="flex: 3"></span>
  </div>
  <div class="jerte-muestras">
    <figure><i class="jerte-blanco"></i><figcaption>Blanco<br>#F6F6F3</figcaption></figure>
    <figure><i class="jerte-sombra"></i><figcaption>Gris sombra<br>#E3E3DF</figcaption></figure>
    <figure><i class="jerte-oliva"></i><figcaption>Verde oliva<br>#596B45</figcaption></figure>
    <figure><i class="jerte-tierra"></i><figcaption>Marrón tierra<br>#B1905C</figcaption></figure>
    <figure><i class="jerte-cielo"></i><figcaption>Azul cielo<br>#84AAD7</figcaption></figure>
    <figure><i class="jerte-tinta"></i><figcaption>Tinta oliva<br>#1F2419</figcaption></figure>
  </div>
</div>

Proporciones

Los porcentajes son orientativos.

Parte	Color	Hex	Token (landing)	Dónde va
60 %	Blanco	#F6F6F3	--bg, --surface	Fondo de la página y tarjetas dentro de las placas
10 %	Gris sombra	#E3E3DF	--panel, --line	Todas las placas, superficies y separadores
20 %	Verde oliva	#596B45	--cta, --deep	Botones, interruptores y el formulario final
7 %	Marrón tierra	#B1905C	--accent	Detalles pequeños dentro de las placas
3 %	Azul cielo	#84AAD7	--signal	La hoja de la llamada, «En curso» y la selección

El texto va en tinta oliva (#1F2419), no en negro. Los derivados (--ink-2, --line-2, --deep-2, --cta-hover…) salen de estos cinco y viven al principio de public/site/report.css.

Reglas

• Los colores de acento (oliva, tierra, cielo) solo van en acentos. Las placas son gris sombra.
• Un color de acento nunca va sobre otro. El botón de la hoja azul de la llamada es blanco; el del formulario oliva, también.
• Los botones son oliva con texto blanco (5,4:1).
• Marrón tierra y azul cielo no llevan texto sobre blanco (2,8:1 y 2,2:1). Cuando son fondo de una hoja, el texto encima es tinta oliva (5,3:1 y 6,6:1).
• La petición en curso es una tarjeta azul entera con la píldora blanca y texto tinta. En el chat, «En curso» es una píldora oliva con texto blanco.
• Sin trazos de mucho contraste: los bordes van en --line-2, nunca en tinta.
• El contorno de foco es oliva sobre fondos claros y blanco dentro del formulario oliva.
• Las sombras se tiñen con la tinta (rgb(31 36 25 / x%)), no con negro.
• En modo oscuro la página pasa a oliva noche (#161912) y el texto a #F2F0E8. El foco pasa a azul cielo.

Rechaza estos reflejos

• Negro o gris neutro para el texto. Rompe la temperatura de la paleta; usa la tinta oliva y sus derivados.
• Enlaces en azul cielo sobre claro. No llega al contraste mínimo. Un enlace es tinta; el azul solo puede ir en el subrayado o en un indicador.
• Placas de color. Una placa entera en oliva o tierra convierte el acento en fondo.
• Acento sobre acento. Un botón oliva en una hoja azul, iconos tierra en una placa oliva.
• Tierra como color de botón. Los botones son oliva.

Pendiente

• Llevarla al portal: en producción el portal sigue con Color.