---
titulo: Color
resumen: Valores de color de producción y el rol de cada uno. La landing usa la
  paleta Jerte; el portal, la paleta anterior.
estado: produccion
grupo: Base
creado: 2026-10-11
actualizado: 2026-10-13
relacionados:
  - fundamentos/paleta-jerte
  - fundamentos/color
tokens:
  - nombre: bg
    rol: Landing. Fondo de la página.
  - nombre: surface
    rol: Landing. Tarjetas dentro de las placas.
  - nombre: panel
    rol: Landing. Fondo de placas y hojas.
  - nombre: line
    rol: "Landing. Separadores finos: borde del hero y lista de pasos."
  - nombre: line-2
    rol: Landing. Bordes de píldoras y campos, y separadores dentro de hojas y pie.
  - nombre: ink
    rol: Texto principal (en la landing, tinta oliva).
  - nombre: ink-2
    rol: "Texto secundario: entradillas, descripciones y respuestas."
  - nombre: ink-3
    rol: Landing. Numeración y metadatos.
  - nombre: deep
    rol: "Landing. Verde oliva: hoja del formulario final, interruptores y
      detalles."
  - nombre: deep-ink
    rol: Landing. Texto sobre oliva.
  - nombre: deep-2
    rol: Landing. Oliva más oscuro. Declarado, pero hoy ninguna regla lo usa.
  - nombre: deep-line
    rol: Landing. Línea del campo de texto sobre oliva.
  - nombre: deep-mute
    rol: Landing. Placeholder y pista sobre oliva.
  - nombre: cta
    rol: Landing. Fondo del botón principal (`.pill-accent`).
  - nombre: cta-ink
    rol: Landing. Texto del botón principal.
  - nombre: cta-hover
    rol: Landing. Botón principal al pasar el ratón.
  - nombre: deep-cta-hover
    rol: Landing. Botón principal dentro de una hoja oliva, al pasar el ratón.
  - nombre: accent
    rol: "Landing: marrón tierra, detalles pequeños en placas. Portal: azul del foco
      y la selección."
  - nombre: on-accent
    rol: Landing. Texto sobre marrón tierra.
  - nombre: signal
    rol: "Landing. Azul cielo: hoja de la llamada, pulso y «En curso»."
  - nombre: focus
    rol: Landing. Foco de los controles dentro de las placas.
  - nombre: ink-fixed
    rol: Landing. Tinta que no cambia en modo oscuro (sobre azul cielo y blanco
      fijo).
  - nombre: paper-fixed
    rol: Landing. Blanco que no cambia en modo oscuro (botón claro, mando del
      interruptor).
  - nombre: paper
    rol: Portal. Fondo de la página.
  - nombre: paper-2
    rol: Portal. Fondo alterno y hover de botones secundarios.
  - nombre: paper-3
    rol: Portal. Rellenos suaves.
  - nombre: card
    rol: Portal. Fondo de tarjetas.
  - nombre: night
    rol: Portal. Bloques oscuros.
  - nombre: ink-hover
    rol: Portal. Botón principal al pasar el ratón.
  - nombre: muted
    rol: Portal. Descripciones.
  - nombre: faint
    rol: Portal. Metadatos y placeholders.
  - nombre: line-strong
    rol: Portal. Bordes de controles.
  - nombre: accent-soft
    rol: Portal. Fondo de la selección de texto.
  - nombre: danger
    rol: Portal. Errores y acciones destructivas.
  - nombre: danger-soft
    rol: Portal. Fondo de avisos de error.
  - nombre: success
    rol: Portal. Confirmaciones.
  - nombre: success-soft
    rol: Portal. Fondo de confirmaciones.
  - nombre: warning
    rol: Portal. Avisos.
  - nombre: warning-soft
    rol: Portal. Fondo de avisos.
  - nombre: tile-sand
    rol: Portal. Fondo de ilustración.
  - nombre: tile-clay
    rol: Portal. Fondo de ilustración.
  - nombre: tile-sage
    rol: Portal. Fondo de ilustración.
  - nombre: tile-sky
    rol: Portal. Fondo de ilustración.
  - nombre: tile-lilac
    rol: Portal. Fondo de ilustración.
id: tokens/color
url: /designloop/tokens/color
sync: ok
---

# Color

Valores de color de producción y el rol de cada uno. La landing usa la paleta Jerte; el portal, la paleta anterior.

`ink`, `ink-2`, `line` y `accent` existen en las dos superficies con valores distintos. En modo oscuro la landing redefine `bg`, `ink`, `ink-2`, `ink-3`, `line`, `line-2`, `panel`, `surface` y `focus`.

# Enlace con producción

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