Загружаем лабораторию
S.O.T.A.Дизайн-лаборатория
Тестовый контур

S.O.T.A. · Design playground

Одна страница.
Весь визуальный язык.

Автономный стенд для выбора типографики, цветов, состояний и поведения интерфейса. Здесь собраны базовые элементы, из которых строятся страницы S.O.T.A.

Смотреть элементы
11
групп элементов
2
темы
0
бизнес-данных
REFERENCE / DEMO
Проверенная функциональная готовность

Синтетический fixture показывает место будущей навигации. Production readiness не заявляется.

00R

Home shell reference

Граф модулей

Одиннадцать безопасных внутренних маршрутов в детерминированном облаке без physics runtime.

РРазметкаТТелефонияММетрикиААтрибуция₽РасходыДДоходыГАналитикаККалендарьЮЮнитыДЗДизигн!Диагностика
ИсточникиЛогикаВыдачаСистема
01

Foundations

Основа

Нейтральная тёплая база, зелёный как системный акцент и золото для точечного внимания.

Цветовые роли

Цвет обозначает назначение, а не украшение.

COLOR / SEMANTIC
CanvasФон страницы--lab-canvas
Canvas deepГлубокая подложка--lab-canvas-deep
SurfaceСтеклянная поверхность--lab-surface
Surface solidПлотная поверхность--lab-surface-solid
Surface raisedПриподнятая поверхность--lab-surface-raised
InkМаксимальный контраст--lab-ink
TextОсновной текст--lab-text
MutedВторичный текст--lab-muted
FaintСлужебный текст--lab-faint
BorderТонкая граница--lab-border
Border strongКонтрастная граница--lab-border-strong
PrimaryГлавное действие--lab-primary
Primary hoverСостояние наведения--lab-primary-hover
Primary softМягкий акцент--lab-primary-soft
On primaryТекст на акценте--lab-on-primary
GoldТочечное внимание--lab-gold
Gold softМягкое золото--lab-gold-soft
SuccessУспешное состояние--lab-success
Success softФон успеха--lab-success-soft
WarningПредупреждение--lab-warning
Warning softФон предупреждения--lab-warning-soft
InfoИнформация--lab-info
Info softФон информации--lab-info-soft
DangerКритичное состояние--lab-danger
Danger softФон ошибки--lab-danger-soft

Отступы

Базовый шаг — 4 px.

SPACE
4
8
12
16
24
32
48

Радиусы и тени

От поля до модального окна.

SHAPE
8
14
22
pill
02

Typography

Типографика

Характер в крупных заголовках, спокойная ясность в интерфейсе, моноширинные данные в расчётах.

LIVE FONT MIXER · 25 FAMILIES

Три независимые роли

Выбор применяется ко всей странице сразу и одинаково работает на ПК и мобильном экране.

Live
Выбранное сочетание сохраняется только в этой лаборатории.
Display

Видеть систему целиком

56 / 1.02
Heading 1

Сквозная аналитика

40 / 1.08
Heading 2

Данные по источникам

28 / 1.15
Heading 3

Качество атрибуции

18 / 1.25
Body

Основной текст помогает быстро понять состояние системы и следующее действие.

15 / 1.55
Caption

Обновлено 2 сентября, 14:32 UTC

12 / 1.4
Data / Mono

ROMI +24.8% · UNIT-0021

13 / 1.4
03

Surfaces

Поверхности и карточки

Иерархия строится фоном, границей и тенью. Интерактивность всегда заметна до наведения.

Обычная

Базовая карточка

Группирует связанную информацию без лишнего визуального веса.

Подробнее →
Приоритетная

Приподнятая карточка

Выделяет важный блок в составе страницы или рабочего потока.

Открыть →
✓Выбрана

Активная карточка

Состояние выбора не полагается только на цвет границы.

Выбрано
Недоступна

Ожидает данных

Недоступность объясняется прямо в контексте элемента.

Источник не подключён
Визиты24 891+12,4%
Конверсия8,32%+0,8 п.п.
Стоимость лида1 420 ₽−4,1%
Факты96,8%без изменений
04

Actions

Действия

Одно главное действие на смысловой блок. Опасные действия всегда отделены и названы прямо.

Кнопки

Основные варианты и состояния.

BUTTON
ВариантDefaultHoverFocusDisabled
Primary
Secondary
Tertiary
Danger
Размер
Состояние
05

Forms

Формы

Подпись остаётся видимой после ввода. Ошибка объясняет, как исправить значение.

