Take another look at Tumblr.
For the people who have found a home on Tumblr, it isn’t just an app, website or brand — it’s one of the few spaces that helps them to feel comfortable and accepted for being their true selves.
Every day millions of people gather on Tumblr to connect with others who love what they love. Over time, this has made Tumblr something of a cultural institution. Not a museum per se, but a free space where people are introduced to new ideas, cultures, and experiences. But what makes this space special is not its architecture, it’s how our community uses it to explore themselves, find their people, and build communities.
In the context of any cultural space, there are two distinct groups of people: those who use the space, and those who maintain it. This positions Tumblr in a supportive role—we provide a canvas, a stage, a network for expressions to exist — and then we get out of the way.
Over the past year and a half, our internal brand team has been evolving the ways in which we express our values through a centralized design system that explores ways of supporting culture, not creating it; with an emphasis on content, communities and conversations.
Consider this as a checkpoint within that exploration.
Our Approach
1. Develop a system that maintains consistency but allows for flexibility.
2. Design real things for real contexts.
3. Volley design explorations and decisions across product and brand design.
4. Explore prospective opportunities that celebrate diverse communities.
5. Edit and evolve the system with each new project.
Typeface
We partnered with our friends at Dinamo to customize their typeface, Favorit, to our specific needs. We chose the font for its friendly yet commanding personality that successfully balances foundational sans serif attributes with assertive, contemporary geometry.
We cut new characters, interpolated new weights, introduced new punctuation and scaled its overall appearance.
We sought out to develop a typeface that is both functional and expressive, accounting for all of our brand and product needs. We required a typeface that would compliment our logo, while feeling differentiated against competitor products and brands. And finally, we needed a typeface that is neutral enough to represent a diverse mix of communities, individuals, and interests.
The result is Favorit-Tumblr, a screen-optimized, 4 weight, 16 style typeface that feels distinctly Tumblr.
Our brand, product, and iOS teams came together to build a lightweight iOS app to help us test iterations along the way. With SF-UI and Roboto as native standards, we customized UI-specific weights with corresponding italics.
The isolated testing environment allowed us to quickly evolve the app’s function as our needs progressed. This ensured flawless optical performance across all standard screen sizes.
We worked through over 21 iterations of the typeface before locking a version that completely fit both our brand and product design needs.
We liked the weights that we developed for UI so much that we carried them across a majority of our brand work.
Lining Weight
The lining weight interacts with the font’s descenders in a playful but methodical fashion, which has been particularly useful across product explorations; allowing us to differentiate usernames, hashtags, and links from other words.
Here’s an example of how we can leverage the lining weight to draw attention to key product-oriented information.
While the regular styles of the typeface are relatively reserved, there are hundreds of of playful stylistic alternates and glyphs that can be leveraged when appropriate.
Color
Over the course of this exploration, we evolved out of our previously subdued colors, and elected a punchier, more vibrant palette.
When designing for the brand, we opt for a more limited palette, sticking to the brightest values in even stops around the spectrum.
For expression tools within the product, users are given access to a full spectrum of colors built around our core palette.
Our core colors are designed to interact in a way that feels systematic yet unexpected. These combinations provide an expansive foundation that has proven to work across physical and digital executions.
From the serious to the lighthearted, the full spectrum of bright values allows us to celebrate occasions that are valued by our community.
Events
Hosting and participating in events is Tumblr’s opportunity to connect with our community offline.
All of our invitations stem from a centralized system that creates space for each community to be represented authentically, while delivering information clearly and consistently.
Logo
We continued our collaboration with Dinamo to make a few pragmatic and stylistic adjustments to our wordmark. The logo’s “t” and “r” characters were recut to stylistically align with defining attributes of the typeface. Other letters received more subtle updates — cleaning up crowded areas, and bringing a more architectural feel to the mark.
Certain optimizations, such as the elimination of curved intersections, helped us to optimize the logo for small screens without losing its essence.
Most notably, we strategically removed the logo’s period, allowing the logo and typeface to seamlessly integrate across all naming conventions.
We also built in a set of easily accessible glyphs. Employees can access the Tumblr logo and app icons across any word processing program by typing out commands like [tumblr] or [ios icon] to access scaled vector assets.
Here’s a look (below) at how the typeface and logo work together.
The updated logo and typeface share the same proportions and x-height.
Process & Collaboration
Design is a centralized, horizontal practice at Tumblr. Creative leads work closely with vertical leads on a multitude of activations, from strategy through execution.
Establishing a trusting partnership with these teams has been critical to evolving our design system responsibly over time.
Each project and context presents an opportunity to explore the fringes of our existing system. Designers and collaborators are encouraged to prevent stagnation by continually challenging the defining attributes of the system. This relationship has helped us produce a collection of work that feels connected, not repetitive.
Setting Guidelines
To document our ongoing evolution, we established flexible centralized brand guidelines built around the needs of our internal teams and external partners.
Shared toolkit
Our team has also been exploring ways of defining a shared toolkit. With everyone working from the same ingredients and tools, it can be challenging to leave room for each person’s perspective. We aspire to produce materials that are more connected than they are repetitive.
For us, a shared foundational approach to design has been more beneficial (and liberating) than a highly prescriptive set of rules.
Our brand team primarily works across Adobe’s Creative Cloud, where we leverage their Libraries feature. This feature allows for our internal team and external partners to be work from a singular, accessible toolkit.
Motion
Our animation style is divided into two categories.
Style 1: animation within the product or in support of the product
Animations within the app should feel like a natural expansion of the device’s native gestures. Animations produced to market features from our apps are be treated similarly. They are smooth and fluid, with close attention paid to easing and transitions.
Style 2: Animation for the brand or in support of the brand
A simpler, playful typography-centric style that’s built on the same foundational thinking that informs approach typography, color, and use of compositional space.
Content
Content is the lifeblood of our platform. We owe it to our community to showcase their ideas clearly and respectively. When representing content off-network, color fields frame content neatly.
When thinking about how this content scales across variable spaces, our approach is similar to how one might approach a responsive web project.
How do we show up elsewhere?
All of our owned and operated spaces belong to our community.
Off-network properties like Instagram have become fun, reliable spaces for us to test programmatic, curatorial and design-oriented explorations. Our social channels have become a free space for us highlight community member’s ideas, art and experiences.
Our Instagram grid, for instance, has become a stage where we feature writing, photos, videos, animations any other form ideas takes.
When we ask community members to share their work, we prefer for them to share their thoughts and process in their own words.
This extends into our story space, where we leverage the video format to craft thematic groupings of content around everything from Anime to Mental Health. The ephemeral nature of this space allows us to test extensions of our design system with measurable, reliable data.
Whenever possible, we bookend each story with a prompt that takes audiences directly into our app.
Where the system really comes together is when we start thinking about how to display the content and conversations that make up each community.
Video
Over the last year, we’ve expanded our in-house creative team’s capabilities to be inclusive of original, programmatic video. The introduction of this medium helped us to understand the edges of our existing system, creating an opportunity to broaden its vocabulary.
Tumblr isn’t just a place to talk about the things you love, it’s also a place to explore and express your point of view.
Over the course of the year, we’ve been running a program that encourages users to commit to taking action in 2018, using the tag #whatwillyoudo.
We’ve launched several activations in support of this initiative, both on and offline. We kicked off the campaign in January with Art Action Day, in partnership with The Federation. Art Action Day is an opportunity to speak out and make a commitment to action in 2018. We asked the community to post about their vision for 2018, and how they would commit to making that future a reality.
Here’s a small selection of the submissions we received from the community.
Some of these submissions then went on to become billboards spread across Austin during SXSW, in partnership with Save Art Space.
Over the course of the year, we’ve continued to gather commitments from artists, activists, and organizers alike.
So what’s next?
We will continue to expand this work across our product to provide communities with safe, empowering ways to connect, and give individual users simple, intuitive and fun creation tools. We will continue to build an ecosystem that supports our goals of making Tumblr the world’s best place for the open minded, curious, and experimental.
Team!!!
This evolution has been and will continue to be a massive team effort. Thank you to everyone who has come together to bring us to this point.
Art Director: Erik Blad
Designer: Julianne Waber
Senior Designer: Skip Hursh
Freelance Art Directors: Alessandra Bautista, Ana Vasquez
Creative Director: Doug Richard
Head Writer: Tag Savage
Head of Creative: Neil Voss
Internal partners: Cherokee McAnelly, David Hayes, Evan Minskoff, Fabiola Lara, Jessica Angeles, Jess Frank, Kirk Nathanson, Lauren McCullough, Margaux Olverd, Peter Ha, Sarah Won, Tatiana Simonian, Victoria McCullough.
Engineering support lead by: Shah Kashani, Paul Rehkugler III
Copy Editor: Kirk Nathanson
Typography and logo design in partnership with Dinamo.
