---
titulo: Paleta Jerte
resumen: Cinco colores sacados de los cerezos en flor del Valle del Jerte.
  Blancos neutros para las superficies; oliva, tierra y cielo solo para acentos.
  Es la paleta de la landing.
estado: produccion
grupo: Lenguaje visual
creado: 2026-10-12
actualizado: 2026-10-13
tokens:
  - bg
  - surface
  - panel
  - line
  - line-2
  - ink
  - ink-2
  - ink-3
  - deep
  - cta
  - cta-hover
  - accent
  - signal
  - focus
relacionados:
  - fundamentos/color
  - tokens/color
id: fundamentos/paleta-jerte
url: /designloop/fundamentos/paleta-jerte
sync: ok
---

# Paleta Jerte

Cinco colores sacados de los cerezos en flor del Valle del Jerte. Blancos neutros para las superficies; oliva, tierra y cielo solo para acentos. Es la paleta de la landing.

```html preview
<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](/designloop/fundamentos/color).

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `tokens.produccion.json` | Sincronizado | — |