Текстовые поля

Базовые состояния.

INPUT
Период

Выбор и ввод

Составные элементы формы.

CONTROL
Источник
Период
Бюджет
₽
Checkbox
Radio
Switch
Upload
07

Data display

Данные

Числа выровнены, статусы читаются без расшифровки, у каждого факта есть контекст.

Статусы и метки

Семантика сохраняется в тексте и форме.

BADGE
ГотовоОграниченоОжидаетБлокировано
Яндекс ДиректПриоритетUNIT-002124

Таблица

Сортировка, выбор строк и действия.

Источник СтатусВизитыКонверсияРасход
Яндекс Директpaid / cpcГотово12 8429,2%482 100 ₽
2GISorganic / mapОграничено4 2187,6%96 000 ₽
Прямые заходыdirect / noneПроверка3 1045,1%—
Показано 3 из 24 источников
68%

Этапы процесса

Статус последовательного потока.

TIMELINE
  1. ✓
    Источник принятСегодня, 09:42
  2. ✓
    Схема проверенаСегодня, 09:43
  3. 3
    Сопоставление юнитовВыполняется · 68%
    68%
  4. 4
    Публикация фактовОжидает
08

Recharts gallery · 12 families + 103 examples

Графики

Семейства API и все запрошенные официальные композиции доступны локально; тяжёлый preview рендерится только для выбранного примера.

Подготавливаем каталог Recharts
09

Feedback

Обратная связь

Каждое состояние отвечает на три вопроса: что случилось, что это значит и что делать дальше.

✓
Данные обновлены

24 891 факт доступен для построения отчётов.

i
Идёт фоновая проверка

Можно продолжить работу — результат появится автоматически.

!
Период покрыт частично

Данные за 31 августа ещё не поступили из источника.

×
Отчёт не собран

Не найден обязательный контракт расходов.

Пока ничего нет

Создайте первый пресет, чтобы быстро возвращаться к нужному срезу.

!

Источник недоступен

Последний подтверждённый срез сохранён. Попробуйте обновить позже.

Progress · единый стандарт

Честные determinate-состояния с текстовым и ARIA-значением.

0 / 68 / 100
0%
68%
100%

Источник → проверка схемы → нормализация → канонический факт → витрина отчёта.

10

Overlays

Оверлеи

Временный слой не должен скрывать контекст или оставлять пользователя без понятного выхода.

Tooltip
Popover
АК
Алексей КосиновДиректор
РольВладелец решения
Interactive
11

Frosted glass atlas · 2 references + 8 variants

Способы матового стекла

№0 сохраняет чистый исходник, №01 показывает анимацию в межслойном зазоре. Варианты 1–8 остаются сравнительной сеткой.

Зафиксированные образцы

Не участвуют в сравнительной настройке.

№0 · ИсходникМеню вместо изображений

Слой изображений удалён. Матовое окно занимает всю его площадь, а контент остаётся сверху.

92% transparent · blur(3px)
№01 · Анимированный зазорGIF между слоями

Исходник №0 дополнен нерастянутыми копиями фирменной анимации в межслойном зазоре.

native ratio · repeated GIF · gap 12px
01 · Матовое стеклоМягкое рассеивание

Непризматический материал первой пары с лёгкой дополнительной мутностью.

blur(8px) · transparent 88%
02 · Призматическое стеклоМягкая призма

Та же мутность первой пары и спектральное преломление по всей площади.

blur(8px) · full-area prism
03 · Матовое стеклоСреднее рассеивание

Непризматический материал второй пары с более плотной оптической мутностью.

blur(14px) · transparent 86%
04 · Призматическое стеклоСредняя призма

Та же мутность второй пары и равномерная спектральная плёнка по всей площади.

blur(14px) · full-area prism
05 · Матовое стеклоГлубокое рассеивание

Непризматический материал третьей пары с максимально выраженной мутностью.

blur(22px) · transparent 84%
06 · Призматическое стеклоГлубокая призма

Та же мутность третьей пары и наиболее заметное полноформатное преломление.

blur(22px) · full-area prism
07 · Призма 92%Прямой фон + полная призма

Соты остаются видимыми сквозь всю площадь, а спектральный слой ограничен стеклом.

92% transparent · blur(3px) · full-area prism
08 · №01 + призмаАнимированный зазор + полная призма

Анатомия №01 сохранена; bounded-призма добавлена только поверх базового стекла.

№01 anatomy · gap 12px · full-area prism