Дизайн-система · v2

Смарт Решения Design System

Тёмная тема по умолчанию, светлая — по выбору. Графитовая шкала, один синий акцент, острые углы, волосяные линии. Всё, что ниже, отрисовано теми же CSS-файлами, которыми собран сайт — эта страница и есть проверка системы.

Слоёв CSS: 5
Компонентов: 29
Иконок: 25
Тем: 2

01Основы

Токены и палитра

Ни один компонент не обращается к «сырому» цвету. Всё идёт через семантические псевдонимы — поэтому переключение темы это одна переопределённая группа токенов, а не второй набор стилей.

Графитовая шкала

--night-850#070A13 · страница

--surface-inverseприподнятая полоса

--ink-700#242830

--ink-500#5A6070

--ink-300#B5BAC4

--ink-100#F0F1F4

Синий акцент

--blue-900

--blue-700

--blue-600

--blue-400

--blue-300

--blue-100

Семантические псевдонимы

Токен	Роль	Образец
`--text-primary`	Заголовки и основной текст	Аа 123
`--text-secondary`	Лид-абзацы, описания	Аа 123
`--text-tertiary`	Подписи, мета, оверлайны	Аа 123
`--text-accent`	Ссылки и числовые маркеры	Аа 123
`--line-hairline`	Разделители по умолчанию
`--line-strong`	Границы контролов
`--line-heavy`	Правило 2px над блоками
`--line-accent`	Активное состояние

Поверхности

--surface-page

--surface-subtle

--surface-card

--surface-accent-soft

Стекло и свечение

.sr-glass — матовая заливка, волосяная граница, блик по верхнему краю.

.sr-glass--glow — то же плюс синее подсвечивание снизу.

Шкала отступов

1 · 4

2 · 8

3 · 12

4 · 16

5 · 24

6 · 32

7 · 40

8 · 48

9 · 64

10 · 80

11 · 96

12 · 128

Вертикальный ритм секций задаётся не шагами, а clamp(): --section-y: clamp(4.5rem, 10vw, 10rem). Поэтому мобильная вёрстка не требует ни одного !important-переопределения.

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

Три гарнитуры, одна шкала

Manrope — заголовки и числа. Golos Text — весь читаемый текст. JetBrains Mono — индексы, метки, технические подписи. Все размеры текучие.

display-xl
clamp(2.75rem, 8.4vw, 6rem)

Данные

display-l
clamp(2.375rem, 6.6vw, 4.5rem)

Знания и ИИ

h2
clamp(1.625rem, 3.1vw, 2.125rem)

Архитектура, готовая к потреблению ИИ

h4
clamp(1.125rem, 1.5vw, 1.25rem)

База знаний предприятия

body-lg
Golos Text

Мы соединяем две редко пересекающиеся дисциплины: промышленную инженерию данных и практику финансового директора.

body-sm
Golos Text

Каждый этап заканчивается артефактом, который остаётся у клиента: карта данных, модель, регламент, база знаний.

overline
0.14em трекинг

Платформа ATLAS

mono
JetBrains Mono

ODS → DDS → Витрина · 300 ТБ

03Компоненты

29 компонентов в четырёх группах

Ядро, данные, формы, навигация. Каждый — набор CSS-классов .sr-<компонент>[__часть][--вариант], без рантайма.

Button · IconButton

Primary Accent Secondary

Small Medium Large

Badge · Tag · Rule · Eyebrow

Neutral Accent Solid

07Eyebrow с индексом

Rule с меткой

Icon · 25 символов, 1.5px обводка

database brain workflow line-chart shield-check gauge file-text coins git-branch target users layers clock mail phone map-pin arrow-right arrow-up-right arrow-left check chevron-down sun moon menu x

Card · FeatureCard · KpiBlock

Card, интерактивная

При наведении: подъём на 3px, тень и синяя линия, вытирающаяся по верхней кромке.

FeatureCard

Без рамки: правило 2px сверху, которое при наведении становится акцентным.

300ТБ

KpiBlock Число анимируется при появлении в кадре

DataTable

Волосяные строки, без зебры, табличные цифры
Слой	Объём	Обновление
ODS	300 ТБ	каждые 15 мин
DDS	120 ТБ	час
Витрина	8 ТБ	час

Timeline · ProcessSteps

01
2 недели

Диагностика

На узких экранах рельс уходит влево, а маркер и срок встают в одну строку.
02
6–8 недель

Пилот

Работающий контур на реальных данных.

Звонок

30 минут.

Диагностика

Карта данных.

Пилот

Первый контур.

Контур

Полное покрытие.

TabNav

Панель «Данные». Переключение работает и с клавиатуры: ← и →.

Формы

Input Field.hint — подсказка под контролом

Input, ошибка Укажите корректный адрес

Select

Textarea

Checkbox Switch Radio

PricingCard · TeamCard

Обычная

2 неделификс

Пункт списка
Ещё пункт

Обсудить

Featured

6–8 недельпилот

Акцент стеклом, не цветом
Подсветка снизу

Обсудить

TeamCard

Партнёр

Ч/б портрет 3:4, зум при наведении

Список достижений с волосяными маркерами

04Анимация

Три уровня движения

Появление блоков, фоновое движение и реакция на действие. Всё выключается одним prefers-reduced-motion, и всё остаётся видимым, если JS не сработал.

1 · Reveal

[data-reveal] — подъём 22px + проявление, 760ms, cubic-bezier(.16,1,.30,1). Варианты: up, fade, left, right, scale, clip. [data-reveal-group] раздаёт детям задержку по 70ms.

2 · Ambient

Фоновая аврора дрейфует 24s, орбы в героях — 18–23s, по слоям архитектуры проходит линия-скан 7s. Амплитуды намеренно малы: движение должно ощущаться, а не отвлекать.

3 · Response

Подъём карточек на 3px, сдвиг стрелки на 3px, отступ строки кейса на 20px, зум портрета до 1.04. Длительности 160–480ms — быстрее, чем появление.

Демонстрация вариантов

fade

left

right

scale

clip

Обновите страницу и прокрутите сюда, чтобы увидеть каждый вариант заново.

Токены движения

Токен	Значение	Назначение
`--dur-instant`	90ms	смена состояния без перемещения
`--dur-fast`	160ms	hover, focus
`--dur-base`	240ms	подъём, границы, вкладки
`--dur-slow`	480ms	вытирание линий, фильтры
`--dur-reveal`	760ms	появление блоков
`--dur-ambient`	24s	фоновый дрейф
`--reveal-stagger`	70ms	шаг задержки в группе
`--ease-entrance`	cubic-bezier(.16,1,.30,1)	вход в кадр
`--ease-spring`	cubic-bezier(.34,1.56,.64,1)	чекбокс, тумблер

05Темы

Тёмная по умолчанию

Тёмная палитра живёт на голом :root. Светлая — только по явному выбору через :root[data-theme="light"]; системная настройка сознательно не учитывается, потому что бренд поставляется тёмным.

assets/js/theme.js подключён синхронно в <head> и ставит атрибут до первой отрисовки — вспышки светлого нет.
Тот же скрипт добавляет .js-reveal. Именно этот класс включает скрытое состояние анимаций, поэтому при сбое JS страница видна целиком, а не пуста.
На время переключения на <html> вешается .sr-theme-switching, который на один кадр гасит все переходы — смена выглядит мгновенной.
Выбор сохраняется в localStorage под ключом sd-theme.