mdshop
Back to designs
S

Design System inspired by Shopify

E-commerce platform. Green brand, clean white layouts, merchant-focused.

Usage
npx getdesign@latest add shopify

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
7
Bookmarked
0
Not an official Shopify design system. A curated starting point for building Shopify-like UIs with your AI coding agent.

E-commerce platform. Green brand, clean white layouts, merchant-focused.

Preview
shopify.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF SHOPIFY

E-commerce platform. Green brand, clean white layouts, merchant-focused.

Explore the systemView tokens

Color Palette

E-commerce platform. Green brand, clean white layouts, merchant-focused.

Primary
Shopify Green
#96bf48
Brand color
Dark Green
#5e8e3e
Brand color
White
#ffffff
Brand color
Black
#000000
Brand color
Light BG
#f6f6f7
Brand color
Border
#e1e3e5
Brand color
Gray
#6d7175
Brand color
Purple
#7b61ff
Brand color

Typography

A type system inspired by Shopify.

Inter
Inter, Inter
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Shopify.

Not detected on this URL

Components

Other component primitives mapped from the Shopify spec.

Not detected on this URL