Цветовая палитра в духе Stripe
Палитра в духе Stripe - чистый, уверенный финтех-вид: яркий белый фон, глубокий тёмно-синий для заголовков и текста, насыщенный сине-фиолетовый основной цвет и яркий вторичный акцент для выделений.
Посмотрите, как палитра в духе Stripe выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Stripe?
Платёжным и финтех-продуктам важно выглядеть надёжно и точно, что обычно исключает всё слишком игривое или слишком тёмное. Обычное решение - яркий, просторный светлый макет с уверенным основным цветом для кнопок и ключевых элементов интерфейса, в паре с чётким, почти тёмно-синим «почти чёрным» для текста вместо чистого чёрного - небольшая деталь, которая читается более отточенной, чем стандартный серый текст.
Этот мокап - крупный заголовок hero-блока, кнопка-пилюля призыва к действию, стилизованная платёжная карта и строка со статистикой - заимствует этот уверенный, маркетинговый вид продукта, чтобы показать, как палитра держится, когда нужно выглядеть одновременно надёжно и современно. Это оригинальный макет в этом духе, а не копия реальной брендовой системы какого-либо конкретного платёжного провайдера.
Ключевые визуальные характеристики
- Яркий, преимущественно белый фон с очень лёгким оттенком вторичной поверхности для карточек
- Глубокий тёмно-синий (не чисто чёрный) для заголовков и основного текста
- Закруглённая кнопка-пилюля в качестве основного призыва к действию
- Стилизованный элемент кредитной карты или платежа как визуал hero-блока
- Строка с числовыми показателями или метриками рядом с hero-блоком в качестве социального доказательства
Цветовые характеристики
- Чёткая база от белого к светло-серому, а не плоский чистый белый
- Текст с тёмно-синим оттенком вместо чисто чёрного - для более мягкого, но всё ещё контрастного восприятия
- Один насыщенный сине-фиолетовый основной цвет для кнопок и ссылок, плюс более яркий вторичный акцент для мелких выделений
Типографика
- Чистый современный шрифт с чуть скруглёнными формами букв для заголовков
- Плотный межбуквенный интервал в крупном витринном тексте, более свободный - в мелких метках
- Чёткий скачок кегля между заголовком hero-блока и вспомогательным текстом
UI-паттерны
- Крупный центрированный или двухколоночный hero-блок с заголовком, подзаголовком и кнопкой-пилюлей
- Стилизованная платёжная карта или элемент оформления заказа как визуал уровня hero-блока
- Строка ключевых показателей или метрик в виде коротких пар «число + подпись»
- Мягкие тени у карточек вместо жёстких границ
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Stripe?
Яркая база от белого к светло-серому, текст с тёмно-синим (не чисто чёрным) оттенком и один насыщенный сине-фиолетовый основной цвет для кнопок и ссылок, часто в паре с более ярким вторичным акцентом для мелких выделений.
Это официальные цвета бренда Stripe?
Нет - это оригинальный макет, вдохновлённый общим видом финтех- и платёжных продуктов вроде Stripe, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Почему в такой палитре текст тёмно-синий, а не чисто чёрный?
Очень тёмный синий всё ещё читается контрастно на белом фоне, но ощущается чуть теплее и более продуманным, чем плоский чёрный - поэтому многие финтех- и SaaS-палитры по умолчанию используют его для основного текста.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Stripe, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Stripe вместо цветов по умолчанию.