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

Дизайн-система натхнена 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 (дуже просторо для читабельності)