Back to Library
S

Shopify

Shopify

Visit Website

E-commerce platform. Dark-first cinematic, neon green accent.

霓虹绿深色电商轻量级字体电影感

Color Palette

primary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size16px
Line Height1.3
Weights300, 400, 500, 600, 700

Heading Scale

h1Shopify Heading
h2Shopify Heading
h3Shopify Heading
h4Shopify Heading

DESIGN.md

# Shopify Design System

## Visual Theme & Atmosphere
Cinematic e-commerce. Dark-first with neon green accents. Ultra-light headings.

Related Design Systems

S
Stripe
Stripe
Similar style design system
C
Coinbase
Coinbase
Similar style design system

Frequently Asked Questions

What is Shopify's design style?

E-commerce platform. Dark-first cinematic, neon green accent.

What is Shopify's primary color?

Shopify uses #96BF48 as primary color, #0F0F0F for background, and #FFFFFF for text.

What fonts does Shopify use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 16px.

How to use Shopify design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Shopify's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems