--- title: "Dropbox brand guidelines: logo, colors and fonts | Rainbrand" description: "Dropbox’s logo, colors (#0061FE, #F7F5F2, #1E1919), fonts (DB Sharp Grotesk, Atlas Grotesk), voice, and dos and don’ts, with a Brand Skill for your agents." url: "https://www.rainbrand.com/brand-guidelines/dropbox/" --- (Brand guidelines) // Productivity software # Dropbox brand guidelines Dropbox’s logo, colors, fonts, voice, and dos and don’ts, from the Brand Skill Rainbrand built from brand.dropbox.com. [Download the Brand Skill](https://www.rainbrand.com/brand-guidelines/dropbox/dropbox-brand-skill.zip) ![Dropbox wordmark in Graphite](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fdropbox%2Fdropbox-wordmark.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) - Dropbox Blue #0061FE - Coconut #F7F5F2 - Graphite #1E1919 - Canopy #0F503C ## About Dropbox Dropbox is a cloud-based platform for storing, sharing, and collaborating on files, with a visual identity designed to bring clarity, humanity, action, and delight to work. Its brand system spans a distinctive logo and Tab, a flexible color palette, expressive typography, approachable language, purposeful imagery, and product experiences that feel useful and satisfying. ## Dropbox logo - ![Dropbox wordmark in Graphite](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fdropbox%2Fdropbox-wordmark.svg&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Wordmark · SVG [Download Dropbox wordmark in Graphite](https://www.rainbrand.com/brand-guidelines/dropbox/dropbox-wordmark.svg) - ![Dropbox glyph in Dropbox Blue](https://www.rainbrand.com/_next/image?url=%2Fbrand-guidelines%2Fdropbox%2Fdropbox-lockup.png&w=3840&q=75&dpl=dpl_8zv7npXJR9sMH7dgRdivLL1jQMCy) Icon · PNG [Download Dropbox glyph in Dropbox Blue](https://www.rainbrand.com/brand-guidelines/dropbox/dropbox-lockup.png) Dropbox has two principal logo expressions: the full logo, made of the glyph and wordmark, and the Tab, which combines the glyph with a plane. Use the full logo for high-level brand applications. The Tab can anchor a composition: when it appears, let the layout originate from its plane. Planes help establish hierarchy and cohesion across content. ## Dropbox colors - Dropbox Blue Core brand color and the glyph HEX #0061FE Copy HEX RGB 0, 97, 254 Copy RGB - Coconut Core warm light background HEX #F7F5F2 Copy HEX RGB 247, 245, 242 Copy RGB - Graphite Core dark color for text, the wordmark and dark backgrounds HEX #1E1919 Copy HEX RGB 30, 25, 25 Copy RGB - Canopy Accent color matched to imagery HEX #0F503C Copy HEX RGB 15, 80, 60 Copy RGB - Zen Accent color matched to imagery HEX #14C8EB Copy HEX RGB 20, 200, 235 Copy RGB - Crimson Accent color matched to imagery HEX #9B0032 Copy HEX RGB 155, 0, 50 Copy RGB ## Dropbox fonts - DB Sharp Grotesk Display headings - Atlas Grotesk Body text Font names only. The Brand Skill download doesn’t include font files. ## Dropbox’s voice Dropbox sounds simple, helpful, human, and magical. Keep writing clear and concise: use strong nouns, trim unnecessary words, and shape a crisp story. Help people act by explaining what is coming and how to get there. Write like a real person; stay relatable and avoid jargon. Let wit and fresh language add a small moment of surprise without obscuring meaning. Dropbox copy pairs practical direction with warmth and a light touch. Examples include “Go from idea to done with Dropbox.”, “These aren’t just your files. They are pieces of your life.”, “Get to work, with a lot less work.”, and “It’s that simple :)”. - “Go from idea to done with Dropbox” - “These aren’t just your files. They are pieces of your life” - “Get to work, with a lot less work” - “It’s that simple :)” ## Dos and don’ts ### Do - Build layouts around the Tab plane when using the Tab; let it organize and motivate the composition. - Pair accent colors with imagery to create harmony and focus. - Make icons simple, intuitive, scalable, and suitable to their role. - Make product interactions clear, functional, warm, and satisfying. - Write clearly, helpfully, and humanly; use wit lightly and keep the story crisp. ### Don’t - Don’t distort, recolor, rotate, stretch, deconstruct, or reconfigure Dropbox logos. - Don’t make Dropbox plural or possessive, or use it as a noun or a verb. - Don’t let motion distract from the primary function or bury useful feedback in spectacle. - Don’t use jargon or clever language that gets in the way of clarity. ## More from the Brand Skill ### Iconography Dropbox icons share a visual language with DB Sharp Grotesk, combining characteristic round and square corners. Circular elements echo rounded forms in the typeface. Keep icons simple, intuitive, and scalable; use size, color contrast, and style to balance personality with information. Use the level of detail that fits the role: UI icons are minimal and express essential characteristics; pictograms provide more contextual detail; spot icons convey a product or feature’s benefit and utility. ### Motion Dropbox motion should feel fresh, inspiring, and flexible while supporting the task. Prioritize simplicity, deepen understanding, and give instant feedback. Use movement to clarify complex actions, reduce cognitive load, and make interactions feel immediate and physically grounded. Keep playfulness subtle: aim for a small, satisfying wink rather than an overwhelming spectacle. Scale the expressiveness to the experience while retaining these principles. ### Imagery Choose imagery for its job. Photography is suited to real-world customer stories and to showing Dropbox’s value in actual situations. Illustration is effective for abstract or complex ideas, product descriptions, onboarding, and softening error messages. Product visuals should demonstrate specific functionality and real consumer interactions. Customer files can enrich a customer story by connecting their experience to Dropbox products. Favor warm, relatable human moments and meaningful work. Match color intentionally to the image to create harmony and focus. For illustration, use simple, charming scenes and metaphors; for product stories, show the interface or the action clearly. ### Design framework Dropbox design aims to simplify the frenzy of modern work. Bring humanity, clarity, action, and delight together: make experiences warm and relatable, surface what matters, make the next step intuitive, and add small moments of pleasure. Keep functionality clear for both beginners and experts, and make work feel pleasant rather than dull. ## Download Dropbox’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 Dropbox’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/dropbox/dropbox-brand-skill.zip) dropbox-brand-skill/ ├ SKILL.md ├ README.md ├ references/ │ ├ dos-and-donts.md │ ├ color.md │ ├ iconography.md │ ├ logo.md │ ├ motion.md │ ├ typography.md │ ├ voice-and-tone.md │ ├ imagery.md │ └ framework.md └ assets/logos/ ├ dropbox-wordmark.svg └ dropbox-lockup.png Rainbrand’s Brand Agent built this Brand Skill from brand.dropbox.com on 30 Oct 2026. It isn’t Dropbox’s official guide. Reviewed by Siddharth Borderwala, Founding Engineer at Rainbrand. Dropbox and its logos are trademarks of Dropbox, Inc. Rainbrand isn’t affiliated with or endorsed by Dropbox, 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/) - [Granola brand guidelines](https://www.rainbrand.com/brand-guidelines/granola/) Productivity software - [Linear brand guidelines](https://www.rainbrand.com/brand-guidelines/linear/) Productivity software - [Notion brand guidelines](https://www.rainbrand.com/brand-guidelines/notion/) Productivity 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/)