Фундамент

Конституция, дизайн-язык, архитектура и MVP-ядро

Core Foundation

Правила, которые стоят выше визуального решения

Конституция определяет фундаментальные законы OKAUX. Им должен соответствовать каждый компонент, экран и сценарий взаимодействия — независимо от визуальной привлекательности или технической реализации.

Законы 01–04

Ясность и минимальное усилие

Ясность

Пользователь всегда должен понимать происходящее.

Где я нахожусь?
Что я могу сделать?
Что произойдёт дальше?

Цель

Каждый элемент должен иметь причину существования.

Помогает понять информацию
Помогает принять решение
Помогает выполнить действие

Предсказуемость

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

Предсказуемость важнее оригинальности.

Минимальное усилие

Каждая задача должна выполняться минимальным количеством действий.

Если можно сделать проще — решение требует доработки.

Законы 05–08

Обратная связь и доступность

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

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

Подтверждение
Изменение состояния
Уведомление
Индикатор процесса

Предотвращение ошибок

Ошибка пользователя является ошибкой системы.

Предупреждать
Ограничивать опасные действия
Помогать исправить
Объяснять последствия

Доступность

Доступность является обязательным требованием, а не дополнительной функцией.

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

Иерархия

Важное должно выглядеть важным.

Размер
Контраст
Расстояние
Типографика
Композиция

Законы 09–12

Системность, контекст и доверие

Системность

Ни один элемент не существует отдельно от системы.

Компоненты
Дизайн-токены
Паттерны взаимодействия
Масштабируемость

Контекст

Интерфейс должен адаптироваться к задачам пользователя.

Контекст важнее универсальности.

Прогрессивное раскрытие

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

Возможности для эксперта появляются тогда, когда они понадобятся.

Доверие

Интерфейс обязан быть прозрачным и не создавать ложных ожиданий.

Не скрывать важное
Не вводить в заблуждение
Не манипулировать
Не маскировать последствия

Разрешение конфликтов

Приоритет законов

Если принципы вступают в конфликт, решение проверяется сверху вниз. Эстетика не может нарушать более высокий приоритет.

01Ясность
02Доступность
03Предотвращение ошибок
04Предсказуемость
05Доверие
06Эффективность
07Системность
08Эстетика

Проверка решения

Формула OKAUX

ПонятноПолезноПоследовательноДоступноКрасиво

Простота без примитивности.

Последовательность без ограничений.

Красота через ясность.

Конституционная аксиома

Если пользователь вынужден думать об интерфейсе вместо своей задачи — дизайн требует улучшения.

Дизайн-язык

Интерфейс помогает работать и не мешает

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

Как проверить макет

Понятный

Сразу видно, где вы, что можно сделать и что произойдёт дальше.

Спокойный

Экран не спорит с задачей за внимание и не давит лишними акцентами.

Честный

Действия, состояния и последствия названы прямо, без манипуляций.

Собранный

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

Сначала задача

Главное действие заметнее остальных. Декор, который не помогает понять или сделать, убираем.

У каждого приёма есть работа

Цвет передаёт состояние, типографика строит иерархию, пространство разделяет смысловые группы.

Движение только объясняет

Анимация показывает переход или отклик системы. Если без неё ничего не теряется, она не нужна.

System Architecture 1.0

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

OKAUX разделяет структуру, взаимодействие, представление, обратную связь и восприятие. Такая модель помогает развивать продукт без разрушения UX и случайных зависимостей между компонентами.

StructureInteractionMeaningFeedbackMotion

Layout Структура

Navigation Перемещение

Input Ввод данных

Data Display Представление

Overlay Контекст

Feedback Состояние

Theming Смысл

Motion Восприятие

Слойная модель

Пять уровней ответственности

Каждый слой решает собственный класс задач и передаёт результат следующему уровню.

Structural Layer

Layout + Navigation

Расположение
Иерархия
Перемещение

Interaction Layer

Input + Overlay

Создание данных
Действия пользователя
Контекстные взаимодействия

Representation Layer

Data Display

Визуализация информации
Плотность данных
Структура отображения

System Feedback Layer

Feedback

Состояния системы
Ошибки и успех
Загрузка и прогресс

Experience Layer

Theming + Motion

Визуальный язык
Эмоциональное восприятие
Ощущение живого интерфейса

Взаимодействие слоёв

От намерения пользователя к восприятию результата

01Намерение
02Navigation / Input
03Overlay
04Data Display
05Feedback
06Motion + Theme

Ключевые зависимости

Layout: основа всех систем
Navigation: Data Display + Input
Overlay: Input + Feedback
Feedback: Motion
Theming: все визуальные слои
Motion: все интерактивные слои

