Документация · UI

Design System

Токены, типографика, сетка, компоненты и блоки лонгрида кейса

Переключайте тему, акцент и шрифт через плавающую панель справа. При глобальных правках стилей (токены, компоненты, блоки лонгрида) обновляйте и эту страницу — живой каталог UI проекта.

Цвета

Акцент и «холод/тепло» всего UI задаются тремя числами в модели HSL (Hue — оттенок, Saturation — насыщенность, Lightness — светлота) на <html>. Из них собирается --accent и производные токены; нейтральные фоны слегка подмешивают тот же оттенок (--neutral-accent-tint). Светлая/тёмная тема — data-theme, mesh — data-mesh-bg. Меняется в FAB справа.

Что такое --theme-h, --theme-s, --theme-l

В CSS это выглядит так: --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)). Значения пишутся в localStorage (siteThemeV1) и подставляются inline-скриптом в head, чтобы не было вспышки «чужого» цвета при загрузке.

--bg
--bg-elevated
--surface
--text
--text-muted
--line
--accent
--accent-text
--accent-soft

Дополнительно: квадратичные оттенки mesh — --accent-square-2 … 4; они зависят от hue.

Шрифты

Пара шрифтов — data-font на <html> (FAB «Типографика»): задаёт --font-accent (заголовки) и --font (проза). Шкала в таблицах: класс, пример, назначение.

Семейства

data-font Стек Где
merriweather Merriweather + Alice Пара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки
mono Source Code Pro + PT Mono Моноширинная пара
geologica Geologica + PT Sans Гротеск + нейтральная проза

Типографическая шкала

Класс Пример Назначение
.hero__eyebrow

Подпись секции

 Hero, ввод кейса
.hero__title

Display заголовок

H1 главной; на DS уменьшен для колонки
.section__title

Секция

 «Навыки», «Портфолио», контакты; основной шрифт, без капса
.case-page__h1

Заголовок страницы

 H1 кейса / Design System
.case-page__sub

Лид под заголовком

 Подзаголовок под H1
.section__prose

Основной текст абзаца.

 Проза, списки, ссылки в статье
h2 в .case-article

Подсекция H2

 Разделы лонгрида (как «Цвета»)
h3 в .case-article

Подсекция H3

 Подразделы внутри H2; отступы в main.css: сверху 3.25rem, снизу 1.5rem, после figure 4rem, h3+h3 3.5rem

Ритм и код

Пример ритма:

  1. нумерованный пункт;

Инлайн code и блок:

--font: "Alice", system-ui, serif;
--font-accent: "Merriweather", var(--font);

Заголовки используют clamp() — масштаб от вьюпорта; подробнее в разделе «Сетка».

Сетка и адаптив

Отдельной 12-колоночной сетки нет: full-bleed layout с боковыми полями --space и локальными CSS Grid внутри секций. Контентная колонка DS и кейсов — .case-article (max-width 48rem).

Базовый каркас

Брейкпоинты

От Что меняется
860px .hero__grid → 2 колонки 1.15fr 0.85fr
760px / 1180px .projects-carousel: --projects-visible 1 → 2 → 3 карточки
720px .skills-category__grid → 2 колонки
1024px Навыки: 6-колоночная мозаика (grid-column: span …)
560px / 1024px .contact-grid → 2 → 4 колонки
48rem / 28rem Галерея кейса: ≤2 col → 1 col
640px case-media-gallery--wide схлопывается в ширину колонки

Hero: одна → две колонки

Схема .hero__grid (сжато до 860px):

Контакты: 1 → 2 → 4

Демо .contact-grid (плейсхолдеры, без переходов):

Навыки: мозаика на широком экране — см. главную, #skills. Портфолио: карусель на 100vw с --projects-card-width и JS-прокруткой — на главной #projects.

Wide в кейсах

.case-media--wide, .case-media-gallery--wide и .case-callout шире колонки статьи: min(100vw − 2×padding, content + 8rem), с полями --space. На узком экране (до 640px) wide схлопывается в ширину колонки. Кадры с data-image-viewer — обводка и hover как у .case-video-shell (живые примеры — демо элементов кейса). Подпись под видео — figcaption по центру колонки.

Типографика и motion

Fluid type: clamp() на .hero__title, .section__title, .case-page__h1. Скругления (data-radius) сетку не меняют. Для длинных скринов и анимаций учитывается prefers-reduced-motion: reduce.

Компоненты

Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.

Кнопки

Primary flat Primary raised Secondary flat Secondary raised

.btn .btn--primary | secondary | ghost · .btn--flat | raised · .btn__icon

Теги

.hero__tags / .hero__tag

.portfolio-card__tags / .portfolio-card__tag

Карточка портфолио

.portfolio-card и дочерние BEM-классы

Заглушка при загрузке изображений

Пока img ещё не загрузился, initImageLoadPlaceholder вешает .is-img-loading на картинку и .has-img-loading на обёртку. Слой фона — ::before, один блеск слева направо — ::after (img-ph-shine-sweep). Иконки, SVG и мелкие картинки до 40px пропускаются; отключить точечно: data-no-img-placeholder. Ниже — зафиксированное демо (на сайте классы снимаются после load).

.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)

Карточка навыка

skill-task-card__task — формулировка задачи от бизнеса.

skill-task-card__solution — первый подход к решению.

Второй пункт в зоне решений.

.skill-task-card__task · __solutions · __solution

Callout

Акцентный блок лонгрида: шире колонки (как wide-медиа), текст в .case-callout__content чуть крупнее основного абзаца.

.case-callout · .case-callout__emoji · .case-callout__emoji--pulse · .case-callout__content

Контактные карточки

На главной в сетке четыре карточки (1→2→4 колонки). Здесь два примера — сетка принудительно в две колонки.

.contact-card--link · --action · --brand-*

Секция с фоном

На главной полоса .section--surface визуально читается через mesh; в кейсах фон страницы ровный — ниже компактное демо с background: var(--surface).

section__title

Фрагмент .section.section--surface + .section__inner

.section · .section--surface · .section--tight · .section__inner

Блоки

Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials. Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса.

Демо элементов кейса

Активность

На главной в секции #mini-projects карточки mp-card в masonry-сетке. Типы, клетки и живая раскладка вынесены на отдельную страницу.

Каталог карточек активности