E-commerce

Shopify

shopify.com16 colors19 componentsInter-VariableMulti-page · 12 screens

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.

Remix Visit

Remix

Visit

12 screenshots captured· shopify.com

1 / 12 · Shopify: Your Commerce Platform to Sell Online & In Person - Shopify India · Above the fold

Preview

the generated design system

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

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 · 24px

body16px · 420 · 24px

span14px · 420 · 20px

link16px · 550 · 24px

h224px · 400 · 31.2px

h164px · 330 · 69.12px

h256px · 330 · 60.48px

h428px · 360 · 33.6px

label14px · 400 · 20px

button18px · 550 · 28px

small12px · 450 · 16px

h196px · 300 · 103.68px

h116px · 500 · 16px

h320px · 450 · 20px

Typography · NeueHaasGrotesk

h196px · 400 · 96px

h355px · 330 · 64px

h420px · 400 · 28px

Typography · Faktum

h268px · 400 · 76px

h340px · 400 · 48px

body24px · 400 · 32px

link16px · 500 · 24px

button16px · 400 · 24px

Typography · ui-sans-serif

span16px · 700 · 24px

list-item16px · 400 · 24px

Typography · aktiv-grotesk-extended

h440px · 550 · 48px

h524px · 450 · 32px

h624px · 550 · 26px

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

Remixes of Shopify

Latest remixes

No public remixes yet. Be the first to make one.

Remix it