Дизайн-система / UI Kit портала CFO — основы
Цвета, токены, справочники, иконки, графики и правила темы. Этот файл охватывает разделы 1–6 и 8. Референсы экранов и карта приложения вынесены в отдельный файл.
1. Основы интерфейса
Базовая палитра, типографика и паттерны компонентов, на которых строится весь портал CFO (включая конструктор бизнес-модели и каталоги).
1.1. Цветовая палитра
Один стабильный акцентный цвет для действий, темный фон для данных, семантические цвета для статусов.
Акцент
#2b8cee
Фон
#101922
Поверхность
#18232e
1.2. Типографика
H1 / 36 px / 900
Единый экран CFO
H2 / 24 px / 700
Справочники и каталоги
Body / 14 px / 400
Основной текст для описаний и методологии бизнес-модели
2. Компоненты и системы
Основные компоненты UI Kit и паттерны их использования.
2.1. Кнопки
2.2. Элементы формы
3. Справочники и структуры данных
Основные справочники, используемые в системе.
Справочник баров
- • 40 действующих баров
- • Несколько концепций
- • Разные города
- • Статус управления
Справочник концепций
- • 5-7 концепций
- • Коктейльные бары
- • Пивные бары
- • Винные бары
Справочник инвесторов
- • Обезличенные аватары
- • Связи инвестор-бар
- • Доли участия
- • История периодов
Справочник расходов
- • COGS (себестоимость)
- • OPEX (операционные)
- • Staff (зарплаты)
- • Marketing (маркетинг)
4. Визуальные элементы
Аватары, иконки, статусы и бейджи.
4.1. Аватары пользователей
Обезличенные аватары на основе инициалов + градиент
4.2. Бейджи статусов
5. Графики и визуализация KPI
Основные типы графиков для визуализации бизнес-модели.
5.1. Столбчатые диаграммы
Главный тип графиков для CFO: выручка по месяцам, по барам, по категориям расходов.
Пример: выручка по месяцам (2026)
Один столбец (например, текущий месяц) выделяется более насыщенным оттенком
6. Макеты и типовые экраны
Основные паттерны для построения интерфейса портала CFO.
6.1. Dashboard
KPI-карточки, графики, главные показатели портала CFO
6.2. Справочники
Таблицы, поиск, фильтры и карточки данных