Commerce design system

Build the store, run the business, see the signal.

A Shopify-specific preview built from extracted tokens: green-black canvases, electric mint conversion moments, practical pricing cards, and dashboard panels that feel like commerce operations.

Explore product patternsView tokens
Admin overview
Total sales$84.2K+18%
Orders1,248Live checkout
Conversion5.8%Mint signal
Shop Pay accelerated
Subtotal$128.00
ShippingFree
Total$128.00
35Colors
15Type levels
20Components
76Core tokens

01 / Colors

Commerce greens, zinc utility, and dark product stages.

Swatches are grouped by role so the palette produces Shopify, not just green SaaS.

primary#008060

Light-surface commerce CTA.

accent#36F4A4

Mint hero conversion.

accentPressed#0A4D4D

Pressed action teal.

darkCanvas#02090A

Signature hero/nav stage.

darkSurface#061A1C

Dashboard shell fill.

darkPanel#051517

Mega-menu cards.

surface#FAFAFA

Light content cards.

surfaceAlt#F4F4F5

Pricing controls.

ink#18181B

Primary text.

muted#71717A

Plan metadata.

border#D4D4D8

Table lines.

pistachio#D4F9E0

Soft green badges.

limeSpark#D0F224

Small visual spark.

purpleAccent#978DE7

Campaign accent.

posLime#EEFAB3

Retail/POS softness.

error#EE0004

Validation failure.

accentHover#45F298

CTA hover lift.

darkSurfaceAlt#121C1E

Highlighted dark cards.

darkBorder#142024

Dark panel lines.

darkMuted#A1A1AA

Dark captions.

shopGreen#95BF47

Heritage mark green.

aloe#C1FBD4

Soft success surface.

commercePurple#751BE9

Digital-commerce accent.

success#15883B

Included features.

warning#E89900

Billing caution.

02 / Typography

Large, low-weight headlines with practical commerce copy.

Start and scale everywhere.
display — 96px / 300 / 1.08 / -0.025em / Inter substitute
Sell online and in person.
hero — 70px / 330 / 1.08 / -0.015em / Inter substitute
Commerce tools, one system.
headline-lg — 56px / 330 / 1.08 / -0.01em / Inter substitute
Unified checkout intelligence
title-lg — 44px / 330 / 1.10 / -0.01em / Inter substitute
Plan cards stay scannable
title-md — 34px / 330 / 1.14 / 0em / Inter substitute
Feature modules
title-sm — 26px / 360 / 1.20 / 0em / Inter substitute
Body-lg supports high-level product explanations.
body-lg — 20px / 400 / 1.40 / 0em / Inter substitute
Body copy explains commerce operations without becoming decorative.
body — 18px / 400 / 1.40 / 0em / Inter substitute
Body-sm handles metadata, plan details, and dense tables.
body-sm — 14px / 420 / 1.30 / 0em / Inter substitute
Label / monthly billing
label — 14px / 450 / 1.30 / 0em / Inter substitute
Button text
button — 16px / 600 / 1.50 / 0em / Inter substitute
CAPTION METADATA
caption — 12px / 450 / 1.33 / 0.02em / Inter substitute
Legal fallback for support and notices.
legal — 12px / 400 / 1.50 / 0em / Helvetica Neue
$39
pricing-display — 60px / 330 / 1.00 / -0.015em / Inter substitute
const store = "ready";
code — 14px / 400 / 1.50 / 0em / monospace

03 / Buttons

Compact controls with mint only where conversion matters.

button-primary
button-primary-active
button-mint
button-mint-active
button-dark
button-secondary
button-secondary-on-dark
button-ghost
button-pricing-toggle

04 / Cards & Surfaces

Light pricing utility meets dark commerce theater.

Light feature

Sell everywhere

Neutral cards carry explanatory content with borders instead of heavy elevation.

Explore
Dark panel

Checkout preview

Green-black surfaces hold product screenshots and navigation tiles.

Open panel
Basic

$39/mo

White pricing cards are dense, bordered, and practical.

Choose plan
Recommended

Grow

Dark highlighted pricing keeps the same geometry while lifting hierarchy.

Start free
AI signal

Commerce glow

Mint glow appears rarely to signal momentum, automation, or conversion.

View insight
POS surface

Retail-ready

POS lime softens in-person selling modules without becoming the main brand color.

Sync store

05 / Brand-Specific Product Patterns

Commerce UI proof: admin, checkout, POS, pricing, and mega-menu systems.

Admin dashboard panel

Revenue today$12.8K+24%

Checkout module

Mega-menu tiles

Start

Sell by tomorrow

Market

Find customers

Manage

Run operations

POS

Retail sync

Pricing comparison

Online store✓
Staff accounts5
ReportsAdvanced
Transaction fee1%

POS tile grid

Inventory
Tap to pay
Pickup
Returns

Automation signal

Mint curve + dark panel for workflow and AI insight moments.

06 / Forms

Rounded commerce forms with clear borders and functional states.

07 / Spacing

A 4px base with large marketing section jumps.

xs / 4px
sm / 8px
md / 16px
lg / 24px
xl / 40px
xxl / 64px
section / 112px
desktop margin / 90px

08 / Radius

Compact rounding for controls, softer rounding for panels.

sm / 6pxSupport fallback
md / 8pxSmall UI
lg / 12pxButtons, inputs
xl / 16pxCards, panels
xxl / 32pxLarge modules
pill / 9999pxToggles, badges

09 / Elevation

Depth comes from panels, borders, and rare mint glow.

Flat pricing card

1px border, no shadow. Shopify stays practical on light surfaces.

Soft utility lift

0 8px 48px rgba(24,24,27,.08), 0 4px 8px rgba(24,24,27,.04)

Dashboard panel

0px 8px 48px rgba(24,24,27,.24), 0px 4px 8px rgba(24,24,27,.16)

Mint signal glow

0px 0px 10px #36F4A4; use sparingly.

10 / Extracted Component Tokens

CSS custom properties used by this preview.

:root {
  --brand-primary: #008060;
  --brand-accent: #36F4A4;
  --brand-accent-hover: #45F298;
  --brand-accent-pressed: #0A4D4D;
  --brand-ink: #18181B;
  --brand-body: #3F3F46;
  --brand-muted: #71717A;
  --brand-canvas: #FFFFFF;
  --brand-surface: #FAFAFA;
  --brand-surface-alt: #F4F4F5;
  --brand-border: #D4D4D8;
  --brand-dark-canvas: #02090A;
  --brand-dark-surface: #061A1C;
  --brand-dark-panel: #051517;
  --brand-mint-glow: #36F4A4;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --space-section: 112px;
  --shadow-panel: 0px 8px 48px rgba(24,24,27,.24), 0px 4px 8px rgba(24,24,27,.16);
}