Shop
En flytande handelskonstellation på vit marmor
Webbutiken använder en "vit duk"-modell, där produkter visas som stora, kraftigt böjda bildkort snarare än rutnät med miniatyrbilder. Hela gränssnittet är otroligt smidigt: 20–28 pixlars radier, pillerformade kontroller och en kompakt 16 pixlars GT Standard-kropp med tät negativ spårning som gör texten skarp och fet. Systemets enda djärva accent är en vibrerande lila (#5433eb), som visas i logotypen, det cirkulära sökresultatsfältet och som en tonad skugga på samma knapp. Resten av paletten är varm neutral: vita ytor, en subtil, kall grå duk, subtila ramar och nästan svart text. Tätheten förblir kompakt med 12 pixlars marginaler, men hjälte- och kategoriränderna andas tack vare en generös vertikal rytm på 64–80 pixlar, vilket gör att handelsupplevelsen känns mer som att bläddra än en katalog.
Den maximala bredden är 1200px, centrerad på en genomskinlig #f2f4f5-duk, med en ihållande 64px bred sidofält till vänster som endast innehåller navigeringsikoner. Huvudelementet är en remsa i full bredd, med produktkort placerade ovanför en centrerad lila "butik"-logotyp och en pillerformad sökfält direkt under den. Kategoripiller är ordnade i en enda centrerad rad under sökfältet. Innehållssektioner (Kvinnor, Herr, Skönhet, Hem, Baby och Barn) följer som utsedda remsor, var och en innehållande ett rutnät med 4 kolumner med produktbilder eller en komposition med "huvudelement och rutnät" med 2 kolumner. Den vertikala rytmen är generös: 64–80px mellan huvudsektionerna. Sidfoten är en mörk remsa längst ner på sidan med kolumnformade länkgrupper. Karusellpilar på höger sida av de horisontella produktpanelerna indikerar rullningsbart innehåll utan pagineringspunkter.
Fotografi är det dominerande visuella elementet: produktbilder i helskärm mot vit bakgrund, beskurna 1:1 och livsstilsbilder med varma jordnära toner (beige, terrakotta, salvia, elfenben). Produktbilder har sin egen färg – användargränssnittet förblir akromatiskt, vilket gör att produktnyanserna ger visuell variation. Varumärkeslogotyper visas som överliggande text på mörka eller ljusa huvudbilder, snarare än som individuella ikoner. I huvudkompositionen är produktkort placerade som en flytande, något överlappande konstellation ovanför ordmärket. Ikonerna är minimalistiska och monokroma (svarta konturer), med undantag för kategoriikoner, som använder en enda varumärkesfärg. Det finns inga illustrationer, 3D-effekter eller gradienter i produktbilderna.
Palett
Stämpla
- Shop Violet
#5433eb— Skicka-knappen, den prickade texten och varumärkeslogotypen är de enda accenter som framhäver handlingen och individualiteten mot den vita bakgrunden. - Violet Wash
#c0b5f3— En genomskinlig gloria bakom den lila skicka-knappen som behåller sitt sken utan att ändra nyans.
Neutral
- Canvas Mist
#f2f4f5— Sidbakgrund och ytterligare ytbehandling bakom upphöjda kort. - Pure White
#ffffff— Huvudytan för kort, inmatningsfält, flytande skyltar och pillerformade knappar. - Ink Black
#000000— Huvudtext, rubriker, ikoner, navigeringssymboler och produktkort i mörkt läge. - Faint Border
#ebebeb— Tunna skiljelinjer på kort, konturer för inmatningsfält och pillerformade knappramar. - Muted Gray
#787574— Sekundärtext, navigeringsetiketter, ikonkonturer när inaktiv - Cool Stone
#cccccc— Platshållare, inaktiverade tillstånd och inaktiva ikonbakgrunder
Typografi
från 11 till 16px · 4 steg
- GT Standard — ersättning: Inter · konturer 400 · Det primära teckensnittet i alla storlekar – för både brödtext och rubriker. GTStandard-MRegular vid 16px/-0.031em är det primära teckensnittet för brödtext, knappar och etiketter. GTStandard-MSemibold vid 20px/-0.05em används för flera stora rubriker; GTStandard-MMedium vid 11–12px används för mikrotexter. Varje teckensnittsvariant visas med en optisk vikt på 400 – teckensnittshierarkin uppnås genom subtila gradienter och tätt negativt bokstavsavstånd, snarare än fet kontrast. Detta är en signaturstil: Shop skriker inte med fetstil, utan formar snarare texten genom bokstavsavstånd.
- Shopify Sans — ersättning: Inter · konturer 400, 700 · Reserverat för meddelanden på systemnivå, såsom banners för appladdning och text för samtycke till cookies.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 12px |
| Knappradie | 9999px |
| Kortradie | 28px |
| Skuggor | mjuka skuggor |
| Mellan sektioner | 64px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Shop -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Cursor — En mysig pergamentverkstad, upplyst av glödande kol
- Slush — uppblåsbart universum av klistermärken på pastellpapper
- MindMarket — En mysig sagobok på krämfärgat papper – en vänlig redaktionell duk där stora Inter-rubriker och utklippta pappersfigurer samsas på en soldränkt, klistermjuk yta.
- Airbnb — En tyst vit tavelvägg med ett enda korallrött bokmärke
- Superr — En varm skolbok i det mjuka eftermiddagsljuset. En krämfärgad sida, en orange tuschpenna utan kork och en bunt laminerade namnklistermärken som väntar på att skalas av.
- Apple (España) — Museigalleriet, i mjukt dagsljus, är ett enda, fängslande, viktlöst vitt utrymme, där varje utställningsföremål upplysts av en spotlight mot en lätt tonad vägg.
- Lamborghini — Svart karossfärg i utställningslokalen, under strålkastarna - en gul bil
- Amplemarket — En soldränkt arbetsplats beströdd med konfetti
- Getharvest — Ett skrivbord vid gyllene timmen – en varm krämfärgad duk, vita vykort hängande på duken och en enda ljus orange låga
- Agence Foudre — Tidningens omslagssida har en mjuk rosa färg som påminner om läppstift.
- Drive Capital — Retro roadtrip-affisch på varmt papper
- Apple (España) — vit gallerimonter