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 the Bitwarden logomark and the shapes from the brand typeface.

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.

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.

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.