Shopify Design System
Dark · Generated 18/04/2026 · Commerce Platform · India
v1.0.0
Color Palette
Background Colors
White
#FFFFFF
Black
#000000
Dark Cyan
#061A1C
Black 2
#02090A
Dark Blue
#000A1E
Dark Cyan 3
#05191E
White 2
#F4F4F5
Dark Cyan 7
#041E18
Dark Cyan 8
#093329
Dark Cyan 9
#102620
Black 4
#060607
Dark Gray 2
#0E0E10
Dark Gray 4
#18181B
Dark Blue 2
#010624
Blue 5
#5A31F4
Black 6
#020A08
Dark Cyan 26
#072720
Text Colors
Mid Gray
#9F9FA9
Mid Gray 2
#A1A1AA
Cyan
#36F4A4
Cyan 2
#9DABAD
Light Gray 2
#E0E0E0
Mid Gray 3
#9797A2
Cyan 3
#99B3AD
Cyan 4
#30DEEE
Light Gray 4
#BDBDCA
Mid Gray 4
#71717A
Border Colors
Light Gray
#E5E7EB
Dark Cyan 2
#1E2C31
Light Gray 3
#E4E4E7
Dark Cyan 6
#1A292C
Dark Cyan 12
#19272A
Dark Cyan 16
#11352D
Dark Gray 10
#121C1E
Light Gray 5
#D4D4D8
Fill & Gradient Colors
Dark Cyan 4
#244749
Dark Cyan 5
#182E2F
Dark Cyan 15
#157076
Dark Cyan 13
#0F3335
Cyan 5
#5FD5B6
Cyan 6
#30C0EE
Blue 2
#865CFF
Blue 3
#6B26FF
Blue 4
#5126FF
Dk Cyan 10
rgba(21,112,118,.4)
Dk Cyan 11
rgba(21,112,118,.6)
Blue
rgba(18,96,255,.35)
Dark Gray
rgba(63,63,75,.5)
Black 3
rgba(2,8,8,.5)
Typography
Base Font · Inter-Variable
Inter Variable
Start selling online, in person, and everywhere in between. The quick brown fox jumps.
Thin · 330 Regular · 400 W420 W450 Medium · 500 W550 Semibold · 600
Display Font · NeueHaasGrotesk
NeueHaasGrotesk
Your complete commerce platform. More than a website builder — a full business solution.
Regular · 400 Medium · 500 Semibold · 600
Sell
Display Hero · 96px · W330 · line-height: 96px · letter-spacing: −0.13px
Your Commerce Platform
Display XL · 70px · Regular · line-height: 70px · letter-spacing: −0.13px
Start selling everywhere
Display Large · 55px · Regular · line-height: 54.72px · letter-spacing: −0.13px
Grow your business online
Heading XL · 48px · Regular · line-height: 48px · letter-spacing: −0.13px
Everything you need to sell
Heading Large · 30px · Regular · line-height: 40px · letter-spacing: −0.13px
Millions of businesses trust Shopify to power their online and offline sales.
Body Large · 20px · W420 · line-height: 28px · letter-spacing: 0.28px
From day one you get a fully customizable online store, marketing tools, payments, and shipping — all in one platform.
Body Default · 16px · Regular · line-height: 24px · letter-spacing: 0.28px
Try free for 3 days · No credit card required · Cancel anytime
Body Small · 14px · Regular · line-height: 18px · letter-spacing: 0.28px
Basic · Shopify · Advanced · Plus
Caption / Label · 13px · Medium · line-height: 16px · letter-spacing: 2.4px
Line Heights
Tight
14.4px
Snug
16px
Normal
18px
Relaxed
19.5px
Loose
20.8px
LH-6
22.56px
LH-7
24px
LH-8
27.36px
LH-9
28px
LH-10
32px
LH-11
35.84px
LH-12
40px
LH-13
48px
LH-14
54.72px
LH-15
64px
LH-16
70px
LH-17
92px
LH-18
96px
Letter Spacing
Shopify
Tight
−0.13px · hero, display, headings
Sell anywhere online
Normal
0.28px · body text, UI
Commerce Platform
Widest
0.42px · subheadings
BASIC · PLUS
LS-6
0.72px · caps labels
PLANS
LS-7
2.4px · wide uppercase
Spacing
Spacing Scale
Token scale — 1px → 165px
1
2
3
4
6
8
10
12
13
14
16
24
26
28
32
40
43
48
50
56
63.5
64
72
80
102
104
124
128
159
165
Borders
Border Radii
SM
0 0 12px 12px
MD
0 0 8px 8px
LG
4px
XL
8px
2XL
8px 8px 0 0
Full
12px
R7
12px 12px 0 0
R9
16px
R10
20px 20px 0 0
R12
48px 48px 0 0
R13
100%
R16
Pill
Border Widths
Hairline
0.5px
Thin
1px
Base
2px
Shadow / Elevation
Shadow Tokens
6 tokens — layered stacking shadows to deep ambient glow
Small
--shadow-sm
4-layer stacked depth + 1px border ring + inset highlight
Medium
--shadow-md
Scaled-pixel concentric ring shadow system
Large
--shadow-lg
rgba(0,0,0,0.25) 25px 50px −12px · deep drop shadow
XL
--shadow-xl
rgba(0,0,0,0.2) 10px 13px 12px 2px · offset card shadow
Shadow 5
--shadow-shadow-5
White-tinted inset highlights for glass surfaces
Shadow 6
--shadow-shadow-6
Deep ambient glow with 1px black outline · dark UI panels
Z-Index
TokenValueUsage
--z-11Base content layer
--z-28Slightly elevated elements
--z-39Inline sticky elements
--z-410Navigation bar, sticky headers
--z-511Elevated sticky panels
--z-612Dropdowns, tooltips
--z-713Popovers, floating menus
--z-820Drawers, overlays
--z-930Modals, dialogs
--z-1050Priority overlays
--z-11100Toasts, notifications
--z-12999Critical / top-priority UI
Breakpoints
No breakpoints defined
The Shopify design system extract did not yield any responsive breakpoint tokens. The breakpoint object in the DTCG JSON is empty. Responsive layout behaviour is handled through Polaris component defaults rather than CSS custom property breakpoints.
Opacity
Opacity Tokens
6 tokens — 20% → 80%
--opacity-20
20%
--opacity-25
25%
--opacity-30
30%
--opacity-40
40%
--opacity-60
60%
--opacity-80
80%
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Mid GrayWhite2.62:1Fail
Mid GrayBlack8.01:1AAA
Mid GrayDark Cyan6.83:1AA
Mid GrayBlack 27.65:1AAA
Mid GrayDark Blue7.54:1AAA
Mid Gray 2White2.56:1Fail
Mid Gray 2Black8.19:1AAA
Mid Gray 2Dark Cyan6.99:1AA
Mid Gray 2Black 27.83:1AAA
Mid Gray 2Dark Blue7.71:1AAA
CyanWhite1.44:1Fail
CyanBlack14.63:1AAA
CyanDark Cyan12.48:1AAA
CyanBlack 213.99:1AAA
CyanDark Blue13.78:1AAA
Cyan 2White2.37:1Fail
Cyan 2Black8.86:1AAA
Cyan 2Dark Cyan7.56:1AAA
Light Gray 2White1.32:1Fail
Light Gray 2Black15.91:1AAA
Light Gray 2Dark Cyan13.57:1AAA
Light Gray 2Black 215.21:1AAA
Light Gray 2Dark Blue14.98:1AAA
CSS Variables Reference
Background Colors
Dark Cyan--color-dark-cyan#061A1C
Black--color-black#000000
Black 2--color-black-2#02090A
Dark Blue--color-dark-blue#000A1E
Dark Cyan 3--color-dark-cyan-3#05191E
Dark Cyan 5--color-dark-cyan-5#182E2F
Dark Cyan 7--color-dark-cyan-7#041E18
Dark Cyan 8--color-dark-cyan-8#093329
Dark Cyan 9--color-dark-cyan-9#102620
White--color-white#FFFFFF
White 2--color-white-2#F4F4F5
Blue 5--color-blue-5#5A31F4
Text, Border & Fill Colors
Mid Gray--color-mid-gray#9F9FA9
Mid Gray 2--color-mid-gray-2#A1A1AA
Cyan (Brand)--color-cyan#36F4A4
Cyan 2--color-cyan-2#9DABAD
Cyan 4--color-cyan-4#30DEEE
Light Gray 2--color-light-gray-2#E0E0E0
Light Gray (border)--color-light-gray#E5E7EB
Dark Cyan 2 (border)--color-dark-cyan-2#1E2C31
Dark Cyan 6 (border)--color-dark-cyan-6#1A292C
Dark Cyan 4 (fill)--color-dark-cyan-4#244749
Dark Cyan 15 (fill)--color-dark-cyan-15#157076
Cyan 5 (fill)--color-cyan-5#5FD5B6
Blue 2 (fill)--color-blue-2#865CFF
Typography
Base--font-family-baseInter-Variable
Display--font-family-2NeueHaasGrotesk
Mono--font-family-3ui-monospace
W330--font-weight-w330330
Regular--font-weight-regular400
W420--font-weight-w420420
W450--font-weight-w450450
Medium--font-weight-medium500
W550--font-weight-w550550
Semibold--font-weight-semibold600
2XS--font-size-2xs12px
XS--font-size-xs13px
SM--font-size-sm14px
Base--font-size-base16px
LG--font-size-lg18px
XL--font-size-xl20px
2XL--font-size-2xl24px
3XL--font-size-3xl28px
4XL--font-size-4xl30px
5XL--font-size-5xl48px
6XL--font-size-6xl55px
70px--font-size-70px70px
96px--font-size-96px96px
Tight--letter-spacing-tight−0.13px
Normal--letter-spacing-normal0.28px
Wide--letter-spacing-wide0.3px
Wider--letter-spacing-wider0.36px
Widest--letter-spacing-widest0.42px
LS-6--letter-spacing-ls-60.72px
LS-7--letter-spacing-ls-72.4px
Spacing
Space 1--space-11px
Space 2--space-22px
Space 3--space-33px
Space 4--space-44px
Space 5--space-56px
Space 6--space-68px
Space 8--space-810px
Space 10--space-1012px
Space 16--space-1614px
Space 20--space-2016px
Space 40--space-4024px
Space 64--space-6428px
Space 80--space-8032px
Space 96--space-9640px
Space 192--space-19248px
Space 256--space-25650px
Space 23--space-2356px
Space 26--space-2664px
Space 27--space-2772px
Space 28--space-2880px
Space 29--space-29102.25px
Space 32--space-32128px
Space 35--space-35165px
Borders & Radius
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
SM--radius-sm0 0 12px 12px
MD--radius-md0 0 8px 8px
LG--radius-lg4px
XL--radius-xl8px
2XL--radius-2xl8px 8px 0 0
Full--radius-full12px
R7--radius-r712px 12px 0 0
R9--radius-r916px
R13--radius-r13100%
R16 Pill--radius-r169999px
Motion, Opacity & Layers
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.2s
Slow--duration-slow0.3s
Slower--duration-slower0.33s
D6--duration-duration-60.45s
D7--duration-duration-70.5s
D8--duration-duration-80.6s
D9--duration-duration-90.66s
D10--duration-duration-100.7s
D11--duration-duration-111s
D12 (animation)--duration-duration-123s
D13--duration-duration-133.15s
D16 (hero loop)--duration-duration-163.6s
Ease In Out--easing-ease-in-outease-in-out
20%--opacity-200.2
25%--opacity-250.25
30%--opacity-300.3
40%--opacity-400.4
60%--opacity-600.6
80%--opacity-800.8
Base--z-11
Elevated--z-28
Sticky--z-410
Dropdown--z-612
Drawer--z-820
Modal--z-930
Toast--z-11100
Critical--z-12999
Design System Preview · Shopify (Dark) · Generated 18/04/2026