Цифровые продукты
Дизайн-система
Токены, компоненты и состояния, связанные с кодом проекта.
Компоненты и состояния
Примеры используют реальные компоненты shared/ui. Клавишей Tab можно проверить фокус; визуальный образец фокуса не перемещает фокус пользователя.
Состояния содержимого
По этому выбору нет результатов. Измените условия или сбросьте фильтр.
Семантические цвета
--background--foreground--surface--muted--muted-foreground--primary--primary-foreground--accent--accent-foreground--destructive--destructive-foreground--border--ring- --radius
- …
- --page-gutter
- …
- --hero-font-size
- …
- --hero-letter-spacing
- …
- --text-scale
- …
- --motion-fast
- …
- --motion-normal
- …
- --motion-expressive
- …
- --motion-collapse
- …
Контраст интерфейса
Проверка текущих экранных цветов для обычного текста. Это не подтверждение соответствия всего сайта WCAG. Печатные спецификации утверждаем отдельно по цветопробе.
| Сочетание | Контраст | Текст AA · 4,5:1 |
|---|---|---|
--foreground--background | —:1 | — |
--muted-foreground--background | —:1 | — |
--primary-foreground--primary | —:1 | — |
--accent-foreground--accent | —:1 | — |
--destructive-foreground--destructive | —:1 | — |
Источник решений
Семантические цвета, радиусы, масштаб текста и длительности движения определены CSS-переменными. Голубой акцент выбран по умолчанию; критичные состояния используют независимую красную пару --destructive / --destructive-foreground. Документация читает фактические значения выбранных настроек.
Базовый радиус — 0,75rem; отступы строятся на шаге 4 px, размеры текста — на rem. Один токен описывает одну роль; компоненты не вводят локальные фирменные оттенки. Полная ширина и safe areas задаются общими контейнерами.
Компоненты и состояния
Основная кнопка ведёт к главному действию; контурная — к альтернативе. Фокус всегда видим. Недоступное действие сопровождается понятной причиной; состояние не различается только цветом. Ниже — реальные кнопки shared/ui.
Поля имеют постоянную подпись; ошибки объясняют исправление. Карточка содержит один главный переход. Диалог возвращает фокус; уведомление сообщает результат. Загрузка, ошибка и пустое состояние показывают понятный следующий шаг.
Единая панель настроек
Кнопка в шапке открывает панель: язык RU/EN, тема, текст 100/125/150%, движение, обычный/повышенный контраст и пять акцентов. Выбор виден через текст, отметку и состояние радиокнопки. Клавиатура, Escape и возврат фокуса поддерживаются.
Изменения применяются сразу, сохраняются в этом браузере и восстанавливаются до первого отображения страницы. Сброс возвращает системную тему и исходное оформление, сохраняя выбранный язык. При недоступном хранилище настройки действуют в текущем посещении и показывается сообщение.
Панель использует компактные сегментированные переключатели и один ряд цветовых образцов с названием выбранного акцента. При обычном размере текста все шесть настроек помещаются в HD 1280×720 без прокрутки. Зоны нажатия — от 44 px. Сброс, кнопка «Готово» и уведомления закреплены снизу. При недостаточной высоте относительно размера текста прокручивается вся панель, чтобы закреплённые элементы не закрывали настройки.
Связь с реализацией
Каждый компонент сопровождается назначением, доступностью, допустимыми вариантами и ссылкой на его реализацию в проекте. Изменение токена проверяем на обоих языках и темах.
Используйте компоненты Tailwind/shadcn и Radix через публичные экспорты shared/ui. Повторяющийся паттерн переносится в общий компонент; состояние доступности задаётся семантически.
Контракты компонентов
| Компонент | Обязательное поведение | Применение |
|---|---|---|
| Button | 44 px, visible focus, disabled; действие кнопкой, переход ссылкой. | Одна основная кнопка на смысловой блок. |
| Поле | Постоянная label, подсказка, aria-describedby и aria-invalid при ошибке. | Ошибку исправляют у поля без потери ввода. |
| Dialog | Заголовок, описание, Escape, удержание и возврат фокуса. | Уточнение выбора; не блокирует чтение без причины. |
| ChoiceGroup | Название группы, radio-состояние, клавиатура и отметка выбранного. | Взаимоисключающий выбор: тема, размер, плотность. |
| Accordion | Кнопка с expanded и связью с содержимым; одна открытая группа меню. | Навигация и короткие ответы; важные условия остаются видны. |
| Уведомление | Status для обычного результата, alert для ошибки; сообщение текстом. | Не перемещает фокус и не полагается только на цвет. |
Единый набор состояний
| Состояние | Содержимое | Следующий шаг |
|---|---|---|
| Загрузка | Зарезервированная геометрия и доступное сообщение. | Управление не блокируется бессрочно; запрос можно повторить. |
| Пусто | Почему нет результата; фильтры и введённые значения сохранены. | Сбросить фильтр или связаться для подбора. |
| Ошибка | Что не выполнено и что исправить; красный сопровождается текстом. | Повторить без повторного ввода. |
| Офлайн | Сохранённые статьи доступны; актуальность наличия не подразумевается. | Читать сохранённое или повторить после подключения. |
| Успех | Сохранённый результат и конкретный следующий шаг. | Проверить данные, продолжить или вернуться. |
Изменение компонента
Цвета, текст, интервалы и движения берутся из shared/colors, shared/typography, shared/layout и общих настроек. Общие UI-примитивы экспортируются через shared/ui; предметные сценарии остаются в entities/features/widgets по FSD.
Новый вариант описывает задачу и состояния, сохраняет клавиатуру и настройки, проверяется в RU/EN на 320 px и при увеличении текста. Для браузерного расширения сохраняется работоспособная базовая реализация.