Codecaine Community
Design system · SaaS · Commerce
Shopify
A DESIGN.md reference for Shopify's public marketing surface
Open in Codecaine
No Codecaine yet? Get it free
Nothing opened? Codecaine has to be installed and opened once for this link to work. Install Codecaine.
Shopify
About
A DESIGN.md reference for Shopify's public marketing surface — colour, type, spacing, radius, elevation and component tokens with the rules for using them. Unofficial and unaffiliated.
Designed for
- Commerce products that sell to merchants with confident, high-contrast pages
- Giving an assistant exact colour, type, radius and elevation tokens to build with
- Studying how a mature brand reduces its UI to a handful of rules
Details
- Version
- 1.0.0
- Updated
- Sep 25, 2026
- Fonts
- Inter
- License
- CC-BY-4.0
- Download
- 27 KB · 2 files
Keywords
commerceblack-and-whitegreenpill-buttonsinterlight
Palette
Every colour token in its DESIGN.md.
primary#008060
primary-mint#36F4A4
accent-violet#7126FF
ink#000000
ink-soft#18181B
body#303030
muted#71717A
muted-light#A1A1AA
surface#FFFFFF
surface-subtle#F4F4F5
surface-dark#061A1C
surface-dark-slate#2E3E48
hairline#E5E7EB
hairline-strong#D4D4D8
on-dark#FFFFFF
lilac#CEC9F8
More design systems
© CodecainemacOS · Apple Silicon