Shopify
Midnattsdrivhus – Varemerker blomstrer mot en dyp turkis bakgrunn, opplyst av en enkelt gnist av mynte
Shopifys designsystem er et midnattsverksted for handel: et nesten svart lerret farget med en dyp turkisgrønn farge, en bred, selvsikker sans-serif-skrifttype og en enkelt livlig mintfarget aksent som aktiverer interaktive øyeblikk. Grensesnittet ligner et mørkerom, hvor produkter og merkevarer er kilden til lys – bilder og butikkfasader gløder mot nesten svarte overflater, mens kromelementer trekker seg tilbake. Komponentene er geometriske, men myke: kort med 12 pikslers radius og tynne rammer, pilleformede knapper og en skrifttype med vekt på 330 som hvisker skala i stedet for rop. Et enkelt kromatisk tegnsettingstegn (#36f4a4) brukes sparsomt på lenker, tagger og fokustilstander, og farge reserveres til funksjonelle øyeblikk for å sikre at handelshistorier forblir det visuelle fokuspunktet.
Maksimal bredde er ~1280 piksler, sentrert, med splash-blokker i full bredde som strekker seg utover bildebeholderen. Siderytmen veksler: (1) en mørk splash-side i full bredde med en overliggende overskrift og handlingsfremmende knapper, (2) komfortable mørke seksjoner med tekst- og bildeblokker i maksimal bredde i 2 kolonner eller bilderatter i 3 kolonner, (3) interaktive presentasjonspaneler (produktkort, fraktkalkulator, verdenskart) vist som hevede kort på et dypere lerret. Navigasjonen er en fast topplinje med logoen + 3 navigasjonselementer + sekundære lenker + den primære handlingsfremmende knappen, alt justert til høyre. Den vertikale rytmen bruker 80 pikslers mellomrom mellom seksjoner med en jevn overgang – ingen skillevegger mellom mørke seksjoner, bare en endring i overflatetonen.
Det visuelle designet er primært fokusert på forhandleren: produktbilder i full størrelse og bilder fra merkevarearrangementer bærer mesteparten av den visuelle tyngden, ofte i form av store bakgrunner med overlagt hvit tekst. Bildene er tett beskåret, har høy kontrast og er festlige (ringingen av Nasdaq-klokken, gruppehilsener, nærbilder av produkter i hånden). Den mørke bakgrunnen skaper inntrykk av at disse bildene er opplyst av spotlights. Illustrasjonene er minimalistiske – det viktigste forklarende arbeidet utføres av innebygde produktbilder og skjermbilder av butikkfasader. Ikonene er monokrome, med en linjebredde på 1,5–2 piksler, vanligvis hvite eller #36f4a4 for aktive tilstander.
Palett
Merke
- Shopify Mint
#36f4a4— Aktive navigasjonsindikatorer, fokusringer, tag-uthevinger og musepeker-uthevinger på lenker er den eneste kromatiske gnisten som skaper en følelse av aktivert interaktivitet mot en mørk bakgrunn.
Nøytral
- Midnight Forest
#02090a— Sidelerret, bakgrunnsbilder for topptekst, bakgrunnsbilder for seksjoner - Deep Lichen
#061a1c— Hovedkortflater, hevede paneler, innholdsblokker. - Shaded Fern
#072720— Navigasjonspanel, ekstra kort, knapt merkbar heving av panelet. - Spruce Border
#1e2c31— Tynne rammer for kort, skillelinjer, omriss av inndatafelt. - Abyss Indigo
#000a1e— Ekstra overflate for å legge inn produkter/demonstrasjoner, paneler med funksjonsbeskrivelser. - Pure White
#ffffff— Hovedtekst, knappefyll, tittel, logoer.
Typografi
fra 12 til 70 piksler · 8 trinn
- Neue Haas Grotesk — erstatning: Inter · omriss 330, 400, 500, 550, 600 · Det typografiske kjernesystemet er overskrifter med en skriftvekt på 70–96 piksler (330–400) som er subtile snarere enn høylytte; brødtekst med en skriftvekt på 16–18 piksler (400–500); og navigasjon og brukergrensesnitt med en skriftvekt på 14–16 piksler (500–550). Den ultralette skriftvekten på 330 på store skjermstørrelser er et særegent trekk: den formidler selvtillit gjennom tilbakeholdenhet snarere enn omfang.
- Inter Variable — erstatning: Inter · omriss 400, 420, 450, 550 · En sekundær skrifttype som brukes i navigasjonsgrensesnittelementer, små notater, fanekontroller og mikrotekst i bunntekster. De litt større små bokstavene og mer standard bokstavavstand gjør den mer lesbar i kompakte størrelser. Den er også egnet for situasjoner der en skrifttype på 420 fyller gapet mellom en vanlig og mellomstor skrifttype.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 12px |
| Knapperadius | 9999px |
| Kortradius | 12px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 80px |
| Sidebredde | 1280px |
AI vil bygge nettstedet ditt i Shopify -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
- Retool — Et varmt obsidianverksted – en overflate for presisjonsverktøy, opplyst av ulmende glør, hvor alt skapes
- Elektron — Utstyrets kontrollpanel ved midnatt er et nesten svart lerret, hvor produktbilder skinner mens grensesnittet forblir praktisk talt usynlig.
- REKKI — Flykontrollpanelet i fotolaboratoriet
- OFFFICE : — et noir-galleri omsluttet av monolittisk skrifttype
- Clyde — Utstillingslokalet, med sin ene spotlight, er et nesten mørkt galleri der den eneste fargen i rommet er en varm gradientkule.
- Channel Studio — Et fotostudiolaboratorium med én korall lampeskjerm
- Electronic Materials Office — En glødende glør i et galleri dekorert med trekull
- ORYZO AI — Et fotoessay om et mørkerom. En enslig gjenstand som svever i det varme mørket, med kremfarget skrift som eneste dekorasjon.
- Factory — «Krigsrommet»-terminalen ved midnatt. «Fabrikken» er et skarpt, svart kontrollpanel der et enkelt hvitt kort lander som en lommelyktbelyst forsendelse – det eneste objektet i rommet er selve arbeidet.
- Hungry Tiger — Gurkemeie-lys graffiti på veggen i tandoor-ovnen. En enhetlig palett av gull og rusten brun, med en skrift så stor at den ser mer ut som et skilt fra et kryddermarked enn en nettside.
- Bibliothèque — Et svart kubeformet galleri under en spotlight – en enslig opplyst plate i en enorm, mørk hall
- Apple (España) — svart teater med opplyste armaturer