workbuddy_skills/open-design/design-systems/stripe/DESIGN-ru.md

# Дизайн-система на основе Stripe

> Category: Финтех и криптовалюты
> Платёжная инфраструктура. Фирменные пурпурные градиенты, элегантность на насыщенности 300.

## 1. Визуальная тема и атмосфера

Сайт Stripe — эталон финтех-дизайна: система, которая одновременно ощущается технологичной и роскошной, точной и тёплой. Страница открывается на чистом белом холсте (`#ffffff`) с тёмно-синими заголовками (`#061b31`) и фирменным пурпурным (`#533afd`), который служит и якорем бренда, и интерактивным акцентом. Это не холодный, клинический пурпур корпоративного программного обеспечения — это насыщенный, сочный фиолетовый, который читается как уверенный и премиальный. Общее впечатление — финансовое учреждение, переработанное лучшей в мире шрифтовой мастерской.

Переменный шрифт `sohne-var` — определяющий элемент визуальной идентичности Stripe. Каждый текстовый элемент включает стилистический набор `"ss01"` OpenType, который модифицирует формы символов для выражено геометрического, современного ощущения. На отображаемых размерах (48px–56px) sohne-var работает с насыщенностью 300 — исключительно лёгкий вес для заголовков, создающий эфемерный, почти нашёптанный авторитет. Это противоположность конвенции «жирный заголовок-герой»; заголовки Stripe ощущаются так, будто им не нужно кричать. Отрицательный межбуквенный интервал (-1.4px на 56px, -0.96px на 48px) сжимает текст в плотные, инженерные блоки. На меньших размерах система также использует насыщенность 300 с пропорционально уменьшенным трекингом и табличные цифры через `"tnum"` для отображения финансовых данных.

Что по-настоящему отличает Stripe — это система теней. Вместо плоского или однослойного подхода большинства сайтов, Stripe использует многослойные тени с синим оттенком: фирменное сочетание `rgba(50,50,93,0.25)` и `rgba(0,0,0,0.1)` создаёт тени с прохладной, почти атмосферной глубиной — словно элементы парят в сумеречном небе. Сине-серый подтон основного цвета тени (50,50,93) напрямую перекликается с тёмно-синей и пурпурной палитрой бренда, делая даже ощущение высоты фирменным.

**Ключевые характеристики:**
- sohne-var с OpenType `"ss01"` на всём тексте — пользовательский стилистический набор, определяющий леттеринг бренда
- Насыщенность 300 как фирменный вес заголовков — лёгкий, уверенный, против конвенций
- Отрицательный межбуквенный интервал на отображаемых размерах (-1.4px на 56px, прогрессивное ослабление вниз)
- Многослойные тени с синим оттенком на основе `rgba(50,50,93,0.25)` — высота с фирменным цветом
- Тёмно-синие (`#061b31`) заголовки вместо чёрных — тёплые, премиальные, финансового уровня
- Консервативное скругление углов (4px–8px) — ничего таблеткообразного, ничего резкого
- Акценты рубин (`#ea2261`) и маджента (`#f96bee`) для градиентов и декоративных элементов
- `SourceCodePro` как моноширинный компаньон для кода и технических меток

## 2. Цветовая палитра и роли

### Основные
- **Stripe Purple** (`#533afd`): Основной цвет бренда, фоны CTA, текст ссылок, интерактивные выделения. Насыщенный сине-фиолетовый, который служит якорем всей системы.
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Основной цвет заголовков. Не чёрный, не серый — очень тёмный синий, добавляющий тепло и глубину тексту.
- **Pure White** (`#ffffff`): Фон страниц, поверхности карточек, текст кнопок на тёмном фоне.

### Бренд и тёмные
- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Глубокий индиго для тёмных секций, фонов подвала и иммерсивных моментов бренда.
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. Самый тёмный нейтральный — почти чёрный с синим подтоном для максимальной глубины без резкости.

### Акцентные цвета
- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Тёплый красно-розовый для иконок, предупреждений и акцентных элементов.
- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Яркий розово-пурпурный для градиентов и декоративных выделений.
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Тонированная поверхность для карточек и значков в маджентовой теме.

### Интерактивные
- **Primary Purple** (`#533afd`): Основной цвет ссылок, активные состояния, выбранные элементы.
- **Purple Hover** (`#4434d4`): Более тёмный пурпурный для hover-состояний основных элементов.
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Тёмный пурпурный для hover-состояний иконок.
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Мягкая лаванда для приглушённых hover-фонов.
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Цвет выделения в ползунке диапазона и полях ввода.

