Rebranding Frame.io

A filmic redesign for Adobe’s video collaboration platform

Multiple components of the Frame.io rebrand—including the icon, gradient spotlights, color palette, and brand imagery and language "Empowering the world's storytellers"—on a black background.
Photography by Eric Ogden

Frame.io is a cloud-based review and collaboration platform for video. After launching in 2014, our tools had evolved and our customer base continued to grow, but our identity hadn’t kept pace. By the time we joined Adobe in 2021, we’d already put in motion a concept for a rebrand that would align the quality of our brand with the quality of our product.

We arrived at Adobe with product and brand designers, interactive and motion designers, producers, researchers, a user insight team, and a commitment to set a new, higher standard for design. Just over a year later, we launched an updated brand identity and a new website. The foundation of that evolution is a logo, a typeface, and a color story.

Examining our identity and exploring a new relationship

Frame.io brings full-featured collaboration into non-linear editing systems that allows editors to upload videos and discuss exact moments inside them, which means that they never have to leave their editing tool to collaborate with their teams. Of course it's seamless with Adobe Premiere Pro and Adobe After Effects, but it also works with Final Cut Pro and Avid—or any other video tools and camera integrations our customers might be using—so we intentionally kept some independence from the Adobe brand.

An iPhone on a black background. On the screen are the the words "The next generation of video collaboration on top of a purple to blue gradient moving up from the lower left corner. The Frame,io symbol in the upper left corner of the iPhone screen.

Ever-growing brand awareness means that our play button symbol can increasingly stand alone.

The Frame.io wordmark which consist of the Frame .io play arrow symbol (left) and frame.io in lower case to the right of it.

For communications and situations with less instant brand recognition, we use our wordmark.

We updated our play button icon with spatial margins and balanced contours to ensure a strong presence when the symbol stands alone; created a more formal wordmark to be used in conjunction with the symbol in situations where the brand might not be instantly recognizable; and created a version with “An Adobe Company” lock-up to clearly convey Frame.io’s relationship with Creative Cloud and Adobe.

A bespoke typeface that’s uniquely Frame.io

The decision to create a custom typeface provided us with an opportunity to build on an identity that we owned completely. We interviewed 20 different type houses, including the Adobe Fonts team, who guided us, supported us, and introduced us to a foundry with deep expertise: Monotype.

We were fortunate to work with a very talented team through a process that was exciting and exacting. Everything went through a filter of high design and craft: from Bezier curve shifts, and stem length to negative space, taper widths, and ink traps. Frame Gothic is the result. It’s a modernist, variable-weight, sans serif, for which we created four preset weights to use across all forms of communication.

An up-close photograph of the Frame Gothic typeface showing only the me (from Frame) and Gothic.

Frame Gothic, our modern sans serif typeface, is used in all forms of Frame.io communication.

Different weights of the Frame Gothic typeface. From top to bottom: Ultra Bold, Bold, SemiBold, Medium, Regular, Light, Ultra Light, and Thin.

The variable-weight typeface with four preset weights lends confidence and clarity to our voice.

This typeface makes all of us very proud. It's unique and it's confident; the family is quirky without trying too hard, but also sophisticated. And the work continues... italics are coming soon.

A color palette inspired by film

The importance of color and lighting spans every part of this rebrand. Even the mark, which is very obviously a play button, also looks like rays of light emanating from a single source. It captures the ambience of a windowless edit bay or darkened soundstage, where the walls are awash with the hues of the film.

Two horizonal rows of four Frame.io's new gradient spotlight shapes created from the brand color palette—Cobalt, White, Electric (teal blue), Iris (purple), and Coral—on a black background.

Spotlight shapes echo the Frame.io brand mark and can stand on their own in decks, advertising, and social media.

Color chips and gradients from the brand color palette—Cobalt, White, Electric (teal blue), Iris (purple), and Coral—on a black background.

Black is used for contrast and attention in conjunction with a bright and vibrant color palette and gradients.

To ensure consistency across the user experience, the primary palette is derived from Frame.io’s interface. We combined the colors to create gradients that feel cinematic, with an elegant play between warm and cool. They are vibrant, bright, and in contrast to the dark aesthetic of a filmic workspace.

We also created an extended palette for increased accessibility and contrast, and a greyscale palette to enable soft and hard contrasts in dark and light applications.

Two years ago we began conceptualizing our redesign and it was, admittedly, a challenge to maintain a pixel-perfect commitment to design and craft. But by scrutinizing every detail not only did we succeed in elevating our brand, we also cemented our place as part of a new product family, created a modern identity that will take us into the future, and solidified our place as a world-class brand with a world-class product.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link
/jobs