Core Laws

Законы архитектурной целостности

Consistency

Одинаковое поведение должно выглядеть одинаково.

Predictability

Пользователь всегда понимает, что произойдёт дальше.

Hierarchy

Интерфейс всегда сохраняет уровни важности.

Feedback

Каждое действие получает ответ системы.

Motion

Движение объясняет изменение состояния.

Модульность

Компонент не зависит от визуального контекста

Каждый компонент должен быть независимым, переиспользуемым и предсказуемым. Новые возможности добавляются через композицию, а не через изменение базовых законов.

BehaviorStructureState

Продуктовая сборка

Подключайте только необходимые слои

Utilities не являются обязательной зависимостью компонентов и не должны попадать в сборку, если продукт их не использует.

@use "okaux/scss/entries/core";
@use "okaux/scss/entries/components";
// Необязательно: @use "okaux/scss/entries/utilities";

core.scssFoundation, layout и системный слой

components.scssКомпоненты продукта

utilities.scssОпциональные utility-классы

app.scssПолный совместимый bundle

Финальная модель

OKAUX объединяет пять уровней опыта

Структура + взаимодействие + представление + состояние + восприятие.

Foundation 1.0

Единая основа для решений о продукте

OKAUX соединяет дизайнеров, разработчиков, аналитиков, продуктовую команду и бизнес общим языком. Фундамент определяет не внешний вид экрана, а критерии, по которым принимаются решения.

Миссия

Делать цифровые продукты понятными

Пользователь достигает цели быстро, уверенно и без лишних усилий.

Видение

Система, способная расти вместе с продуктом

Ясность, последовательность и системный подход сохраняются при любом масштабе.

Основные ценности

Пять опор системы

Ясность

Интерфейс объясняет себя сам и не заставляет пользователя гадать.

Понятные формулировки
Очевидное управление
Простая навигация
Минимальная когнитивная нагрузка

Последовательность

Одинаковые действия работают одинаково во всей системе.

Единые паттерны
Единая терминология
Единое поведение
Единые сценарии

Доступность

Продукт доступен независимо от физических или когнитивных особенностей человека.

Клавиатурная навигация
Поддержка скринридеров
Достаточный контраст
Инклюзивный дизайн

Эффективность

Каждый лишний шаг становится потенциальной точкой отказа.

Минимум действий
Оптимальные сценарии
Приоритет основных задач
Отсутствие лишнего

Масштабируемость

Система растёт вместе с продуктом без разрушения существующих решений.

Модульная архитектура
Переиспользуемые компоненты
Design Tokens
Единая документация

Дизайн-философия

Сложность остаётся внутри системы

Пользователь получает простой и цельный опыт, даже если за ним стоит сложный продукт.

Простота для человека

Сложные процессы выглядят простыми. Пользователь взаимодействует со своей задачей, а не с устройством системы.

Прогрессивное раскрытие

Новичок видит только необходимое, а расширенные возможности появляются по мере потребности.

Функциональная эстетика

Красота помогает воспринимать информацию, ориентироваться, принимать решения и выполнять действия.

Системное мышление

Каждое решение оценивается через влияние на пользователя, продукт, бизнес и техническую реализацию.

UX-принципы

Семь проверок пользовательского сценария

01
Сначала понимание
Где я, что могу сделать и что произойдёт дальше.
02
Действие важнее украшения
Элемент без пользы для задачи не нужен.
03
Предсказуемое поведение
Между экранами не приходится переучиваться.
04
Обратная связь всегда
Каждое действие получает видимый ответ системы.
05
Предотвращение ошибок
Валидация, ограничения и безопасные значения по умолчанию.
06
Доступность по умолчанию
Она учитывается до запуска, а не добавляется после.
07
Адаптивность
Задача одинаково эффективно решается на любом устройстве.

Критерии качества

Когда продукт соответствует OKAUX

Понятность
Новый пользователь выполняет основную задачу без обучения.
Последовательность
Все решения подчиняются единым правилам.
Доступность
Продукт соответствует актуальным требованиям доступности.
Масштабируемость
Новые функции не нарушают существующую структуру.
Эффективность
Цель достигается с минимальным количеством действий.

Манифест OKAUX

Мы проектируем не экраны, а опыт

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

Если решение не делает продукт понятнее, удобнее или доступнее — оно не относится к OKAUX.

MVP Core

Минимальный контракт, на котором держится интерфейс

Ядро OKAUX подключает системные настройки, токены, foundation, layout и базовые systems. Компоненты и utility-классы остаются отдельными слоями и не утяжеляют минимальную сборку.