### Нейтральная шкала
- **Heading** (`#061b31`): Основные заголовки, текст навигации, сильные метки.
- **Label** (`#273951`): `--hds-color-input-text-label`. Метки форм, второстепенные заголовки.
- **Body** (`#64748d`): Вторичный текст, описания, подписи.
- **Success Green** (`#15be53`): Значки статуса, индикаторы успеха (с альфой 0.2–0.4 для фонов/рамок).
- **Success Text** (`#108c3d`): Цвет текста значка успеха.
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Акцент для предупреждений и выделений.

### Поверхности и рамки
- **Border Default** (`#e5edf5`): Стандартный цвет рамки для карточек, разделителей и контейнеров.
- **Border Purple** (`#b9b9f9`): Рамки активного/выбранного состояния для кнопок и полей ввода.
- **Border Soft Purple** (`#d6d9fc`): Тонкие пурпурно-тонированные рамки для второстепенных элементов.
- **Border Magenta** (`#ffd7ef`): Розово-тонированные рамки для элементов в маджентовой теме.
- **Border Dashed** (`#362baa`): Пунктирные рамки для зон перетаскивания и элементов-заглушек.

### Цвета теней
- **Shadow Blue** (`rgba(50,50,93,0.25)`): Фирменный — основной цвет тени с синим оттенком.
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Более глубокая синяя тень для приподнятых элементов.
- **Shadow Black** (`rgba(0,0,0,0.1)`): Вторичный слой тени для усиления глубины.
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Мягкая рассеянная тень для тонкого подъёма.
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Минимальная рассеянная тень для лёгкого эффекта.

## 3. Правила типографики

### Семейство шрифтов
- **Основной**: `sohne-var`, с резервным: `SF Pro Display`
- **Моноширинный**: `SourceCodePro`, с резервным: `SFMono-Regular`
- **Функции OpenType**: `"ss01"` включён глобально на всём тексте sohne-var; `"tnum"` для табличных чисел в финансовых данных и подписях.

### Иерархия

| Роль | Шрифт | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Функции | Примечания |
|------|-------|--------|--------------|---------------|-----------------------|---------|------------|
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (тесно) | -1.4px | ss01 | Максимальный размер, авторитет шёпотом |
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (тесно) | -0.96px | ss01 | Второстепенные заголовки-герои |
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (тесно) | -0.64px | ss01 | Заголовки секций функций |
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (тесно) | -0.26px | ss01 | Заголовки карточек, подсекции |
| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (тесно) | -0.22px | ss01 | Заголовки меньших секций |
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Описания функций, вступительный текст |
| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Стандартный текст для чтения |
| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (тесно) | normal | ss01 | Текст основной кнопки |
| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (тесно) | normal | ss01 | Второстепенные/компактные кнопки |
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (тесно) | normal | ss01 | Ссылки навигации |
| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Маленькие метки, метаданные |
| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Мелкий шрифт, временные метки |
| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Финансовые данные, числа |
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (тесно) | 0.1px | ss01 | Крошечные метки, маркеры осей |
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (тесно) | -0.3px | tnum | Данные диаграмм, маленькие числа |
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (тесно) | normal | ss01 | Наименьшие метки |
| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (свободно) | normal | -- | Блоки кода, синтаксис |
| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (свободно) | normal | -- | Жирный код, ключевые слова |
| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (свободно) | normal | uppercase | Технические метки |
| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (тесно) | normal | ss01 | Крошечные аннотации кода |

### Принципы
- **Лёгкий вес как фирменный знак**: Насыщенность 300 на отображаемых размерах — самый отличительный типографический выбор Stripe. Там, где другие используют 600–700, чтобы привлечь внимание, Stripe использует лёгкость как роскошь — текст настолько уверен в себе, что ему не нужна тяжесть для авторитетности.
- **ss01 везде**: Стилистический набор `"ss01"` обязателен. Он модифицирует определённые глифы (вероятно, альтернативные формы `a`, `g`, `l`) для более геометрического, современного ощущения во всём тексте sohne-var.
- **Два режима OpenType**: `"ss01"` для отображаемого/основного текста, `"tnum"` для табличных цифр в финансовых данных. Они никогда не пересекаются — число в абзаце использует ss01, число в таблице данных использует tnum.
- **Прогрессивный трекинг**: Межбуквенный интервал сжимается пропорционально размеру: -1.4px на 56px, -0.96px на 48px, -0.64px на 32px, -0.26px на 26px, normal на 16px и ниже.
- **Простота двух насыщенностей**: Преимущественно 300 (текст и заголовки) и 400 (UI/кнопки). Жирный (700) в основном шрифте не используется — SourceCodePro применяет 500/700 для контраста кода.

