Дизайн-система на основе 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" для табличных чисел в финансовых данных и подписях.

Иерархия

Принципы

• Лёгкий вес как фирменный знак: Насыщенность 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. Глубина и высота

Философия теней: Система теней 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. Адаптивное поведение

Точки останова

Цели касания

• Кнопки используют комфортные отступы (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 (очень щедро для читаемости)