Shop
En flydende handelskonstellation på hvid marmor
Onlinebutikken fungerer ud fra en "hvid lærredsmodel", hvor produkter vises som store, kraftigt buede billedkort i stedet for gitre af miniaturebilleder. Hele brugerfladen er utrolig jævn: 20-28px radier overalt, pilleformede kontroller og et kompakt 16px GT Standard-kabinet med tæt negativ tracking, der gør teksten skarp og fed. Systemets eneste markante accent er en levende lilla (#5433eb), som vises i logoet, det cirkulære søgeresultatfelt og som en tonet skygge på den samme knap. Resten af paletten er varm neutral: hvide overflader, et diskret køligt gråt lærred, diskrete rammer og næsten sort tekst. Tætheden forbliver kompakt med 12px indbindingsmarginer, men hero- og kategoristriberne ånder takket være en generøs lodret rytme på 64-80px, hvilket får handelsoplevelsen til at føles mere som at browse end et katalog.
Den maksimale bredde er 1200px, centreret på et gennemskinneligt #f2f4f5-lærred, med en vedvarende 64px bred sidebjælke til venstre, der kun indeholder navigationsikoner. Hovedelementet er en strimmel i fuld bredde med produktkort placeret over et centreret lilla "butik"-logo og en pilleformet søgefelt lige nedenunder. Kategoripiller er arrangeret i en enkelt centreret række under søgefeltet. Indholdssektioner (Kvinder, Mænd, Skønhed, Hjem, Baby & Børn) følger som udpegede strimler, der hver indeholder et gitter med 4 kolonner med produktbilleder eller en "hovedelement og gitter"-komposition med 2 kolonner. Den lodrette rytme er generøs: 64-80px mellem hovedsektionerne. Sidefoden er en mørk strimmel nederst på siden med kolonneformede linkgrupper. Karruselpile i højre side af de vandrette produktpaneler angiver rulbart indhold uden pagineringspunkter.
Fotografi er det dominerende visuelle element: produktfotos i fuld skærm mod en hvid baggrund, beskåret 1:1 og livsstilsbilleder med varme jordfarver (beige, terrakotta, salvie, elfenben). Produktbilleder har deres egen farve – brugergrænsefladen forbliver akromatisk, hvilket giver produktets nuancer visuel variation. Brandlogoer vises som overlejret tekst på mørke eller lyse hovedbilleder i stedet for som individuelle ikoner. I hovedkompositionen er produktkort placeret som en flydende, let overlappende konstellation over ordmærket. Ikonerne er minimalistiske og monokrome (sorte konturer) med undtagelse af kategoriikoner, der bruger en enkelt brandfarve. Der er ingen illustrationer, 3D-effekter eller gradienter i produktbillederne.
Palet
Mærke
- Shop Violet
#5433eb— Send-knappen, den stiplede tekstmarkering og brandlogoet er de eneste accenter, der fremhæver handlingen og individualiteten på den hvide baggrund. - Violet Wash
#c0b5f3— En gennemsigtig glorie bag den lilla send-knap, der bevarer sin glød uden at ændre farvetone.
Neutral
- Canvas Mist
#f2f4f5— Sidebaggrund og yderligere overfladebehandling bag hævede kort. - Pure White
#ffffff— Hovedoverfladen til kort, inputfelter, flydende skilte og pilleformede knapper. - Ink Black
#000000— Hovedtekst, overskrifter, ikoner, navigationssymboler og produktkort i mørk tilstand. - Faint Border
#ebebeb— Tynde skillelinjer på kort, omrids af inputfelter og pilleformede knaprammer. - Muted Gray
#787574— Sekundær tekst, navigationsetiketter, ikonomrids når inaktiv - Cool Stone
#cccccc— Pladsholdere, deaktiverede tilstande og inaktive ikonbaggrunde
Typografi
fra 11 til 16px · 4 trin
- GT Standard — udskiftning: Inter · konturer 400 · Den primære skrifttype i alle størrelser – både til brødtekst og overskrifter. GTStandard-MRegular ved 16px/-0.031em er den primære skrifttype til brødtekst, knapper og etiketter. GTStandard-MSemibold ved 20px/-0.05em bruges til flere store overskrifter; GTStandard-MMedium ved 11-12px bruges til mikrotekster. Hver skrifttypevariant vises med en optisk vægt på 400 – skrifttypehierarki opnås gennem subtile gradienter og tæt negativ bogstavafstand i stedet for fed kontrast. Dette er en signaturstil: Shop råber ikke op med fed skrifttype, men former snarere teksten gennem bogstavafstand.
- Shopify Sans — udskiftning: Inter · konturer 400, 700 · Reserveret til meddelelser på systemniveau, såsom bannere ved indlæsning af apps og tekst til samtykke til cookies.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | gennemsnit |
| Grundlæggende trin | 12px |
| Knapradius | 9999px |
| Kortradius | 28px |
| Skygger | bløde skygger |
| Mellem sektioner | 64px |
| Sidebredde | 1200px |
AI vil bygge din hjemmeside i Shop -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- Cursor — Et hyggeligt pergamentværksted, oplyst af ulmende kul
- Slush — oppusteligt univers af klistermærker på pastelpapir
- MindMarket — En hyggelig eventyrbog på cremefarvet papir - et venligt redaktionelt lærred, hvor store Inter-overskrifter og udklippede papirfigurer sameksisterer på en solbeskinnet, klistermærkeblød overflade.
- Airbnb — En stille hvid gallerivæg med et enkelt koralrødt bogmærke
- Superr — En varm skoleblok i det bløde eftermiddagslys. En cremefarvet side, en orange tusch uden låg og en stak laminerede navneklistermærker, der venter på at blive pillet af.
- Apple (España) — Museumsgalleriet er i blødt dagslys et enkelt, fængslende, vægtløst hvidt rum, hvor hver udstilling er oplyst af en spotlight mod en let tonet væg.
- Lamborghini — Sort karrosserifarve i udstillingslokalet, under projektørerne - én gul bil
- Amplemarket — En solbeskinnet arbejdsplads oversået med konfetti
- Getharvest — Et skrivebord i den gyldne time – et varmt cremefarvet lærred, hvide postkort hængt på lærredet og en enkelt lys orange flamme
- Agence Foudre — Magasinets forside har en blød lyserød farve, der minder om læbestift.
- Drive Capital — Retro roadtrip-plakat på varmt papir
- Apple (España) — hvid gallerimontre