Палитра бренда
Основные цвета бренда Apothem и семнадцать цветов брендов окружений. Единственный источник истины — канонические токены дизайна в assets/design-tokens.css; сайт отражает эти значения.
Основная палитра
Каноническая палитра — нейтральная рампа slate, акцентная рампа emerald и семантические
оттенки — принадлежит токенам дизайна в
assets/design-tokens.css
(и его зеркале assets/design-tokens.json). Тема сайта в
site/app/global.css
отражает эти значения токенов в CSS-переменные, которые потребляет тема Fumadocs. Каждое
значение ниже восходит к каноническому шагу рампы.
| Роль | Токен (CSS) | Светлый режим | Тёмный режим | Использование |
|---|---|---|---|---|
| Основной | --brand-text | slate-900 #0f172a | slate-50 #f8fafc | Заголовки, текст навигации, основные поверхности чтения. |
| Акцент | --sl-color-accent | emerald-600 #059669 | emerald-400 #34d399 | Активные ссылки, кольца фокуса, выбранная навигация. |
| Основной текст | --brand-muted | slate-600 #475066 | slate-300 #c2ccda | Текст прозы по умолчанию. |
| Фон тела | --brand-surface | white #ffffff | slate-900 #0f172a | Фон по умолчанию. |
| Фон навигации | --brand-surface-muted | slate-50 #f8fafc | slate-950 #080c15 | Полосы заголовка и навигации. |
| Фон кода | --brand-code-bg | slate-900 #0f172a | slate-950 #080c15 | Поверхности встроенного / блочного кода. |
Палитра окружений
Цвета окружений находятся в Цвета окружений.
Геометрическое отображение на шестиугольник знака Apothem — его центральный узел и
конечный узел — встроено в раздел бренда. CSS-источник истины в
site/app/global.css
подключает каждый токен к его CSS-переменной.
Использование в документации
Палитра подключается через глобальную таблицу стилей site/app/global.css, импортируемую
корневым макетом. Варианты светлого и тёмного режима переключаются в зависимости от
состояния класса .dark темы.
Обновления
Палитра обновляется только тогда, когда меняется основной цвет (slate / emerald) или
окружение ратифицирует изменение цвета бренда выше по потоку. Изменения по окружениям
распространяются атомарно через site/app/global.css,
Цвета окружений и каждый затронутый SVG-мастер под
assets/src/.
Руководство по бренду
Дисциплина именования бренда Apothem, варианты логотипа, цветовая палитра и руководство по ресурсам для согласованного применения бренда.
Фирменные цвета окружений
Палитра фирменных цветов по окружениям, используемая на всём сайте проекта Apothem, в знаке Apothem и в каждой архитектурной диаграмме. Единый источник истины — семнадцать фирменных цветов, один концентратор apothem.