Bento-сетки
Пространственная организация дашборда: размер карточки кодирует важность метрики. Взгляд находит revision/capability до чтения подписей.
Дизайн-концепт
Graphite Aurora — альтернативный интерфейс RAGRAF
Взгляд Senior UI/UX-разработчика на интерфейс продукта в 2026 году: та же панель, та же информация, другая визуальная грамматика. Переключайте A/B — оба концепта рендерят один и тот же дашборд на реальных числах пилота.
Состояние корпуса
РЕВИЗИЯ
rev-0016
ready · joern_used=1 · 71 s
ГРАФ
487 nodes
7 292 edges · stated 91% / derived 9%
КАЧЕСТВО
457 chunks
max 5 543 / 8 000 tok · over-budget 0
norms 0.058–0.663 · zeros 0
СЕССИЯ АГЕНТА
46 вызовов
write_check 14 · errors 0 · full-reads 0
~5 200 токенов сэкономлено
ЛАТЕНТНОСТИ
- schema0.5 ms
- symbol0.7 ms
- write_check3.3 ms
- search~1 s
СВЕЖЕСТЬ
drift 0
корпус совпадает с ревизией · guard: OK
capability=full · slice OK · embedding fastembed-cpu
Один и тот же DOM и одни и те же данные пилота rev-0016 — две визуальные грамматики. Переключите состояние корпуса на degraded: в концепте B ambient-сигнал меняет цвет свечения, в A — только текстовый бейдж (иллюстрация тренда «статус периферийным зрением»).
Восемь трендов 2026, применённых к продукту
Ambient-сигналы вместо баннеров
Состояние корпуса (full/degraded/drift) живёт в фоновом свечении рамок и aurora-подложке — статус виден периферийным зрением, не отвлекая от цифр.
Экспрессивная типографика
Пара «плотный гротеск с отрицательным трекингом для заголовков + моноширинный для данных». Числа — первый класс интерфейса: tabular-nums, оптическое выравнивание.
Спокойное движение
150–220 мс, ease-out, только по смыслу: переход состояния, а не украшение. Полный respect prefers-reduced-motion — данные доступны без анимации.
Command-palette паттерн
Инструмент для инженеров обязан поддерживать ⌘K: 22 операции — это 22 команды палитры с аргументами. Мышь — второй сорт, клавиатура — первый.
Контраст как функция
WCAG AA минимум, AAA для данных: подписи цифр ≥ 7:1. Фокус-кольца видны на обеих подложках. Цвет состояния дублируется иконкой и текстом — никогда только цветом.
Настоящий тёмный (OLED-aware)
Тёмная тема — не инверсия: отдельные токены глубины (#0A0C0B против чистого чёрного), свечения первичного цвета ослаблены, blur только у «плавающих» слоёв.
Data-ink минимализм
Спарклайны вместо тяжёлых чартов, цифры крупнее заголовков, ноль декоративных осей и легенд. Каждая единица чернил — про данные.
Токены: A против B
Концепт B — не перекраска: это другая система приоритетов. Данные громче заголовков, состояние читается без чтения, контраст подписей выше нормы.
| token | A · Graphite Terminal | B · Graphite Aurora | зачем |
|---|---|---|---|
| background | #09090B (zinc-950) | #0A0C0B + aurora 8% | Фон B теплее на 2° и несёт едва различимое свечение состояния |
| primary | #34D399 (emerald-400) | #3EE6A8 → #2DD4BF градиент | B: акцент — градиент «полярное сияние», используется только на активных элементах |
| foreground | #FAFAFA | #F4F7F5 | B чуть холоднее: меньше утомление при длинных сессиях чтения цифр |
| muted-foreground | #71717A (5.2:1) | #8B948F (7.1:1) | B поднимает подписи данных до AAA-контраста |
| radius | 8/12 px | 12/18/24 px (bento) | B: крупные радиусы карточек читаются как «отдельные приборы» |
| type scale | 13/14/16 px mono-led | 44/28/16/13 display+mono | B: заголовки-цифры 44px tabular, подписи 11px uppercase +0.14em |
| motion | мгновенно | 180 мс cubic-bezier(.22,1,.36,1) | B: единственный кривой-подпись продукта; всё остальное — 150 мс |
| depth | border 1px | border + inner glow + blur-слои | B: глубина без теней-«грязи» — внутреннее свечение 1px поверх рамки |
Компоненты в концепте B
full
degraded
fast_reindex_threshold0.05
Настройки сохранены · .bak
Кнопки несут внутреннее свечение вместо плоской заливки; бейджи состояний дублируют цвет символом; тост — «стеклянный» слой с blur. Всё — чистый CSS на токенах, без изображений.
Адаптивность: 320 → 2560+
320 px
768 px
2560 px
Bento-сетка концепта B коллапсирует детерминированно: 6 карточек → 2 колонки → 1, приоритет порядка сохранён (ревизия и свежесть выше линии сгиба на любом экране). На сверхшироких — максимум 1600 px контента и увеличенные промежутки, а не растянутые карточки.
Вердикт дизайнера
Концепт A — честный инженерный терминал: он уместен в v0.1 и дёшев в поддержке. Концепт B стоит внедрять не «редизайном всего», а постепенно: сначала ambient-сигналы состояния и табличные числа (минимальная цена, максимальный эффект для операторов), затем bento-раскладку каталога, и только в конце — aurora-эстетику как брендовый слой. Главное правило перехода: ни одна цифра не должна становиться менее читаемой ради красоты.