E-commerce

shopify.com

Try Shopify free. Build or grow your business fast with AI. Get more than ecommerce software with tools to manage every part of your business.

16 colors19 componentsInter-VariableMulti-page · 12 screens

shopify.com — Shopify: Your Commerce Platform to Sell Online & In Person - Shopify India

1 / 12 — Shopify: Your Commerce Platform to Sell Online & In Person - Shopify India

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

Extracted from shopify.com

Primary

#18181B

#3F3F46

#36F4A4

#008060

#212326

#02090A

#171E16

#CDF986

Neutral

#E5E7EB

#000000

#FFFFFF

#D4D4D8

#F9F9F9

#71717A

#A1A1AA

#F2F2F0

Typography · Inter-Variable

input16px · 400

body16px · 420

span14px · 420

link16px · 550

h224px · 400

h164px · 330

Spacing

16px

24px

8px

92px

40px

32px

12px

64px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(15, 18, 20) 0px 8px 48px 0px, rgba(66, 71, 76, 0.06) 0px 4px 8px 0px, rgba(0, 0, 0, 0.9) 0px 0px 1px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.1) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.03) 0px 0.929px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.929px, rgba(0, 0, 0, 0.1) 0px 1.858px 1.858px 0px, rgba(0, 0, 0, 0.1) 0px 3.717px 3.717px 0px

Components · 19