Shopify
Midnattsväxthus - Varumärken blommar mot en djupt turkos bakgrund, upplyst av en enda gnista mynta
Shopifys designsystem är en midnattsverkstad för handel: en nästan svart duk tonad med en djup turkosgrön nyans, ett brett, självsäkert sans-serif-typsnitt och en enda livfull mintgrön accent som aktiverar interaktiva ögonblick. Gränssnittet liknar ett mörkrum, där produkter och varumärken är ljuskällan – foton och butiksfasader lyser mot nästan svarta ytor, medan kromelement drar sig tillbaka. Komponenterna är geometriska men ändå mjuka: kort med 12px radie och tunna kanter, pillerformade knappar och ett typsnitt med vikt 330 som viskar skala snarare än ropar. Ett enda kromatiskt skiljetecken (#36f4a4) används sparsamt på länkar, taggar och fokuslägen, och färg reserveras för funktionella ögonblick för att säkerställa att handlarnas berättelser förblir den visuella fokuspunkten.
Den maximala bredden är ~1280px, centrerad, med fullbredds-stänkblock som sträcker sig bortom fotobehållaren. Sidrytmen växlar mellan: (1) en mörk välkomstsida i full bredd med en överlagrad rubrik och uppmaningsknappar, (2) bekväma mörka sektioner med text- och bildblock med maximal bredd i 2 kolumner eller bildrutnät i 3 kolumner, (3) interaktiva presentationspaneler (produktkort, fraktkalkylator, världskarta) som visas som upphöjda kort på en djupare arbetsyta. Navigeringen är en fast övre bar med logotypen + 3 navigeringselement + sekundära länkar + den primära uppmaningsknappen, alla justerade till höger. Den vertikala rytmen använder 80px mellanrum mellan sektionerna med en smidig övergång – inga avdelare mellan mörka sektioner, bara en förändring i yttonen.
Den visuella designen är främst inriktad på återförsäljaren: produktfoton i full storlek och foton från varumärkesevenemang bär huvuddelen av den visuella tyngden, ofta i form av stora bakgrunder med överlagrad vit text. Bilderna är tätt beskurna, har hög kontrast och är festliga till sin natur (ringandet av Nasdaq-klockan, grupphälsningar, närbilder av produkter i handen). Den mörka bakgrunden skapar intrycket av att dessa foton är upplysta av spotlights. Illustrationerna är minimalistiska – det huvudsakliga förklarande arbetet utförs av inbäddade produktbilder och skärmdumpar av butiksfasader. Ikonerna är monokroma, med en linjebredd på 1,5–2px, vanligtvis vita eller #36f4a4 för aktiva lägen.
Palett
Stämpla
- Shopify Mint
#36f4a4— Aktiva navigeringsindikatorer, fokusringar, taggmarkeringar och muspekarmarkeringar på länkar är den enda kromatiska gnistan som skapar en känsla av aktiverad interaktivitet mot en mörk bakgrund.
Neutral
- Midnight Forest
#02090a— Sidduks, bakgrundsbilder för sidhuvud, bakgrundsbilder för avsnitt - Deep Lichen
#061a1c— Huvudkortsytor, upphöjda paneler, innehållsblock. - Shaded Fern
#072720— Navigeringspanel, ytterligare kort, knappt märkbar upphöjning av panelen. - Spruce Border
#1e2c31— Tunna kanter för kort, skiljelinjer, konturer för inmatningsfält. - Abyss Indigo
#000a1e— Ytterligare yta för inbäddning av produkter/demonstrationer, paneler med funktionsbeskrivningar. - Pure White
#ffffff— Huvudtext, knappfyllning, titel, logotyper.
Typografi
från 12 till 70px · 8 steg
- Neue Haas Grotesk — ersättning: Inter · konturer 330, 400, 500, 550, 600 · Det typografiska kärnsystemet är rubriker med en teckenstorlek på 70–96 pixlar (330–400) som är subtila snarare än högljudda; brödtext med en teckenstorlek på 16–18 pixlar (400–500); och navigering och användargränssnitt med en teckenstorlek på 14–16 pixlar (500–550). Den ultralätta teckenstorleken på 330 vid stora skärmstorlekar är ett utmärkande drag: den förmedlar självförtroende genom återhållsamhet snarare än volym.
- Inter Variable — ersättning: Inter · konturer 400, 420, 450, 550 · En sekundär typsnittstyp som används i navigeringsgränssnittselement, små anteckningar, flikkontroller och mikrotext i sidfot. Dess något större gemener och mer standardiserade bokstavsavstånd gör den mer läsbar i kompakta storlekar. Den är också lämplig för situationer där ett typsnitt med vikt 420 fyller gapet mellan ett vanligt och medelstort typsnitt.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 12px |
| Knappradie | 9999px |
| Kortradie | 12px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 80px |
| Sidbredd | 1280px |
AI kommer att bygga din webbplats i Shopify -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
- Retool — En varm obsidianverkstad – en yta för precisionsverktyg, upplyst av glödande glöd, där allt skapas
- Elektron — Utrustningens kontrollpanel vid midnatt är en nästan svart duk, där produktbilder lyser medan gränssnittet förblir praktiskt taget osynligt.
- REKKI — Flygkontrollpanelen i fotolabbet
- OFFFICE : — ett noir-galleri omslutet av monolitisk typsnitt
- Clyde — Utställningslokalen, med sin enda spotlight, är ett nästan mörkt galleri där den enda färgen i rummet är en varm tonad boll.
- Channel Studio — Ett fotolabb i studio med en korallfärgad lampskärm
- Electronic Materials Office — En glödande kol i ett galleri dekorerat med träkol
- ORYZO AI — En fotoessä om ett mörkrum. Ett ensamt föremål svävar i det varma mörkret, med krämfärgad typsnitt som enda dekoration.
- Factory — Terminalen i "krigsrummet" vid midnatt. "Fabriken" är en skarp svart kontrollpanel där ett enda vitt kort landar som en ficklampsbelyst meddelande – det enda föremålet i rummet är själva verket.
- Hungry Tiger — Gurkmejafärgad graffiti på tandooriugnens vägg. En enhetlig palett av guld och rostbrunt, med ett teckensnitt så stort att det mer liknar en skylt från en kryddmarknad än en webbplats.
- Bibliothèque — Ett svart kubformat galleri under en spotlight – en ensam upplyst platta i en stor, mörk hall
- Apple (España) — svart teater med upplysta armaturer