Shop
En flytende handelskonstellasjon på hvit marmor
Nettbutikken opererer etter en «hvitt lerret»-modell, med produkter som vises som store, kraftig buede bildekort i stedet for rutenett med miniatyrbilder. Hele grensesnittet er utrolig smidig: 20–28 pikslers radius overalt, pilleformede kontroller og et kompakt 16 pikslers GT Standard-kabinett med tett negativ sporing som gjør teksten skarp og fet. Systemets eneste dristige aksent er en levende lilla (#5433eb), som vises i logoen, det sirkulære søkeresultatfeltet og som en tonet skygge på samme knapp. Resten av paletten er varm nøytral: hvite overflater, et subtilt kjølig grått lerret, subtile rammer og nesten svart tekst. Tettheten forblir kompakt med 12 pikslers innbindingsmarginer, men hero- og kategoristripene puster takket være en generøs vertikal rytme på 64–80 piksler, noe som gjør at handelsopplevelsen føles mer som å bla gjennom enn en katalog.
Maksimal bredde er 1200 piksler, sentrert på et gjennomsiktig #f2f4f5-lerret, med en vedvarende 64 piksler bred sidefelt til venstre som kun inneholder navigasjonsikoner. Hovedelementet er en stripe i full bredde, med produktkort plassert over en sentrert lilla "butikk"-logo, og en pilleformet søkefelt rett under den. Kategoripiller er ordnet i en enkelt sentrert rad under søkefeltet. Innholdsseksjoner (Kvinner, Herrer, Skjønnhet, Hjem, Baby og Barn) følger som angitte striper, hver med et rutenett med 4 kolonner med produktbilder eller en "hovedelement og rutenett"-komposisjon med 2 kolonner. Den vertikale rytmen er generøs: 64–80 piksler mellom hovedseksjonene. Bunnteksten er en mørk stripe nederst på siden med kolonneformede lenkegrupper. Karusellpiler på høyre side av de horisontale produktpanelene indikerer rullbart innhold uten pagineringspunkter.
Fotografi er det dominerende visuelle elementet: produktbilder i fullskjermsmodus mot hvit bakgrunn, beskåret 1:1 og livsstilsbilder med varme jordfarger (beige, terrakotta, salvie, elfenben). Produktbilder har sin egen farge – brukergrensesnittet forblir akromatisk, slik at produktnyansene gir visuell variasjon. Merkelogoer vises som overleggstekst på mørke eller lyse hovedbilder, i stedet for som individuelle ikoner. I hovedkomposisjonen er produktkort plassert som en flytende, litt overlappende konstellasjon over ordmerket. Ikonene er minimalistiske og monokrome (svarte konturer), med unntak av kategoriikoner, som bruker én merkefarge. Det er ingen illustrasjoner, 3D-effekter eller gradienter i produktbildene.
Palett
Merke
- Shop Violet
#5433eb— Send-knappen, den stiplede teksten og merkelogoen er de eneste aksentene som fremhever handlingen og individualiteten på den hvite bakgrunnen. - Violet Wash
#c0b5f3— En gjennomsiktig glorie bak den lilla sendeknappen som beholder gløden uten å endre fargetone.
Nøytral
- Canvas Mist
#f2f4f5— Sidebakgrunn og ekstra overflatebehandling bak hevede kort. - Pure White
#ffffff— Hovedflaten for kort, inndatafelter, flytende skilt og pilleformede knapper. - Ink Black
#000000— Hovedtekst, overskrifter, ikoner, navigasjonssymboler og produktkort i mørk modus. - Faint Border
#ebebeb— Tynne skillelinjer på kort, omriss av inndatafelt og pilleformede knapperammer. - Muted Gray
#787574— Sekundærtekst, navigasjonsetiketter, ikonomriss når inaktiv - Cool Stone
#cccccc— Plassholdere, deaktiverte tilstander og inaktive ikonbakgrunner
Typografi
fra 11 til 16 piksler · 4 trinn
- GT Standard — erstatning: Inter · omriss 400 · Primærskrift i alle størrelser – for både brødtekst og overskrifter. GTStandard-MRegular med 16 piksler/-0,031 em er primærskrift for brødtekst, knapper og etiketter. GTStandard-MSemibold med 20 piksler/-0,05 em brukes til flere store overskrifter; GTStandard-MMedium med 11–12 piksler brukes til mikrotekster. Hver skriftvariant vises med en optisk vekt på 400 – skrifthierarki oppnås gjennom subtile gradienter og tett negativ bokstavavstand, snarere enn fet kontrast. Dette er en signaturstil: Shop roper ikke med fet skrift, men former heller teksten gjennom bokstavavstand.
- Shopify Sans — erstatning: Inter · omriss 400, 700 · Reservert for meldinger på systemnivå, som bannere for apper og tekst for samtykke til informasjonskapsler.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 12px |
| Knapperadius | 9999px |
| Kortradius | 28px |
| Skygger | myke skygger |
| Mellom seksjoner | 64px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Shop -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- Cursor — Et koselig pergamentverksted, opplyst av ulmende kull
- Slush — oppblåsbart univers av klistremerker på pastellpapir
- MindMarket — En koselig eventyrbok på kremfarget papir – et vennlig redaksjonelt lerret der store Inter-overskrifter og utklippede papirfigurer sameksisterer på en solfylt, klistremerkemyk overflate.
- Airbnb — En stille hvit gallerivegg med et enkelt korallrødt bokmerke
- Superr — En varm skolenotatbok i det myke ettermiddagslyset. En kremfarget side, en oransje tusj uten hette og en stabel med laminerte navneklistremerker som venter på å bli revet av.
- Apple (España) — Museumsgalleriet, i mykt dagslys, er et enkelt, fengslende, vektløst hvitt rom, der hver utstilling er opplyst av en spotlight mot en lett tonet vegg.
- Lamborghini — Svart karosserifarge i utstillingslokalet, under spotlights - én gul bil
- Amplemarket — En solfylt arbeidsplass strødd med konfetti
- Getharvest — Et skrivebord i den gylne timen – et varmt kremfarget lerret, hvite postkort hengt på lerretet og en enkelt lys oransje flamme
- Agence Foudre — Bladets forside har en myk rosa farge som minner om leppestift.
- Drive Capital — Retro bilturplakat på varmt papir
- Apple (España) — hvitt gallerimontre