Дизайн-система
@geek.moscow/design-sys — общий UI-пакет geek.moscow. Он переводит брендовые правила в токены, тему, типографику, компоненты и документированные примеры. Пакет используют продуктовый frontend, административное приложение, исследовательский интерфейс ФСП, страница ожидания и брендбук.
Источники: README пакета, реализация, разрешение расхождений, миграция, покрытие. Репозиторий: https://gitlab.geek.moscow/geek.moscow/design-sys.
Основа визуального языка
Исходные материалы — брендбук ФСП и направление «Sport-Tech Competitive Grid». Интерфейс сочетает чёткую сетку, выразительные показатели, акцентный фиолетовый цвет и различимые состояния. Обычный текст набирается Inter, данные, идентификаторы и код — JetBrains Mono.
Токены разделены на примитивные значения и смысловые роли: приложению следует выбирать цвет по назначению элемента, а не произвольно повторять hex-коды. Разногласия между исходными материалами разобраны в отдельном документе: например, основным фиолетовым выбран #402FFF, фоном #EDEDED, срочным акцентом #EC1D35.
Токены
Реализованы цвета, типографика, интервалы, скругления, высоты контролов, точки адаптации, тени и анимации. Они экспортируются как TypeScript-объекты geekTokens, primitiveColors, semanticColors, typographyScale и как 162 CSS-переменные с префиксом --geek- в tokens.css. Вспомогательные функции формируют карту переменных, описание типографики и коэффициенты контраста.
| Группа | Значения |
|---|---|
| Фирменный фиолетовый | Основной #402FFF, дополнительные #3020E0, #2700DD |
| Основной тёмный текст | #1B1C21, #2D2E37 |
| Нейтральная палитра | Фон #EDEDED, граница #D8D9E0, подпись #5F626E |
| Срочный акцент | #EC1D35, #D0142B |
| Ошибка | #BA1A1A |
| Успех | #1FA971, текст #12754E |
| Предупреждение | #FF9900, текст #9A5B00 |
| Тёмная поверхность | #101216 |
| Скругления | 2 / 4 / 6 для контролов, 12 для карточек, 20 для контейнеров, полностью округлённая форма |
| Интервалы | База 8 px, значения от 4 до 48; межколоночные интервалы 12 / 20 / 24; поля 16 / 32 / 48 |
| Высота контролов | 32 / 40 / 44; большие кнопки — 48 |
| Адаптация | Планшет 768, desktop 1280, максимальная ширина 1440 |
| Длительность анимаций | 120 / 200 / 320 мс |
Типографика и тема
Шкала содержит 19 уровней от headlineXl до buttonLabel, включая роли для данных: dataDisplay, dataMetric, labelCode, tableHeader, navItem, tabLabel. Inter отвечает за основной интерфейсный текст, JetBrains Mono — за показатели, идентификаторы, коды и терминальные блоки.
GeekProvider оборачивает приложение, подключает тему и русскую локаль. GeekPortalThemeSync сохраняет оформление модальных окон, выдвижных панелей и уведомлений, которые рендерятся через порталы.
styles.css объединяет токены, шрифты, базовые стили, исправления доступности и типографику компонентов. Inter Variable, Inter Italic Variable и JetBrains Mono Variable поставляются внутри пакета через fonts/*.
Фирменные компоненты
| Компонент | Назначение |
|---|---|
Button |
Варианты primary, secondary, outline, ghost, link, podium, urgent; необязательная стрелка |
GeekInput |
Поле ввода с режимом mono для идентификаторов и кодов |
Typography, Title, Text |
Роли текста bodyLg, bodyMd, bodySm, labelCaps, mono, cardHeading, nav, filterLabel, formLabel |
Metric |
Крупный показатель, три размера и тона default, brand, urgent, success |
StatusTag |
Метка состояния: success, warning, error, processing, default, urgent |
Badge, VerifiedBadge, RankBadge |
Счётчики, знак подтверждения и места пьедестала от первого до третьего |
useGeekMessage, useGeekNotification |
Хуки сообщений и уведомлений с общей темой |
CandidateCardShowcase |
Эталонная композиция карточки инженера для обратного найма |
Дополнительно пакет предоставляет 72 тематизированных компонента общего назначения: компоновку, навигацию, формы, выбор значений, отображение данных, оверлеи и обратную связь. Приложения получают их из единого пакета с согласованным оформлением.
Доступность и Storybook
Контраст проверяется вспомогательной функцией и отдельной историей Storybook. В зафиксированном обзоре исправлений контраст вспомогательного текста предупреждений повышен с 2,14:1 до 5,43:1, восстановлен видимый фокус пагинации. Истории также проверяют фокус и состояния компонентов.
Storybook публикуется по адресу design-system.geek.moscow и служит каталогом компонентов и основой визуальных проверок.
| Группа | Содержимое |
|---|---|
| Foundation | Colors, Contrast, Coverage, DataTypography, Dimensions, FocusAudit, Typography, TypographyRoles |
| Components | Кнопки, фирменные элементы, данные, формы, ввод, навигация, оверлеи, выбор значений и обратная связь |
| Examples | ComposedPage, ThemeRegression, TokenOverrideVerify |
| Page layouts | Dashboard, EmptyLoadingError, MasterDetail, MultiStep, Profile, Registry, ResponsiveGrid, Settings |
Макеты представлены для desktop 1440, планшета 768 и телефона 390. Скрипт покрытия и генерируемая матрица фиксируют присутствие всех 66 поддерживаемых компонентов в историях. Число 66 относится к матрице Storybook, а 72 — к набору предоставляемых общих компонентов; это разные показатели.
Сборка и поставка
Сборка tsup создаёт ESM, CommonJS и декларации типов. Скрипты генерируют CSS и копируют шрифты. Точки экспорта: корень пакета, styles.css, tokens.css, fonts/*.
В исходном обзоре зафиксирована публикация версии 0.1.0 в npm-реестр Yandex Cloud registry.yandexcloud.net/npm/cn1iea9trrtg53v8m81n с анонимным чтением. Frontend устанавливает пакет оттуда; брендбук и explorer ФСП используют локальную файловую зависимость. Изменение пакета попадает в опубликованные приложения после обновления зависимости, сборки и публикации соответствующего приложения.
Проверки пакета включают unit-тесты в jsdom, publint, проверку совместимости деклараций типов, тест подключения в приложении-потребителе и скрипт браузерных снимков. В последнем успешном прогоне, указанном английским обзором, было 86 тестов; это исторический результат, а не новый запуск.
Ограничения и исходники дизайна
Полной тёмной темы пока нет: существуют инверсные и терминальные токены. Шрифты поставляются как TTF без подмножеств woff2.
Помимо брендовых материалов, источниками служат экспорт Google Stitch, его DESIGN.md и 103 изображения экранов desktop/mobile, включая пустые состояния, всплывающие элементы и ошибки. Все эти экраны с описаниями собраны на странице экранов и макетов. Задания на экраны и компоненты связывают визуальные примеры с продуктовым поведением.