W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Shopify
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).
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/shopify/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/shopify/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Shopify
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Shopify
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Shopify
A clear hierarchy in Shopify's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ shopify-green #008060 accent-hover
→ shopify-green-deep #004C3F background-dark
→ shopify-canvas-dark #1A1A1A background-light
→ shopify-white #FFFFFF identity
→ shopify-green #008060 mark
→ shopify-green-heritage #95BF47 on-identity
→ shopify-white #FFFFFF primary
→ shopify-green #008060 primary-hover
→ shopify-green-deep #004C3F surface-dark
→ shopify-graphite #303030 surface-light
→ shopify-fog #F1F1F1 text-primary-dark
→ shopify-white #FFFFFF text-primary-light
→ shopify-ink #1A1A1A text-secondary-light
→ shopify-gray #616161 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from shopify)
Light mode (14 roles)
accent
→ shopify-green accent-hover
→ shopify-green-deep background
→ shopify-white error
→ shopify-green-deep primary
→ shopify-green primary-hover
→ shopify-green-deep success
→ shopify-green surface
→ shopify-fog surface-elevated
→ shopify-white text-primary
→ shopify-ink text-secondary
→ shopify-gray text-tertiary
→ shopify-gray-light warning
→ shopify-green-heritage warning-hover
→ shopify-green-wordmark Dark mode (14 roles)
accent
→ shopify-green-heritage accent-hover
→ shopify-green-wordmark background
→ shopify-canvas-dark error
→ shopify-green-deep primary
→ shopify-green primary-hover
→ shopify-green-deep success
→ shopify-green surface
→ shopify-graphite surface-elevated
→ shopify-graphite text-primary
→ shopify-white text-secondary
→ shopify-gray-light text-tertiary
→ shopify-gray warning
→ shopify-green-heritage warning-hover
→ shopify-green-wordmark Rules (8 typed constraints)
error · 6 rules
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 rule
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 rule
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.