05 — Design Direction
Единый источник правды по визуальному языку проекта. На него ссылаются PRD
(§7) и Roadmap (эпик P1). Технически токены реализованы в
transparency/src/styles/global.css (Tailwind 4, блок @theme) и будут
переиспользованы в app/.
Принципы
- Тёмная тема по умолчанию. Светлой темы в Phase 1 нет.
- Числа важнее украшений. Главные финансовые цифры — крупные, моноширинные. Интерфейс — спокойный, без визуального шума.
- Минимум анимаций. Только функциональные переходы (hover, фокус). Никаких декоративных движений.
- Никаких эмодзи в продакшен-UI, кроме статусных цветовых индикаторов 🟢 🟡 🔴 (норма / внимание / риск).
- Семантика цветом. Цвет несёт смысл (успех/предупреждение/опасность), а не декорацию.
- Скругление углов — единое, 4px (
rounded≈ 0.25rem).
Цветовые токены
| Токен | HEX | Назначение |
|---|---|---|
bg-primary | #0A0A0B | Основной фон страницы |
bg-surface | #18181B | Карточки, панели |
bg-elevated | #27272A | Приподнятые блоки, код, поля |
border-subtle | #3F3F46 | Обычные границы |
border-strong | #71717A | Акцентные границы (hover) |
text-primary | #FAFAFA | Основной текст |
text-secondary | #A1A1AA | Вторичный текст |
text-muted | #71717A | Подписи, метаданные |
color-success | #22C55E | Маржа в норме (≥10%), успех |
color-warning | #EAB308 | Внимание (маржа 5–10%) |
color-danger | #EF4444 | Риск (маржа <5%), ошибки |
color-info | #3B82F6 | Ссылки, нейтральные акценты |
color-accent | #FACC15 | Ключевые числа, бренд-акцент |
Цветовой индикатор маржи (соответствует PRD §3.3):
- 🟢
color-success—margin_pct >= 10% - 🟡
color-warning—5% <= margin_pct < 10% - 🔴
color-danger—margin_pct < 5%
Типографика
| Роль | Шрифт | Где |
|---|---|---|
font-display | JetBrains Mono | Заголовки, крупные числа, бренд |
font-body | Inter (fallback system-ui) | Основной интерфейсный текст |
font-mono | JetBrains Mono | Код, идентификаторы, суммы |
Включены типографские фичи начертания: font-feature-settings: "ss01", "cv11".
Реализация
- Стройплощадка (
transparency/): Tailwind 4, токены вsrc/styles/global.css(@theme). Имена utility-классов:bg-bg-primary,text-text-secondary,border-border-subtle,text-color-accentи т.п. - Приложение (
app/, Phase 1): тот же набор токенов и принципов, переносится из global.css при инициализации Next.js. - Любое изменение палитры/типографики — сначала здесь, затем в коде.
Ссылки
docs/plaid/03-PRD.md§7 — дизайн-система в контексте требованийdocs/plaid/02-PRODUCT-ROADMAP.md— эпик P1 (тёмная тема)transparency/src/styles/global.css— фактическая реализация токеновCLAUDE.md— правило про статусные индикаторы 🟢🟡🔴