The Bitwarden Brand
Welcome to the Bitwarden brand guidelines. This document is intended to share the Bitwarden brand strategy, detail the core elements of our visual identity, and describe how to protect the Bitwarden brand by designing consistent communications across all media.
Bitwarden promises to deliver reliable, user-friendly, and cutting-edge credential management solutions that empower individuals and organizations to protect their online identities with ease. We are committed to prioritizing security, accessibility, and open-source technology while fostering a global community that values transparency, trust, and convenience for a safer and more privacy-conscious digital landscape.
Our logo
The Bitwarden Logo has two approved compositions: horizontal and vertical. When using the Bitwarden logo the primary and preferred composition will be the horizontal lockup. In some cases when the horizontal logo doesn’t work, we have created a vertical lockup for those unique needs.
Logo safe area
For both the horizontal and vertical lockups, it’s important that the proper spacing is given to the Bitwarden logo. For the horizontal logo, use one Bitwarden shield width to measure out the logo’s proper spacing. For the vertical logo, use the “X” height of the “Bitwarden” logotype to measure out the logo’s proper spacing.
Brand typeface
DM Sans is a friendly and characterized typeface that's usage is less saturated on the web. Its circular bowls give the text an approachable nature and tie nicely into the rounded identity system proposed for Bitwarden. DM Sans, an Open Source Google font, is a low-contrast geometric san serif typeface with a large family of weights. It’s intended for use at smaller text sizes, but also looks amazing on larger scales.
Radius
The rounded radius is one of the large frameworks for the brand foundation. It ties communications together in one unified visual identity and is built based on the rounded corners of Bitwarden’s logomark and the shapes from the brand typeface.
Buttons
The only assets that fall outside of this 36px radius system are buttons. To achieve a pill shape, buttons would use a 50% corner radius of the height of the button. The radius is half of the diameter. For example, a 50px high button has a corner radius of 25px.
Highlights
This system allows Bitwarden to create a unique branded visual element while also creating a way to highlight important keywords within a statement or headline. The highlight system should only be used for one or two-word highlights. Highlighting a single word should be used on words that summarize or streamline the reader’s understanding of the communication. Highlighting two words should be used in the same use case, but only when an adjective or adverb is needed to properly communicate the highlight.
Iconography
The Bitwarden web icons differ from the product icons in that they are made for larger uses, have more detail, and can be multi-color. These icons use a 2:1 stroke ratio. The bold stroke is used to define the icon, the thin stroke is used to add detail. These icons can be used in monotone or in full color. Solid color background for circles, squares, and other shapes that require definition or contrast can be used as well.
Social posts
Built to 1200x675px for Twitter, the framing creates a united system for Bitwarden’s social media posts. The framing system works as seen here:
Bitwarden Blue background cards work with Bitwarden Light Grey border
Bitwarden Light Grey background cards work with Bitwarden Blue border
Bitwarden Indigo Blue background cards work best with Bitwarden Blue border
Remember that we’re all individually responsible for protecting our brand.
Every brand touchpoint creates an impression of Bitwarden. Consistently managing that experience is extremely important on our journey as a distinctive brand.