# Design Brief `hub.bent.ge`
Дата: 16 марта 2026
Версия: draft 0.3

## 1. Цель
`hub.bent.ge` должен выглядеть как современный премиальный backoffice: светлый, минималистичный, мягкий, спокойный, без визуального мусора. Основа интерфейса светлая, акценты тёмные, брендовый цвет `#ffcd3c` используется точечно.

## 2. Визуальное направление
- Light premium UI.
- Warm white / soft off-white background.
- Большие радиусы.
- Почти без border.
- Глубина через тени, blur и слои.
- Тёмные pill-элементы `slate-900/90` на светлом фоне.
- Liquid glass только аккуратно и только там, где он усиливает композицию.

Нельзя:
- шаблонный SaaS/Tailwind look;
- жёсткие рамки вокруг всего;
- тёмная тема как основа;
- шумный glossy UI;
- злоупотребление жёлтым цветом.

## 3. Цвета
- `brand`: `#ffcd3c`
- `bg-base`: `#f5efee` - `#f7f3f2`
- `bg-card`: `#ffffff`
- `surface-dark`: `rgba(15, 23, 42, 0.90)`
- `surface-dark-hover`: близко к `slate-800`
- `text-primary`: близко к `#24324a`
- `text-secondary`: близко к `#64748b`
- `success`: mint / emerald
- `warning`: мягкий yellow на базе бренда
- `danger`: warm red
- `neutral`: soft blue-gray

Правила:
- `#ffcd3c` не использовать как массовый фон.
- Главный контраст строить через тёмные элементы.
- Для active/current внутри тёмных pills можно использовать emerald indicator.

## 4. Материалы
- Светлые поверхности: почти белые, мягкие, без грубых линий.
- Тёмные поверхности: polished slate, глубокая мягкая тень, без явной рамки.
- Liquid glass: top bar, search, floating filters, modal, drawer, отдельные акцентные панели.

## 5. Радиусы и тени
- Большие контейнеры: `28px - 36px`
- Карточки: `20px - 28px`
- Buttons / chips / search: `9999px`

Тени:
- мягкие;
- растянутые;
- многослойные;
- у тёмных элементов глубже, чем у светлых.

Border:
- почти везде избегать;
- если нужен, то как очень слабый optical edge.

## 6. Типографика
- Чистая, современная, спокойная.
- Заголовки уверенные, но не тяжёлые.
- Secondary text muted.
- Цифры, даты, суммы и статусы должны считываться мгновенно.

## 7. Ключевые компоненты
### Pill button
- rounded full;
- фон `bg-slate-900/90`;
- светлый текст;
- мягкая глубокая тень;
- hover: лёгкий lift + усиление тени;
- внутри слева короткий badge / indicator;
- badge может быть emerald для active/current.

### Light chip
- светлая база;
- pill-форма;
- мягкая тень;
- маленький цветной маркер слева.

### Search bar
- широкий;
- pill-shaped;
- светлый или glass-like;
- без грубой рамки;
- с большим внутренним padding.

### Dark summary pill
- тёмный capsule-блок;
- компактный;
- для counters и summary;
- разделение метрик через spacing, не через тяжёлые линии.

### Card
- светлая;
- большая;
- много воздуха;
- без видимого border.

### Dark info card
- крупная тёмная панель;
- глубокая тень;
- много воздуха;
- подходит для activity, stats, highlights.

## 8. Layout
App shell:
- светлый фон;
- просторные внешние отступы;
- крупные скругления;
- левая навигация как отдельный мягкий блок;
- много воздуха между секциями.

Sidebar:
- светлая;
- крупные vertical gaps;
- иконки в круглых или capsule-контейнерах;
- активный пункт как мягкая inset-панель.

Top area:
- search;
- filters;
- month/range navigation;
- summary pills;
- actions.

## 9. Основные экраны
### Dashboard
- не сетка мелких виджетов;
- 2-4 сильных блока;
- activity / timeline;
- summary;
- quick actions;
- clean composition.

### Calendar / timeline
- верхняя навигация по месяцам;
- активный месяц как тёмный pill;
- строка фильтров;
- справа тёмный summary capsule;
- мягкая светлая сетка;
- строки ресурсов / машин / объектов;
- booking bars с быстрым визуальным считыванием;
- текущий день выделен `#ffcd3c`.

Booking bars:
- capsule-форма;
- статус считывается сразу;
- label длительности может быть отдельным тёмным badge;
- не должны выглядеть как старый Gantt.

### CRM / detail page
- крупный header;
- status controls;
- summary blocks;
- модульные секции;
- документы, история, комментарии, связи.

### Forms
- большие поля;
- мягкие поверхности;
- focus без агрессивного синего;
- чистая секционная структура.

## 10. Motion
- лёгкий lift;
- fade;
- мягкое усиление shadow;
- плавное перемещение активного pill.

Не нужно:
- шумные spring-анимации;
- долгие transitions;
- декоративные эффекты без пользы.

Рекомендуемо:
- `160ms - 240ms` для обычных действий;
- `240ms - 320ms` для overlays и panels.

## 11. Accessibility
- достаточный контраст;
- понятные hover/active/focus states;
- не полагаться только на цвет;
- хорошая читаемость длинных списков, дат и статусов.

## 12. Что нужно нарисовать
- app shell;
- sidebar;
- search;
- pill buttons;
- chips;
- dashboard;
- calendar / timeline;
- detail page;
- form patterns;
- modal / drawer;
- empty / loading / error states.

## 13. Формула стиля
`Light premium backoffice + warm white surfaces + dark slate pills + soft glass accents + yellow highlights`