Shopify
Midnatsdrivhus - Varemærker blomstrer mod en dyb turkis baggrund, oplyst af en enkelt gnist af mynte
Shopifys designsystem er et midnatsværksted for handel: et næsten-sort lærred tonet med en dyb turkisgrøn farve, en bred, selvsikker sans-serif-skrifttype og en enkelt levende mintgrøn accent, der aktiverer interaktive øjeblikke. Grænsefladen ligner et mørkekammer, hvor produkter og brands er kilden til lys – fotos og butiksfacader lyser mod næsten-sorte overflader, mens kromelementer trækker sig tilbage. Komponenterne er geometriske, men bløde: kort med en radius på 12px med tynde kanter, pilleformede knapper og en skrifttype med en vægt på 330, der hvisker skala snarere end råber. Et enkelt kromatisk tegnsætningstegn (#36f4a4) bruges sparsomt på links, tags og fokustilstande, hvor farve reserveres til funktionelle øjeblikke for at sikre, at forhandlerhistorier forbliver det visuelle fokuspunkt.
Den maksimale bredde er ~1280px, centreret, med splash-blokke i fuld bredde, der strækker sig ud over fotocontaineren. Siderytmen skifter mellem: (1) en mørk splash-side i fuld bredde med en overlejret overskrift og call-to-action-knapper, (2) behagelige mørke sektioner med tekst- og billedblokke i maksimal bredde i 2 kolonner eller billedgitre i 3 kolonner, (3) interaktive udstillingspaneler (produktkort, forsendelsesberegner, verdenskort) vist som hævede kort på et dybere lærred. Navigationen er en fast øverste bjælke med logoet + 3 navigationselementer + sekundære links + den primære call-to-action-knap, alle justeret til højre. Den lodrette rytme bruger 80px mellemrum mellem sektioner med en jævn overgang - ingen skillevægge mellem mørke sektioner, kun en ændring i overfladetonen.
Det visuelle design er primært fokuseret på detailhandleren: produktfotos i fuld størrelse og fotos fra brandbegivenheder bærer størstedelen af den visuelle vægt, ofte i form af store baggrunde med overlejret hvid tekst. Billederne er tæt beskårne, har høj kontrast og er festlige i deres natur (ringningen af Nasdaq-klokken, gruppehilsner, nærbilleder af produkter i hånden). Den mørke baggrund skaber indtryk af, at disse fotos er oplyst af spotlights. Illustrationerne er minimalistiske – det primære forklarende arbejde udføres af indlejrede produktbilleder og skærmbilleder af butiksfacader. Ikonerne er monokrome med en linjebredde på 1,5-2px, typisk hvide eller #36f4a4 for aktive tilstande.
Palet
Mærke
- Shopify Mint
#36f4a4— Aktive navigationsindikatorer, fokusringe, tag-fremhævninger og svævende fremhævninger på links er den eneste kromatiske funklende effekt, der skaber en følelse af aktiveret interaktivitet mod en mørk baggrund.
Neutral
- Midnight Forest
#02090a— Sidelærred, baggrundsbilleder af header, baggrundsbilleder af sektioner - Deep Lichen
#061a1c— Hovedkortoverflader, hævede paneler, indholdsblokke. - Shaded Fern
#072720— Navigationspanel, ekstra kort, næppe mærkbar hævning af panelet. - Spruce Border
#1e2c31— Tynde kanter til kort, skillelinjer, omrids af inputfelter. - Abyss Indigo
#000a1e— Ekstra overflade til indlejring af produkter/demonstrationer, paneler med funktionsbeskrivelser. - Pure White
#ffffff— Hovedtekst, knapudfyldning, titel, logoer.
Typografi
fra 12 til 70px · 8 trin
- Neue Haas Grotesk — udskiftning: Inter · konturer 330, 400, 500, 550, 600 · Det centrale typografiske system er overskrifter med en skriftvægt på 70-96px (330-400), der er diskrete snarere end højlydte; brødtekst med en skriftvægt på 16-18px (400-500); og navigation og brugergrænseflade med en skriftvægt på 14-16px (500-550). Den ultralette skriftvægt på 330 ved store skærmstørrelser er et karakteristisk træk: den formidler selvtillid gennem tilbageholdenhed snarere end volumen.
- Inter Variable — udskiftning: Inter · konturer 400, 420, 450, 550 · En sekundær skrifttype, der bruges i navigationselementer, små noter, faneblade og mikrotekst i sidefod. Dens lidt større små bogstaver og mere standard bogstavafstand gør den mere læsbar i kompakte størrelser. Den er også velegnet til situationer, hvor en skrifttype på 420 vægt udfylder hullet mellem en almindelig og mellemstor skrifttype.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | gennemsnit |
| Grundlæggende trin | 12px |
| Knapradius | 9999px |
| Kortradius | 12px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 80px |
| Sidebredde | 1280px |
AI vil bygge din hjemmeside i Shopify -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
- Retool — Et varmt obsidianværksted - en overflade til præcisionsværktøj, oplyst af ulmende gløder, hvor alt skabes
- Elektron — Ved midnat er udstyrets kontrolpanel et næsten sort lærred, hvor produktbilleder skinner, mens brugerfladen forbliver stort set usynlig.
- REKKI — Flykontrolpanel i fotolaboratoriet
- OFFFICE : — et noir-galleri opslugt af monolitisk skrifttype
- Clyde — Udstillingslokalet, med sin ene spotlight, er et næsten mørkt galleri, hvor den eneste farve i rummet er en varm gradientkugle.
- Channel Studio — Et fotolaboratorium med en koral lampeskærm
- Electronic Materials Office — En glødende glød i et galleri dekoreret med trækul
- ORYZO AI — Et fotoessay om et mørkekammer. En ensom genstand svæver i det varme mørke, med cremefarvet skrift som den eneste dekoration.
- Factory — "Krigsrummets" terminal ved midnat. "Fabrikken" er et skarpt sort kontrolpanel, hvor et enkelt hvidt kort lander som en lommelygteoplyst forsendelse – den eneste genstand i rummet er selve arbejdet.
- Hungry Tiger — Gurkemeje-lys graffiti på væggen i tandoor-ovnen. En samlet palet af guld og rusten brun, med en skrifttype så stor, at den mere ligner et skilt fra et krydderimarked end en hjemmeside.
- Bibliothèque — Et sort kubeformet galleri under en spotlight – en ensom oplyst plade i en stor, mørk sal
- Apple (España) — sort teater med oplyste armaturer