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

> Category: Fintech & Crypto
> Платіжна інфраструктура. Фірмові фіолетові градієнти, елегантність weight-300.

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

Вебсайт Stripe — золотий стандарт дизайну у fintech: система, якій вдається водночас відчуватися технічною і розкішною, точною і теплою. Сторінка відкривається на чистому білому полотні (`#ffffff`) з глибокими темно-синіми заголовками (`#061b31`) і фірмовим фіолетовим (`#533afd`), що виконує роль і якоря бренду, і інтерактивного акценту. Це не холодний, клінічний фіолетовий корпоративного ПЗ — це насичений, глибокий ультрафіолет, що читається як впевнений і преміальний. Загальне враження — як фінансова установа, переосмислена першокласною шрифтовою компанією.

Кастомний змінний шрифт `sohne-var` — визначальний елемент візуальної ідентичності Stripe. Кожен текстовий елемент активує стилістичний набір OpenType `"ss01"`, який модифікує форми символів, надаючи їм виразно геометричного, сучасного вигляду. На дисплейних розмірах (48px–56px) sohne-var використовує weight 300 — надзвичайно легке насичення для заголовків, що створює ефірний, майже пошепки вимовлений авторитет. Це протилежність конвенції «жирного героїчного заголовку»; заголовки Stripe відчуваються так, ніби їм не потрібно кричати. Від'ємний міжлітерний інтервал (–1,4px при 56px, –0,96px при 48px) стискає текст у щільні, виважені блоки. На менших розмірах система також використовує weight 300 з пропорційно зменшеним трекінгом, а також табличні цифри через `"tnum"` для відображення фінансових даних.

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

**Ключові характеристики:**
- sohne-var з OpenType `"ss01"` на всіх текстах — кастомний стилістичний набір, що визначає літерні форми бренду
- Weight 300 як фірмове насичення заголовків — легке, впевнене, антиконвенційне
- Від'ємний міжлітерний інтервал на дисплейних розмірах (–1,4px при 56px, з поступовим розслабленням до менших розмірів)
- Блакитнуваті багатошарові тіні через `rgba(50,50,93,0.25)` — підйом, що відчувається брендованим
- Темно-сині (`#061b31`) заголовки замість чорних — теплі, преміальні, фінансового класу
- Консервативні rounded corner (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`): Темніший фіолетовий для станів наведення на основні елементи.
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Темно-фіолетовий для станів наведення іконок.
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. М'який лавандовий для приглушених фонів наведення.
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Колір виділення 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 | Крихітні анотації коду |

### Принципи
- **Легке насичення як фірмова риса**: Weight 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. Стилі компонентів

### Кнопки

**Primary Purple**
- Фон: `#533afd`
- Текст: `#ffffff`
- Відступи: 8px 16px
- Радіус: 4px
- Шрифт: 16px sohne-var насичення 400, `"ss01"`
- Наведення: фон `#4434d4`
- Використання: основні CTA («Start now», «Contact sales»)

**Ghost / Outlined**
- Фон: прозорий
- Текст: `#533afd`
- Відступи: 8px 16px
- Радіус: 4px
- Рамка: `1px solid #b9b9f9`
- Шрифт: 16px sohne-var насичення 400, `"ss01"`
- Наведення: фон змінюється на `rgba(83,58,253,0.05)`
- Використання: вторинні дії

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

**Neutral Ghost**
- Фон: прозорий (`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`
- Наведення: тінь посилюється, часто додається блакитнуватий шар

### Бейджі / Теги / Пілюлі
**Neutral Pill**
- Фон: `#ffffff`
- Текст: `#000000`
- Відступи: 0px 6px
- Радіус: 4px
- Рамка: `1px solid #f6f9fc`
- Шрифт: 11px насичення 400

**Success Badge**
- Фон: `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: фіолетова кнопка вирівняна по правому краю («Sign in», «Start now»)
- Мобільний: перемикач-гамбургер з радіусом 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. Глибина та підйом

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

**Філософія тіней**: Система тіней 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"` на кожному текстовому елементі — стилістичний набір І Є брендом
- Використовуйте weight 300 для всіх заголовків і основного тексту — легкість є фірмовою рисою
- Застосовуйте блакитнуваті тіні (`rgba(50,50,93,0.25)`) для всіх піднятих елементів
- Використовуйте `#061b31` (темно-синій) для заголовків замість `#000000` — теплота важлива
- Тримайте радіус рамки між 4px–8px — консервативне заокруглення є навмисним
- Використовуйте `"tnum"` для будь-якого табличного/фінансового відображення чисел
- Нашаровуйте тіні: блакитнувата далека + нейтральна близька для паралаксу глибини
- Використовуйте фіолетовий `#533afd` як основний інтерактивний/CTA колір

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

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

### Точки зупину
| Назва | Ширина | Ключові зміни |
|------|-------|-------------|
| Mobile | <640px | Одна колонка, зменшені розміри заголовків, складені картки |
| Tablet | 640-1024px | Двоколонні сітки, помірні відступи |
| Desktop | 1024-1280px | Повний макет, трьохколонні сітки функцій |
| Large Desktop | >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`)
- Наведення 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, білий текст) і ghost-кнопка (прозора, 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 'Start now' вирівняний по правому краю (фон #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. Weight 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 з висотою рядка 2.00 (дуже просторо для читабельності)