Shopify
Greenhouse sa Tungang Gabii - Namulak ang mga trademark batok sa lawom nga turquoise nga background, nga gidan-agan sa usa ka kislap sa mint
Ang sistema sa disenyo sa Shopify usa ka tungang gabii nga workshop para sa komersyo: usa ka hapit itom nga canvas nga gipintalan og lawom nga turquoise green, usa ka lapad ug masaligon nga sans-serif typeface, ug usa ka mahayag nga mint accent nga nagpaaktibo sa mga interactive moments. Ang interface nahisama sa usa ka darkroom, diin ang mga produkto ug brand mao ang tinubdan sa kahayag—ang mga litrato ug mga storefront nagdan-ag batok sa hapit itom nga mga nawong, samtang ang mga elemento sa chrome mihinay. Ang mga component geometric apan humok: 12px-radius nga mga kard nga adunay nipis nga mga border, mga butones nga porma og pildoras, ug usa ka 330-weight typeface nga naghunghong og scale imbes nga singgit. Usa ka chromatic punctuation mark (#36f4a4) ang gigamit nga talagsa ra sa mga link, tag, ug focus states, nga nagreserba sa kolor para sa mga functional moments aron masiguro nga ang mga istorya sa negosyante magpabilin nga visual focal point.
Ang pinakataas nga gilapdon kay ~1280px, nakasentro, nga ang full-width splash blocks molapas sa photo container. Ang ritmo sa panid nagpuli-puli: (1) usa ka full-width dark splash page nga adunay overlayed headline ug call-to-action buttons, (2) komportable nga ngitngit nga mga seksyon nga adunay maximum-width nga teksto ug image blocks sa 2 ka kolum o image grids sa 3 ka kolum, (3) interactive showcase panels (product card, shipping calculator, world map) nga gipakita isip gipataas nga mga card sa mas lawom nga canvas. Ang nabigasyon usa ka pirmi nga top bar nga adunay logo + 3 ka navigation elements + secondary links + ang primary call-to-action button, tanan gihan-ay sa tuo. Ang bertikal nga ritmo naggamit og 80px nga mga kal-ang tali sa mga seksyon nga adunay hapsay nga transisyon—walay mga divider tali sa ngitngit nga mga seksyon, usa lamang ka pagbag-o sa surface tone.
Ang biswal nga disenyo panguna nga naka-focus sa retailer: ang mga full-size nga litrato sa produkto ug mga litrato gikan sa mga brand event mao ang nagdala sa kadaghanan sa biswal nga gibug-aton, kasagaran sa porma sa dagkong mga background nga adunay overlaid nga puti nga teksto. Ang mga imahe hugot nga giputol, taas ang contrast, ug malipayon ang kinaiya (ang pagbagting sa Nasdaq bell, mga pangumusta sa grupo, mga close-up sa mga produkto nga gikuptan). Ang ngitngit nga background nagmugna sa impresyon nga kini nga mga litrato gidan-agan sa mga spotlight. Minimalist ang mga ilustrasyon—ang panguna nga trabaho sa pagpasabut gihimo sa mga naka-embed nga imahe sa produkto ug mga screenshot sa mga storefront. Ang mga icon monochrome, nga adunay gilapdon sa linya nga 1.5–2px, kasagaran puti o #36f4a4 para sa mga aktibo nga estado.
Paleta
Brand
- Shopify Mint
#36f4a4— Ang mga active navigation indicator, focus rings, tag highlights, ug hover highlights sa mga link mao lamang ang chromatic sparkle nga makamugna og pagbati sa gipagana nga interactivity batok sa ngitngit nga background.
Neutral
- Midnight Forest
#02090a— Kanbas sa panid, mga hulagway sa background sa header, mga hulagway sa background sa seksyon - Deep Lichen
#061a1c— Mga nawong sa pangunang kard, gipataas nga mga panel, mga bloke sa sulud. - Shaded Fern
#072720— Panel sa nabigasyon, dugang nga mga kard, halos dili mamatikdan nga pag-alsa sa panel. - Spruce Border
#1e2c31— Nipis nga mga utlanan para sa mga kard, mga linya sa pagbahin, mga outline sa input field. - Abyss Indigo
#000a1e— Dugang nga nawong para sa pag-embed sa mga produkto/demonstrasyon, mga panel nga adunay mga deskripsyon sa mga gimbuhaton. - Pure White
#ffffff— Pangunang teksto, pagpuno sa butones, titulo, mga logo.
Tipograpiya
gikan sa 12 ngadto sa 70px · 8 ka lakang
- Neue Haas Grotesk — kapuli: Inter · mga balangkas 330, 400, 500, 550, 600 · Ang kinauyokan nga sistema sa tipograpiya mao ang mga ulohan sa balita nga adunay gibug-aton sa font nga 70–96px (330–400) nga dili kaayo klaro imbes nga kusog; ang body copy nga adunay gibug-aton sa font nga 16–18px (400–500); ug ang nabigasyon ug user interface nga adunay gibug-aton sa font nga 14–16px (500–550). Ang ultra-light nga gibug-aton sa font nga 330 sa dagkong mga gidak-on sa screen usa ka talagsaon nga bahin: kini nagpakita sa pagsalig pinaagi sa pagpugong imbes nga pagkadako.
- Inter Variable — kapuli: Inter · mga balangkas 400, 420, 450, 550 · Usa ka ikaduhang klase sa font nga gigamit sa mga elemento sa navigational interface, gagmay nga mga nota, mga kontrol sa tab, ug microtext sa mga footer. Ang gamay nga mas dagkong mga letra ug mas standard nga gilay-on sa mga letra naghimo niini nga mas mabasa sa mga compact nga gidak-on. Kini angay usab alang sa mga sitwasyon diin ang usa ka 420-weight nga font nagpuno sa kal-ang tali sa usa ka regular ug medium-sized nga font.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 12px |
| Radius sa butones | 9999px |
| Radius sa kard | 12px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 80px |
| Lapad sa panid | 1280px |
Ang AI motukod sa imong website sa estilo sa Shopify ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Retool — Usa ka mainit nga obsidian workshop - usa ka nawong para sa mga himan nga tukma, nga gidan-agan sa nagbaga nga mga baga, diin ang tanan gibuhat
- Elektron — Ang equipment control panel sa tungang gabii morag halos itom nga canvas, diin ang mga litrato sa produkto modan-ag samtang ang interface halos dili makita.
- REKKI — Panel sa pagkontrol sa paglupad sa laboratoryo sa litrato
- OFFFICE : — usa ka noir gallery nga natabunan sa monolithic font
- Clyde — Ang showroom, nga adunay usa ra ka spotlight, usa ka hapit ngitngit nga gallery diin ang bugtong kolor sa kwarto usa ka mainit nga gradient ball.
- Channel Studio — Usa ka studio photo lab nga adunay usa ka coral lampshade
- Electronic Materials Office — Usa ka nagdilaab nga baga sa usa ka galeriya nga gidekorasyonan og uling
- ORYZO AI — Usa ka photo essay bahin sa usa ka dark room. Usa ka butang nga nag-inusara nga naglutaw-lutaw sa init nga kangitngit, ang krema nga font mao lamang ang dekorasyon.
- Factory — Ang terminal sa "war room" sa tungang gabii. Ang "pabrika" usa ka itom nga control panel diin ang usa ka puti nga kard motugpa nga daw flashlight—ang bugtong butang sa kwarto mao ang trabaho mismo.
- Hungry Tiger — Graffiti nga hayag sama sa turmeric sa bungbong sa tandoor. Usa ka nagkahiusang paleta sa bulawan ug tayaon nga brown, nga ang font dako kaayo nga morag karatula sa merkado sa panakot kaysa usa ka website.
- Bibliothèque — Usa ka itom nga kubo nga galeriya ubos sa spotlight – usa ka nag-inusarang nagsiga nga plato sa usa ka lapad ug ngitngit nga hawanan
- Apple (España) — itom nga teatro nga adunay mga suga nga suga