Палитра бренда
Основные цвета бренда Apothem и пятнадцать фирменных цветов окружений, определённых на странице «Цвета окружений». Единственный источник истины для основных цветов — канонические токены дизайна в assets/design-tokens.css; сайт отражает эти значения.
Основная палитра
Каноническая палитра — нейтральная рампа slate, акцентная рампа emerald и семантические
оттенки — принадлежит токенам дизайна в
assets/design-tokens.css
(и его зеркалу assets/design-tokens.json). Тема сайта в
site/app/global.css
переформулирует значения семантических токенов в OKLCH в CSS-переменных, которые использует тема Fumadocs:
переменные фона страницы, текста, первичного цвета, границы и кольца фокуса разрешаются в точные шаги токенов
(проверка lib/theme-tokens.test.mjs удерживает переменные фона, переднего плана, первичного цвета и кольца
в соответствии с ними). Рампы apothem-*, polygon-* и field-*, объявленные в том же файле, — это производные
приближения рамп токенов, а не их копии, и они не входят в спецификацию. Каждое значение
ниже — это шаг рампы slate или emerald в токенах дизайна; имя шага, например slate-600,
обозначает значение этой рампы.
| Роль | Токен (CSS) | Светлый режим | Тёмный режим | Использование |
|---|---|---|---|---|
| Первичный | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | Заголовки, текст навигации, первичные поверхности чтения. |
| Акцент | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | Активные ссылки, кольца фокуса, выбранная навигация. |
| Основной текст | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | Текст прозы по умолчанию. |
| Основной фон | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | Фон по умолчанию. |
| Фон навигации | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | Полосы шапки и навигации. |
Палитра окружений
Цвета окружений находятся на странице Цвета окружений.
Знак Apothem не несёт цвета окружений; его шестиугольник, центральный узел и
конечные узлы описаны в разделе о знаке файла
assets/DESIGN-SYSTEM.md.
Цвета окружений определены на той странице, а не в токенах дизайна и не в
site/app/global.css,
которые содержат только основную палитру.
Использование в документации
Палитра подключается через глобальную таблицу стилей site/app/global.css, импортируемую
корневым макетом. Варианты светлого и тёмного режима переключаются вместе с состоянием
класса .dark темы.
Обновления
Палитра обновляется только тогда, когда сдвигается основной цвет (slate / emerald) или
окружение утверждает изменение цвета бренда выше по потоку. Изменения по окружениям
распространяются атомарно через Цвета окружений и каждый
затронутый SVG-мастер под assets/src/.
Руководство по бренду
Дисциплина именования бренда Apothem, варианты логотипа, цветовая палитра и руководство по ресурсам для согласованного применения бренда.
Фирменные цвета окружений
Палитра цветов по окружениям, используемая на всём сайте проекта Apothem и в каждой архитектурной диаграмме. Единый источник истины: один цвет на окружение, один концентратор apothem.