# Design Style Guide: Shopify: The All-in-One Commerce Platform for Businesses - Shopify



> Source: https://www.shopify.com

> Extracted: 2026-05-15 22:26

> Viewport: 1280x720 | Full page: 11310px



## Design Philosophy



- **Dark theme** — dark backgrounds dominate the palette

- **3 typefaces** — NeueHaasGrotesk, Inter-Variable, ui-monospace

- **Pill-shaped elements** — fully rounded buttons/badges

- **Generous whitespace** — large section gaps for breathing room

- **Accent color** — `#36f4a4` used for interactive elements



---



## Color Palette



### Backgrounds



**Dark / Base**

- `#02090a` (used 10x)

- `#061a1c` (used 10x)

- `#041e18`

- `#102620`

- `#000a1e`

- `#060607`



**Light / Surface**

- `#ffffff` (used 11x)

- `#f4f4f5` (used 6x)



**Semi-transparent**

- `rgba(255, 255, 255, 0.1)` (used 15x)

- `rgba(5, 25, 30, 0.2)` (used 6x)

- `rgba(255, 255, 255, 0.2)`

- `rgba(255, 255, 255, 0.5)`

- `rgba(0, 0, 0, 0.2)`



### Text



**Dark / Base**

- `#000000` (used 72x)



**Light / Surface**

- `#ffffff` (used 749x)

- `#a1a1aa` (used 77x)

- `#9dabad` (used 11x)

- `#9797a2` (used 11x)

- `#99b3ad` (used 10x)

- `#bdbdca`



**Vibrant / Accent**

- `#36f4a4` (used 12x)



### Borders



**Dark / Base**

- `#1e2c31`

- `#11352d`

- `#133b32`

- `#121c1e`



**Light / Surface**

- `#e4e4e7` (used 7x)

- `#e5e7eb`

- `#ffffff`



**Vibrant / Accent**

- `#36f4a4`



**Semi-transparent**

- `rgba(255, 255, 255, 0.1)`

- `rgba(255, 255, 255, 0.3)`



**Primary accent**: `#36f4a4`





## Typography



**Font stack**: NeueHaasGrotesk, Inter-Variable, ui-monospace



| Role | Font | Size | Weight | Line Height | Tracking |

|------|------|------|--------|-------------|----------|

| Display / H1 | NeueHaasGrotesk | 96px | 400 | 96px | normal |

| Display / H1 | NeueHaasGrotesk | 96px | 330 | 92px | normal |

| Display / H1 | NeueHaasGrotesk | 70px | 330 | 70px | normal |

| Display / H1 | NeueHaasGrotesk | 55px | 330 | 64px | normal |

| Display / H1 | NeueHaasGrotesk | 48px | 330 | 54.72px | normal |

| Display / H1 | NeueHaasGrotesk | 32px | 360 | 36.48px | 0.32px |

| H3 | NeueHaasGrotesk | 28px | 500 | 35.84px | 0.42px |

| Body | NeueHaasGrotesk | 24px | 400 | 27.36px | 0.36px |

| H4-H6 | NeueHaasGrotesk | 20px | 400 | 28px | 0.3px |

| H3 | NeueHaasGrotesk | 20px | 500 | 28px | 0.3px |

| H3 | Inter-Variable | 20px | 450 | 20px | normal |

| H3 | Inter-Variable | 18px | 550 | 28px | normal |

| H3 | NeueHaasGrotesk | 18px | 500 | 22.56px | 0.72px |

| H3 | NeueHaasGrotesk | 18px | 600 | 22.56px | 0.72px |

| Body | NeueHaasGrotesk | 18px | 400 | 28px | normal |

| Body | NeueHaasGrotesk | 16px | 400 | 24px | normal |

| Body | Inter-Variable | 16px | 550 | 24px | normal |

| Body | Inter-Variable | 16px | 400 | 24px | normal |

| Body | Inter-Variable | 16px | 420 | 24px | normal |

| Body | ui-monospace | 16px | 400 | 24px | normal |

| Body Small | Inter-Variable | 14px | 400 | 20px | normal |

| Body Small | NeueHaasGrotesk | 14px | 500 | 20.8px | 0.28px |

| Body Small | NeueHaasGrotesk | 14px | 550 | 20.8px | 0.28px |

| Body Small | Inter-Variable | 13px | 500 | 19.5px | -0.13px |

