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