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.

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.

Built to 1200x675px for Twitter, the framing creates a united system for the Bitwarden 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

The product is displayed without device wrappers, and instead use a white border to contain the product. Depending on the use case, a high fidelity version of the product may be used, or a more stylized version with unnecessary/filler content reduced down to basic shapes.

For more specific use cases, the product is dimmed in the background and the focus area is enlarged to more clearly show details of a feature or section.

If you would like additional product images, please contact: press@bitwarden.com.

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.

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.

Built to 1200x675px for Twitter, the framing creates a united system for the Bitwarden 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

The product is displayed without device wrappers, and instead use a white border to contain the product. Depending on the use case, a high fidelity version of the product may be used, or a more stylized version with unnecessary/filler content reduced down to basic shapes.

For more specific use cases, the product is dimmed in the background and the focus area is enlarged to more clearly show details of a feature or section.

If you would like additional product images, please contact: press@bitwarden.com.