Shop
Isang lumulutang na konstelasyon ng pangangalakal sa puting marmol
Ang online store ay gumagamit ng modelong "puting canvas," kung saan ang mga produkto ay ipinapakita bilang malalaki at makapal na kurbadong mga image card sa halip na mga grid ng mga thumbnail. Ang buong interface ay napakakinis: 20-28px radii sa kabuuan, mga kontrol na hugis-pill, at isang compact na 16px GT Standard na katawan na may masikip na negative tracking na ginagawang malinaw at matapang ang teksto. Ang tanging naka-bold na accent ng system ay isang matingkad na lila (#5433eb), na lumilitaw sa logo, sa pabilog na field ng mga resulta ng paghahanap, at bilang isang tinted shadow sa parehong button. Ang natitirang bahagi ng palette ay mainit at neutral: mga puting ibabaw, isang banayad na malamig na kulay abong canvas, mga banayad na border, at halos itim na teksto. Ang density ay nananatiling siksik na may 12px na gutter, ngunit ang mga guhit ng hero at kategorya ay umiihip salamat sa isang masaganang patayong ritmo na 64-80px, na ginagawang mas parang pag-browse ang karanasan sa commerce kaysa sa isang katalogo.
Ang pinakamataas na lapad ay 1200px, nakasentro sa isang translucent na #f2f4f5 canvas, na may persistent na 64px-wide na sidebar sa kaliwa na naglalaman lamang ng mga navigation icon. Ang pangunahing elemento ay isang full-width strip, na may mga product card na nakaposisyon sa itaas ng isang nakasentrong lilang logo ng "shop", at isang search bar na hugis-pill sa ibaba nito. Ang mga category pill ay nakaayos sa isang nakasentrong hilera sa ibaba ng search bar. Ang mga seksyon ng nilalaman (Babae, Lalaki, Kagandahan, Bahay, Sanggol at Bata) ay sumusunod bilang mga itinalagang strip, bawat isa ay naglalaman ng 4-column grid na may mga larawan ng produkto o isang 2-column na komposisyon na "pangunahing elemento at grid". Malawak ang patayong ritmo: 64–80px sa pagitan ng mga pangunahing seksyon. Ang footer ay isang madilim na strip sa ibaba ng pahina na may mga link group na hugis-column. Ang mga carousel arrow sa kanang bahagi ng pahalang na mga panel ng produkto ay nagpapahiwatig ng maaaring i-scroll na nilalaman nang walang mga pagination point.
Ang potograpiya ang nangingibabaw na elementong biswal: mga full-screen na larawan ng produkto laban sa puting background, naka-crop na 1:1, at mga larawan ng pamumuhay na may mainit na kulay lupa (beige, terracotta, sage, ivory). May kanya-kanyang kulay ang mga larawan ng produkto—nananatiling achromatic ang user interface, na nagbibigay-daan sa mga kulay ng produkto na magbigay ng biswal na pagkakaiba-iba. Lumilitaw ang mga logo ng brand bilang overlay na teksto sa madilim o mapusyaw na pangunahing mga larawan, sa halip na bilang mga indibidwal na icon. Sa pangunahing komposisyon, ang mga product card ay nakaposisyon bilang isang lumulutang, bahagyang magkakapatong na konstelasyon sa itaas ng wordmark. Ang mga icon ay minimalist at monochrome (mga itim na balangkas), maliban sa mga icon ng kategorya, na gumagamit ng iisang kulay ng brand. Walang mga ilustrasyon, 3D effect, o gradient sa mga larawan ng produkto.
Paleta
Tatak
- Shop Violet
#5433eb— Ang buton na ipadala, ang tuldok-tuldok na marka ng teksto, at ang logo ng tatak ang tanging mga puntong nagbibigay-diin sa aksyon at kakaibang katangian sa puting background. - Violet Wash
#c0b5f3— Isang translucent na halo sa likod ng lilang send button na nananatiling kumikinang nang hindi nagbabago ang kulay.
Neutral
- Canvas Mist
#f2f4f5— Background ng pahina at karagdagang paggamot sa ibabaw sa likod ng mga nakataas na kard. - Pure White
#ffffff— Ang pangunahing ibabaw para sa mga baraha, mga input field, mga lumulutang na karatula at mga butones na hugis-pill. - Ink Black
#000000— Pangunahing teksto, mga heading, mga icon, mga simbolo ng nabigasyon, at mga card ng produkto sa dark mode. - Faint Border
#ebebeb— Manipis na linyang naghahati sa mga kard, mga balangkas ng input field, at mga frame ng butones na hugis tableta. - Muted Gray
#787574— Pangalawang teksto, mga label ng nabigasyon, mga balangkas ng icon kapag hindi aktibo - Cool Stone
#cccccc— Mga placeholder, mga estadong may kapansanan, at mga background ng icon na hindi aktibo
Tipograpiya
mula 11 hanggang 16px · 4 na hakbang
- GT Standard — kapalit: Inter · mga balangkas 400 · Ang pangunahing font sa lahat ng laki—para sa parehong body text at mga heading. Ang GTStandard-MRegular sa 16px/-0.031em ay ang pangunahing font para sa body text, mga button, at mga label. Ang GTStandard-MSemibold sa 20px/-0.05em ay ginagamit para sa ilang malalaking heading; ang GTStandard-MMedium sa 11–12px ay ginagamit para sa mga microcaption. Ang bawat variant ng font ay ipinapakita na may optical weight na 400—ang hierarchy ng font ay nakakamit sa pamamagitan ng mga banayad na gradient at siksik na negatibong espasyo ng mga letra, sa halip na naka-bold na contrast. Ito ay isang signature style: Hindi ginagamit ng Shop ang mga naka-bold na font, ngunit hinuhubog nito ang teksto sa pamamagitan ng espasyo ng mga letra.
- Shopify Sans — kapalit: Inter · mga balangkas 400, 700 · Nakalaan para sa mga mensahe sa antas ng system tulad ng mga banner na naglo-load ng app at text ng pahintulot sa cookie.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 12px |
| Radius ng buton | 9999px |
| Radius ng card | 28px |
| Mga anino | malambot na anino |
| Sa pagitan ng mga seksyon | 64px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Shop 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
- Cursor — Isang maginhawang pagawaan ng pergamino, na naliliwanagan ng mga nagbabagang uling
- Slush — inflatable universe ng mga sticker sa pastel na papel
- MindMarket — Isang maaliwalas na aklat ng mga kuwentong engkanto na nasa kremang papel - isang palakaibigang editoryal na canvas kung saan ang malalaking headline ng Inter at mga ginupit na karakter sa papel ay magkakasamang namamalagi sa isang ibabaw na nasisinagan ng araw at malambot na parang sticker.
- Airbnb — Isang tahimik na puting gallery wall na may isang coral red bookmark
- Superr — Isang mainit na kuwaderno sa paaralan sa ilalim ng malambot na liwanag ng hapon. Isang pahinang kulay krema, isang orange na marker na walang takip, at isang tumpok ng mga nakalamina na sticker ng pangalan na naghihintay na tanggalin.
- Apple (España) — Ang galeriya ng museo, sa banayad na liwanag ng araw, ay isang nag-iisa, nakakabighani, at magaan na puting espasyo, kung saan ang bawat eksibit ay naliliwanagan ng isang spotlight na nakasandal sa isang dingding na may bahagyang kulay.
- Lamborghini — Itim na kulay ng katawan sa showroom, sa ilalim ng mga spotlight - isang dilaw na kotse
- Amplemarket — Isang lugar ng trabaho na nasisinagan ng araw at puno ng confetti
- Getharvest — Isang mesa sa ginintuang oras – isang mainit na kremang canvas, mga puting postcard na nakasabit sa canvas, at isang nag-iisang matingkad na kulay kahel na apoy
- Agence Foudre — Ang pabalat ng magasin ay may mapusyaw na kulay rosas na nakapagpapaalaala sa kolorete.
- Drive Capital — Retro road trip poster sa mainit na papel
- Apple (España) — puting display case ng gallery