
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 — Креслення виробничого цеху на теплому пергаменті — тиха, монохромна сцена, де індустріальний масштаб і вловима друкарня втілюють весь бренд