# Дизайн-система ordo-desk

Источник истины — прототип: `/home/meteor/sites/ordo-proto/public/index.html`
(живой: https://ordo-proto.sites.meteor.group). Здесь — словами то, что там кодом.

Планка: **это не MVP**. Интерфейс должен выглядеть и ощущаться законченным продуктом с первого
экрана: выверенная типографика, одинаковые отступы, ни одного «временного» состояния,
светлая и тёмная темы равного качества, отклик на действие быстрее, чем пользователь успевает
заметить.

## 1. Токены

Все цвета — CSS-переменные на `:root`, тёмная тема переопределяет только значения.
Три состояния темы: системная (`prefers-color-scheme`), явная светлая, явная тёмная
(`[data-theme]` на корне). Ни один цвет не объявляется только внутри медиазапроса.

**Светлая**
```
--bg #FAF9F7   --surface #FFFFFF  --surface-2 #F4F2EF  --surface-sunk #F0EEEA  --rail #EDEAE5
--ink #1C1A18  --ink-2 #46413C    --muted #7A736C      --faint #9A938B
--line #E7E3DD --line-strong #D6D0C8
--accent #C9452C  --accent-ink #FFFFFF  --accent-soft rgba(201,69,44,.10)
```
**Тёмная**
```
--bg #141312   --surface #1C1B19  --surface-2 #232120  --surface-sunk #1A1918  --rail #100F0E
--ink #EDE9E4  --ink-2 #C9C3BB    --muted #99928A      --faint #7C756D
--line #302D2A --line-strong #3E3A36
--accent #E4674B  --accent-ink #1A1412  --accent-soft rgba(228,103,75,.14)
```
**Семантика статусов** (пара «текст / подложка» в каждой теме):
зелёный `#2F6B52`, янтарный `#9A6A11`, фиолетовый `#5B49A0`, синий `#26608F`, серый `#6B655E`.
Акцент — только для действий, просрочки и активного состояния. Статусы никогда не красятся акцентом.

**Скругления** `--r-sm 6px` (чипы, кнопки), `--r-md 10px` (карточки, поповеры), `--r-lg 14px` (панели).
**Тени** три уровня: карточка, поднятая карточка, поповер/модалка.

## 2. Типографика

Системный стек (`-apple-system, Segoe UI, Roboto…`) — он же у Notion и Todoist, даёт нативное
ощущение и нулевой вес. Веб-шрифт не подключаем; если однажды понадобится — только self-hosted woff2.

| Роль | Размер / вес |
|---|---|
| Заголовок экрана | 26 px / 700, tracking −0.02em |
| Заголовок документа | 32 px / 700, tracking −0.025em |
| Заголовок панели | 15 px / 600 |
| Основной текст | 14 px / 400, интерлиньяж 1.45 |
| Вторичный | 13 px, цвет `--muted` |
| Подпись, счётчик | 12 px, цвет `--faint` |
| Ярлык-заголовок группы | 11 px / 600, uppercase, tracking .07em |

Цифры в колонках, датах и суммах — `font-variant-numeric: tabular-nums`.
Технические строки (пути файлов, домены, телефоны, суммы) — моноширинный стек.

## 3. Каркас

Три колонки: **рейл 58 px** (иконки разделов) → **боковая панель 268 px** (контекст раздела) →
**контент**. Рейл и панель липкие на всю высоту. Сверху контента — липкая полоса с хлебными
крошками, которые всегда начинаются с аккаунта.

Брейкпоинты: `≤1040px` — боковая панель скрывается, рейл остаётся; `≤720px` — рейл прячется,
появляется горизонтальная навигация. Мобильная раскладка обязана быть рабочей, а не «оно как-то
открывается»: списки в одну колонку, доски скроллятся горизонтально, модалки во всю ширину.

## 4. Компоненты

- **Рейл** — иконка + подсказка при наведении; активный пункт на светлой подложке с акцентным цветом; точка-маркер для разделов в разработке.
- **Переключатель аккаунта** — квадратная плитка вверху рейла, по клику поповер со списком контуров, ролями и кнопкой «Новый аккаунт».
- **Чип** (`.chip`) — статус, свойство, ссылка на сущность. Пять семантических цветов + пунктирный вариант для пустого значения.
- **Метка** (`.tag`) — скруглённая пилюля с иконкой-биркой; нажатая работает как фильтр.
- **Строка задачи** — круглый чекбокс (акцентный контур = приоритет), заголовок, метаданные: срок (красный при просрочке), проект точкой, метки, ссылки на сущности.
- **Карточка доски** — обложка **в край карточки** (гасим внутренние отступы, скругляем только верхние углы, соотношение 16:9), заголовок, метаданные, при необходимости полоса прогресса.
- **Плитка галереи** — обложка 16:9, заголовок, чипы, подвал со счётчиками.
- **Таблица** — липкая шапка с иконкой типа поля, зебры нет, ховер строки, группировочные строки с подложкой; горизонтальный скролл внутри своего контейнера.
- **Полоса видов** — вкладки сохранённых видов + «+ Вид», справа настройка вида и фильтр.
- **Панель настройки вида** — отображение, группировка, фильтры, сортировка, обложка, видимые поля, область (личный / общий).
- **Композер задачи** — модалка: строка с подсветкой разобранных дата/метка/приоритет, описание, ряд чипов-свойств, выбор проекта с группировкой по аккаунтам, режим «Разобрать текст».
- **Редактор** — блоки с ручкой перетаскивания при наведении, slash-меню, выноски, чек-листы, блок «База», обратные ссылки внизу страницы.
- **Календарь** — сетка месяца, сегодня выделен акцентной подложкой, события цветными пилюлями.
- **KPI-плитка** — подпись, крупное табличное число, дельта; зелёный для поступлений, акцент для обязательств.
- **Подсказка** (`.hint`) — блок на акцентной подложке, объясняет механику. В прототипе несёт роль спецификации; в продукте остаётся только там, где реально помогает.

## 5. Иконки

Инлайновый SVG-спрайт, 24×24, обводка `currentColor` 1.7 px, скруглённые концы, без заливок
кроме точек-акцентов. Размеры: 20 px в рейле, 16 px в списках, 14 px в чипах. Псевдографика
(▦ ◫ ☗) запрещена — на разных ОС ломается.

Набор: projects, tasks, doc, base, finance, search, theme, settings, grid, clock, star, stage,
archive, calendar, board, home, building, globe, phone, tool, users, check, circle, x, inbox,
layers, percent, down, up, sync, flag, link, image, tag, pin, filter.

## 6. Движение и отклик

- Переходы 120–140 мс, только `background`, `color`, `box-shadow`, `transform`.
- Наведение на карточку — подъём на 1 px и усиление тени.
- `prefers-reduced-motion` выключает всё.
- Любое действие пользователя отражается в интерфейсе мгновенно (оптимистично), сеть догоняет фоном.

## 7. Доступность и мелочи

Видимый фокус на всех интерактивных элементах, минимальная цель нажатия 32 px, контраст текста
не ниже 4.5:1 в обеих темах, у иконок-кнопок обязательный `title`/`aria-label`,
модалки закрываются по `Esc` и клику по фону.