## 4. Стилизация компонентов

### Кнопки

**Основная пурпурная**
- Фон: `#533afd`
- Текст: `#ffffff`
- Отступы: 8px 16px
- Радиус: 4px
- Шрифт: 16px sohne-var насыщенность 400, `"ss01"`
- Hover: фон `#4434d4`
- Применение: основные CTA («Начать сейчас», «Связаться с продажами»)

**Призрачная / с обводкой**
- Фон: прозрачный
- Текст: `#533afd`
- Отступы: 8px 16px
- Радиус: 4px
- Рамка: `1px solid #b9b9f9`
- Шрифт: 16px sohne-var насыщенность 400, `"ss01"`
- Hover: фон меняется на `rgba(83,58,253,0.05)`
- Применение: второстепенные действия

**Прозрачная информационная**
- Фон: прозрачный
- Текст: `#2874ad`
- Отступы: 8px 16px
- Радиус: 4px
- Рамка: `1px solid rgba(43,145,223,0.2)`
- Применение: третичные/информационные действия

**Нейтральная призрачная**
- Фон: прозрачный (`rgba(255,255,255,0)`)
- Текст: `rgba(16,16,16,0.3)`
- Отступы: 8px 16px
- Радиус: 4px
- Обводка: `1px solid rgb(212,222,233)`
- Применение: отключённые или приглушённые действия

### Карточки и контейнеры
- Фон: `#ffffff`
- Рамка: `1px solid #e5edf5` (стандарт) или `1px solid #061b31` (тёмный акцент)
- Радиус: 4px (плотно), 5px (стандарт), 6px (комфортно), 8px (выделенный)
- Тень (стандарт): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
- Тень (рассеянная): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
- Hover: тень усиливается, часто добавляется слой с синим оттенком

### Значки / Теги / Таблетки
**Нейтральная таблетка**
- Фон: `#ffffff`
- Текст: `#000000`
- Отступы: 0px 6px
- Радиус: 4px
- Рамка: `1px solid #f6f9fc`
- Шрифт: 11px насыщенность 400

**Значок успеха**
- Фон: `rgba(21,190,83,0.2)`
- Текст: `#108c3d`
- Отступы: 1px 6px
- Радиус: 4px
- Рамка: `1px solid rgba(21,190,83,0.4)`
- Шрифт: 10px насыщенность 300

### Поля ввода и формы
- Рамка: `1px solid #e5edf5`
- Радиус: 4px
- Фокус: `1px solid #533afd` или пурпурное кольцо
- Метка: `#273951`, 14px sohne-var
- Текст: `#061b31`
- Заглушка: `#64748d`

### Навигация
- Чистая горизонтальная навигация на белом, залипающая с размытым фоном
- Логотип бренда выровнен по левому краю
- Ссылки: sohne-var 14px насыщенность 400, текст `#061b31` с `"ss01"`
- Радиус: 6px на контейнере навигации
- CTA: пурпурная кнопка выровнена по правому краю («Войти», «Начать сейчас»)
- Мобильная: переключатель-гамбургер с радиусом 6px

### Декоративные элементы
**Пунктирные рамки**
- `1px dashed #362baa` (пурпурный) для заглушек/зон перетаскивания
- `1px dashed #ffd7ef` (маджента) для декоративных рамок в маджентовой теме

**Акценты с градиентом**
- Градиенты от рубина к мадженте (`#ea2261` до `#f96bee`) для декора героя
- Тёмные секции бренда используют фоны `#1c1e54` с белым текстом

## 5. Принципы макета

### Система отступов
- Базовая единица: 8px
- Шкала: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
- Примечательно: шкала плотная в малых значениях (каждые 2px от 4 до 12), отражая ориентированный на точность UI Stripe для финансовых данных

### Сетка и контейнер
- Максимальная ширина контента: примерно 1080px
- Герой: центрированная одноколоночная с щедрыми отступами, лёгкие заголовки
- Секции функций: сетки 2–3 колонки для карточек функций
- Полноширинные тёмные секции с фоном `#1c1e54` для иммерсии бренда
- Превью кода/дашборда как вложенные карточки с тенями синего оттенка

### Философия пустого пространства
- **Точные отступы**: В отличие от огромной пустоты минималистичных систем, Stripe использует взвешенное, целенаправленное пустое пространство. Каждый зазор — намеренный типографический выбор.
- **Плотные данные, щедрый хром**: Отображение финансовых данных (таблицы, диаграммы) упаковано плотно, но UI вокруг них снабжён щедрыми отступами. Это создаёт ощущение контролируемой плотности — как хорошо организованная таблица в красивой рамке.
- **Ритм секций**: Белые секции чередуются с тёмными секциями бренда (`#1c1e54`), создавая драматическую светло-тёмную каденцию, которая предотвращает монотонность без введения произвольного цвета.

