Shopify.com

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/shopify.com -->
<!-- Extracted: 2026-04-26T13:05:08.882Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Shopify.com"
description: "Shopify projects a professional yet approachable vibe, empowering entrepreneurs with accessible tools. It balances a serious commitment to business growth with a clear, direct, and encouraging communication style, making complex commerce solutions feel manageable."
colors:
  neutral: "#a1a1aa"
  surface: "#ffffff"
  on-surface: "#000000"
  surface-dark: "#02090a"
typography:
  display-lg:
    fontFamily: "NeueHaasGrotesk"
    fontSize: "96px"
    fontWeight: "400"
    lineHeight: "96px"
  headline-lg:
    fontFamily: "NeueHaasGrotesk"
    fontSize: "96px"
    fontWeight: "400"
    lineHeight: "96px"
    letterSpacing: "2.4px"
  headline-md:
    fontFamily: "NeueHaasGrotesk"
    fontSize: "55px"
    fontWeight: "330"
    lineHeight: "64px"
  headline-sm:
    fontFamily: "NeueHaasGrotesk"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "28px"
    letterSpacing: "0.3px"
  body-md:
    fontFamily: "NeueHaasGrotesk"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "12px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "9999px"
    padding: "8px 20px"
    fontSize: "16px"
    fontWeight: "550"
    borderWidth: "2px"
  button-outline:
    textColor: "#ffffff"
    rounded: "9999px"
    padding: "12px 26px 12px 16px"
    fontSize: "18px"
    fontWeight: "550"
    borderColor: "#ffffff"
    borderWidth: "2px"
  button-ghost:
    textColor: "#ffffff"
    rounded: "4px"
    padding: "12px 16px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#e5e7eb"
    boxShadow: "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.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset"
---

# Shopify.com — Design System

## Overview

Shopify's design system embodies the archetypes of The Creator and The Sage. It is built to empower entrepreneurs, providing accessible and professional tools for business growth. The aesthetic aligns with comparable brands like Stripe, Square, Mailchimp, and Webflow, prioritizing clarity, functionality, and a modern sensibility. This design language is direct and encouraging, making complex commerce solutions feel manageable and attainable. It fosters a sense of competence and forward momentum.

The design atmosphere is not frivolous or overly decorative. It avoids trends that would detract from its core mission of facilitating business. There is no reliance on whimsical elements, excessive ornamentation, or a playful tone. Instead, the focus is on clean lines, intuitive interfaces, and a robust, trustworthy presentation. Every design decision supports the user's objective: to build and grow their business effectively. The emotional register is one of confident support and pragmatic guidance.

**Key characteristics:**

- Vibe — empowering, accessible, professional, direct, growth-oriented, modern
- Archetypes — The Creator, The Sage
- Comparable to — Stripe, Square, Mailchimp, Webflow
- Design era — contemporary-minimal
- Emotional tone — trustworthy-empowering
- Target audience — Small to medium business owners, aspiring entrepreneurs, and established merchants seeking a comprehensive, user-friendly platform to build and scale their online presence.
- Visual energy — 6/10 (moderate)

## Colors

Shopify's color philosophy prioritizes clarity and focus over a singular brand hue. The absence of a primary color and the explicit declaration of `#ffffff` as the surface color underscore a commitment to clean, uncluttered interfaces. This minimalist approach ensures that content and user actions remain the primary visual focus. The palette signals professionalism and accessibility, allowing users to concentrate on their business tasks without visual distraction. It projects an image of understated competence.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#000000` | Black |
| muted | `#a1a1aa` | Dark Silver |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#02090a` | Black |
| background | `#000000` | Black |

## Typography

The type system utilizes NeueHaasGrotesk and Inter-Variable, establishing a foundation of modern legibility and professional authority. NeueHaasGrotesk provides a timeless, robust character, while Inter-Variable ensures optimal readability across diverse digital environments. Hierarchy is established through precise variations in weight, size, and line height, guiding the user's eye through information with efficiency. This combination communicates clarity, precision, and an unwavering commitment to accessible information delivery, reinforcing Shopify's role as a reliable partner for business growth.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| NeueHaasGrotesk | body | self-hosted | 400 |
| NeueHaasGrotesk | heading | self-hosted | 330, 400 |
| Inter-Variable | body | self-hosted | 400, 550 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | NeueHaasGrotesk | 96px | 400 | 96px | — |
| Heading 2 | NeueHaasGrotesk | 96px | 400 | 96px | 2.4px |
| Heading 3 | NeueHaasGrotesk | 55px | 330 | 64px | — |
| Heading 4 | NeueHaasGrotesk | 20px | 400 | 28px | 0.3px |
| Body | NeueHaasGrotesk | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `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` |
| card | `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` |
| card | `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(5, 24, 19, 0.05) 0px 20px 60px 0px, rgb(19, 59, 50) 0px 1px 0px 0px inset` |
| element | `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` |
| element | `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.25) 0px 25px 50px -12px` |
| element | `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(64, 71, 77, 0.4) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px` |
| element | `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(7, 13, 23) 0px 16px 24px 0px` |
| element | `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.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset` |
| element | `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(7, 13, 23, 0.1) 0px 16px 24px 0px` |
| element | `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 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px` |
| element | `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` |

### Gradients

