# Shopify

> `shopify@1.0.0`

Shopify Inc. is the Ottawa-headquartered commerce platform that powers millions of merchants worldwide. The corporate brand is light-first, warm, and unapologetically merchant-facing: the Shopify Green shopping-bag mark on white canvas, with the modernized #008060 corporate green carrying primary CTAs. The voice is plain-spoken and operator-oriented ("Start your business today"), built around the merchant rather than around the tech. This brand atom captures the corporate marketing surface; consumers who want the merchant-admin design tokens should reference the separate Polaris design system (palettes/polaris/1.0.0).


**Tags:** `ecommerce`, `commerce`, `shopify`, `merchant`, `light-first`, `brand`

## Atoms

### Palette

**Shopify** · `shopify@1.0.0` · Proprietary — All Rights Reserved

> Shopify's corporate brand palette, distinct from the Polaris product design tokens (which catalog the merchant-admin design system). The corporate identity is anchored on Shopify Green — the heritage #95BF47 leaf-green is preserved in the public Shopify shopping bag mark, while the modernized #008060 ("Tropical Indigo" / current brand green) carries the corporate wordmark and primary actions on shopify.com. The brand canvas is warm-white with deep ink for text; the dark surface set is an authored inversion for product-chrome use. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `shopify-green` | Shopify Green | `#008060` |
| `shopify-green-heritage` | Shopify Green (Heritage) | `#95BF47` |
| `shopify-green-wordmark` | Shopify Green (Wordmark) | `#7AB55C` |
| `shopify-green-deep` | Shopify Green Deep | `#004C3F` |
| `shopify-ink` | Shopify Ink | `#1A1A1A` |
| `shopify-graphite` | Shopify Graphite | `#303030` |
| `shopify-canvas-dark` | Shopify Canvas Dark | `#1A1A1A` |
| `shopify-white` | Shopify White | `#FFFFFF` |
| `shopify-fog` | Shopify Fog | `#F1F1F1` |
| `shopify-gray` | Shopify Gray | `#616161` |
| `shopify-gray-light` | Shopify Gray Light | `#8A8A8A` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `shopify-white` | `#FFFFFF` |
| `surface` | `shopify-fog` | `#F1F1F1` |
| `surface-elevated` | `shopify-white` | `#FFFFFF` |
| `text-primary` | `shopify-ink` | `#1A1A1A` |
| `text-secondary` | `shopify-gray` | `#616161` |
| `text-tertiary` | `shopify-gray-light` | `#8A8A8A` |
| `primary` | `shopify-green` | `#008060` |
| `primary-hover` | `shopify-green-deep` | `#004C3F` |
| `accent` | `shopify-green` | `#008060` |
| `accent-hover` | `shopify-green-deep` | `#004C3F` |
| `warning` | `shopify-green-heritage` | `#95BF47` |
| `warning-hover` | `shopify-green-wordmark` | `#7AB55C` |
| `error` | `shopify-green-deep` | `#004C3F` |
| `success` | `shopify-green` | `#008060` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `shopify-canvas-dark` | `#1A1A1A` |
| `surface` | `shopify-graphite` | `#303030` |
| `surface-elevated` | `shopify-graphite` | `#303030` |
| `text-primary` | `shopify-white` | `#FFFFFF` |
| `text-secondary` | `shopify-gray-light` | `#8A8A8A` |
| `text-tertiary` | `shopify-gray` | `#616161` |
| `primary` | `shopify-green` | `#008060` |
| `primary-hover` | `shopify-green-deep` | `#004C3F` |
| `accent` | `shopify-green-heritage` | `#95BF47` |
| `accent-hover` | `shopify-green-wordmark` | `#7AB55C` |
| `warning` | `shopify-green-heritage` | `#95BF47` |
| `warning-hover` | `shopify-green-wordmark` | `#7AB55C` |
| `error` | `shopify-green-deep` | `#004C3F` |
| `success` | `shopify-green` | `#008060` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `shopify-green` | `#008060` |
| `on-identity` | `shopify-white` | `#FFFFFF` |
| `primary` | `shopify-green` | `#008060` |
| `primary-hover` | `shopify-green-deep` | `#004C3F` |
| `accent` | `shopify-green` | `#008060` |
| `accent-hover` | `shopify-green-deep` | `#004C3F` |
| `mark` | `shopify-green-heritage` | `#95BF47` |
| `text-primary-light` | `shopify-ink` | `#1A1A1A` |
| `text-primary-dark` | `shopify-white` | `#FFFFFF` |
| `text-secondary-light` | `shopify-gray` | `#616161` |
| `background-light` | `shopify-white` | `#FFFFFF` |
| `background-dark` | `shopify-canvas-dark` | `#1A1A1A` |
| `surface-light` | `shopify-fog` | `#F1F1F1` |
| `surface-dark` | `shopify-graphite` | `#303030` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark.fill`

- **allowed:** shopify-green-heritage, shopify-green, shopify-white, shopify-ink
- **forbidden:** shopify-green-deep, shopify-gray, shopify-gray-light

> The Shopify shopping-bag mark renders in the heritage leaf-green (#95BF47) or the modernized corporate green (#008060), or in monochrome white / ink reversal variants. The deep-green and gray tones are interactive-state or text values, not mark fills. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant

> Shopify's brand-assets program forbids modifying the mark or wordmark. Apply only the Shopify-approved variants with respected clearspace; never render the green mark over busy photography where it loses legibility. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Shopify Ink (#1A1A1A) on Shopify White (#FFFFFF) gives ~17:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Shopify Green (#008060) on white reaches ~4.9:1 — clears AA for normal text. Buttons using the green fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas. 

#### `contextRestriction` → `roles.colors.mark`

- **forbiddenContexts:** body-text, secondary-link

> The heritage leaf-green (#95BF47) is reserved for the shopping-bag mark fill. Using it inside body copy or for secondary links dilutes the dual-tone wordmark+mark relationship and degrades brand recognition. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The default verification on any new role pairing on Shopify surfaces. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Shopify Sans headlines on shopify.com sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts read as body and compromise the confident merchant-facing voice; heavier cuts are outside the corporate kit. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** shopify-white, shopify-fog, shopify-ink
- **doesNotPairWith:** shopify-green-heritage

> The corporate green pairs cleanly with neutrals (white, fog, ink). Combining the corporate #008060 and the heritage #95BF47 on the same surface creates a muddy two-green composition that reads as inconsistency between modernized and heritage brand surfaces. 

## Provenance

- **Source:** <https://www.shopify.com/brand-assets>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Shopify Inc. — Shopify, the Shopify wordmark, and the shopping-bag mark are registered trademarks of Shopify Inc. Hex values are documented across the Shopify brand-assets page and the public Polaris design-token source. Shopify Sans is the corporate proprietary typeface; Inter is referenced here as the open-source fallback because Shopify Sans is not publicly distributed. 
- **Imported:** `2026-05-18`
- **Notes:** Shopify Sans (proprietary) is the corporate brand face. It is not publicly distributed, so this atom references Inter for both heading and body roles and notes Shopify Sans as the proprietary primary in provenance. The Polaris-system tokens are intentionally separate (palettes/polaris/1.0.0) — consumers building merchant admin surfaces should switch the palette reference to polaris@1. 

---

*Generated by the brand-atoms converter. Source: `shopify@1.0.0` from the encyclopedia.*