Responses by Kiran Patel, senior design engineer, Daybreak Studio.

Background: When Dropbox approached our studio, its brand guidelines site was no longer actively used or maintained. The visuals felt confined, and the design lacked flexibility. Seen as outdated and dense, it failed to engage internal stakeholders and external audiences alike. The challenge at hand: sharping a new digital home that would accommodate the dynamic spirit of Dropbox, housing both its evolving guidelines and visual identity system under one roof.

We set out to explore new ways to bring this information to life online—not just for Dropbox, but for the industry as a whole. To achieve this, we would focus on creating a platform that went beyond conventional approaches, serving as both a functional resource and a celebration of their creative vision.

Design core: To develop a more engaging, dynamic website, we shifted away from traditional documentation and embraced a sense of discovery. Instead of presenting guidelines as a rigid, prescriptive reference, we reimagined the site as an interactive visual playground, inviting visitors to revisit the brand in a more meaningful way.

Guided by the core values that define the Dropbox design team—creativity, craftsmanship and a commitment to pushing boundaries—the site brings new life to their design ethos. It evolves as visitors explore, blending guidelines with interactive, real-world examples that feel relevant and compelling. Encouraged to experiment and engage with Dropbox’s brand, visitors can create and follow their own exciting visual journey.

The site overall carries a very structured, scaffolded up feeling that represents the neat and tidy brand system that Dropbox uses. In doing so, it’s able to present core elements of the brand such as typography, color and imagery to name a few in a very organized, user-first experience.

Favorite details: We’re really proud of the interactive moments here and there, such as the color chips browser, the Bezier curve editor, the motion timeline and the typography widgets, to name a few. We enjoyed making these so the user can discover them on their own, since most of them aren’t pivotal in telling the story. These dynamic tools transform the guidelines into playful, hands-on experiences, with each interaction telling its own story.

Interactive elements act as invitations to dance, calling participants to set the pace as they learn on the go. Cursor positions and easing curves are meticulously planned out behind the scenes, bringing interactive features like typography sliders, color palette selectors and paper plane flight editors to life. These dynamic tools transform the guidelines into playful, hands-on experiences, with each interaction telling its own story.

The result is a seamless fusion of discovery and delight—concise content that speaks for itself, where every detail engages without overwhelming. And just when you think you’ve seen it all, the site keeps you on your toes and is ready for another spin. From an unconventional 404 page to other hidden moments of magic, each visit feels fresh and memorable, with the brand’s identity coming to life anew with every interaction.

Challenges: The sheer volume of content. Also, making sure the site was bug free across all elements on each page. When there’s so much, it gets finicky. There was a lot of QA to handle toward the end of the development process.

Alternate paths: If we could start the site over, we’d probably plan to add even more interactive components. A lot of those moments you see in the live build weren’t necessarily planned out during the design process, they were added during the development. It’s feasible we could have looked into starting that vision earlier.

New lessons: We learned about a bunch of different coding processes, CSS properties and even how to implement a user-consent cookies form! We also learned how to go around having to use CSS grid all the time on an element-per-element basis and instead defer to a globalized CSS variable grid system, which has become our standard for every project sine.

Navigation structure: The navigation is supposed to provide an all-inclusive, toy box experience, where each tile is a part of a larger playground while representing each page. Each tile carries a highly repeatable, almost satisfying hover animation that entices the user to click each one and continue their experience throughout the site. We wanted the navigation to be highly accessible, which is why it follows you to each page in the left-hand panel, waiting to be opened back up again.

Special navigational features: There is a keyboard shortcut system for interactivity of some elements, including the navigation—both for accessibility and ease of use. The hotkeys are tab, esc and the arrow keys.

Technology: Building on top of Webflow as our base, we utilized pure CSS and JavaScript to create the bulk of the site. No CMS and no frameworks—just vanilla code. We compare this to cooking your own food: we like to know what goes into each dish and adding our own ingredients and recipes to utilize faster performance where possible.

Special technological features: In addition to Webflow and custom code, we made use of Rive for some components here and there, such as the slot machine and closing elements on several pages.