Shop
Usa ka naglutaw nga konstelasyon sa pamatigayon sa puti nga marmol
Ang online store naggamit og "white canvas" nga modelo, diin ang mga produkto gipakita isip dagko, kurbado nga mga image card imbes nga grids sa mga thumbnail. Ang tibuok interface hapsay kaayo: 20-28px radii sa tibuok, porma sa pildoras nga mga kontrol, ug usa ka compact 16px GT Standard nga lawas nga adunay hugot nga negative tracking nga naghimo sa teksto nga klaro ug maisugon. Ang bugtong maisugon nga accent sa sistema mao ang usa ka mahayag nga purpura (#5433eb), nga makita sa logo, sa lingin nga search results field, ug isip usa ka tinted shadow sa parehas nga buton. Ang nahabilin nga palette kay mainiton nga neutral: puti nga mga nawong, usa ka malumo nga bugnaw nga gray nga canvas, malumo nga mga border, ug hapit itom nga teksto. Ang densidad nagpabilin nga compact nga adunay 12px nga mga gutter, apan ang mga hero ug category stripes nagginhawa tungod sa usa ka manggihatagon nga bertikal nga ritmo nga 64-80px, nga naghimo sa kasinatian sa komersyo nga mas mobati nga sama sa pag-browse kaysa usa ka katalogo.
Ang pinakataas nga gilapdon kay 1200px, nga nakasentro sa usa ka translucent #f2f4f5 canvas, nga adunay usa ka persistent nga 64px-wide nga sidebar sa wala nga adunay lamang mga navigation icon. Ang pangunang elemento usa ka full-width strip, nga adunay mga product card nga gibutang sa ibabaw sa usa ka nakasentro nga purple nga "shop" logo, ug usa ka pill-shaped search bar direkta sa ubos niini. Ang mga category pills gihan-ay sa usa ka single centered row sa ubos sa search bar. Ang mga content section (Babaye, Lalaki, Katahom, Panimalay, Bata ug mga Bata) nagsunod isip designated strips, ang matag usa adunay 4-column grid nga adunay mga imahe sa produkto o 2-column nga "main element ug grid" nga komposisyon. Ang bertikal nga ritmo kay lapad: 64–80px tali sa mga pangunang seksyon. Ang footer usa ka itom nga strip sa ubos sa panid nga adunay mga link group nga porma sa kolum. Ang mga carousel arrow sa tuo nga bahin sa horizontal product panel nagpakita sa scrollable content nga walay pagination points.
Ang potograpiya mao ang dominanteng biswal nga elemento: mga litrato sa produkto nga full-screen batok sa puti nga background, giputol nga 1:1, ug mga hulagway sa estilo sa kinabuhi nga adunay mainit nga mga tono sa yuta (beige, terracotta, sage, ivory). Ang mga hulagway sa produkto adunay kaugalingon nga kolor—ang user interface nagpabilin nga achromatic, nga nagtugot sa mga shade sa produkto nga makahatag og biswal nga kalainan. Ang mga logo sa brand makita isip overlay nga teksto sa ngitngit o hayag nga mga pangunang hulagway, imbes nga indibidwal nga mga icon. Sa pangunang komposisyon, ang mga product card gipahimutang isip usa ka naglutaw, gamay nga nagsapaw nga konstelasyon sa ibabaw sa wordmark. Ang mga icon minimalist ug monochrome (itom nga mga outline), gawas sa mga icon sa kategorya, nga naggamit ug usa ka kolor sa brand. Walay mga ilustrasyon, 3D nga mga epekto, o mga gradient sa mga hulagway sa produkto.
Paleta
Brand
- Shop Violet
#5433eb— Ang send button, ang tuldok-tuldok nga marka sa teksto, ug ang logo sa brand mao lamang ang mga aksento nga nagpasiugda sa aksyon ug pagkaindibidwal sa puti nga background. - Violet Wash
#c0b5f3— Usa ka translucent nga halo sa luyo sa purpura nga send button nga nagpabilin ang kahayag niini nga wala mausab ang kolor.
Neutral
- Canvas Mist
#f2f4f5— Background sa panid ug dugang nga pag-atiman sa nawong sa luyo sa giisa nga mga kard. - Pure White
#ffffff— Ang pangunang nawong para sa mga kard, mga input field, mga naglutaw nga karatula ug mga butones nga porma og pildoras. - Ink Black
#000000— Pangunang teksto, mga ulohan, mga icon, mga simbolo sa nabigasyon, ug mga kard sa produkto sa dark mode. - Faint Border
#ebebeb— Nipis nga mga linya sa pagbahin sa mga kard, mga outline sa input field, ug mga butones nga porma og pildoras. - Muted Gray
#787574— Ikaduhang teksto, mga label sa nabigasyon, mga outline sa icon kung dili aktibo - Cool Stone
#cccccc— Mga placeholder, mga disabled nga estado, ug mga background sa icon nga dili aktibo
Tipograpiya
gikan sa 11 ngadto sa 16px · 4 ka lakang
- GT Standard — kapuli: Inter · mga balangkas 400 · Ang pangunang font sa tanang gidak-on—para sa body text ug mga heading. Ang GTStandard-MRegular sa 16px/-0.031em mao ang pangunang font para sa body text, mga butones, ug mga label. Ang GTStandard-MSemibold sa 20px/-0.05em gigamit para sa daghang dagkong mga heading; ang GTStandard-MMedium sa 11–12px gigamit para sa mga microcaption. Ang matag variant sa font gipakita nga adunay optical weight nga 400—ang hierarchy sa font nakab-ot pinaagi sa gamay nga gradients ug dasok nga negatibo nga spacing sa letra, imbes nga bold contrast. Kini usa ka signature style: Ang Shop wala mogamit og bold nga mga font, apan giporma ang teksto pinaagi sa spacing sa letra.
- Shopify Sans — kapuli: Inter · mga balangkas 400, 700 · Gireserba alang sa mga mensahe sa lebel sa sistema sama sa mga banner sa pagkarga sa app ug teksto sa pagtugot sa cookie.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 12px |
| Radius sa butones | 9999px |
| Radius sa kard | 28px |
| Mga anino | humok nga mga anino |
| Taliwala sa mga seksyon | 64px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Shop ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Cursor — Usa ka komportable nga workshop sa pergamino, nga gidan-agan sa nagbaga nga mga uling
- Slush — inflatable nga uniberso sa mga sticker sa pastel nga papel
- MindMarket — Usa ka komportable nga libro sa mga sugilanon nga gisulat sa krema nga papel - usa ka mahigalaon nga editoryal nga canvas diin ang dagkong mga ulohan sa balita sa Inter ug mga ginunting nga karakter sa papel nagdungan sa usa ka nawong nga nasidlakan sa adlaw ug humok sama sa sticker.
- Airbnb — Usa ka hilom nga puti nga bungbong sa gallery nga adunay usa ka coral red bookmark
- Superr — Usa ka mainit nga notebook sa eskwelahan sa hinay nga kahayag sa hapon. Usa ka panid nga kolor krema, usa ka orange nga marker nga walay taklob, ug usa ka pundok sa mga laminated name sticker nga naghulat nga tangtangon.
- Apple (España) — Ang galeriya sa museyo, sa hilom nga kahayag sa adlaw, usa ka makabibihag, gaan nga puti nga luna, diin ang matag eksibit gidan-agan sa usa ka spotlight batok sa usa ka gamay nga kolor nga bungbong.
- Lamborghini — Itom nga kolor sa lawas sa showroom, ubos sa mga spotlight - usa ka dilaw nga awto
- Amplemarket — Usa ka trabahoan nga nasidlakan sa adlaw nga puno sa confetti
- Getharvest — Usa ka lamesa sa golden hour – usa ka init nga krema nga canvas, puti nga mga postcard nga gibitay sa canvas, ug usa ka hayag nga orange nga siga
- Agence Foudre — Ang hapin sa magasin usa ka humok nga pink nga kolor nga susama sa lipstick.
- Drive Capital — Retro nga poster sa road trip nga gibutang sa init nga papel
- Apple (España) — puti nga display case sa gallery