01 Settings Префикс CSS-переменных и глобальное поведение.
02 Tokens Единые значения и семантические роли.
03 Foundation Reset, базовые стили и темы.
04 Layout Контейнеры, grid и stack.
05 Systems Базовое системное поведение форм.

@use "okaux/scss/entries/core";

Design Tokens

Восемь семейств системных значений

Компоненты используют роли и шкалы, а не случайные числа. Темы меняют семантические значения без изменения разметки.

Colors

brand · semantic · neutral · themes

Spacing

0–25 · шаг 4 px

Typography

family · weight · size · line-height

Breakpoints

xs · sm · md · lg · xl · xxl

Radius

none · sm · md · lg · xl · 2xl · full

Shadow

системная шкала глубины

Motion

duration · easing

Z-index

семантические уровни наложения

Spacing Scale

Базовая единица — 4 px

Шкала содержит значения от 0 до 100 px. В интерфейсе выбирается ближайший системный шаг, а не создаётся новый отступ.

space-1 4 px

space-2 8 px

space-3 12 px

space-4 16 px

space-6 24 px

space-8 32 px

space-12 48 px

space-16 64 px

space-24 96 px

Responsive Foundation

Одна сетка для любого размера экрана

Mobile

Колонки: 4
Gutter: 16 px
Поля: 16 px

Tablet

Колонки: 8
Gutter: 24 px
Поля: 24 px

Desktop

Колонки: 12
Gutter: 24 px
Поля: 32 px

xs от 0 container 540 px

sm от 576 px container 720 px

md от 768 px container 960 px

lg от 1024 px container 1140 px

xl от 1280 px container 1320 px

xxl от 1440 px container 1440 px

System Scales

Типографика, форма и движение

Типографика

12–64 px400 · 500 · 600 · 700

Размеры текста, заголовков и display-уровней плюс предсказуемые line-height.

Радиусы

0–24 pxfull · 9999 px

Семь именованных ступеней вместо случайных значений.

Движение

80–500 ms5 easing-кривых

От быстрого press-состояния до сложного перехода с понятной динамикой.

Core Settings

Префикс и отображение состояний можно настроить

Настройки подключаются до entry-файла ядра. Новый prefix применяется ко всем публичным CSS-переменным, но не изменяет классы компонентов.

$css-variable-prefixПрефикс переменных: --ox-* → --product-*

$control-state-outline-enabledВключает outline для состояний управления.

$control-state-box-shadow-enabledУправляет focus box-shadow.

$control-state-border-highlight-enabledУправляет подсветкой границы.

@forward "okaux/scss/settings" with (
  $css-variable-prefix: "product",
  $control-state-outline-enabled: true,
  $control-state-box-shadow-enabled: false,
);

@use "okaux/scss/entries/core";

Project Facade

Собирайте расширения в локальном facade

Каждое семейство хранится в небольшом проектном partial-файле. Facade передаёт карты в OKAUX до первого подключения core, components или app.

@use "./spacing" as spacing;
@use "./colors" as colors;
@use "./breakpoints" as breakpoints;
@use "./shape" as shape;

@forward "okaux/scss/tokens/spacing" with (
  $space-scale-extend: spacing.$space-scale-extend,
);

@forward "okaux/scss/tokens/colors" with (
  $color-brand-extend: colors.$color-brand-extend,
  $color-brand-on-extend: colors.$color-brand-on-extend,
  $color-semantic-extend: colors.$color-semantic-extend,
  $color-semantic-on-extend: colors.$color-semantic-on-extend,
);

@forward "okaux/scss/tokens/breakpoints" with (
  $breakpoints-extend: breakpoints.$breakpoints-extend,
  $container-widths-extend: breakpoints.$container-widths-extend,
);

@forward "okaux/scss/tokens/radius" with (
  $radius-scale-extend: shape.$radius-scale-extend,
);

@forward "okaux/scss/tokens/shadow" with (
  $shadow-scale-extend: shape.$shadow-scale-extend,
);

@forward "okaux/scss/tokens";
@use "okaux/scss/app";

Порядок обязателен: конфигурационный facade подключается один раз и раньше любой точки входа OKAUX. Sass не позволит повторно настроить уже загруженный модуль.

Core maps

Расширяйте шкалы и роли отдельными картами

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

$space-scale-extend: (
  26: 104px,
  30: 120px,
) !default;

$color-brand-extend: (
  support: #6d5dfc,
) !default;

$color-brand-on-extend: (
  support: #ffffff,
) !default;

$color-semantic-extend: (
  notice: #7c3aed,
) !default;

$color-semantic-on-extend: (
  notice: #ffffff,
) !default;

Для нового цветового ключа всегда добавляйте контрастную пару *-on-extend. Так компоненты смогут сгенерировать читаемый текст поверх новой заливки.

