All skills
bitwarden avatar

/applying-bitwarden-branding

@44910a0 official
by bitwardenbitwarden/ai-plugins155 stars
20

Apply Bitwarden brand standards — logo usage, color palette, typography, iconography, and capitalization rules — grounded in bitwarden.com/brand and the bitwarden/brand repository.

Use this Skill: https://skilld.dev/gh/bitwarden/ai-plugins/applying-bitwarden-branding

This session only. Nothing lands on disk.

referencesbrand-assets.md

≈952 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Bitwarden Brand Asset Inventory

The canonical source is the bitwarden/brand GitHub repository. Use raw GitHub URLs (https://github.com/bitwarden/brand/raw/main/<path>) or clone the repo when assets are needed locally. Paths below are repo-relative.

Logos

Asset Path Notes
Default horizontal (primary) /logos/logo-horizontal-blue.svg Use on light backgrounds. Preferred lockup.
Inverse horizontal /logos/logo-horizontal-white.svg Use on dark backgrounds.
Vertical lockup /logos/ (see repo) Use when horizontal won't fit.
Product icon (default, SVG) /logos/icon.svg The Bitwarden shield mark.
Product icon (inverse, SVG) /logos/icon-inverse.svg For dark contexts.

Safe area: horizontal lockup needs one Bitwarden-shield width of clear space on every side. Vertical lockup uses the height of the "X" in the logotype.

Don't: recolor, distort, rotate, stretch, recompose, or add effects (shadow, gradient, outline) to the logo. If a unique need arises, escalate to the brand owners.

Product icon (shield) — PNG sizes

Both rounded and square variants. The shield is at /shield/ for the bare-mark version without rounding or square framing.

Variant Sizes available Path prefix
Rounded 16, 32, 64, 128, 256 px /icons/<size>x<size>.png
Square 16, 32, 64, 128, 256 px /icons/square-<size>x<size>.png

For sizes beyond the table, check /icons/ in the repo for additional pre-rendered sizes.

Product logos

Unique lockups exist for individual Bitwarden products (Password Manager, Secrets Manager, etc.) and are described on bitwarden.com/brand as "primarily for use in-product." Source these from the brand site directly rather than reconstructing them.

Screenshots and media

Asset Path
Product app combo /screenshots/apps-combo.png
Full screenshots /screenshots/ (see repo for all platforms)
Media assets /media-assets/ (additional media)

The brand site links to Google Drive-hosted Password Manager and Secrets Manager product images and Vimeo-hosted B-roll footage available for "public use and distribution."

Source files

The /src/ directory holds source files for the brand assets (typically Illustrator or similar). Treat these as designer-only — use the exported SVG/PNG in production work.

When the asset you need isn't here

  • For a missing format: check the brand site first (bitwarden.com/brand); some assets live there but not in the repo.
  • For a missing size: open an issue on the brand repo with the use case and the requested size, rather than scaling up an existing PNG (rounded corners and shield proportions don't scale cleanly).
  • For a missing color variant: don't generate one. The blue and the inverse-white are the sanctioned variants. Surface the gap to the brand owners.

Trademark

"Bitwarden" is a registered trademark of Bitwarden Inc. Apply the ® mark or trademark attribution per the destination surface's standards (typically first reference per page in external-facing content; not required in product UI).

Source: SKILL.md on GitHub

No alerts3mo3 checks · Risk SAFE
  • Gen Agent Trust Hub3mo

    The skill provides comprehensive guidelines and asset references for applying Bitwarden branding standards. It is authored by Bitwarden and references official, trusted resources for logos and color palettes. No security issues or malicious patterns were detected.

  • Socket3mo

    No alerts

  • Snyk3mo

    Risk: LOW · No issues

Signed by skilld at 44910a0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 4 months ago
All 1 allowed tools
Skill
Other metadata
when_to_use
Use when a task touches Bitwarden's visual brand surface in design work or design-adjacent assets. Triggers — "check the brand", "apply Bitwarden branding", "use the brand colors", "is this on-brand", "what color is Bitwarden blue", "what font does Bitwarden use", "logo usage", "brand guidelines", "brand assets", "shield". Not for product content voice or grammar (use `content-style-guide`).
  • bitwarden
  • branding
  • logo
  • color-palette
  • typography
  • design-guidelines
  • brand-assets
  • iconography
  • capitalization

README badge

README badge for bitwarden/ai-plugins/applying-bitwarden-branding

Applies Bitwarden's brand standards—logo usage, color palette, typography, iconography, and capitalization rules—grounded in bitwarden.com/brand and the bitwarden/brand GitHub repository. Use this skill when reviewing or applying brand elements in design work, such as checking logo safe areas, validating color choices against the primary palette, or confirming the correct Inter typeface weight.

Generated from the current SKILL.md.

Where do I find the official Bitwarden logo files and color values?
The bitwarden/brand repository on GitHub is canonical for SVG logos, PNG icons at multiple sizes, and the color palette in HEX, HSL, and SCSS formats. The bitwarden.com/brand site documents usage rules and safe-area requirements.
What are the primary brand colors I should use?
Bitwarden Blue (#175DDC) is the primary brand color for headlines and CTAs. Deep Blue (#0C3276), Off White (#F3F6F9), and True Black (#000000) make up the core palette. Green, Yellow, and Red are tertiary colors reserved for product graphics and state indicators — not for general design surfaces.
Can I modify the Bitwarden logo or apply a different color to it?
No. The logo must not be recolored, distorted, rotated, or recomposed. If the supplied SVG doesn't meet your needs, contact the brand owners rather than creating a variant.
What typeface and weights does Bitwarden use?
Inter from Google Fonts in weights 300 (light), 400 (regular), 500 (medium), 600 (semi-bold), and 700 (bold) across product UI and website copy.
What's the 36px radius system and does it apply to buttons?
Bitwarden brand surfaces use a 36px radius for rounded corners. Buttons are the exception — do not apply the 36px radius to button components.

Generated from the current SKILL.md. These answers refresh after source changes.