Вторум: знак и палитра
Всё ниже снято с продукта: цвета — из apps/web/src/styles.css, файлы — из apps/web/src/assets и apps/web/public, контрасты посчитаны. Это опора для новых элементов интерфейса и для всего, что выходит наружу — писем, публикаций, презентаций.
Две отдельные вещи
Знак — градиентная «V». Надпись — слово «Vtorum». Это два самостоятельных элемента, и в один блок они не собираются: нет и не должно быть файла, где знак и название стоят вместе.
Знак ставится там, где название уже известно: панель приложения, вкладка, иконка на рабочем столе, аватар. Надпись — там, где продукт представляется впервые: экран входа, публикация, письмо, обложка. Если нужны оба, они разносятся по композиции, а не склеиваются.
Правила
Знак — один файл на оба фона
Он цветной на прозрачном и одинаково читается и на светлом, и на ночном. Ночной версии у него нет намеренно: она была бы копией.
Надпись — два файла
Тёмно-синяя #030736 для светлого фона, белая для тёмного. Подменяется сам файл, а не подкрашивается: пересчёт палитры картинок не касается. Оба файла одной геометрии, иначе при смене темы надпись прыгает.
Свободное поле и размеры
Вокруг — не ближе половины высоты знака. Знак от 24 px: ниже теряется вырез между плечами. Надпись от 120 px по ширине. Под знаком не должно быть цветной плашки — он сам себе форма и цвет.
Чего не делают
Не соединяют знак с названием в один блок. Не растягивают непропорционально, не перекрашивают градиент, не обводят, не кладут на пёстрый фон, не подменяют цвет надписи фильтром вместо готового файла.
Градиент знака
Это цвета знака, а не палитра интерфейса. В макетах они берутся только для декоративной графики, связанной с брендом. Кнопку или ссылку красят бирюзовым из палитры ниже.
Палитра · дневная
Основной текст — #1F2928 на фоне #F8F9F9. Цвет надписи #030736 — её собственный, для интерфейсного текста не используется.
Палитра · ночная
Те же имена, другие значения. Ночной лист собирается из дневного командой node scripts/generate-dark-theme.ts — править его руками бесполезно, следующий прогон затрёт; ручные поправки живут в dark-theme-overrides.css.
--teal#50dfe5
--teal-dark#6fe6eb
--teal-soft#0f3739
--sidebar#212825
--line#2c3531
--muted#7e8d8a
--danger#d9574d
Ночной фон — #1F2424, текст — #C2CFCE. Новый элемент красится токенами, а не значениями: тогда ночная тема достаётся ему даром.
Контраст · измерено
| Пара | Что это | Контраст | Годится |
|---|---|---|---|
| Аа | Надпись на белом | 19.31 | для текста |
| Аа | Ночная надпись на ночном фоне | 15.72 | для текста |
| Аа | Основной текст на фоне | 14.16 | для текста |
| Аа | Ночной текст на ночном фоне | 9.81 | для текста |
| Аа | Ночной акцент на ночном фоне | 9.75 | для текста |
| Аа | --danger на белом | 6.57 | для текста |
| Аа | --teal-dark на белом | 4.80 | для текста |
| Аа | --muted на фоне | 4.07 | только крупным |
| Аа | --teal на белом | 2.91 | не для текста |
| Аа | Белый на бирюзовой заливке | 2.91 | не для текста |
Два правила из этих чисел
Текст акцентом — только --teal-dark. Основной --teal даёт на белом 2.91 при пороге 4.5: годится для заливок, обводок и значков, но не для букв.
Белым по бирюзовой заливке — только крупно и осторожно. Та же пара 2.91 не проходит и порог 3.0 для крупного текста.
--muted даёт 4.07 — хватает подписям от 14 px полужирным или от 18 px обычным, но не строчкам в 11–12 px.
Шрифт
Фирменная гарнитура — Gilroy, начертание Medium. Ею набрана надпись в логотипе; её же брать для обложек, презентаций и печати.
Интерфейс продукта набран Inter — она задана в :root, запасные системные. Это разные роли, и менять одну на другую не нужно.
Эта страница набрана не Gilroy: гарнитура платная, встроить её в самодостаточный файл нельзя. Заголовки здесь — Outfit, близкий по строю геометрический гротеск. Эталон — Gilroy Medium.
Иконки и превью
Иконки рабочего стола — непрозрачные
iOS игнорирует прозрачность у apple-touch-icon и заливает её чёрным, маска Android обнажает те же углы. Поэтому у иконок для рабочего стола белая подложка, а прозрачным остаётся только знак внутри приложения. Обрезаемая иконка вдобавок держит знак в центральных 55% — систему просят обрезать её под свою форму.
Как этим пользоваться
- Новый элемент интерфейса — классами и токенами продукта, а не своими значениями в разметке: тогда он сразу живёт в обеих темах.
- Понадобился новый цвет — сначала поискать подходящий токен. Если правда нужен новый, он заводится в
:rootи получает имя по роли, а не по оттенку. - Наружу — письма, публикации, презентации — идут те же файлы и та же палитра. Публикация и приложение не должны выглядеть как два разных продукта.
- Проверка — переключить тему и посмотреть: цвет, объявленный только внутри одной ветки, в другой не применится.