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