Один язык интерфейса.
От кнопки до карты.
Рабочий UI-кит Arcanos на HeroUI v3: действия, формы, даты, цвет, слои, данные и обратная связь. Не витрина ради галочки — здесь проверяются состояния, клавиатура, две темы и мобильная ширина.
04 · Действия
Действия и состояния
Панель действий, группа кнопок и панель инструментов. Пять уровней акцента, переключатели, теги и подсказки — всё отвечает на нажатие и работает с клавиатуры.
Панель действий
Основное действие заметно, опасное не прячется, вторичное остаётся спокойным. Наведите курсор на иконку без подписи — подсказку покажет сама кнопка.
Панель обновилась
Подсказку можно закрыть, а затем вернуть — состояние живёт в секции.
Последнее действие: Ожидание действия
Панель инструментов
Иконки, переключатели и счётчик правок в одной панели. Подсказки появляются сразу, фокус ходит стрелками.
Формат: Избранное
Статусы, теги и связи
Теги
2Выбрано: Натальная карта · Транзиты
Без провайдера: подсказки HeroUI v3 уходят в портал сами, Toolbar управляет фокусом через React Aria, TagGroup работает как коллекция.
Компоненты · Формы
Формы, которые ведут
Данные рождения и настройки сессии: крупные поля, короткие подсказки и ошибка рядом с причиной. Все контролы живые — вводят, фильтруют, проверяют и сохраняют.
01 / Расчёт
Данные рождения
02 / Кабинет
Настройки сессии
03 / Доступ
Код подтверждения
Состояния
aria-invalid
- Валидно
- FieldError скрыт
- Ошибка
- aria-invalid=true
- Фокус
- кольцо акцента
- Disabled
- без pointer-events
Ошибка связана с полем через aria-describedby. Подсказка скрывается, пока поле невалидно.
Дата и время
Шесть способов выбрать момент: месяц, диапазон, сегментированные поля и триггеры с календарём в поповере. Каждое значение контролируется состоянием и выводится в подвале карточки.
Месяц
ноябрь 2026 г.
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
Диапазон
ноябрь 2026 г.
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
Поля
не выбрано · —
Сегменты вводятся и с клавиатуры: ↑ и ↓ меняют значение, ← и → переходят между полями. Формат — 24 часа, локаль ru-RU.
Триггер с календарём
Календарь открывается в портале поповера: заголовок переключает сетку годов, а сам поповер автоматически прижимается к границам экрана.
Диапазон в триггере
Начало и конец вводятся в одном поле: диапазон выбирается одним жестом в календаре, а строка ввода и поповер показывают одно и то же состояние.
Акцент
интерфейса
Один акцент на весь продукт. Плоскость задаёт насыщенность и яркость, канал оттенка держит цвет в тёплой шкале — от киновари до ржавчины.
Токен
--arc-accent · #F97316
Тонкая настройка
Одна температура, разная плотность. Пресет меняет только акцент — фон, границы и текст остаются нейтральными.
HEX
#F97316
RGB
rgb(249, 115, 22)
HSL
hsl(24.58, 94.98%, 53.14%)
Превью
Текст на акценте
6.90:1
Основной
--arc-accent
Наведение
--arc-accent-hover
Текст на заливке
--arc-accent-ink
Заливка — только у кнопки. Чип и фокусное кольцо берут тот же акцент на 14% и 42%: иерархия держится на плотности, а не на количестве цветов.
Правило системы: акцент занимает не больше 10% площади экрана и всегда означает действие или выбранное состояние. Декоративной заливкой он не становится.
HSB · HEX · WCAG 2.1
Типографика · Обратная связь
Типографика
и обратная связь
Одна шкала для заголовков и текста и три способа сообщить о результате: статус в потоке, тост поверх интерфейса и навигационный след. Только семантические теги и токены темы.
01 / Навигация
Последний элемент без href становится текущей страницей.
02 / Шкала
Заголовки и основной текст
Восемь ролей от h1 до code. Заголовки отличаются только размером и весом, тело текста держит интерлиньяж 1,75.
Тихая точность
Карта без лишнего
Положение планет
Аспекты и знаки
Основной текст читается спокойно: строка держится в пределах 65 знаков, а интерлиньяж оставляет воздух между блоками.
Подписи к данным, ячейки таблиц и элементы навигации.
Служебная сноска: точность эфемерид — 0,01°.
pnpm add @heroui/reactОбразцы h1–h6 выводятся в p через render: визуальная роль сохраняется, семантика страницы — нет.
03 / Статусы
Alert: четыре состояния
Статус задаётся через status, иконка индикатора приходит из темы. Информационное состояние — accent, отдельного info нет.
Новая эфемерида
Движок обновлён до точности 0,01°. Пересчёт вашей карты займёт несколько секунд.Данные сохранены
Карта от 12 марта доступна в разделе «Мои карты».Сессия истекает
До выхода из аккаунта осталось 5 минут. Сохраните правки в заметках.Расчёт не завершён
Недостаточно данных о времени рождения. Укажите время или диапазон, чтобы повторить расчёт.Кнопка закрытия не входит в Alert: она ставится рядом с контентом.
04 / Тост
Подтверждение на четыре секунды
Индикатор, заголовок, описание, действие и закрытие. Автозакрытие — 4 с; наведение и фокус приостанавливают таймер, Alt + T переводит фокус в область тостов.
Область тостов закреплена справа снизу и не перекрывает навигацию. В стопке — до трёх сообщений, лишние ждут в очереди.