Тэлеграм, 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 — Чарцёж вытворчага цэха на цёплым пергаменце - ціхая, манахромная сцэна, дзе індустрыяльны маштаб і ледзь улоўная друкарня ўвасабляюць увесь брэнд