shopify.com

Extracted 4 times•Last extracted 13 hours ago•Visit site ↗

Analyse Shopify's design system. a palette of 12 colours including #DCDCD0, #292919, and #5433EB and ui-sans-serif and NeueMontreal typography. Download the ready-made Tailwind config, Figma variables, shadcn/ui theme, React theme, W3C design tokens, and CSS custom properties, and drop them into your own project in minutes. Feed them straight into Claude, Cursor, or any coding agent.

Colour palette

#DCDCD0

#292919

#5433EB

#8051FF

#000000

#2A2A2A

#434343

#5C5C4E

#8C8C8C

#C9C9C9

#F4F4F4

#FFFFFF

This is a short summary of the brand and most-used colours. The full download captures every colour extracted from the live DOM (usually 50–100 unique values), all named and tokenised across Tailwind, Figma, CSS variables and design tokens.

Typography

Font: ui-sans-serif, NeueMontreal, HWCigars

Base size: 176.14

Scale: 176.14, 59.6141, 40.9825, 32, 27.2456, 24

What's included

Tailwind config: drop into tailwind.config.js
Figma variables: import directly into Figma
shadcn theme: paste into globals.css
React theme: Chakra / Stitches compatible
W3C design tokens: any token tooling
Full CSS variables
Visual HTML preview

Downloads

Preview Free

See the extracted design system before exporting the full version.

CSS variables
HTML visual report

Tailwind config
Figma variables
shadcn theme
React theme
W3C design tokens

Download preview Want the full system? Unlock everything for $3 →

Full Export $3

Drop this design straight into your stack.

Tailwind config
Figma variables
shadcn theme
React theme
W3C design tokens
Everything in Preview

Unlock full systemInstant download · No signup required

Recent extractions

13 hours ago, New Delhi

14 hours ago, Lahore

1 days ago, Bengaluru