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 (очень щедро для читаемости)