Shopify
Greenhouse sa Hatinggabi - Namumulaklak ang mga trademark laban sa isang malalim na turkesang backdrop, na naiilawan ng isang kislap ng mint
Ang sistema ng disenyo ng Shopify ay isang midnight workshop para sa komersyo: isang halos itim na canvas na may matingkad na turquoise green, isang malapad at kumpiyansang sans-serif typeface, at isang matingkad na mint accent na nagpapagana ng mga interactive na sandali. Ang interface ay kahawig ng isang darkroom, kung saan ang mga produkto at brand ang pinagmumulan ng liwanag—ang mga larawan at storefront ay kumikinang laban sa halos itim na mga ibabaw, habang ang mga elemento ng chrome ay nauurong. Ang mga bahagi ay geometric ngunit malambot: 12px-radius cards na may manipis na border, mga butones na hugis-pill, at isang 330-weight typeface na bumubulong ng scale sa halip na sigaw. Isang chromatic punctuation mark (#36f4a4) ang ginagamit nang matipid sa mga link, tag, at focus state, na naglalaan ng kulay para sa mga functional na sandali upang matiyak na ang mga kwento ng merchant ay mananatiling visual focal point.
Ang pinakamataas na lapad ay ~1280px, nakasentro, na may mga full-width splash block na umaabot lampas sa lalagyan ng larawan. Ang ritmo ng pahina ay nagpapalitan: (1) isang full-width dark splash page na may nakapatong na headline at mga call-to-action button, (2) komportableng madilim na seksyon na may maximum-width na teksto at mga image block sa 2 column o image grid sa 3 column, (3) mga interactive showcase panel (product card, shipping calculator, world map) na ipinapakita bilang mga nakataas na card sa mas malalim na canvas. Ang nabigasyon ay isang nakapirming top bar na may logo + 3 navigation elements + secondary links + ang pangunahing call-to-action button, lahat ay nakahanay sa kanan. Ang patayong ritmo ay gumagamit ng 80px na puwang sa pagitan ng mga seksyon na may maayos na transisyon—walang mga divider sa pagitan ng mga madilim na seksyon, tanging pagbabago sa tono ng ibabaw.
Ang biswal na disenyo ay pangunahing nakatuon sa retailer: ang mga full-size na larawan ng produkto at mga larawan mula sa mga kaganapan ng brand ang siyang nagbibigay ng malaking bahagi ng biswal na bigat, kadalasan sa anyo ng malalaking background na may nakapatong na puting teksto. Ang mga larawan ay mahigpit na naka-crop, mataas ang contrast, at maligaya ang katangian (ang pagtunog ng Nasdaq bell, mga pagbati ng grupo, mga close-up ng mga produktong hawak). Ang madilim na background ay lumilikha ng impresyon na ang mga larawang ito ay naiilawan ng mga spotlight. Minimalist ang mga ilustrasyon—ang pangunahing pagpapaliwanag ay isinasagawa sa pamamagitan ng mga naka-embed na larawan ng produkto at mga screenshot ng mga storefront. Ang mga icon ay monochrome, na may lapad ng linya na 1.5–2px, karaniwang puti o #36f4a4 para sa mga aktibong estado.
Paleta
Tatak
- Shopify Mint
#36f4a4— Ang mga active navigation indicator, focus ring, tag highlight, at hover highlight sa mga link ang tanging chromatic sparkle na lumilikha ng pakiramdam ng pinaganang interactivity laban sa madilim na background.
Neutral
- Midnight Forest
#02090a— Canvas ng pahina, mga larawan sa background ng header, mga larawan sa background ng seksyon - Deep Lichen
#061a1c— Mga pangunahing ibabaw ng card, mga nakataas na panel, mga bloke ng nilalaman. - Shaded Fern
#072720— Panel ng nabigasyon, mga karagdagang kard, halos hindi kapansin-pansing pagtaas ng panel. - Spruce Border
#1e2c31— Manipis na mga hangganan para sa mga kard, mga linyang naghahati, mga balangkas ng input field. - Abyss Indigo
#000a1e— Karagdagang ibabaw para sa paglalagay ng mga produkto/demonstrasyon, mga panel na may mga paglalarawan ng mga gamit. - Pure White
#ffffff— Pangunahing teksto, pagpuno ng button, pamagat, mga logo.
Tipograpiya
mula 12 hanggang 70px · 8 hakbang
- Neue Haas Grotesk — kapalit: Inter · mga balangkas 330, 400, 500, 550, 600 · Ang pangunahing sistema ng tipograpiya ay ang mga headline na may font weight na 70–96px (330–400) na banayad sa halip na maingay; body copy na may font weight na 16–18px (400–500); at nabigasyon at user interface na may font weight na 14–16px (500–550). Ang ultra-light font weight na 330 sa malalaking sukat ng screen ay isang natatanging katangian: nagpapakita ito ng kumpiyansa sa pamamagitan ng pagpipigil sa sarili sa halip na pagiging makapal.
- Inter Variable — kapalit: Inter · mga balangkas 400, 420, 450, 550 · Isang pangalawang uri ng font na ginagamit sa mga elemento ng navigational interface, maliliit na tala, mga kontrol sa tab, at microtext sa mga footer. Ang bahagyang mas malalaking maliliit na letra at mas karaniwang espasyo ng mga letra ay ginagawa itong mas madaling basahin sa mga compact na laki. Angkop din ito para sa mga sitwasyon kung saan ang isang 420-weight na font ay pumupuno sa puwang sa pagitan ng isang regular at katamtamang laki ng font.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 12px |
| Radius ng buton | 9999px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80px |
| Lapad ng pahina | 1280px |
Gagawa ang AI ng website mo sa estilong Shopify at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Retool — Isang mainit na pagawaan ng obsidian - isang ibabaw para sa mga kagamitang may katumpakan, na nililiwanagan ng mga nagbabagang baga, kung saan nalilikha ang lahat
- Elektron — Ang control panel ng kagamitan sa hatinggabi ay parang halos itim na canvas, kung saan kumikinang ang mga larawan ng produkto habang ang interface ay halos hindi nakikita.
- REKKI — Panel ng kontrol sa paglipad sa photo lab
- OFFFICE : — isang noir gallery na nababalot ng monolitikong font
- Clyde — Ang showroom, na may nag-iisang spotlight nito, ay isang halos madilim na gallery kung saan ang tanging kulay sa silid ay isang mainit na gradient ball.
- Channel Studio — Isang studio photo lab na may isang coral lampshade
- Electronic Materials Office — Isang nagbabagang baga sa isang galeriya na pinalamutian ng uling
- ORYZO AI — Isang sanaysay tungkol sa isang madilim na silid. Isang nag-iisang bagay na nakalutang sa mainit na dilim, kulay krema ang tanging palamuti.
- Factory — Ang terminal ng "war room" sa hatinggabi. Ang "pabrika" ay isang matingkad na itim na control panel kung saan may isang puting card na lumalapag na parang isang dispatch na may ilaw na flashlight—ang tanging bagay sa silid ay ang mismong gawa.
- Hungry Tiger — Graffiti na matingkad na parang turmeric sa dingding ng tandoor. Isang pinag-isang paleta ng ginto at kalawangin na kayumanggi, na may napakalaking font na mas mukhang karatula sa pamilihan ng pampalasa kaysa sa isang website.
- Bibliothèque — Isang itim na hugis-kubo na galeriya sa ilalim ng spotlight – isang nag-iisang maliwanag na plato sa isang malawak at madilim na bulwagan
- Apple (España) — itim na teatro na may mga ilaw na kagamitan