- `linear-gradient(rgba(2, 8, 8, 0.5), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 90%, rgba(2, 8, 8, 0.5)), radial-gradient(at 87% 84%, rgba(2, 8, 8, 0.9) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 10% 8%, rgba(2, 8, 8, 0.9) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 65% 36%, rgba(63, 63, 75, 0.5) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 38% 61%, rgba(63, 63, 75, 0.5) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 99% 36%, rgba(63, 63, 75, 0.5) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 0px 62%, rgba(63, 63, 75, 0.5) 0px, rgba(0, 0, 0, 0) 50%), linear-gradient(rgb(9, 9, 10), rgb(9, 9, 10))`
- `linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)`
- `linear-gradient(rgb(10, 44, 48), rgb(6, 21, 24) 80%)`
- `radial-gradient(rgb(62, 70, 70), rgb(15, 51, 53) 40%, rgb(6, 26, 28) 70%, rgb(6, 26, 28) 100%)`
- `radial-gradient(rgb(28, 78, 80), rgb(19, 48, 50) 34%, rgb(9, 26, 28) 70%, rgb(6, 26, 28) 100%)`
- `radial-gradient(rgb(42, 67, 68), rgb(6, 26, 28) 70%, rgb(6, 26, 28))`
- `radial-gradient(rgb(31, 76, 79), rgb(14, 41, 41) 44%, rgb(6, 26, 28) 70%, rgb(6, 26, 28) 100%)`
- `radial-gradient(rgb(21, 112, 118), rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0))`

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 12px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#000000`
- Radius — `9999px`
- Padding — `8px 20px`
- Font size — `16px`
- Font weight — `550`
- Sample copy — "Skip to Content"

**Outline**

- Text — `#ffffff`
- Radius — `9999px`
- Padding — `12px 26px 12px 16px`
- Font size — `18px`
- Font weight — `550`
- Border — `2px solid #ffffff`
- Sample copy — "Why we build Shopify"

**Ghost**

- Text — `#ffffff`
- Radius — `4px`
- Padding — `12px 16px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #e5e7eb`
- Shadow — `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.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset`
- Sample copy — "Build custom storefronts"

## Do's and Don'ts

### Do

- Utilize NeueHaasGrotesk for all headings, specifically weights 330 or 400, and ensure they are presented in sentence-case.
- Employ Inter-Variable for all body text, using weight 400 for standard copy and 550 for emphasis, maintaining a line-height of 24px.
- Implement a stark black and white color palette (#ffffff background, #000000 text for light mode; #000000 background, #ffffff text for dark mode) as the primary visual foundation.
- Design secondary buttons with a #ffffff background, #000000 text, a pill-shaped radius (9999px), and padding of 8px 20px.
- Apply subtle, multi-layer shadows on cards (e.g., rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0) 0px 0px 0px 0px) to provide depth without being overly prominent.
- Incorporate linear gradients (e.g., linear-gradient(rgba(2, 8, 8, 0.5), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 90%)) for background overlays or visual accents.
- Use a base spacing unit of 2px for all layout and component spacing to ensure consistent visual rhythm.
- Structure CTAs to be action-oriented, benefit-driven, and direct, frequently employing rhetorical devices like repetition, alliteration, and tricolon (e.g., 'Dream big, build fast, and grow far').

### Don't

- Avoid using title case or all caps for headings; always adhere to sentence-case as per brand guidelines.
- Refrain from using exclamations in copy; the brand maintains a more composed and direct tone.
- Do not use serif fonts; the brand exclusively uses sans-serif typefaces (NeueHaasGrotesk and Inter-Variable).
- Do not apply shadows to ghost buttons; they should remain flat with a border of #e5e7eb and a radius of 4px.
- Avoid overly playful or highly enthusiastic language; maintain a balance between formal and casual (7/10 formal) and matter-of-fact (3/10 enthusiastic).
- Do not use a limited color palette beyond the core black and white for primary UI elements; introduce color sparingly and strategically through gradients or specific interactive states.
- Avoid sharp, angular corners; utilize rounded border radii (4px, 12px, or 9999px) for all UI elements.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 3/10 | enthusiastic |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 7 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented, benefit-driven, and direct
- Rhetorical devices — repetition, alliteration, tricolon

### Sample copy

> Be the nextbig thing

> Dream big, build fast, and grow far on Shopify.

> Sell here, there, and everywhere

> Get more customers. Make more sales.

> World's best checkoutProven to convert better.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/shopify.com) | 100% |
| favicon | — | ico | [link](brands/shopify.com/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/shopify.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/shopify.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/shopify.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/shopify.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/shopify.com/logo-5.png) | 95% |
| primary | — | svg | [link](brands/shopify.com/logo-6.svg) | 85% |
| primary | color | png | [link](brands/shopify.com/logo-7.png) | 85% |
| primary | color | png | [link](brands/shopify.com/logo-8.png) | 85% |
| primary | color | png | [link](brands/shopify.com/logo-9.png) | 85% |
| primary | color | svg | [link](brands/shopify.com/logo-10.svg) | 85% |

## Sources

- Official brand guidelines — https://shopify.com/brand-assets
- Live brand page — https://extractvibe.com/brand/shopify.com
- Raw JSON — https://extractvibe.com/api/brand/shopify.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/shopify.com/design.md
- Extracted — 2026-04-26T13:05:08.882Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md