Paleta de marca
Colores de marca centrales de Apothem y los quince colores de marca de los entornos, que se definen en la página Colores de entornos. La única fuente de verdad de los colores centrales son los tokens de diseño canónicos en assets/design-tokens.css; el sitio refleja esos valores.
Paleta central
La paleta canónica —la rampa neutra slate, la rampa de acento emerald y los matices
semánticos— pertenece a los tokens de diseño en
assets/design-tokens.css
(y su espejo assets/design-tokens.json). El tema del sitio en
site/app/global.css
vuelve a expresar los valores de los tokens semánticos en OKLCH en las variables CSS que consume el tema de Fumadocs: las
variables de fondo de página, texto, primario, borde y anillo de foco se resuelven en los pasos exactos de los tokens (la
comprobación lib/theme-tokens.test.mjs exige que las variables de fondo, primer plano, primario y anillo se ajusten
a ellos). Las rampas apothem-*, polygon-* y field-* declaradas en el mismo archivo son aproximaciones
derivadas de las rampas de los tokens, no copias, y no forman parte de la especificación. Cada
valor a continuación es un paso de la rampa slate o emerald de los tokens de diseño; un nombre de paso como slate-600
se refiere al valor de esa rampa.
| Rol | Token (CSS) | Modo claro | Modo oscuro | Uso |
|---|---|---|---|---|
| Primario | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Encabezados, texto de navegación y superficies principales de lectura. |
| Acento | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Enlaces activos, anillos de foco y navegación seleccionada. |
| Texto del cuerpo | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Texto de prosa predeterminado. |
| Fondo del cuerpo | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Fondo predeterminado. |
| Fondo de navegación | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Bandas de encabezado y navegación. |
Paleta de entornos
Los colores de los entornos viven en Colores de entornos. La marca de Apothem no lleva ningún color de entorno; su hexágono, su nodo central y sus nodos terminales se describen en la sección de la marca de assets/DESIGN-SYSTEM.md. Los colores de los entornos se definen en esa página, no en los tokens de diseño ni en site/app/global.css, que contienen solo la paleta central.
Uso en la documentación
La paleta se conecta a través de la hoja de estilos global site/app/global.css,
importada por el layout raíz. Las variantes de modo claro y oscuro cambian con el estado
de la clase .dark del tema.
Actualizaciones
La paleta se actualiza solo cuando un color central cambia (slate / emerald) o un entorno
ratifica un cambio de color de marca aguas arriba. Los cambios por entorno se propagan
atómicamente a través de Colores de entornos y cada maestro
SVG afectado bajo assets/src/.
Directrices de marca
Disciplina de nomenclatura de la marca Apothem, variantes del logo, paleta de colores y directrices de recursos para una aplicación de marca coherente.
Colores de marca de los entornos
Paleta de colores por entorno usada en el sitio web del proyecto Apothem y en cada diagrama de arquitectura. Una única fuente de verdad: un color por entorno, un concentrador apothem.