Shopify
Midnight Greenhouse - Trademarks bloom against a deep turquoise backdrop, illuminated by a single spark of mint
Shopify's design system is a midnight workshop for commerce: a near-black canvas tinted with a deep turquoise green, a wide, confident sans-serif typeface, and a single vibrant mint accent that activates interactive moments. The interface resembles a darkroom, where products and brands are the source of light—photos and storefronts glow against near-black surfaces, while chrome elements recede. Components are geometric yet soft: 12px-radius cards with thin borders, pill-shaped buttons, and a 330-weight typeface that whispers scale rather than shouts. A single chromatic punctuation mark (#36f4a4) is used sparingly on links, tags, and focus states, reserving color for functional moments to ensure merchant stories remain the visual focal point.
The maximum width is ~1280px, centered, with full-width splash blocks extending beyond the photo container. The page rhythm alternates: (1) a full-width dark splash page with an overlayed headline and call-to-action buttons, (2) comfortable dark sections with maximum-width text and image blocks in 2 columns or image grids in 3 columns, (3) interactive showcase panels (product card, shipping calculator, world map) displayed as raised cards on a deeper canvas. The navigation is a fixed top bar with the logo + 3 navigation elements + secondary links + the primary call-to-action button, all aligned to the right. The vertical rhythm uses 80px gaps between sections with a smooth transition—no dividers between dark sections, only a change in surface tone.
The visual design is primarily focused on the retailer: full-size product photos and photos from brand events carry the bulk of the visual weight, often in the form of large backgrounds with overlaid white text. The images are tightly cropped, high-contrast, and festive in nature (the ringing of the Nasdaq bell, group greetings, close-ups of products in hand). The dark background creates the impression that these photos are illuminated by spotlights. The illustrations are minimalist—the main explanatory work is performed by embedded product images and screenshots of storefronts. Icons are monochrome, with a line width of 1.5–2px, typically white or #36f4a4 for active states.
Palette
Brand
- Shopify Mint
#36f4a4— Active navigation indicators, focus rings, tag highlights, and hover highlights on links are the only chromatic sparkle that creates a sense of enabled interactivity against a dark background.
Neutral
- Midnight Forest
#02090a— Page canvas, header background images, section background images - Deep Lichen
#061a1c— Main card surfaces, raised panels, content blocks. - Shaded Fern
#072720— Navigation panel, additional cards, barely noticeable raising of the panel. - Spruce Border
#1e2c31— Thin borders for cards, dividing lines, input field outlines. - Abyss Indigo
#000a1e— Additional surface for embedding products/demonstrations, panels with descriptions of functions. - Pure White
#ffffff— Main text, button fill, title, logos.
Typography
from 12 to 70px · 8 steps
- Neue Haas Grotesk — replacement: Inter · outlines 330, 400, 500, 550, 600 · The core typographic system is headlines with a font weight of 70–96px (330–400) that are subtle rather than loud; body copy with a font weight of 16–18px (400–500); and navigation and user interface with a font weight of 14–16px (500–550). The ultra-light font weight of 330 at large screen sizes is a distinctive feature: it conveys confidence through restraint rather than bulk.
- Inter Variable — replacement: Inter · outlines 400, 420, 450, 550 · A secondary font type used in navigational interface elements, small notes, tab controls, and microtext in footers. Its slightly larger lowercase letters and more standard letter spacing make it more readable at compact sizes. It's also suitable for situations where a 420-weight font fills the gap between a regular and medium-sized font.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | average |
| Basic step | 12px |
| Button radius | 9999px |
| Card radius | 12px |
| Shadows | no - borders instead of shadows |
| Between sections | 80px |
| Page width | 1280px |
AI will build your website in Shopify style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- Retool — A warm obsidian workshop - a surface for precision tools, lit by smoldering embers, where everything is created
- Elektron — The equipment control panel at midnight is a nearly black canvas, where product photos shine while the interface remains virtually invisible.
- REKKI — Flight control panel in the photo lab
- OFFFICE : — a noir gallery engulfed in monolithic font
- Clyde — The showroom, with its single spotlight, is a nearly dark gallery where the only color in the room is a warm gradient ball.
- Channel Studio — A studio photo lab with one coral lampshade
- Electronic Materials Office — A glowing ember in a gallery decorated with charcoal
- ORYZO AI — A photo essay about a darkroom. A solitary object hovering in the warm darkness, cream font the only decoration.
- Factory — The "war room" terminal at midnight. The "factory" is a stark black control panel where a single white card lands like a flashlight-lit dispatch—the only object in the room is the work itself.
- Hungry Tiger — Turmeric-bright graffiti on the wall of the tandoor. A unified palette of gold and rusty brown, with font so large it looks more like a spice market sign than a website.
- Bibliothèque — A black cube-shaped gallery under a spotlight – a lone illuminated plate in a vast, dark hall
- Apple (España) — black theater with illuminated fittings