### Шкала скругления углов
- Микро (1px): Мелкозернистые элементы, тонкое скругление
- Стандарт (4px): Кнопки, поля ввода, значки, карточки — рабочая лошадка
- Комфорт (5px): Стандартные контейнеры карточек
- Расслаблено (6px): Навигация, более крупные интерактивные элементы
- Крупный (8px): Выделенные карточки, элементы героя
- Составной: `0px 0px 6px 6px` для контейнеров со скруглением снизу (панели вкладок, подвалы выпадающих меню)

## 6. Глубина и высота

| Уровень | Обработка | Применение |
|---------|-----------|------------|
| Плоский (уровень 0) | Без тени | Фон страницы, строчный текст |
| Рассеянный (уровень 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Тонкий подъём карточки, намёки при hover |
| Стандарт (уровень 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Стандартные карточки, панели контента |
| Приподнятый (уровень 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Выделенные карточки, выпадающие меню, поповеры |
| Глубокий (уровень 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Модальные окна, плавающие панели |
| Кольцо (доступность) | обводка `2px solid #533afd` | Кольцо фокуса клавиатуры |

**Философия теней**: Система теней Stripe построена на принципе хроматической глубины. Там, где большинство дизайн-систем используют нейтрально-серые или чёрные тени, основной цвет тени Stripe (`rgba(50,50,93,0.25)`) — это глубокий сине-серый, перекликающийся с темно-синей палитрой бренда. Это создаёт тени, которые не просто добавляют глубину — они добавляют атмосферу бренда. Многослойный подход сочетает эту тень с синим оттенком с чисто чёрным вторичным слоем (`rgba(0,0,0,0.1)`) с другим смещением, создавая паллаксоподобную глубину, где фирменная тень расположена дальше от элемента, а нейтральная — ближе. Отрицательные значения размытия (-30px, -18px) гарантируют, что тени не выходят за горизонтальный след элемента, сохраняя высоту вертикальной и контролируемой.

### Декоративная глубина
- Тёмные секции бренда (`#1c1e54`) создают иммерсивную глубину через контраст фонового цвета
- Градиентные оверлеи с переходами от рубина к мадженте для декора героя
- Цвет тени `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) для теней верхнего края на залипающих элементах

## 7. Что делать и чего избегать

### Делать
- Использовать sohne-var с `"ss01"` на каждом текстовом элементе — стилистический набор И ЕСТЬ бренд
- Использовать насыщенность 300 для всех заголовков и основного текста — лёгкость — это фирменный знак
- Применять тени с синим оттенком (`rgba(50,50,93,0.25)`) для всех приподнятых элементов
- Использовать `#061b31` (тёмно-синий) для заголовков вместо `#000000` — тепло имеет значение
- Удерживать радиус скругления между 4px–8px — консервативное скругление намеренно
- Использовать `"tnum"` для любого табличного/финансового отображения чисел
- Слоить тени: синий оттенок далеко + нейтральный близко для паллакса глубины
- Использовать пурпурный `#533afd` как основной интерактивный цвет/CTA

### Не делать
- Не использовать насыщенность 600–700 для заголовков sohne-var — насыщенность 300 — голос бренда
- Не использовать большой радиус скругления (12px+, таблетки) на карточках или кнопках — Stripe консервативен
- Не использовать нейтрально-серые тени — всегда добавляйте синий оттенок (`rgba(50,50,93,...)`)
- Не пропускать `"ss01"` ни на каком тексте sohne-var — альтернативные глифы определяют характер
- Не использовать чисто чёрный (`#000000`) для заголовков — всегда `#061b31` тёмно-синий
- Не использовать тёплые акцентные цвета (оранжевый, жёлтый) для интерактивных элементов — пурпурный первичен
- Не применять положительный межбуквенный интервал на отображаемых размерах — Stripe отслеживает плотно
- Не использовать акценты маджента/рубин для кнопок или ссылок — они только для декоративных/градиентных целей

## 8. Адаптивное поведение

### Точки останова
| Название | Ширина | Ключевые изменения |
|----------|--------|--------------------|
| Мобильный | <640px | Одна колонка, уменьшенные размеры заголовков, сложенные карточки |
| Планшет | 640–1024px | Сетки 2 колонки, умеренные отступы |
| Десктоп | 1024–1280px | Полный макет, сетки функций 3 колонки |
| Большой десктоп | >1280px | Центрированный контент с щедрыми полями |

### Цели касания
- Кнопки используют комфортные отступы (8px–16px по вертикали)
- Ссылки навигации на 14px с достаточными интервалами
- Значки имеют минимум 6px горизонтальных отступов для зон касания
- Переключатель мобильной навигации с кнопкой радиуса 6px

### Стратегия сжатия
- Герой: отображение 56px -> 32px на мобильном, насыщенность 300 сохраняется
- Навигация: горизонтальные ссылки + CTA -> переключатель-гамбургер
- Карточки функций: 3 колонки -> 2 колонки -> одна колонка в столбик
- Тёмные секции бренда: сохраняют полноширинную обработку, уменьшают внутренние отступы
- Таблицы финансовых данных: горизонтальная прокрутка на мобильном
- Интервалы между секциями: 64px+ -> 40px на мобильном
- Шкала типографики сжимается: размеры героя 56px -> 48px -> 32px по точкам останова

### Поведение изображений
- Скриншоты дашборда/продукта сохраняют тень синего оттенка на всех размерах
- Декоративные градиенты героя упрощаются на мобильном
- Блоки кода сохраняют обработку `SourceCodePro`, могут горизонтально прокручиваться
- Изображения карточек сохраняют последовательный радиус 4px–6px

## 9. Руководство по промптам для агентов

### Быстрый справочник цветов
- Основной CTA: Stripe Purple (`#533afd`)
- Hover CTA: Purple Dark (`#4434d4`)
- Фон: Pure White (`#ffffff`)
- Текст заголовка: Deep Navy (`#061b31`)
- Основной текст: Slate (`#64748d`)
- Текст метки: Dark Slate (`#273951`)
- Рамка: Soft Blue (`#e5edf5`)
- Ссылка: Stripe Purple (`#533afd`)
- Тёмная секция: Brand Dark (`#1c1e54`)
- Успех: Green (`#15be53`)
- Декоративный акцент: Ruby (`#ea2261`), Magenta (`#f96bee`)

### Примеры промптов компонентов
- «Создай секцию героя на белом фоне. Заголовок 48px sohne-var насыщенность 300, line-height 1.15, letter-spacing -0.96px, цвет #061b31, font-feature-settings 'ss01'. Подзаголовок 18px насыщенность 300, line-height 1.40, цвет #64748d. Пурпурная кнопка CTA (#533afd, радиус 4px, отступы 8px 16px, белый текст) и призрачная кнопка (прозрачная, 1px solid #b9b9f9, текст #533afd, радиус 4px).»
- «Спроектируй карточку: белый фон, рамка 1px solid #e5edf5, радиус 6px. Тень: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Заголовок 22px sohne-var насыщенность 300, letter-spacing -0.22px, цвет #061b31, 'ss01'. Основной текст 16px насыщенность 300, #64748d.»
- «Создай значок успеха: фон rgba(21,190,83,0.2), текст #108c3d, радиус 4px, отступы 1px 6px, 10px sohne-var насыщенность 300, рамка 1px solid rgba(21,190,83,0.4).»
- «Создай навигацию: белая залипающая шапка с backdrop-filter blur(12px). sohne-var 14px насыщенность 400 для ссылок, текст #061b31, 'ss01'. Пурпурный CTA 'Начать сейчас' выровнен по правому краю (фон #533afd, белый текст, радиус 4px). Контейнер навигации радиус 6px.»
- «Спроектируй тёмную секцию бренда: фон #1c1e54, белый текст. Заголовок 32px sohne-var насыщенность 300, letter-spacing -0.64px, 'ss01'. Основной текст 16px насыщенность 300, rgba(255,255,255,0.7). Карточки внутри используют рамку rgba(255,255,255,0.1) с радиусом 6px.»

### Руководство по итерации
1. Всегда включай `font-feature-settings: "ss01"` на тексте sohne-var — это типографическая ДНК бренда
2. Насыщенность 300 — стандарт; используй 400 только для кнопок/ссылок/навигации
3. Формула тени: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2`, где Y1/B1 больше (дальняя тень) и Y2/B2 меньше (ближняя тень)
4. Цвет заголовка `#061b31` (тёмно-синий), основной текст `#64748d` (шифер), метки `#273951` (тёмный шифер)
5. Радиус скругления остаётся в диапазоне 4px–8px — никогда не используй таблетки или большое скругление
6. Используй `"tnum"` для любых чисел в таблицах, диаграммах или финансовых отображениях
7. Тёмные секции используют `#1c1e54` — не чёрный, не серый, а глубокий фирменный индиго
8. SourceCodePro для кода на 12px/500 с line-height 2.00 (очень щедро для читаемости)