Display / 40px
Playfair Display · 600 · интерлиньяж 1.02 · трекинг −0.025em. Для главных заголовков и ключевых цифр. Пример: «Архитектура визуального роскошества».
Game.SRC · ядро системы 4.2 · технический разбор
Ядро GameSRC: токены, типографика и геометрия
Пиксельная точность — это дисциплина, а не вкус. Здесь мы разбираем фундамент системы: типографические масштабы, сетки, цветовые токены и каскад состояний, на которых держится вся эстетика Game.SRC.
4.9 / 5 · 120+ продуктовых команд · 142 компонента
core · 4.2.0
96базовых токенов
Философия
Пиксельная точность как система
Роскошь в интерфейсе — это не украшение, а отсутствие случайности. Каждый интервал, тень и кегль в Game.SRC вытекает из единого набора правил: 8-пиксельной сетки, модульного типографического масштаба и семантических токенов, которые описывают намерение, а не значение.
Мы не фиксируем «кнопка имеет отступ 16 пикселей». Мы фиксируем, что отступ кнопки равен пространственному токenu --space-3. Когда бренд меняется или продукт масштабируется, правится один источник правды — и вся экосистема остаётся выверенной. Это и есть архитектура визуального роскошества.
Типографика
Атлас типографических масштабов и интерлиньяж
Два шрифта, восемь уровней. Display-семейство Playfair Display задаёт характер, Manrope — операционную ясность. Каждый уровень имеет фиксированный кегль, интерлиньяж и трекинг.
Heading / 28px
Playfair Display · 600 · интерлиньяж 1.08 · трекинг −0.02em. Заголовки секций и карточек. Пример: «Атлас типографических масштабов».
Subheading / 22px
Playfair Display · 600 · интерлиньяж 1.2. Подзаголовки и акцентные подписи. Пример: «Палитра цветовых токенов».
Lead / 18px
Manrope · 500 · интерлиньяж 1.55. Ведущие абзацы и вступительные тексты. Пример: этот текст, который вы читаете прямо сейчас.
Body / 16px
Manrope · 500 · интерлиньяж 1.62. Основной текст интерфейса. Базовый уровень, к которому привязаны все остальные.
Eyebrow / 12px
Manrope · 700 · интерлиньяж 1.4 · трекинг +0.24em · uppercase. Метки, навигационные якоря, бейджи версий. Пример: «Типографика».
Геометрия
Система сеток и отступов
Вся геометрия Game.SRC построена на 8-пиксельной базе. Пространственные токены --space-1…--space-8 управляют отступами, а контейнер ограничивает ширину в 1240 пикселей с гибкими полями.
Контейнер
Максимальная ширина 1240px, поля clamp(20px, 4vw, 56px). Ничего не прилипает к краям страницы — контент всегда живёт в выверенном коридоре.
Сетка 8px
Базовая модульная сетка 8 пикселей. Все отступы кратны ей: 8, 16, 24, 32, 40, 48, 56, 64. Это гарантирует ритм и предсказуемость на любом экране.
Скругления 2–4px
Резкие, редакционные радиусы: --radius:3px для крупных блоков и --radius-s:2px для мелких. Никаких «мягких» пузырей — только выверенная геометрия.
Секционные отступы
Вертикальные отступы секций clamp(64px, 9vw, 132px). Они масштабируются с шириной вьюпорта, сохраняя дыхание между блоками.
Отступы карточек
Внутренние поля карточек clamp(22px, 3vw, 40px). Единый ритм внутри любого компонента — от кнопки до дашборда.
Адаптивные брейкпоинты
Три переломных точки: 1000px, 900px и 640px. Сетка перестраивается от трёх колонок к одной, сохраняя пиксельную точность на каждом шаге.
Цвет
Палитра цветовых токенов
Семантическая палитра из графита, платины и фиолетового 288°. Каждый токен описывает намерение, а не значение — светлый и тёмный режимы используют одни и те же имена.
Графит · Ink
Шкала текста и тёмных поверхностей: --ink-900 #151218, --ink-700 #2a2430, --ink-400 #6d6573. Основа тёмного режима.
Слоновая кость · Surface
Светлые поверхности и фоны: --surface-50 #fbfaf8, --surface-200 #e9e4dc, --platinum #c6c1d2. Основа светлого режима.
Фиолет · Accent
Акцентный цвет 288°: --accent #7a4fb0, --accent-deep #533284, --accent-soft #ece5f6. Единый источник правды для всех действий.
96базовых токенов
2режима: свет и тьма
288°оттенок акцента
1:1соответствие имён режимов
Состояния
Каскадное наследование состояний компонентов
Компоненты не переопределяют себя. Состояния — default, hover, active, focus, disabled — наследуются каскадно от токенов и модификаторов BEM. Одна правка токена обновляет всё дерево.
Default
Базовое состояние наследует цвет фона и текста из токенов. Пример — Ghost с рамкой --ink-300.
Hover
При наведении компонент смещается на −2px и усиливает тень. Primary получает более глубокую фиолетовую тень без смены структуры.
Active
При нажатии смещение обнуляется — компонент «прижимается» к поверхности. Каскад гарантирует, что active всегда наследует базовые цвета родителя.
Focus
Фокус наследует акцент: рамка --accent и мягкое кольцо --accent-soft. Доступность без потери эстетики.
Disabled
Отключённое состояние наследует приглушённые токены и отключает переходы. Компонент остаётся в сетке, но визуально «уходит» на задний план.
Модификаторы BEM
Варианты — --primary, --ghost, --on-dark — наследуют базовые состояния и переопределяют только фон и текст.
Хотите увидеть ядро в действии?
Откройте интерактивный Showroom Game.SRC — там можно менять токены в реальном времени и смотреть, как каскад обновляет все компоненты.
Вопросы
Частые вопросы о ядре
Коротко о главном — о совместимости, кастомизации и лицензировании базовых токенов.
Да. Токены вынесены в CSS-переменные и Figma-токены. На этапе онбординга мы пересобираем слой значений под ваши цвета и типографику — архитектура и имена компонентов остаются неизменными.
Оба режима используют одни и те же семантические имена. Переключение — это замена значений токенов на уровне [data-theme] или системного prefers-color-scheme. Компонентам не нужно меняться.
React, Vue, Svelte и нативные Web-компоненты. Токены доступны как CSS-переменные, Figma-токены и JSON для автоматической генерации в CI-пайплайне.
В каждый тариф входит доступ к архитектору интерфейсов, ревью новых экранов и квартальные сессии по эволюции системы. Для тарифа «Атelier» — выделенная команда и приоритетная поддержка.