Color

Un único verde de marca hace todo el trabajo de acento. Todo lo demás es una escala neutra que cambia entre claro y oscuro. Los valores de abajo se leen de la hoja de estilos en el momento de la compilación.

Verde de marca

El verde es el único acento. Rellena los botones primarios, marca la pestaña activa, dibuja la barra bajo el título de una página y rodea un control enfocado. Como solo significa esas cosas, el lector aprende a leer el verde como «esto hace algo».

  • --color-green Claro Oscuro El único acento: botones primarios, pestaña activa, la barra del título y los anillos de foco.
  • --color-green-dark Claro Oscuro Verde al pasar el cursor y al pulsar en botones sólidos.
  • --color-green-light Claro Oscuro Un tono más claro, usado con moderación.
  • --color-green-text Claro Oscuro Verde para texto y enlaces: legible en claro, lima de marca en oscuro.
  • --color-green-text-hover Claro Oscuro Verde al pasar el cursor para texto y enlaces.
  • --color-white Claro Oscuro Blanco puro, sobre todo para texto sobre verde sólido.

El verde lima es brillante y, al tamaño de texto de cuerpo sobre fondo blanco, no alcanza el umbral de contraste. Por eso existe un verde de texto aparte: el modo claro reduce el verde para texto y enlaces, mientras que el modo oscuro conserva el lima de marca. El motivo de su existencia se explica en la página de accesibilidad. Accesibilidad.

Neutros y superficies

Los tokens neutros llevan dos valores, uno por tema, así que una superficie se diseña en ambos desde el principio. El texto tiene tres niveles de énfasis; los fondos van desde la página, a las bandas tintadas, a las tarjetas elevadas.

  • --bg-primary Claro Oscuro El fondo de la página.
  • --bg-secondary Claro Oscuro Bandas tintadas, escenarios de muestra y cabeceras de código.
  • --bg-card Claro Oscuro Superficies de tarjetas y paneles.
  • --bg-nav Claro Oscuro El fondo desenfocado de la navegación.
  • --text-primary Claro Oscuro Títulos y texto de alto énfasis.
  • --text-secondary Claro Oscuro Texto de cuerpo.
  • --text-muted Claro Oscuro Metadatos, pies de foto y etiquetas desactivadas.
  • --border-color Claro Oscuro Líneas finas y bordes de tarjeta.
  • --badge-bg Claro Oscuro Relleno de insignias, etiquetas y cabeceras de tabla.
  • --badge-text Claro Oscuro Texto de insignias y etiquetas.
  • --code-bg Claro Oscuro Fondo de código en línea y en bloque.
  • --timeline-line Claro Oscuro El raíl de la cronología de experiencia laboral.
  • --device-edge Claro Oscuro El anillo exterior del marco del teléfono.
  • --device-button Claro Oscuro Los botones laterales del marco del teléfono.

Los tokens de elevación (las sombras según el tema) se documentan en la página de Forma y elevación.

Interacción

Los enlaces y los botones sólidos recorren los verdes al pasar el cursor. Los estados son iguales en todas partes, así que un control siempre te dice lo que va a hacer.

Estado Enlaces Botones sólidos
Por defecto --color-green-text --color-green
Al pasar el cursor --color-green-text-hover --color-green-dark
Desactivado Opacidad reducida; el color no cambia.

Avisos

Los artículos largos usan cuatro colores de aviso para señalar una trampa, un apunte, una precaución o una nota neutra. Son el único sitio donde un color distinto del verde tiene significado.

Aviso Borde Cuándo usarlo
Alerta roja Un error o una trampa que merece detener al lector.
Consejo Un apunte útil que no es esencial.
Advertencia Algo que hacer con cuidado.
Información Contexto neutro o una referencia a otro sitio.

Alcance: los colores de aviso viven solo en la prosa de los artículos. Nunca aparecen en el armazón de la interfaz, donde el verde y los neutros hacen todo el trabajo.

Esta documentación hace una excepción deliberada a esa regla. Las tarjetas de «Hazlo» y «No lo hagas» de más abajo usan verde y rojo, porque un sistema de diseño que se documenta a sí mismo es el único lugar donde esas señales encajan fuera de la prosa.

Color de ilustración

La interfaz se sostiene sobre un solo verde, pero las cabeceras del blog llevan una paleta propia. Funciona igual en miniatura: un repertorio fijo de diez, la lima de la marca siempre presente, y un suelo suave por serie. Cómo se dibujan las cabeceras está en la página de Medios.

La paleta compartida

Los diez, leídos de los posts reales al compilar. Cada ilustración usa solo unos pocos, y de ahí viene la variedad entre cabeceras; el repertorio nunca cambia.

  • Lima
  • Azul marino
  • Coral
  • Verde azulado
  • Ciruela
  • Ámbar
  • Rosa pálido
  • Celeste
  • Carbón
  • Arena

Un fondo por serie

Los fondos quedan deliberadamente fuera de la paleta: tintes suaves, casi blancos, que se leen como suelo y no como uno de los diez. Cada serie publicada conserva su propio tinte, así que una serie se lee como un conjunto en el feed: su identidad vive en ese fondo. Abajo, todo el repertorio descansa sobre cada fondo de serie: la mezcla cambia por imagen, la familia nunca.

  • State Management
  • RN Module Federation
  • RN Foundations
  • Hiring

Uso del color

Hazlo

Body copy stays neutral.
Deja que el verde signifique una sola cosa: interacción o énfasis. Si algo es verde, debería poder tocarse o merecer atención.

No lo hagas

Introducir un segundo acento. Un color nuevo roba el significado que carga el verde.

Hazlo

A readable green link
Usa el verde de texto para el texto y los enlaces verdes, para que siga siendo legible sobre un fondo claro.

No lo hagas

Small lime text on white fails the bar
Pintar el lima de marca sobre texto pequeño en blanco. No supera el umbral de contraste; para eso está el verde de texto.

Hazlo

Diseña cada superficie en ambos temas a la vez. Los pares de tokens hacen que eso sea lo normal, no una ocurrencia tardía.

No lo hagas

Recurrir a un color de aviso en la interfaz. Esos pertenecen a la prosa de los artículos.
¿Has visto algo mal en esta página? Escríbeme