An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks: near-black canvases with thin-weight Neue Haas Grotesk display, and cream-mint transactional surfaces with the same pill button vocabulary in inverse polarity.
01 — Colors
A near-monochrome system with mint and pistachio greens reserved for the transactional track. Black is canonical; greens signal commerce.
02 — Typography
Neue Haas Grotesk Display at thin weights (330) for every display tier. Inter Variable at 420–550 for UI body. ss03 stylistic set enabled across both.
04 — Components
Four pricing tiers + a featured aloe tier. Cinematic feature card and pistachio band carry the brand's two surface-treatment moods.
Per month, billed annually.
Best for growing businesses.
Scale with custom analytics.
Online, in person, on social — one platform behind every checkout.
Lower transaction fees with the platform's native payment rails.
05 — Components
8px-radius inputs sitting on white. Focus replaces the hairline border with the ink color — no colored ring.
06 — Signature Components
Pill tags, cinematic photo frames, and the layered tiny-shadow card halo — the brand's distinguishing visual moves.
Aloe-fill pill for category labeling on the light track.
Neutral shade pill for status / availability.
Full-bleed cinematic photo container; top-only rounded corners on some asymmetric cards.
Layered 4-stop tiny shadows produce a soft paper halo on light pricing cards.
07 — Foundations
8px base with denser sub-units for editorial fine work; 64px section gap on transactional surfaces, 128–192px on cinematic.
08 — Foundations
Pill is canonical for buttons (9999px). Cards land at 12px, photo frames at 20px (often top-only), inputs at 8px.
09 — Foundations
Cinematic cards use subtle inset top-edge highlights; light cards use stacked tiny shadows; modals use a single deep drop.
10 — Responsive
Display sizes scale through 96 → 70 → 55 → 48 → 36px; pricing tiers stair from 4-up to 1-up; cinematic photography crops to focal subject on mobile.
| Name | Width | Key Changes |
|---|---|---|
| Wide | ≥ 1440px | Cinematic edge-bleeding photography; pricing 4-up |
| Desktop | 1024–1440px | Default content max-width; pricing 4-up tightens |
| Tablet | 768–1023px | Pricing 2-up; cinematic photography crops |
| Mobile | < 768px | Pricing 1-up; hamburger nav; display-xxl drops to 56–64px |
Pill buttons hit ≥44×44px on mobile. Form fields stay at the 44px minimum. WCAG AAA compliant.
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.