| Caption | Inter-Variable | 12px | 400 | 14.4px | 0.72px |

| Caption | ui-monospace | 12px | 400 | 16px | normal |





## Spacing Scale



`1px` · `2px` · `3px` · `4px` · `6px` · `8px` · `10px` · `12px` · `13px` · `14px` · `16px` · `18px` · `20px` · `24px` · `26px` · `28px` · `32px` · `36px` · `40px` · `48px` · `56px` · `64px` · `68px` · `71px` · `72px`



*Based on a **4px grid** system.*





## Borders, Radii & Effects



**Border radius**: `100%`, `4px`, `5px`, `8px`, `12px`, `16px`, `20px`, `48px`



**Shadows**:

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

- `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 1px 3px 0px, rgba(0, 0, 0, 0.2)...`

- `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 2p...`

- `rgba(255, 255, 255, 0.03) 0px 0.929px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.929px, rgba...`

- `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`

- `rgba(0, 0, 0, 0.3) 0px 1.5px 9px 0px`





## Component Patterns



### Buttons



- **"Skip to Content"** (filled)

  - `background: #ffffff` · `color: #000000`

  - `font: 16px / 550`

  - `padding: 8px 20px` · `radius: 9999px`



- **"Why we build Shopify"** (ghost)

  - `background: transparent` · `color: #ffffff`

  - `font: 18px / 550`

  - `padding: 12px 26px 12px 16px` · `radius: 9999px`



- **"Build custom storefronts"** (filled)

  - `background: rgba(255, 255, 255, 0.2)` · `color: #ffffff`

  - `font: 16px / 400`

  - `padding: 12px 16px` · `radius: 4px`



### Navigation



- **38 links**: Get started fastYou , Switch to ShopifyGet, Trusted by enterpris, World's best checkou, SidekickYour commerc, Website Builder

  - Layout: `flex`, gap: `normal`





## Layout Patterns



### Grid

- `<div>` — 2 columns, gap `32px 40px`

- `<ul>` — 4 columns, gap `32px 40px`

- `<section>` — 1 columns, gap `0px normal`

- `<section>` — 1 columns, gap `64px normal`

- `<div>` — 2 columns, gap `normal`



### Flexbox

- `<div>`, row, align: center, (3 children)

- `<div>`, column, justify: flex-end, gap: 32px normal, (2 children)

- `<span>`, row, justify: flex-start, align: flex-start, (2 children)





## Assets



48 images, 25 SVG icons detected.



- `126px × 36px` Shopify — `https://cdn.shopify.com/b/shopify-brochure2-assets/d9340911ca8c679b...`

- `239px × 228px` Get started fast — `https://cdn.shopify.com/b/shopify-brochure2-assets/35d24a5216034880...`

- `239px × 228px` Switch to Shopify — `https://cdn.shopify.com/b/shopify-brochure2-assets/b4995abc3f73dd84...`

- `239px × 228px` Trusted by enterprise brands — `https://cdn.shopify.com/b/shopify-brochure2-assets/91fd2e27323b7a94...`

- `24px × 23px` (no alt) — `https://cdn.shopify.com/b/shopify-brochure2-assets/3ca176cfc5834b10...`

- `432px × 331px` Image of Steve Madden website selling shoes and accessories — `https://cdn.shopify.com/b/shopify-brochure2-assets/67e4b3ae607f6a12...`

- `188px × 330px` Image of Ornot website selling cycling apparel — `https://cdn.shopify.com/b/shopify-brochure2-assets/a011f79527438e06...`

- `432px × 331px` Image of Glossier website selling beauty products — `https://cdn.shopify.com/b/shopify-brochure2-assets/4f34cdb8ec9c120b...`

- `432px × 331px` Image of Houseplant website selling home goods — `https://cdn.shopify.com/b/shopify-brochure2-assets/bfbeae3284961d8d...`

- `188px × 330px` Image of Kotn website selling ethically made essentials — `https://cdn.shopify.com/b/shopify-brochure2-assets/64afe05abfb257e3...`

- `432px × 331px` Image of East Fork website selling pottery and ceramics — `https://cdn.shopify.com/b/shopify-brochure2-assets/a6899266ed2cbd8b...`

- `188px × 331px` Image of FTC website selling skateboarding apparel — `https://cdn.shopify.com/b/shopify-brochure2-assets/173eefc5283b61aa...`

- ... and 36 more

