Introducing: Our refreshed brand guidelines site
Written byBijan Rafie-Tari,Theresa Ma, andMichael Chiu —Artwork byTheresa Ma
Published:
January 16, 2025
Written by:
Artwork by:
A digital home for all our brand guidelines, that serves as both a super-functional resource and a celebration of our Design team’s creativity, craft, and commitment to pushing boundaries.
Behind every great brand is a set of guidelines meant to help shape its identity. At Dropbox, our Brand Guidelines help us infuse everything we make with a sense of who we are. From icons to illustrations, logos to language, this collection is the foundation for how Dropbox looks, feels, and sounds like Dropbox. As we headed into 2025, our brand team spent some time reimagining how this information could come to life online, exploring ways to elevate the whole experience of our brand guidelines.
With arefreshed site for our existing brand guidelines we now have a new digital home for our visual identity system—from color to illustration to voice and tone—and serves as both a super-functional resource and a celebration of our design team’s creativity, craft, and commitment to pushing boundaries.
We spoke to the working team about some of the inspiration and motivation behind the project, as well as some of their favorite elements of the site itself.
“We wanted to have a single destination that could do two things: Tell a story about our brand and what goes into it, and serve as a resource for actual work that was being made. ”
How did this page come about? What was the motivation behind creating a Brand site?
Otis Rubottom, Writing Director, Brand: From internal teams to agency partners to the broader design community, we really wanted to have a single destination that could do two things: Tell a story about our brand and what goes into it, and serve as a resource for actual work that was being made.
Mike Chiu, Staff Brand Designer: We wanted to keep establishing Dropbox as a leader in the design space, not just for our product but for the brand itself. It felt like the right time to flex our brand and development muscles.
Theresa Ma, Associate Creative Director, Brand: Really, the timing was right. We’ve recently done some work to evolve the brand, and we needed a place to showcase it. So, the Brand Guidelines site was born!
Intro menu byTheresa Ma
What do you hope designers (both at Dropbox and externally) will take away from this site?
Otis: I want people to nod their heads at the core ideas, find the information relevant and applicable to them (when appropriate), and also just smile and enjoy what good design can feel like, no matter what your relationship to the content.
Mike: How simple, discrete elements can add up to be much more than the sum of their parts. That brand and products can be fun!
Theresa: An introduction to the foundational elements of our brand, how it all comes together, and of course, the joy and delight the brand can bring.
Using Webflow and Rive introduced new interactive possibilities—what excites you most about how these tools elevated the experience?
Otis: As someone who’s been working in the design field for most of my career, but who isn’t a designer, the level of craft, innovation, and emotion that the team could produce with these tools just blew me away. I felt like I had a front-row seat to the interactive All-Star Game.
Mike: Rive unlocked a completely new mode of interactivity for us that just wouldn’t have been possible without it. Webflow allows collaboration, quick edits, and deployment that Dropbox hasn’t seen before. The combination was a huge step forward.
Theresa: Both Rive and Webflow expanded the possibilities of what we could previously do. With the two, it really was like if we could dream it, we could build it. I’ve never felt so unrestricted by tech.
“We always prioritized the fun, and making it a joy to use. Clean design and meticulous engineering is the polish that makes it feel so good.”
Can you walk us through some of your favorite interactions or easter eggs?
Otis : As the son of a letterpress artist, I have to go with the font interactions on the Typography page. I can almost feel the type trays in my hands.
Mike: I love the slot machine of how the color chips roll in. There’s just something so satisfying there.
Theresa: It feels like you’re asking me about my favorite child—I love them all! But if I had to choose, it’d have to be thepaper airplane motion curve. I could play with that one forever.
Variable type explorer byTheresa Ma
Icon slot machine byTheresa Ma
What were the core design principles or themes that guided the development of this site?
Otis: Clarity. Cohesion. Connection. My goal was to make the ideas easy to grasp, tightly shaped and delivered, and then inclusive of our audiences. We wanted the site to live by the same concepts as our brand.
Mike: The website as a whole is built on its own design principles. As you explore it, it almost builds itself into the final real-world examples. On top of that, we always prioritized the fun, and making it a joy to use. Clean design and meticulous engineering is the polish that makes it feel so good.
Theresa:
- Show, don’t tell: In the past, we’ve created guidelines that felt rigid, inflexible, and static. For this iteration, we wanted to build something easy to understand and aspirational. Something that shows instead of tells.
- Find the right altitude: Because we recently worked to evolve our VIS (Visual Identity System), we wanted to design an experience that would introduce our elements at a high level. We didn’t want to include every last detail of how to apply the brand.
- Keep it focused: In previous versions, we tried to accommodate too many things for too many people, resulting in a site built for no one. In this version, we wanted to create something more specific.
What role did collaboration play in bringing this site to life? Can you share any stories of how the team worked together or solved challenges?
Otis: Collaboration drives craft. The more connected you are to your team, the higher the bar for the work can be. Daybreak came into this work looking to push us in the best possible way, and in turn, I think we did the same. Every idea was met with, “Yes, and…what about…?”. We tried some experiments that failed, and we had to start over, but we kept learning, and laughing, together. It was a good vibes fest.
Mike: The site wouldn’t have existed without collaboration. We worked across time zones, agencies and companies to make it happen. Working with Daybreak helped us see our own brand in a totally new light, and their creative development unlocked the potential the site now conveys.
Theresa: Collaboration played a huge role in this process. Daybreak has been an incredible partner that’s been instrumental in helping us see the potential of our brand with fresh eyes. That new energy inspired us and vice versa.
“I loved how much opportunity there was for the site to tell a story. Each section felt like a chapter.”
Were there any pivotal moments or turning points in the process that defined the direction of the site?
Otis: This wasn’t a turning point, per se, but when I came into the project, I loved how much opportunity there was for the site to tell a story. Each section felt like a chapter. So I wanted to make sure the copy paid that off. Even when the writing wasn’t the focus, I wanted it to play a strong role.
Mike: Yes! At one point the site was looking like it would be essentially a long, scrolling video. We realized that wasn’t right, brought it back to our core editorial and web principles, and it’s much stronger for it.
Theresa: Like Mike mentioned, we had one big reset in the project. That was the moment everything really clicked into place, and we were on a roll after that. Before that moment, we were deep in the exploration phase and looked at so many different ideas, but nothing really felt right. But the strategic shift really helped us find the execution path we needed.
Framework section header byTheresa Ma
Color section header byTheresa Ma
What are you most proud of in the result?
Otis: I once heard someone describe all projects as a three-legged stool: the legs being process, relationships, and results. You can focus on any of them, but without all of them in balance, you fail. I love that this project is one basdass stool.
Mike: How anyone who works in or with design at Dropbox can share this with someone and they’ll get an understanding of what we do, and make, day-to-day.
Theresa: The site itself, the collaborators, and the process.
Bijan Rafie-Tari, Senior Creative Producer at Dropbox Brand Studio, led the charge on this new site. He's currently missing from the blog due to the LA wildfires.
Theresa Ma is an interactive designer and fellow weirdo currently on Dropbox Brand Studio. Likes to wonder, ponder, meander, and ask "How come?"
Michael Chiu is an interaction designer, working on the Dropbox brand team to maintain design consistency across all properties including all new acquisitions to Dropbox.
Otis Rubottom is a creative and writing director with over 20 years of copywriting experience, a Master of Fine Arts in Poetry, and a deep love of noodles. All. The. Noodles.