$breakpoints-extend: (
  3xl: 1600px,
) !default;

$container-widths-extend: (
  3xl: 1536px,
) !default;

$radius-scale-extend: (
  panel: 20px,
) !default;

$shadow-scale-extend: (
  floating: 0 24px 64px rgb(15 23 42 / 0.18),
) !default;

typography$font-family-extend, $font-weight-extend, $font-size-extend, $line-height-extend

breakpoints$grid-columns-extend, $grid-gutters-extend, $grid-margins-extend, $layout-gaps-extend, $layout-auto-fit-extend

motion$motion-duration-extend, $motion-easing-extend, $motion-extend

layers$z-index-scale-extend, $document-base-extend

Component maps

Компонентные карты расширяются тем же способом

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

$button-sizes-extend: (
  xl: (
    height: 56px,
    padding-x: var(--ox-space-6),
    font-size: var(--ox-font-size-lg),
    line-height: var(--ox-line-height-body-md),
    radius: var(--ox-radius-lg),
  ),
) !default;

@use "./buttons" as buttons;

@forward "okaux/scss/tokens/components/button" with (
  $button-sizes-extend: buttons.$button-sizes-extend,
);

Map merge

Новый ключ дополняет карту, существующий — заменяет значение

Большинство токенов OKAUX собирается через map.merge($base, $extend). Merge выполняется на одном уровне и не объединяет вложенные поля автоматически.

$button-sizes-extend: (
  md: (
    height: 44px,
    padding-x: var(--ox-space-5),
    font-size: var(--ox-font-size-md),
    line-height: var(--ox-line-height-body-md),
    radius: var(--ox-radius-md),
  ),
) !default;

Не передавайте только height: ключ md целиком заменит базовую вложенную карту, поэтому в расширении нужно повторить все обязательные поля этого размера.

Правила ядра

Сначала роль, затем значение

Используйте существующий токен до создания нового.
Расширяйте карты в проектном facade, не изменяя OKAUX.
Выбирайте семантическую CSS-переменную вместо фиксированного цвета.
Стройте адаптивность на системных брейкпоинтах и сетке.

Component Defaults

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

Примитивные токены задают доступные значения, а базовые роли связывают их с семействами компонентов. Измените роль один раз — все подключённые компоненты получат новое значение.

Роли

Компоненты используют значение своей сущности

Карта $component-defaults находится в одном файле и публикует базовые CSS-переменные автоматически.

controlButton и form controls: height, radius, font-size и line-height.

surfaceCard, KPI, Table, Description List и Tabs: radius, padding и gap.

floatingCoachmark и Context Menu: radius всплывающей поверхности.

overlayModal, Drawer и Guided Tour: radius, padding и gap.

indicatorAvatar, Badge, Chip и Tag: общий круглый radius.

$component-defaults-base: (
  control: (
    height: 40px,
    radius: var(--ox-radius-md),
    font-size: var(--ox-font-size-sm),
    line-height: var(--ox-line-height-body-sm),
  ),
  surface: (
    radius: var(--ox-radius-xl),
    padding: var(--ox-space-5),
    gap: var(--ox-space-4),
  ),
  overlay: (
    radius: var(--ox-radius-2xl),
    padding: var(--ox-space-6),
    gap: var(--ox-space-5),
  ),
);

Связь

Примитив → роль → компонент

Card не выбирает ступень радиуса самостоятельно. Он напрямую использует базовую переменную роли surface.

$card-base-base: (
  radius: var(--ox-surface-radius-base),
  padding: var(--ox-surface-padding-base),
  gap: var(--ox-surface-gap-base),
);

По умолчанию

Surface XL

--ox-surface-radius-base использует --ox-radius-xl.

Локальное переопределение

Surface LG

Та же карточка получает --ox-radius-lg через роль.

Настройка

Выберите Sass или CSS в зависимости от области изменения

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

$component-defaults-extend: (
  surface: (
    radius: var(--ox-radius-lg),
  ),
  control: (
    height: 44px,
    line-height: var(--ox-line-height-body-md),
  ),
);

:root {
  --ox-surface-radius-base: var(--ox-radius-lg);
  --ox-control-height-base: 44px;
  --ox-control-line-height-base: var(--ox-line-height-body-md);
}

.compact-workspace {
  --ox-surface-padding-base: var(--ox-space-4);
  --ox-control-height-base: 36px;
  --ox-control-line-height-base: var(--ox-line-height-body-sm);
}

Правило: меняйте примитив, когда нужна новая ступень шкалы; меняйте базовую роль, когда нужно перенастроить семейство компонентов; используйте компонентную карту только для осознанного исключения.