Shopify Color Palette
EcommerceShopify's signature green palette communicates growth, entrepreneurship, and success, creating an aspirational identity for the world's leading e-commerce platform.
shopify.comShopify logo is a trademark of Shopify. Used for informational purposes.
Brand Colors
Shopify Green
primary
Shopify Dark Green
secondary
Shopify Teal
accent
Surfaces & Borders
Shopify White
background
Shopify Surface
surface
Shopify Border
border
Typography
Shopify Text
textPrimary
Shopify Secondary
textSecondary
Shopify Muted
textMuted
Semantic Colors
Shopify Success
success
Shopify Warning
warning
Shopify Error
error
Shopify Blue
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
Shopify's green palette stands out in the e-commerce space, where most platforms default to blue. The green-centric system communicates growth, money, and entrepreneurial success — perfectly aligned with Shopify's merchant-empowerment mission.
- Two greens (#96BF48 logo, #008060 Polaris) work together across marketing and product
- The transition from yellow-green to teal-green adds depth without introducing new hues
- Neutral grays in the Polaris design system keep the admin interface professional
Color Psychology
Green directly evokes growth, wealth, and fresh starts — the emotional core of entrepreneurship. The specific shade balances optimism (yellow-green) with trustworthiness (teal-green), saying 'your business will grow here.'
Evolution
Shopify's green has evolved significantly: from the bright yellow-green bag logo (#96BF48) to the more sophisticated teal (#008060) in the Polaris design system. This reflects Shopify's maturation from startup to enterprise platform.
How Shopify Uses Color
Primary
The original Shopify Green (#96BF48) appears in the logo and brand marketing materials.
Secondary
Dark green (#5E8E3E) provides depth in gradients and secondary brand contexts.
Accent
Shopify Teal (#008060) powers the Polaris admin interface — buttons, links, and active states.
Backgrounds
Clean white and light gray surfaces keep the merchant admin uncluttered and data-focused.
Typography
Near-black text (#202223) with cool gray secondaries maintains the professional, trustworthy tone.
Semantic
The Polaris design system separates semantic colors from brand green, using distinct blue, yellow, and red for info, warning, and error states.
Agent integration
Use Shopify's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/shopify/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Shopify's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Shopify
Generate a unique color palette inspired by Shopify's aesthetic using AI.