--- title: "Shopify brand guidelines: logo, colors and fonts | Rainbrand" description: "Shopify’s logo, colors (#95BF47, #5E8E3E, #36F4A4), fonts (Shopify Inter), voice, and dos and don’ts, with a Brand Skill for your agents." url: "https://www.rainbrand.com/brand-guidelines/shopify/" --- (Brand guidelines) // Business software # Shopify brand guidelines Shopify’s logo, colors, fonts, voice, and dos and don’ts, from the Brand Skill Rainbrand built from shopify.com. [Download the Brand Skill](https://www.rainbrand.com/brand-guidelines/shopify/shopify-brand-skill.zip) ![Shopify logo: the Shopping Bag and the shopify wordmark](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fshopify%2Fshopify-lockup.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) - Shopify green #95BF47 - Dark green #5E8E3E - Vivid green #36F4A4 - Deep teal #061A1C ## About Shopify Shopify is a commerce platform for businesses selling online, in person, and across other channels. Its brand pairs a confident, forward-looking voice with a clean digital experience and a vivid green accent. ## Shopify logo - ![Shopify logo: the Shopping Bag and the shopify wordmark](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fshopify%2Fshopify-lockup.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Shopify logo: the Shopping Bag and the shopify wordmark](https://www.rainbrand.com/brand-guidelines/shopify/shopify-lockup.svg) - ![Shopify logo with a white wordmark, for dark backgrounds](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fshopify%2Fshopify-lockup-white.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Lockup · SVG [Download Shopify logo with a white wordmark, for dark backgrounds](https://www.rainbrand.com/brand-guidelines/shopify/shopify-lockup-white.svg) - ![Shopify Shopping Bag mark](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fshopify%2Fshopify-bag.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Icon · SVG [Download Shopify Shopping Bag mark](https://www.rainbrand.com/brand-guidelines/shopify/shopify-bag.svg) Shopify’s primary logo combines its brandmark, the Shopping Bag, with an italic wordmark. Use it in full color wherever possible, and use the version with a white wordmark on dark or busy backgrounds. The S on the Shopping Bag is always white. Use the Shopping Bag alone only when the wordmark would be illegible, when a full-color logo is nearby, where the brand is already established, or where space is very limited. Keep clear space around the logo equal to the wordmark’s x-height, and around the Shopping Bag equal to half the S. Don’t set the logo below 80 pixels wide on screen. ## Shopify colors - Shopify green The Shopping Bag HEX #95BF47 Copy HEX RGB 149, 191, 71 Copy RGB - Dark green The Shopping Bag’s shaded side HEX #5E8E3E Copy HEX RGB 94, 142, 62 Copy RGB - Vivid green Website accent and highlights HEX #36F4A4 Copy HEX RGB 54, 244, 164 Copy RGB - Deep teal Dark website backgrounds HEX #061A1C Copy HEX RGB 6, 26, 28 Copy RGB - Black The wordmark and dark backgrounds HEX #000000 Copy HEX RGB 0, 0, 0 Copy RGB - White The S on the bag, text on dark backgrounds HEX #FFFFFF Copy HEX RGB 255, 255, 255 Copy RGB ## Shopify fonts - Shopify Inter Heading · 300, Body · 300, Buttons · 550 Font names only. The Brand Skill download doesn’t include font files. ## Shopify’s voice Write with optimism, conviction, and momentum. Speak plainly about what Shopify helps people do, then connect the benefit to a bigger ambition. Prefer short, active sentences, clear verbs, and direct address. A playful turn of phrase can add energy when it stays easy to understand. - “Dream big and build fast on Shopify. The world’s best commerce platform” - “Show up everywhere. Without going anywhere” - “Your brand has entered the chat” - “Rock steady. Blazing fast” ## Dos and don’ts ### Do - Use the full-color primary logo wherever possible, and the white-wordmark version on dark backgrounds. - Use Shopify Inter across headings, body copy, and interface text. - Let vivid green punctuate a high-contrast palette. - Write in an optimistic, active voice that puts the reader’s ambition and next step first. - Use plain language and concrete benefits; add playful phrasing only when it remains clear. ### Don’t - Don’t use the wordmark alone, stack the logo, or create your own version of it. - Don’t stretch, rotate, or add gradients or shadows to the logo, or use the old logo. - Don’t set the logo on busy or low-contrast backgrounds. - Don’t make copy needlessly technical, indirect, or weighed down with long explanations. - Don’t let playful language obscure the point or the action. ## More from the Brand Skill ### Commerce and campaign imagery Shopify’s marketing imagery connects commerce to the people and places behind it: stores, makers, products, and in-person selling. Use natural moments and useful context alongside clear views of Shopify’s commerce experience. Shopify’s own campaign visuals also use bold, playful illustrations and product-led compositions. ### Product interfaces and experience imagery Show Shopify’s own product screens, interface components, and product experience when designing product-led work, across storefront editing, checkout, point of sale, international selling, B2B commerce, marketing tools, finance, workflow automation, and analytics. Treat merchant storefronts and third-party marks shown within product views as part of the depicted interface, not as Shopify identity assets. ## Download Shopify’s Brand Skill A Brand Skill is a folder of brand guidance written for agents. Give it to Claude, ChatGPT, Cursor or another agent and ask it to follow Shopify’s guidelines. It starts at SKILL.md, which points to the right file for each task. This copy includes the guidance and logos. It leaves out the reference images and font files. [Download the Brand Skill](https://www.rainbrand.com/brand-guidelines/shopify/shopify-brand-skill.zip) shopify-brand-skill/ ├ SKILL.md ├ README.md ├ references/ │ ├ dos-and-donts.md │ ├ colors.md │ ├ logo.md │ ├ typography.md │ ├ voice.md │ ├ imagery-commerce-and-campaigns.md │ └ imagery-product-interface.md └ assets/logos/ ├ shopify-lockup.svg ├ shopify-lockup-white.svg └ shopify-bag.svg Rainbrand’s Brand Agent built this Brand Skill from shopify.com on 30 Oct 2026. It isn’t Shopify’s official guide. Reviewed by Siddharth Borderwala, Founding Engineer at Rainbrand. Shopify and its logos are trademarks of Shopify Inc. Rainbrand isn’t affiliated with or endorsed by Shopify Inc. ## Make one for your brand. Add Rainbrand to your agent and give it your website, brand guide or files. Rainbrand builds a Brand Skill like this one and keeps it up to date. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/mcp/getting-started) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). ## More brand guidelines [See all brands](https://www.rainbrand.com/brand-guidelines/) - [Attio brand guidelines](https://www.rainbrand.com/brand-guidelines/attio/) Business software - [Clay brand guidelines](https://www.rainbrand.com/brand-guidelines/clay/) Business software - [Mailchimp brand guidelines](https://www.rainbrand.com/brand-guidelines/mailchimp/) Business software The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/)