Shopify

Identity

E-Commerce & Retail

Bundled OpenDesign package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

NeueHaasGroteskDisplay

Inter VariableBody

Ag

ui-monospaceMono

--text-4xl · 96pxThe quick brown fox

--text-3xl · 70pxThe quick brown fox

--text-2xl · 48pxThe quick brown fox

--text-xl · 32pxThe quick brown fox

--text-lg · 20pxThe quick brown fox

--text-base · 18pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#000000Page background — defines the brand canvas.

--surface#02090aCard / lifted container background.

--surface-warm#061a1cTertiary surface tier (kami warm-sand).

--fg#ffffffPrimary text color.

--fg-2#ffffffSecondary text tier (kami dark-warm).

--muted#a1a1aaSubtext / captions.

--meta#71717aTertiary FG / metadata tier (kami stone).

--border#1e2c31Default border / card edge.

--border-soft#3f3f46Inner row separator that should not visually compete.

--accent#36f4a4Brand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#000000FG when --accent is the bg.

--success#36f4a4Success state.

--warn#eab308Warning state.

--danger#dc2626Danger state.

Also named in DESIGN.md

Aloe#c1fbd4Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10

Pistachio#d4f9e0Lightest green tint for subtle surface differentiation (--color-pistachio-10

Forest#102620Elevated dark surfaces, header backgrounds — the warmest dark shade

Shade 30#d4d4d8Lightest neutral, barely-there borders on dark (--color-shade-30

Imagery & layout

Radius

--radius-sm9999px

--radius-md8px

--radius-lg12px

--radius-pill9999px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 28px

--space-8 · 36px

--space-12 · 64px

Elevation

--elev-raised

Layout

Layout rules

Max container width: ~1280px (centered)
Hero: full-width, edge-to-edge dark background with centered text
Feature sections: 2-column layouts with text and product screenshots
Stats sections: horizontal layout with large numbers
Horizontal padding: 64px desktop, 32px tablet, 16px mobile
Grid gap: 24-32px between major content blocks

Component kit

Light Dark