Shopify design.md
White pills and thin giant type on a deep green-black night
A cinematic dark storefront: full-bleed video hero, then a near-black canvas with a green tint, huge light-weight white headlines, gray second halves, white pill buttons as the only action, and product shots framed in deep teal cards with almost no shadow.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/shopify/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Shopify, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from shopify.com/?locale=en-US in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
Shopify-Inter
Free substitute: Inter (variable, Google Fonts), weights 300–600
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 96px | 300 | -1.92px |
| heading | 56px | 330 | -1.68px |
| heading-tight | 56px | 330 | -1.12px |
| title | 24px | 400 | -0.48px |
| card-title | 20px | 450 | 0 |
| body-lg | 20px | 400 | 0 |
| body | 18px | 400 | 0 |
| body-sm | 16px | 400 | 0 |
| button | 16px | 550 | 0 |
| caption | 14px | 420 | 0 |
| label | 14px | 500 | 0.28px |
- tags
- 9999px
- cards
- 12px
- inputs
- 8px
- buttons
- 9999px
The files
Loading…
Screenshots and measurements taken by Faundr from shopify.com/?locale=en-US for reference. Inspired by Shopify, not its official design system; Faundr isn’t affiliated with Shopify, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
