Design Quality Bar

Обновлено: 2026-08-07

Premium means calm precision

Premium UI — это не максимум эффектов. Это точная геометрия, согласованные controls, ясная иерархия, аккуратный текст и предсказуемая обратная связь.

Текущий reference benchmark — тёмная визуальная система courses.digitable.life: спокойный canvas, тонкие borders, умеренные радиусы, минимум теней и один визуальный акцент на смысловую зону.

Проекты не обязаны выглядеть одинаково. Общими должны быть качество исполнения, tokens/primitives и поведенческие контракты.

Shared design implementation

• Reusable token, component, icon, illustration primitive или brand asset публикуется через Digitable components monorepo.
• Project repository хранит композицию экрана и product-specific flow.
• Нельзя создавать несовместимый локальный аналог общего primitive без ADR.
• Точные token values живут в design system; playbook фиксирует назначение и quality bar.

Colour and theme

• Цвет в правиле компонента задаётся только токеном. Литеральное значение живёт в блоке токенов и больше нигде.
• У токена цвета есть значение в каждой поддерживаемой теме, и значения стоят рядом: пропущенную пару должно быть видно при чтении, а не на чужом экране.
• Контраст подтверждается числом, а не взглядом. Норма — WCAG 2.1 AA: 4.5:1 для обычного текста, 3:1 для крупного текста и элементов интерфейса. Замер делается на живой странице, в каждой теме, включая :hover и :focus.
• Если продукт живёт на одном домене с другим продуктом Digitable, выбор темы у них общий: разные ключи хранения дают читателю тему, которую он не выбирал. См. decisions/ADR-0003-theme-tokens-and-shared-theme-state.md.

Geometry and density

• Spacing использует ограниченную шкалу, обычно 4/8/12/16/20/24/32px.
• Элементы одного уровня имеют одинаковые height, padding, radius и border.
• Основная поверхность использует спокойную 1px-границу; тень показывает высоту modal/popover, а не украшает каждую карточку.
• Вложенные cards добавляются только при реальной группировке.
• Один экран не содержит несколько конкурирующих primary CTA.
• Layout не полагается на случайные magic numbers, которые ломаются при локализации или другом viewport.

Typography and copy

• Иерархия строится размером, weight, line-height и whitespace, а не только цветом.
• CTA начинается с глагола и описывает результат.
• Status отвечает на вопрос пользователя, а не повторяет backend enum.
• Placeholder не заменяет label.
• В одном предложении не смешиваются языки, кроме названий форматов и внешних контрактов.
• Текст проверяется на переносы, обрезания и реальную длину локализации.

Interaction states

Для релевантных компонентов проектируются и проверяются:

• default и hover;
• keyboard focus;
• active/selected;
• loading/pending;
• disabled с доступной причиной;
• empty;
• validation/error;
• blocked;
• success;
• offline/retry, если продукт зависит от сети.

Повторный клик по pending action не создаёт двойную операцию.

Responsive and accessibility

Visible UI проверяется минимум в целевых desktop, tablet и mobile viewport.

Done gate:

• нет горизонтального overflow;
• важный action доступен и не перекрыт;
• текст и controls не обрезаны;
• layout выдерживает локализацию и 200% browser zoom;
• status не передаётся только цветом;
• focus видим;
• keyboard navigation следует визуальному порядку;
• controls имеют semantic element, label и корректные aria-*;
• modal/sheet можно закрыть клавиатурой, focus не теряется.

Visual QA

1. Проверить реальный render, а не только code diff.
2. Пройти ключевой user flow.
3. Сравнить desktop, tablet и mobile.
4. Осмотреть padding, gaps, alignment, borders, copy и interaction states.
5. Проверить screenshot diff, если проект ведёт baseline.
6. Принимать новый baseline отдельным осознанным действием.

Screenshot не доказывает функциональность, а E2E не доказывает визуальное качество: для видимого flow нужны обе формы evidence.