Design System

Build for the
merchant first.

A clean, purposeful merchant canvas with the signature Shopify green, a 4px grid, and a focus on clarity and efficiency.

20 color tokens 15+ type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

A light-first palette anchored by Shopify Green for primary actions, neutral grays for text hierarchy, and semantic colors for status indicators.

White
#ffffff
Primary background, cards
Surface
#f6f6f7
Secondary sections, sidebars
Surface Hover
#f1f1f2
Hovered rows, interactive
Border
#e1e3e5
Borders, dividers
Text Primary
#1a1a1a
Headings, body text
Text Secondary
#6b7177
Descriptions, metadata
Text Disabled
#a0a5ab
Disabled, placeholders
Shopify Green
#008060
Primary actions, brand
Green Dark
#006e52
Pressed state
Green Light
#e3f1eb
Success backgrounds
Blue
#2c6ecb
Links, interactive
Blue Light
#e4f0ff
Info backgrounds
Red
#d72c0d
Errors, destructive
Red Light
#fbe9e7
Error backgrounds
Orange
#b98900
Warnings, caution
Orange Light
#fff5ea
Warning backgrounds
Typography

Type Scale

Inter as primary typeface. Clean, highly legible, and optimized for merchant interfaces with a precise weight range.

Display-lg Dashboard 32px / 1.25 / −0.01em
Display Page title 28px / 1.25 / −0.01em
Heading-lg Section heading 24px / 1.33 / −0.01em
Heading Card heading 20px / 1.4 / −0.01em
Heading-sm Subsection 16px / 1.25 / —
Body-lg Default body text for readable content 16px / 1.5 / —
Body Standard body text for most UI elements 14px / 1.5 / —
Body-sm Dense data, comparison rows, metadata 13px / 1.5 / —
Caption Meta info · Labels · Helper text 12px / 1.5 / —

Fonts

Primary Inter 400–700 · 12–32px
Mono Inter Mono 400–500 · 12–14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with clear visual hierarchy. 12-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

14px
28px
312px
416px
624px
832px
1248px
2496px

Border Radius

sm 4px
default 8px
cards 12px
xl 16px
pill 9999px
Elevation

Surfaces

Borders over shadows. Clean structure through outlined containers. 4 distinct surface levels.

White #ffffff
Surface #f6f6f7
Surface Hover #f1f1f2
Border #e1e3e5
Components

Button Variants

Primary action (Shopify Green), secondary (outlined), and plain variants for clear interaction hierarchy.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Shopify Green (#008060) background, White text, 8px radius. Use exclusively for the single most important merchant action.
Secondary Button
Secondary actions, navigation
.btn-secondary
White background, Text Primary color, Border outline. For less prominent actions that still need visual presence.
Plain Button
Tertiary actions, inline links
.btn-ghost
Transparent background, Blue text. Low-emphasis interactive elements within content flow.
Badges
Status indicators, labels
.badge
Paid Draft Pending Overdue
Semantic color coding for quick status recognition. Green=success, Blue=info, Orange=warning, Red=critical.
Data Table
Structured data display
table
OrderCustomerStatusTotal
#1001Sarah JohnsonFulfilled$124.00
#1002Mike ChenProcessing$89.50
#1003Emma WilsonPending$256.00
Clean table layout with Surface header, Border dividers, and hover states for row interaction.
Navigation Item
Sidebar navigation
.nav-item
Home
Orders
Products
Text Primary color, 8px radius, Surface hover state. Active state has 3px left border in Shopify Green.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary canvas background
  • Shopify Green (#008060) for primary CTAs only
  • Text Primary (#1a1a1a) for all headings and body
  • Blue (#2c6ecb) for all links and secondary interactives
  • 8px radius for buttons, 12px for cards
  • 4px-based spacing with comfortable breathing room
  • Borders for structure over decorative shadows
Don't — Avoid
  • Shopify Green for text or non-primary elements
  • Red or orange for primary actions
  • Decorative shadows on cards
  • Hard sharp corners on buttons or cards
  • Dense packing without breathing room
  • Font families outside Inter / Inter Mono
  • Disabled text for actionable content