# FINAM Design System Бренд-контракт дизайн-машины Финам. Пакет следует формату OpenDesign `od-design-system-project/v1`; этот файл — каноничный текст для агентов, `tokens.css` — каноничные значения, `utilities.css` — каноничные базовые классы (`.fn-micro`, `.fn-icon`, `.fn-logo`, `.fn-badge`), `components.html` — UI-кит (витрина). ## Назначение и охват Система обслуживает все артефакты машины: промо-лендинги, посты для соцсетей, баннерные наборы, презентации и дашборды — прежде всего продукты брокера (broker.finam.ru) и раздела «Во что инвестировать». Бренд-база — официальный web-ui-kit Финама (`@finam/web-ui-kit-theme-finam`, тема finam): его семантика переведена в наши токены один-в-один. Правила одинаковы для экрана и печати из браузера; формат определяет шаблон, бренд определяет этот файл. Всё, что не оговорено здесь, решается по `components.html` как по витрине, а при молчании витрины — в пользу сдержанного финансового стиля на серебряных нейтралах кита. ## Характер бренда и тональность Финам — инвестиционная компания с 30-летней историей: надёжность биржевого дома плюс энергия роста частного инвестора. Бренд-акцент — жёлтый (как в официальном web-ui-kit: primary-кнопки, ссылки, активные состояния); корпоративный красный — цвет логотипа и маркетинговых плашек; синий — вспомогательный info-акцент. Визуальный характер — уверенный рациональный оптимизм: смелые заголовки, честные цифры, много воздуха, акцент только там, где внимание должно остановиться. Тон текста: прямой, конкретный, без пафоса и без канцелярита. Числа — с разрядами, знаком тренда и периодом. Обращение — на «вы». Терминология трейдинга допустима без разъяснений (портфель, купон, ICO — нет: пишем «первичное размещение»). ## Цвет Система трёхслойная (как в web-ui-kit): примитивы `--fn-prim-*` живут только в `tokens.css`; семантика `--fn-color-*` — единственный разрешённый слой для артефактов; у каждой семантической роли есть светлое и тёмное значение (`[data-theme="dark"]`). | Роль | Токен | Значение (light) | | --- | --- | --- | | Бренд-заливка: primary-кнопки, активные табы | `--fn-color-brand` | #FFC759 (yellow-300) | | Ховер / нажатие заливки | `--fn-color-brand-hover` / `-pressed` | #FFBA30 / #F9A605 | | Бренд-текст: ссылки, декоративные акценты | `--fn-color-brand-text` | #E08F05 (yellow-600) | | Текст/иконки на бренд-заливке | `--fn-color-onbrand` | #000000 | | Корпоративный красный (логотип, плашки) | `--fn-color-corporate` | #E84144 | | Фон страницы / muted / инверсный | `--fn-color-bg` / `-muted` / `-inverse` | #FFFFFF / #FAFAFC / #1A1A1F (silver) | | Текст / вторичный | `--fn-color-ink` / `-secondary` | #1A1A1F / #6F6F7C (silver) | | Границы / усиленные | `--fn-color-border` / `-strong` | #EBEBF2 / #A4A4B2 (silver) | | Рост, позитив | `--fn-color-positive` | #1D9169 (emerald-500) | | Падение, негатив | `--fn-color-negative` | #E84144 | | Предупреждение, риск | `--fn-color-warning` | #E08F05 (yellow-600) | | Инфо | `--fn-color-info` | #198CFF (blue) | | Фокус, активная рамка ввода | `--fn-color-focus` | #FFBA30 (yellow-400) | | Premium (IPO, pre-IPO) | `--fn-color-premium` | #9946FC | Правила: primary-кнопка — жёлтая заливка с чёрным текстом (`onbrand`); ссылки и цифры-акценты на светлом — `brand-text` (жёлтый 600), не заливка. `brand-text` — только для ссылок и декоративных акцентов (пагинация слайда, порядковые номера): контраст жёлтого к белому ниже нормы, поэтому числа-данные (KPI, котировки, метрики) — `--fn-color-ink`, как text-base в ките. Красная кнопка на экране одна и только корпоративная («Открыть счёт», «Стать клиентом»). Синий — только info-семантика, никогда не бренд. Динамика цен — строго positive/negative со знаком ▲▼. Графики — палитра `--fn-prim-chart-1…15`, не бренд-цвет. Бейджи-тренды — на overlay-фонах (`--fn-overlay-*`), не на сплошных заливках. ## Типографика Шрифт один — Inter (начертания 400/500/600/700/800, `--fn-font-sans`, подключается как «Inter var» из `fonts/` при наличии). Числовые ряды — тот же Inter с табличными цифрами (`font-variant-numeric: tabular-nums`, у кита — tnum/lnum): котировки, доходности, суммы выравниваются по разрядам без моно-гарнитуры. | Токен | Применение | Стиль | | --- | --- | --- | | `--fn-text-display` | Hero, обложка | 700, clamp(40–52px), трекинг −2% | | `--fn-text-h1` | H1 | 700, 40/48, трекинг −2% | | `--fn-text-h2` | H2 раздела | 700, 28/32, трекинг −1.8% | | `--fn-text-h3` | H3 | 600, 24/28, трекинг −1.6% | | `--fn-text-h4` / `h5` | Подзаголовки | 600, 20/24 и 18/24 | | `--fn-text-lead` | Лид-абзац | 400, 18/24, вторичный цвет | | `--fn-text-body` | Основной текст | 400, 16/24 | | `--fn-text-small` | Подписи | 400, 14/20 | | `--fn-text-micro` | Метки, бейджи | 600, 12/16 | | `--fn-text-num` | Числа, таблицы | 500, Inter, tabular-nums | | `--fn-text-body-strong` | Кнопки, аккордеоны, активные пункты | 600, 16/24 | | `--fn-text-button-l` | Большая кнопка (buttonLarge кита) | 600, 17/24 | | `--fn-text-small-strong` | Компактные активные пункты, табы | 600, 14/20 | | `--fn-text-lead-l` | Тезисы слайдов, крупный второй текст | 400, 24/28 | | `--fn-text-banner-l/m/s` | Сообщение баннера (64/56/36) | 700, кадр формата | Заголовки — 600–700, основной текст — 400; курсив — брак. Трекинг заголовков — отрицательный, токенами `--fn-tracking-*`, крупный текст без трекинга — брак. Вес и кегль живут только в shorthand-токенах шкалы: отдельные `font-weight`/`font-size` объявления в артефакте — брак. Микро-метка (micro + капслок + разрядка), логотип-плашка «ФИНАМ», нейтральный бейдж и CSS иконок — базовые классы `utilities.css` (`.fn-micro`, `.fn-logo`, `.fn-badge`, `.fn-icon`), подключаются ссылкой рядом с `tokens.css`; локальные копии этих блоков в стилях артефакта — дублирование, брак. ## Макет: сетка, отступы, радиусы, тени Базовая сетка — 4px (шкала конструктора: 2·4·8·12·16·20·24·32·40·48·64·80·96, токены `--fn-space-1…12`). Контентная колонка — `--fn-container` (1200px), узкая — 760px. Вертикальный ритм секций лендинга — `--fn-space-11` (80px). Auto-fit-сетки карточек: минимум обычной карточки — `--fn-card-min` (240px), компактной (KPI, цифры) — `--fn-card-min-compact` (200px); числа внутри `grid-template-*` — только токены или `calc()`/`clamp()` от них. Габариты кадров и модулей формата — размеры баннеров (1920×480, 970×250, 1080×1080), слайда (1280×720), поста, ширина сайдбара дашборда, высота диаграммы и столбцов — константы формата: объявлены в правилах шаблона и живут в его каркасе, токенами не покрываются. Радиусы: кнопки и бейджи — **pill** (`--fn-radius-pill`, 1000px); инпуты — `--fn-radius-m` (8px); карточки — `--fn-radius-xl` (16px); мелкие элементы — 6px. Скругление вне шкалы — брак. Тени — мягкие, холодные, из конструктора: `--fn-shadow-s` (кнопка), `-m` (подъём карточки), `-l` (карточка с hover), `-dialog`. Тень с цветным ореолом — брак. ## Движение, состояния и темы Длительности — `--fn-motion-fast` 140ms для отклика, `--fn-motion-base` 240ms для появления, кривая `--fn-ease`. Интерактив имеет четыре состояния: покой, hover, pressed, focus; фокус — обводка `--fn-focus-ring`, никогда без неё. Транзиции layout — брак. Тёмная тема — переключение атрибута `data-theme="dark"` на корне: все семантические токены перевязываются, разметка не меняется. Артефакт поддерживает тёмную тему, если формат экранный и в брифе она упомянута. ## Компоненты и паттерны Каноничный вид — UI-кит `components.html`; при расхождении кода и этого текста верен этот текст, при молчании текста — кит. - **Кнопки**: pill; primary — жёлтая заливка с чёрным текстом (`onbrand`), secondary — белая с границей и бренд-текстом, ghost — текстовая бренд-текстом, corporate — красная (одна на экран). Размеры S/M/L. - **Бейджи и тренды**: pill на overlay-фоне 12–16%; тренд — знак ▲▼ плюс цвет; premium-бейдж (IPO/pre-IPO) — фиолетовая заливка. - **Табы-фильтры**: сегмент pill на muted-фоне, активный — бренд-заливка жёлтым с чёрным текстом (паттерн каталога «Во что инвестировать»). - **Карточки инструментов**: иконка-плашка на brand-overlay, бейдж рынка, заголовок h5, описание, метрики Inter tabular (значение + подпись) и CTA secondary; hover — тень `-l` и подъём 2px. - **Числовые ряды и таблицы котировок**: Inter, tabular-nums, выравнивание по разрядам; тикер слева, цена и изменения вправо. - **KPI-карточки**: метка-бейдж, значение h2 табличными цифрами, тренд со знаком и периодом, подпись-источник. - **Формы**: инпуты с рамкой 8px, метка сверху, фокус — жёлтая рамка (`--fn-color-focus`) с halo-ореолом, ошибка — текст под полем. - **Инверсные блоки**: фон `--fn-color-bg-inverse` (silver-950), hero лендингов — с kicker-меткой кампании. Логотип — словесный знак «ФИНАМ»: плашка `--fn-color-corporate` (красная) с белым текстом или белый на красном; вектор из `assets/` при появлении. ## Иконки Канонический набор — реестр `icons.html`: штриховые иконки на сетке 24×24, штрих `--fn-icon-stroke`, скруглённые окончания, цвет наследуется (`currentColor`), размер — только `--fn-icon-size-s|m|l` (16/24/32). Иконка встраивается в артефакт инлайн-копией SVG-разметки сниппета из реестра, канонический CSS-блок `.fn-icon` живёт в `utilities.css` и подключается ссылкой рядом с `tokens.css`; внешние спрайты и `` не используются — артефакт обязан открываться и с диска. Иконка вне реестра и эмодзи вместо иконки — брак; новая иконка — сначала реестр (правка системы одним коммитом), потом артефакты. Смысловая иконка получает `role="img"` + `aria-label`, декоративная — `aria-hidden="true"`. Иконка-плашка карточки — фон `--fn-overlay-brand`, иконка `--fn-icon-size-l` цветом `--fn-color-brand-text`. Рост/падение — `positive`/`negative`; прочие иконки — цвет текста родителя, не бренд и не корпоративный красный. ## Изображения Артефакт самодостаточен: хотлинк на внешние URL — брак. Источники два: - **Бренд-ассеты** (логотип, продукт-шоты, фото спикеров) — `design-systems/finam/assets/`, подключаются относительной ссылкой, как `tokens.css`. Появление файла в `assets/` — правка системы. - **Контентные изображения брифа** — `artifacts//assets/`; приносит заказчик (бриф либо intake-папка `source/intake/` — см. `source/INTAKE.md`), лицензию оператор не угадывает. SVG-иллюстрации и графику оператор вправе строить сам — из токенов (`--fn-prim-chart-*`, overlay), как элементы кита. Вёрстка: контентное `` — с осмысленным `alt`, декоративное — `alt=""`; `loading="lazy"` вне первого экрана; обтравка — радиусом из шкалы; текст поверх фото — только через overlay-подложку с сохранением контраста. Форматы: SVG — схемы и иллюстрации, WebP/JPEG — фото, PNG — только там, где нужна прозрачность. Слот изображения в каркасе без картинки в брифе удаляется, а не заполняется заглушкой. ## Работа с данными и цифрами Инвестиционный продукт — это числа, им нужна сцена. Ключевая цифра модуля — display/h2-размером моно-цифрами; единица и период рядом. Доходности и динамика всегда с периодом и знаком; цвет — только семантика. Графики — из палитры `--fn-prim-chart-*`. Дисклеймеры о рисках — `--fn-text-small` вторичным цветом в футере, текст из брифа, редактировать нельзя. ## Доступность Контраст текста к фону — от 4.5:1 (крупного от 18px — от 3:1). Информация цвета дублируется знаком или текстом: у тренда — ▲▼, у статусов — подпись. Цель табуляции видима фокус-обводкой. Смысл изображений — через alt; декоративным — `alt=""`. ## Антипаттерны Твёрдые границы машины: красный как цвет primary-кнопок (красная кнопка — только корпоративный CTA); синий как бренд или в трендах и графиках; белый текст на жёлтой заливке; жёлтый 300/400 как цвет текста на светлом фоне (ссылки — только `brand-text`); нейтралы вне шкалы silver; моно-гарнитура в числовых рядах (только Inter + tabular-nums); заголовки без отрицательного трекинга; отдельные `font-weight`/`font-size` вне shorthand-токенов шкалы; скругление кнопок не-pill; курсив; тень с цветным ореолом; отступы вне шкалы `--fn-space-*`; числа в минимумах grid-сеток вместо `--fn-card-min*`; локальные копии базовых классов `utilities.css` (`.fn-micro`, `.fn-icon`, `.fn-logo`, `.fn-badge`); сплошная заливка там, где паттерн требует overlay; иконка вне реестра `icons.html`; эмодзи как иконка; числовой размер иконки вместо `--fn-icon-size-*`; внешний хотлинк изображений. ## Провенанс и статус токенов Токены **verified**: семантика цвета, тёмная тема, шрифты и типографика выровнены 2026-10-27 с официальным web-ui-kit Финама — npm-пакеты `@finam/web-ui-kit-core@4.4.1`, `@finam/web-ui-kit-theme-finam@1.4.0` (тема finam light/dark), `@finam/web-ui-kit-components@3.34.1`; полный отчёт и метод — `source/web-ui-kit-research.md`. Палитра графиков и сетка леридинга — из CSS-бандлов конструктора broker.finam.ru (Wayback Machine, снимки 2025-07-11): `source/broker-finam-research.md`; палитра графиков кита там же — задокументированная альтернатива. Кампании-конструктора имели альтернативные бренд-темы (electric #4c57ed, green #0bad67, gold #c8a872, yellow #ffba30, purple #9946fc) — для кампаний допустима тема поверх семантики, если бриф её требует; базовые артефакты — только жёлтый бренд кита. Правка бренда — правка этого файла, `tokens.css` и кита одним коммитом; шрифты кладутся в `fonts/` и подключаются `@font-face` в `tokens.css`; вектор логотипа — в `assets/`. Иконки реестра `icons.html` — собственные (сет 24×24 под токены машины), статус provisional: при появлении официального иконочного набора Финам заменяются в одном месте — реестре. Сеточные (`--fn-card-min*`), strong/lead, баннерные и кнопочный (`--fn-text-button-l`) токены добавлены 2026-10-27 по решению оператора с заказчиком (триаж `.scratch/template-standards-tails/issues/01–02`) — продолжение шкал кита, не его семантика.