Stripe
Isang aklat ng talaan na nakasulat sa tinta ng indigo sa nagyelong salamin
Gumagamit Stripe ng halos monochrome na wika para sa mga instrumentong pinansyal: isang malambot at malamig na puting canvas na may maitim na asul na mga heading, halos walang pandekorasyon na elemento ng chrome, at isang maliwanag na indigo (#533afd) na maaaring gamitin bilang balangkas ng button, link, o icon. Ang tipograpiya ay napakanipis, na may 300-point weight—kahit na nasa 56px—na tila may kumpiyansang understated sa halip na lantaran na korporasyon; ang espasyo ng mga letra ay biglang bumababa habang lumalaki ang laki. Ang mga button ay maliliit, parisukat (4px), at gumagamit ng mga lilang fill o ang pinakamanipis na lilang mga balangkas. Lubos na iniiwasan ng system ang mga anino; nakakamit ang lalim sa pamamagitan ng pagpapalit ng mga kulay ng background (puti → #f8fafd → #e5edf5 → lilang mga kulay), sa halip na sa pamamagitan ng elevation. Ang buong interface ay kumikilos na parang isang accounting ledger o isang terminal: siksik na impormasyon, malinaw na mga linya, sapat na espasyo sa pagitan ng mga seksyon, at ang kulay ay lumilitaw lamang kapag kinakailangan ang isang aksyon.
Ang pinakamataas na lapad ay ~1320px para sa isang nakasentrong hanay ng nilalaman sa isang puting canvas. Ang bayani ay isang bloke ng teksto na nakahanay sa kaliwa sa buong laki (56px) na may dalawang panawagan para sa aksyon sa ibaba, walang larawan ng bayani—ang tipograpiya AY ang bayani. Ang mga seksyon ay nakaayos nang patayo na may pantay na 96px na gutter at 1px na #e5edf5 na mga divider; walang salit-salit na madilim/maliwanag na mga guhit. Ang bawat seksyon ay sumusunod sa isang paulit-ulit na pattern: isang maliit na pamagat ng seksyon na naka-malalaking titik (kulay na mausok, 12px), pagkatapos ay isang 32-48px na heading, pagkatapos ay isang 22px na talata, pagkatapos ay isang grid ng mga product card (3 hanay sa desktop) o isang 2-hanay na bloke ng teksto na may visual art. Ang mga logo ng kliyente ay lumilitaw sa isang makitid na patayong guhit, nakahanay sa kaliwa. Ang footer ay isang malapad na #f8fafd na guhit na may mga listahan ng mga link na may maraming hanay. Ang pangkalahatang ritmo ay mabagal, may sukat, at pangunahing teksto—mababa ang densidad ng impormasyon, sa kabila ng mahabang haba ng scroll.
Ang mga imahe ay maingat at parang dokumentaryo. Ang mga larawang buong pahina ay lumalabas lamang sa mga seksyong nagtatampok ng mga case study (hal., aerial traffic photography para sa Hertz), na kinunan mula sa itaas o sa mga dramatikong anggulo, gamit ang mga natural na kulay—walang duotone o color processing. Ang mga screenshot ng user interface ng produkto ay ginagamit sa loob ng mga feature card, na nire-render na may matutulis na anggulo at malinaw na mga border, nang walang mga frame ng device. Ang mga logo ng partner ay ipinapakita sa sarili nilang mga kulay, nang walang anumang lalagyan. Walang mga ilustrasyon, 3D render, o pandekorasyon at abstract graphic na elemento. Ang mga icon ay pare-pareho: line weight 1, line weight 2 sa isang puting background, na may geometric line art (chevrons, arrow, checkmark, simbolo ng dokumento). Ang pahina ay pangunahing binubuo ng teksto at puting espasyo; ang mga imahe ay sumasakop sa wala pang 3% ng kabuuang visual area.
Paleta
Tatak
- Indigo Ink
#533afd— Ginagamit ang lila para sa mga napunang buton, mga piling estado ng nabigasyon, at mga sandali ng conversion na hinimok ng pokus. - Indigo Hover
#7389ff— Ginagamit ang lila upang i-highlight ang mga link, tag, at maiikling parirala. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Midnight Ink
#061b31— Ang pangunahing heading at katawan ng teksto ay isang malalim, halos itim na kulay na may malamig na asul na kulay, na nagsisilbing batayan para sa buong sistema ng font. - Slate
#64748d— Itinatampok ng kulay abong teksto ang mga link, tag, at maiikling parirala. - Steel
#50617a— Ang karagdagang teksto at mga sumusuportang materyales ay nakaposisyon sa pagitan ng slate at mga muted purple tone na ginagamit sa mga sublicense. - Smoke
#839bc8— Para sa malalaking pandekorasyon na mga pamagat at kasamang teksto, ginagamit ang isang mahinang lilang kulay - hindi kailanman sa mga talata sa katawan. - Pure White
#ffffff— Ang canvas ng pahina at nakataas na mga ibabaw ng mga kard; ang default na background kung saan sinusukat ang lahat ng iba pa. - Mist
#f8fafd— Ang background ng footer at ang section divider ay isang banayad at malamig na kulay na naghihiwalay sa mga lugar na walang nakikitang border.
Tipograpiya
mula 12 hanggang 56px · 9 na hakbang
- sohne-var — kapalit: Inter Tight (variable · mga balangkas 300, 400 · Ang tanging font na ginagamit sa buong interface ay para sa mga heading, body text, nabigasyon, mga button, at mga label. Nanaig ang 300 weight kahit na sa laki ng screen na 56px, na isang natatanging katangian: ang mga heading ay bumubulong sa halip na sumisigaw, na nagtatatag ng awtoridad sa pamamagitan ng pagpigil sa halip na lakas ng tunog. Ang 400 weight ay lumilitaw lamang sa 14–16px para sa nabigasyon at button text, kung saan kinakailangan ang karagdagang stroke para sa kalinawan sa mas maliliit na laki.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | maluwang |
| Pangunahing hakbang | 8px |
| Radius ng buton | 4px |
| Radius ng card | 4px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 96px |
| Lapad ng pahina | 1320px |
Gagawa ang AI ng website mo sa estilong Stripe at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Ui — klinikal na plano sa matte na papel
- monopo saigon — Isang likido at matingkad na liwanag sa likod ng katahimikan ng editoryal—isang monochrome editorial gallery na lumulutang sa tinunaw na liwanag
- Ventriloc — Isang obserbatoryo ng editoryal ng datos sa mainit na papel - isang nag-iisang kulay kahel na baga na nagbibigay-diin sa katumpakan ng monochrome
- Hyer Aviation — Takipsilim sa cockpit sa ibabaw ng pergamino. Ang maputlang kalangitan ng bukang-liwayway ay nagtatagpo sa logo na kasinglaki ng fuselage na may serif, at isang mainit na accent na luwad ang pumuputol sa monochrome na pagpipigil.
- Family — Isang pagkalat mula sa isang kuwentong engkanto sa cream parchment
- OFF+BRAND. — Iridescent sphere sa mainit na pergamino
- Geniestudio — Isang malambot na kuwaderno na may liwanag ng araw—ang uri na may malalapad na gilid at isang makapal na hagod ng panulat
- xAI — Warm Cream Lab na may Itim na Pildoras
- Seed — isang buhay na organismo sa ilalim ng salamin sa laboratoryo
- Cosmos — Isang pader ng gallery na may linyang linen at nakasabit sa mga Polaroid
- Cal — Praktikalidad ng monochrome, isang makataong pamamaraan. Isang sistemang inuuna ang kalinawan at gamit sa pamamagitan ng mahigpit na itim-at-puting paleta, ngunit pinapalambot ito gamit ang palakaibigang tipograpiya at mga bilog na hugis.
- T1 Energy — Ang drowing ng isang pasilidad ng produksyon sa mainit na pergamino ay isang tahimik at monochrome na eksena kung saan ang industriyal na saklaw at banayad na tipograpiya ay kumakatawan sa buong tatak.