Paleta de marca
Cores de marca centrais do Apothem e as quinze cores de marca dos harnesses, que são definidas na página Cores dos harnesses. Os tokens de design canônicos em assets/design-tokens.css são a única fonte da verdade para as cores centrais; o site espelha esses valores.
Paleta central
A paleta canônica — a rampa neutra slate, a rampa de acento emerald e os matizes
semânticos — pertence aos tokens de design em
assets/design-tokens.css
(e seu espelho assets/design-tokens.json). O tema do site em
site/app/global.css
reapresenta os valores dos tokens semânticos como OKLCH nas variáveis CSS que o tema do Fumadocs
consome: as variáveis de fundo da página, texto, primária, borda e anel de foco resolvem para os passos
exatos dos tokens (a verificação lib/theme-tokens.test.mjs mantém as variáveis de fundo, primeiro
plano, primária e anel fiéis a eles). As rampas apothem-*, polygon-* e field-* declaradas no
mesmo arquivo são aproximações derivadas das rampas dos tokens, não cópias, e não fazem parte da
especificação. Cada valor abaixo é um passo da rampa slate ou emerald nos tokens de design; um nome
de passo como slate-600 se refere ao valor dessa rampa.
| Papel | Token (CSS) | Modo claro | Modo escuro | Uso |
|---|---|---|---|---|
| Primária | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Títulos, texto de navegação, superfícies de leitura primárias. |
| Acento | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Links ativos, anéis de foco, navegação selecionada. |
| Texto do corpo | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Texto de prosa padrão. |
| Fundo do corpo | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Fundo padrão. |
| Fundo de navegação | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Faixas de cabeçalho e navegação. |
Paleta dos harnesses
As cores dos harnesses estão em Cores dos harnesses. A marca Apothem não carrega nenhuma cor de harness; seu hexágono, seu nó central e seus nós terminais são descritos na seção da marca de assets/DESIGN-SYSTEM.md. As cores dos harnesses são definidas nessa página, não nos tokens de design nem em site/app/global.css, que trazem apenas a paleta central.
Uso na documentação
A paleta é conectada por meio da folha de estilos global site/app/global.css, importada pelo layout raiz. As variantes de modo claro e escuro alternam com o estado da classe .dark do tema.
Atualizações
A paleta é atualizada apenas quando uma cor central muda (slate / emerald) ou um harness ratifica uma mudança de cor de marca a montante. As mudanças por harness se propagam atomicamente por Cores dos harnesses e por cada mestre SVG afetado sob assets/src/.
Diretrizes de marca
Disciplina de nomenclatura da marca Apothem, variantes do logotipo, paleta de cores e diretrizes de ativos para uma aplicação de marca consistente.
Cores de marca dos harnesses
Paleta de cores por harness usada em todo o site do projeto Apothem e em cada diagrama de arquitetura. Uma única fonte da verdade: uma cor por harness, um hub apothem.