Брендбук
ui-react-brandbook/ — живой брендбук geek.moscow: одностраничное приложение с правилами бренда, совместным использованием символики ФСП, типографикой, токенами и реальными UI-компонентами. Он публикуется по адресу brandbook.geek.moscow; компоненты, из которых он собран, показаны в Storybook на design-system.geek.moscow, а готовые экраны продукта — на странице экранов и макетов. Репозиторий: https://gitlab.geek.moscow/geek.moscow/ui-react-brandbook; документация приложения.
Назначение
Брендбук связывает исходные брендовые материалы с интерфейсами продукта. Команда может увидеть, как логотипы, шрифты, цвета и компоненты работают совместно, и использовать эти примеры при разработке новых экранов и презентаций.
Примеры рендерятся компонентами @geek.moscow/design-sys. Такая связь позволяет проверять брендовые правила на действующем интерфейсе. Опубликованный сайт отражает версию пакета, с которой он был собран; обновление библиотеки требует новой сборки и публикации сайта.
Двенадцать разделов
| № | Раздел | Содержание |
|---|---|---|
| 1 | Бренд и совместная символика ФСП | Текстовый знак geek.moscow, композиция с логотипом ФСП, институциональная шапка |
| 2 | Спецификация JetBrains Mono | Назначение моноширинного шрифта, области применения, начертания и размеры |
| 3 | Сравнение шрифтовых пар | Inter и альтернативные текстовые гарнитуры, обоснование выбранной пары |
| 4 | Типографическая шкала | 19 уровней из токенов с размером, насыщенностью, межстрочным и межбуквенным интервалом |
| 5 | Лигатуры, код и ASCII | Кодовые блоки, идентификаторы и оформление терминального вывода |
| 6 | Токены и палитра | Примитивные и семантические цвета, скругления, интервалы и тени |
| 7 | Живые UI-компоненты и терминал | Кнопки, показатели, статусы, значки и терминальная панель |
| 8 | Элементы форм | Поля, списки, выбор дат и значений, переключатели |
| 9 | Значки и подтверждение | Знак проверки, места пьедестала, счётчики |
| 10 | Карточки обратного найма | Примеры карточек инженеров в каталоге работодателя и фильтры |
| 11 | Таблица результатов | Соревновательная таблица рейтинга |
| 12 | Значки дисциплин | Иконки пяти дисциплин ФСП |
Страница включает институциональную шапку, главный баннер, закреплённую навигацию по разделам и подвал. Демонстрационные кандидаты и фильтры используют статические примеры; брендбук не является работающим каталогом найма.
Материалы бренда
Каталог docs/brand содержит извлечённые брендовые материалы:
- Логотипы: четыре SVG-знака с белыми вариантами, крупный знак, синие и белые PNG. Совместная композиция с ФСП и текстовый знак размещены также в
public/assets/приложения. - Шрифты: Inter Variable и Italic со статическими начертаниями; JetBrains Mono 2.304 в variable, static и woff2. Оба семейства распространяются по Open Font License.
- Фотографии и графику для главных экранов и фоновых композиций.
- Документ направления «Sport-Tech Competitive Grid» с ролями цветов, типографической шкалой и правилами кнопок, карточек, меток, полей, таблиц результатов и флажков.
Официальный PDF брендбука хранится вместе с исходным заданием в материалах трека. Правила использования в коде раскрыты в дизайн-системе.
Сборка и публикация
Приложение использует React 19 и Vite, зависит от дизайн-системы. Статические файлы обслуживает Caddy. Образ собирается по infra/k3s/geek-moscow-yc/docker/brandbook.Dockerfile и публикуется как cr.yandex/crp5jbsajr22cc3jj3vr/geek-moscow-brandbook:<sha8>.
Развёртывание в Yandex Cloud описано в infra/k3s/geek-moscow-yc/sites.yaml вместе со Storybook; публичные адреса brandbook.geek.moscow и design-system.geek.moscow обслуживаются владельцем проекта. Процедура автоматизирована скриптом infra/scripts/publish-geek-moscow-sites.sh. В исходном обзоре зафиксированы успешные build и lint последнего указанного прогона; при создании русских страниц они повторно не запускались.