
Stripe
Бухгалтерская книга, написанная индиговыми чернилами, на матовом стекле
Stripe использует почти монохромный язык финансовых инструментов: мягкий холодный белый холст с темно-синими заголовками, почти без декоративных хромированных элементов и одним ярким индиго (#533afd), который по праву может быть использован в качестве обводки кнопки, ссылки или иконки. Типографика выполнена исключительно тонким шрифтом толщиной 300 пунктов — даже при размере 56px, что воспринимается как уверенная сдержанность, а не как корпоративный крик; межбуквенное расстояние резко уменьшается с увеличением размера. Кнопки небольшие, квадратные (4px), и используют фиолетовую заливку или тончайшие фиолетовые контуры. Система полностью избегает теней; глубина достигается за счет изменения оттенка фона (белый → #f8fafd → #e5edf5 → фиолетовые оттенки), а не за счет возвышения. Весь интерфейс ведёт себя как бухгалтерская книга или терминал: плотная информация, чёткие линии, достаточное пространство между разделами, а цвет появляется только тогда, когда необходимо выполнить какое-либо действие.
Максимальная ширина ~1320px центрированной колонки контента на белом холсте. Герой представляет собой текстовый блок, выровненный по левому краю, в полном размере (56px) с двумя призывами к действию ниже, без изображения героя — типографика И ЕСТЬ герой. Разделы расположены вертикально с одинаковыми 96px промежутками и 1px #e5edf5 разделителями; нет чередующихся темных/светлых полос. Каждый раздел следует повторяющемуся шаблону: небольшой заголовок раздела, написанный заглавными буквами (дымчатый цвет, 12px), затем заголовок 32–48px, затем абзац 22px, затем сетка карточек продуктов (3 колонки на настольных компьютерах) или 2-колоночный текстовый блок с визуальным оформлением. Логотипы клиентов отображаются в узкой вертикальной полосе, выровненной по левому краю. Нижний колонтитул представляет собой одну широкую #f8fafd полосу с многоколоночными списками ссылок. Общий ритм медленный, размеренный и преимущественно текстовый — плотность информации низкая, несмотря на большую длину прокрутки.
Изображения сдержанные и выполнены в документальном стиле. Фотографии, занимающие всю страницу, появляются только в разделах с примерами из практики (например, аэрофотосъемка дорожного движения для Hertz), снятые сверху или под эффектным углом с использованием естественных цветов — без двухцветной или цветной обработки. Скриншоты пользовательского интерфейса продукта используются внутри карточек с характеристиками, отрисованы с острыми углами и четкими границами, без рамок для устройств. Логотипы партнеров отображаются в их собственных цветах без каких-либо контейнеров. Нет иллюстраций, 3D-рендеров, декоративных абстрактных графических элементов. Иконки однородны: толщина линии 1, толщина линии 2 на белом фоне, геометрический стиль линейной графики (шевроны, стрелки, галочки, знаки документа). Страница преимущественно состоит из текста и свободного пространства; изображения занимают менее 3% от общей визуальной площади.
Палитра
Бренд
- Indigo Ink
#533afd— Фиолетовый цвет используется для закрашенных кнопок, выбранных состояний навигации и моментов конверсии, на которые направлено внимание. - Indigo Hover
#7389ff— Фиолетовый цвет используется для выделения ссылок, тегов и коротких фраз. Не следует выделять его как основной цвет призыва к действию.
Нейтральные
- Midnight Ink
#061b31— Основной заголовок и основной текст — глубокий, почти черный цвет с холодным синим оттенком, который служит основой для всей шрифтовой системы. - Slate
#64748d— Серый текст выделяет ссылки, теги и короткие фразы. - Steel
#50617a— Дополнительный текст и вспомогательные материалы — располагаются между сланцевым цветом и приглушенными фиолетовыми оттенками, используемыми на сублицензиях. - Smoke
#839bc8— Для крупных декоративных заголовков и сопроводительного текста используется текст приглушенного фиолетового оттенка — никогда не используется в основных абзацах. - Pure White
#ffffff— Холст страницы и приподнятые поверхности карточек; фон по умолчанию, относительно которого измеряется все остальное. - Mist
#f8fafd— Фон нижнего колонтитула и разделительная линия разделов — едва заметный холодный оттенок, разделяющий области без видимой границы.
Типографика
от 12 до 56px · 9 ступеней
- sohne-var — замена: Inter Tight (variable · начертания 300, 400 · Единственный шрифт во всем интерфейсе — заголовки, основной текст, навигация, кнопки и подписи. Начертание 300 преобладает даже при размере экрана 56px, что является отличительной чертой: заголовки шепчут, а не кричат, завоевывая авторитет благодаря сдержанности, а не громкости. Начертание 400 появляется только при размере 14–16px для навигации и текста кнопок, где для удобочитаемости при малом размере требуется дополнительный штрих.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | просторная |
| Базовый шаг | 8px |
| Радиус кнопок | 4px |
| Радиус карточек | 4px |
| Тени | нет — границы вместо теней |
| Между секциями | 96px |
| Ширина страницы | 1320px |
ИИ соберёт ваш сайт в стиле Stripe и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Ui — клинический план на матовой бумаге
- monopo saigon — Жидкое переливающееся сияние за редакционной тишиной — монохромная редакционная галерея, парящая на расплавл…
- Ventriloc — Редакционная обсерватория данных на теплой бумаге — единственный оранжевый уголек, подчеркивающий монохромну…
- Hyer Aviation — Сумерки в кабине пилота над пергаментом. Бледное рассветное небо встречается с логотипом с засечками размеро…
- Family — Разворот из сказки на кремовом пергаменте
- OFF+BRAND. — Переливающаяся сфера на теплом пергаменте
- Geniestudio — Блокнот с мягким дневным светом — такой, с широкими полями и одним толстым штрихом пера
- xAI — лаборатория теплых сливок с черной таблеткой
- Seed — живой организм под лабораторным стеклом
- Cosmos — Стена галереи, отделанная льняными полотнами, с развешанными полароидными снимками
- Cal — Монохромная практичность, человечный подход. Система, в которой приоритет отдается ясности и функциональност…
- T1 Energy — Чертеж производственного цеха на теплом пергаменте — тихая, монохромная сцена, где индустриальный масштаб и …