Телеграм, WhatsApp +380637610482
Валерий Данюк
Валерий ДанюкразработчикРазработка ИИ‑инструментов для бизнеса. Качественно. Недорого.Написать в Telegram
Stripe — превью сайта в этом стиле

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 — Чертеж производственного цеха на теплом пергаменте — тихая, монохромная сцена, где индустриальный масштаб и …