From da4deeafa01ddc7779c3120f8c1952399a5d8bd0 Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Fri, 22 May 2026 09:20:00 -0400 Subject: [PATCH 01/22] feat(design-tools): scaffold bitwarden-design-tools plugin v0.1.0 Add plugin manifest, README, and CHANGELOG for a new plugin that applies Bitwarden's canonical brand identity (palette, Inter, official logo lockup, 36px radius foundation) to standalone HTML deliverables. The plugin is explicit about the boundary between canonical brand guidance (from bitwarden.com/brand) and pragmatic deliverable choices the brand site is silent on (surface mode, heading scale, code font, component shapes). --- .../.claude-plugin/plugin.json | 20 ++++++ plugins/bitwarden-design-tools/CHANGELOG.md | 15 ++++ plugins/bitwarden-design-tools/README.md | 72 +++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 plugins/bitwarden-design-tools/.claude-plugin/plugin.json create mode 100644 plugins/bitwarden-design-tools/CHANGELOG.md create mode 100644 plugins/bitwarden-design-tools/README.md diff --git a/plugins/bitwarden-design-tools/.claude-plugin/plugin.json b/plugins/bitwarden-design-tools/.claude-plugin/plugin.json new file mode 100644 index 00000000..e3b12394 --- /dev/null +++ b/plugins/bitwarden-design-tools/.claude-plugin/plugin.json @@ -0,0 +1,20 @@ +{ + "name": "bitwarden-design-tools", + "version": "0.1.0", + "description": "Apply Bitwarden brand identity (palette, typography, logo, radius foundation) to standalone HTML deliverables, dashboards, and mockups.", + "author": { + "name": "Bitwarden", + "url": "https://github.com/bitwarden" + }, + "homepage": "https://github.com/bitwarden/ai-plugins/tree/main/plugins/bitwarden-design-tools", + "repository": "https://github.com/bitwarden/ai-plugins", + "keywords": [ + "design", + "branding", + "bitwarden-brand", + "html", + "dashboard", + "report", + "deliverable" + ] +} diff --git a/plugins/bitwarden-design-tools/CHANGELOG.md b/plugins/bitwarden-design-tools/CHANGELOG.md new file mode 100644 index 00000000..5c4a3372 --- /dev/null +++ b/plugins/bitwarden-design-tools/CHANGELOG.md @@ -0,0 +1,15 @@ +# Changelog + +All notable changes to the Bitwarden Design Tools Plugin will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [0.1.0] - 2026-05-22 + +### Added + +- New `applying-bitwarden-branding` skill that applies Bitwarden's canonical brand identity (palette, Inter, official logo lockup, 36px radius foundation) to standalone HTML deliverables — recaps, dashboards, mockups, one-pagers, slides. The skill is explicit about the boundary between **canonical** brand guidance (lifted from `bitwarden.com/brand`) and **pragmatic** deliverable choices the brand site is silent on (surface mode, heading scale, code font, component shapes, voice/tone, accessibility specifics). +- Reference docs: `color-palette.md`, `typography.md`, `logo-usage.md`. +- Assets: `bitwarden-tokens.css` (palette + radius + Inter only — nothing opinionated) and `bitwarden-shield.svg` (small inline shield for chip-scale use). +- Example: `on-brand-one-pager.html` demonstrating both a **light surface** and a **dark surface** composition. The dark surface is labeled pragmatic and derives the background from `--bw-deep-blue` rather than introducing a new neutral. Explicitly not a prescribed component vocabulary. diff --git a/plugins/bitwarden-design-tools/README.md b/plugins/bitwarden-design-tools/README.md new file mode 100644 index 00000000..a1c8813a --- /dev/null +++ b/plugins/bitwarden-design-tools/README.md @@ -0,0 +1,72 @@ +# Bitwarden Design Tools + +Apply Bitwarden's brand identity to standalone HTML deliverables — dashboards, recaps, reports, mockups, slide decks, one-pagers — without re-deriving the palette ad-hoc. + +## What's in the box + +A single skill, **`applying-bitwarden-branding`**, plus the assets and reference docs it ships with. + +## Installation + +```bash +/plugin install bitwarden-design-tools@bitwarden-marketplace +``` + +``` +skills/applying-bitwarden-branding/ +├── SKILL.md +├── references/ +│ ├── color-palette.md +│ ├── typography.md +│ └── logo-usage.md +└── assets/ + ├── bitwarden-tokens.css + └── bitwarden-shield.svg +examples/ +└── on-brand-one-pager.html +``` + +## When it fires + +Triggers on direct asks — _"make this look like Bitwarden"_, _"Bitwarden-themed dashboard"_, _"apply our branding"_, _"add the Bitwarden logo"_, _"on-brand"_ — and also on any standalone HTML deliverable request inside this marketplace where the user hasn't specified a different brand. Inside Bitwarden, on-brand is the default. + +It does **not** fire on: + +- Product UI in `bitwarden/clients`, the web vault, or mobile apps — those use `@bitwarden/components`, which is a separate design system. +- Third-party brand work or partner co-branding. + +## Canonical vs. pragmatic — the dividing line + +The skill is explicit about this distinction, and you should be too when reading it. + +**Canonical** (lifted directly from [`bitwarden.com/brand`](https://bitwarden.com/brand)): + +- The published color palette (Bitwarden Blue, Deep Blue, Teal, Light Teal, Green, Red, Yellow, and the neutral ramp). +- **Inter** as the primary typeface. +- The official logo lockup (horizontal preferred), clear-space rules, and the canonical SVG URL. +- The **36px rounded-radius foundation** — "buttons are the only exception." + +**Pragmatic** (the brand site is silent — the deliverable still has to choose): + +- Dark vs. light surface mode. +- Specific heading scale, line height, weight choices. +- Code-font choice. +- Component shapes (cards, banners, chips, toolbars, badges). +- Voice/tone. +- Accessibility/contrast specifics (defer to WCAG AA). + +The skill suggests safe defaults for the pragmatic items but never pretends they are brand canon. + +## Source of truth + +[`bitwarden.com/brand`](https://bitwarden.com/brand) is the only canonical source. If you find a conflict between this plugin and the brand site, the brand site wins — file an issue so the plugin can be corrected. + +## See it applied + +Open [`examples/on-brand-one-pager.html`](examples/on-brand-one-pager.html) in a browser. It demonstrates the canonical bits applied correctly — palette, Inter, shield, 36px radius — and is intentionally plain so it doesn't telegraph a component vocabulary. **One valid composition, not the prescribed composition.** + +## Out of scope + +- Product UI styling. Use `@bitwarden/components` in `bitwarden/clients`. +- A Bitwarden component vocabulary. Not part of brand canon. +- Voice/tone guide. Not in the brand site yet. From a274fcd1c7d54c4e4d2cbc3a9e20027c05b629d2 Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Fri, 22 May 2026 09:43:14 -0400 Subject: [PATCH 02/22] feat(design-tools): add brand tokens, canonical lockup assets, skill content, and example MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add the assets, skill content, and example that ship with the plugin. Assets: - bitwarden-tokens.css: full palette as CSS custom properties, the 36px radius foundation, and Inter on :root. Intentionally lean — no component CSS, no dark-surface vars, no gradients. Component shapes are not part of brand canon. - bitwarden-lockup-official.svg: the full official lockup file, verbatim from images.ctfassets.net/.../BitwardenLogo.svg. Serves as the canonical reference and the source for the derived variants below. - bitwarden-lockup-{horizontal,vertical}-{blue,white}.svg: primary horizontal and secondary vertical lockups in both surface-color variants. - bitwarden-{shield,wordmark}-{blue,white}.svg: shield-only and wordmark-only assets for chip-scale and composite use. Every derived asset preserves the path data and coordinate system from the official lockup verbatim; only the wrapper and viewBox crop are local. viewBox crops were computed by walking the path commands programmatically rather than estimated. Skill content: - SKILL.md with strong, pushy triggering on direct asks ("make this look like Bitwarden", "on-brand", "apply our branding") and on any standalone HTML deliverable request inside the marketplace where the user hasn't specified a different brand. Explicit non-triggers cover product UI (bitwarden/clients, web vault, mobile apps), third-party brand work, and partner co-branding. - references/color-palette.md, references/typography.md, and references/logo-usage.md. Each is self-contained and explicit about the boundary between canonical brand guidance (from bitwarden.com/brand) and pragmatic deliverable choices the brand site is silent on (surface mode, heading scale, code font, component shapes). Example: - examples/on-brand-one-pager.html demonstrates the canonical bits applied correctly — palette, Inter, shield, 36px radius — with a light/dark surface toggle. The dark surface derives its background from --bw-deep-blue rather than introducing a new neutral, per references/color-palette.md. The shield's fill uses currentColor so the same path renders in either canonical color variant (blue or white) — both ship in the official lockup, so this is not a recolor. CHANGELOG and plugin README enumerate the asset catalog. --- plugins/bitwarden-design-tools/CHANGELOG.md | 9 +- plugins/bitwarden-design-tools/README.md | 10 +- .../examples/on-brand-one-pager.html | 461 ++++++++++++++++++ .../applying-bitwarden-branding/SKILL.md | 65 +++ .../bitwarden-lockup-horizontal-blue.svg | 29 ++ .../bitwarden-lockup-horizontal-white.svg | 29 ++ .../assets/bitwarden-lockup-official.svg | 34 ++ .../assets/bitwarden-lockup-vertical-blue.svg | 29 ++ .../bitwarden-lockup-vertical-white.svg | 29 ++ .../assets/bitwarden-shield-blue.svg | 24 + .../assets/bitwarden-shield-white.svg | 24 + .../assets/bitwarden-tokens.css | 63 +++ .../assets/bitwarden-wordmark-blue.svg | 24 + .../assets/bitwarden-wordmark-white.svg | 24 + .../references/color-palette.md | 64 +++ .../references/logo-usage.md | 68 +++ .../references/typography.md | 67 +++ 17 files changed, 1051 insertions(+), 2 deletions(-) create mode 100644 plugins/bitwarden-design-tools/examples/on-brand-one-pager.html create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-horizontal-blue.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-horizontal-white.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-official.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-blue.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-white.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-blue.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-white.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-blue.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-white.svg create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/color-palette.md create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/logo-usage.md create mode 100644 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/typography.md diff --git a/plugins/bitwarden-design-tools/CHANGELOG.md b/plugins/bitwarden-design-tools/CHANGELOG.md index 5c4a3372..4daa24ee 100644 --- a/plugins/bitwarden-design-tools/CHANGELOG.md +++ b/plugins/bitwarden-design-tools/CHANGELOG.md @@ -11,5 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - New `applying-bitwarden-branding` skill that applies Bitwarden's canonical brand identity (palette, Inter, official logo lockup, 36px radius foundation) to standalone HTML deliverables — recaps, dashboards, mockups, one-pagers, slides. The skill is explicit about the boundary between **canonical** brand guidance (lifted from `bitwarden.com/brand`) and **pragmatic** deliverable choices the brand site is silent on (surface mode, heading scale, code font, component shapes, voice/tone, accessibility specifics). - Reference docs: `color-palette.md`, `typography.md`, `logo-usage.md`. -- Assets: `bitwarden-tokens.css` (palette + radius + Inter only — nothing opinionated) and `bitwarden-shield.svg` (small inline shield for chip-scale use). +- Assets: + - `bitwarden-tokens.css` — palette + radius + Inter on `:root`. Intentionally lean: no component CSS, no dark-surface vars, no gradients. + - `bitwarden-lockup-official.svg` — the full official lockup file, verbatim from `images.ctfassets.net/.../BitwardenLogo.svg`. Contains every variant and color on one canvas; serves as the canonical reference. + - Derived per-variant assets, each with its path data extracted verbatim from the official lockup (only the `` wrapper and `viewBox` crop are local): + - `bitwarden-lockup-horizontal-blue.svg`, `bitwarden-lockup-horizontal-white.svg` + - `bitwarden-lockup-vertical-blue.svg`, `bitwarden-lockup-vertical-white.svg` + - `bitwarden-shield-blue.svg`, `bitwarden-shield-white.svg` + - `bitwarden-wordmark-blue.svg`, `bitwarden-wordmark-white.svg` - Example: `on-brand-one-pager.html` demonstrating both a **light surface** and a **dark surface** composition. The dark surface is labeled pragmatic and derives the background from `--bw-deep-blue` rather than introducing a new neutral. Explicitly not a prescribed component vocabulary. diff --git a/plugins/bitwarden-design-tools/README.md b/plugins/bitwarden-design-tools/README.md index a1c8813a..a5181307 100644 --- a/plugins/bitwarden-design-tools/README.md +++ b/plugins/bitwarden-design-tools/README.md @@ -21,7 +21,15 @@ skills/applying-bitwarden-branding/ │ └── logo-usage.md └── assets/ ├── bitwarden-tokens.css - └── bitwarden-shield.svg + ├── bitwarden-lockup-official.svg (full reference) + ├── bitwarden-lockup-horizontal-blue.svg (light-surface primary) + ├── bitwarden-lockup-horizontal-white.svg (dark-surface primary) + ├── bitwarden-lockup-vertical-blue.svg (light-surface secondary) + ├── bitwarden-lockup-vertical-white.svg (dark-surface secondary) + ├── bitwarden-shield-blue.svg (chip-scale, light) + ├── bitwarden-shield-white.svg (chip-scale, dark) + ├── bitwarden-wordmark-blue.svg (wordmark only, light) + └── bitwarden-wordmark-white.svg (wordmark only, dark) examples/ └── on-brand-one-pager.html ``` diff --git a/plugins/bitwarden-design-tools/examples/on-brand-one-pager.html b/plugins/bitwarden-design-tools/examples/on-brand-one-pager.html new file mode 100644 index 00000000..1f59f683 --- /dev/null +++ b/plugins/bitwarden-design-tools/examples/on-brand-one-pager.html @@ -0,0 +1,461 @@ + + + + + + + On-brand one-pager — Bitwarden + + + + + + + + + +
+
+ + + Bitwarden + + + Bitwarden + + +
+ +
+ On-brand example +

The brand canon, applied.

+

+ Palette, Inter, the official shield, and the 36px radius foundation — + assembled into one valid composition. Toggle the surface mode in the + header to see the same composition rendered against light and dark + surfaces. Both are pragmatic; the canonical pieces are identical. +

+
+ +
+
+
Canonical pieces applied
+
4
+
+
+
Pragmatic choices made
+
3
+
+
+ +
+

What this page demonstrates

+

+ The hero, stat tiles, and body card all carry the 36px radius + foundation. The eyebrow chip and the theme toggle use the radius-pill + token. Buttons (the toggle is one) are the only canonical exception to + the 36px system — here, the toggle uses the pill radius rather than + the foundation radius. +

+

+ The shield in the header is the bundled inline asset, sized for + chip-scale use. For a larger lockup or anything shareable externally, + fetch the official horizontal lockup from bitwarden.com/brand instead + of scaling the shield up. +

+

+ Surface mode is a pragmatic decision the brand site does not + prescribe. The dark surface here derives its background from + --bw-deep-blue and lifts elevated panels with a 6% + --bw-true-white overlay — no new neutral introduced. +

+
+ + +
+ + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md new file mode 100644 index 00000000..62181c8e --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md @@ -0,0 +1,65 @@ +--- +name: applying-bitwarden-branding +description: Apply Bitwarden's canonical brand identity (palette, Inter, official logo lockup, 36px radius foundation) to a standalone HTML deliverable. Fires on direct asks — "make this look like Bitwarden", "Bitwarden-themed dashboard/report/HTML", "apply Bitwarden styling/branding/palette", "add the Bitwarden logo", "on-brand", "brand this", "throw a Bitwarden coat of paint on this" — and ALSO whenever the user asks to build a standalone HTML deliverable (recap, dashboard, slide deck, internal tool, mockup, one-pager, report) without specifying a different brand. Inside the Bitwarden marketplace, on-brand is the default. Does NOT fire for product UI in bitwarden/clients, the web vault, mobile apps (those use @bitwarden/components — a separate design system), third-party brand work, or partner co-branding. +--- + +# Applying Bitwarden branding + +## What this skill is for + +Standalone HTML deliverables — dashboards, recaps, reports, mockups, slide decks, one-pagers. Things a person opens, screenshots, and shares. + +**Not for product UI.** If the work lives inside `bitwarden/clients`, the web vault, or a mobile app, stop and use `@bitwarden/components`. That's a separate design system with its own tokens, components, and conventions. This skill does not apply. + +**Single source of truth:** [`bitwarden.com/brand`](https://bitwarden.com/brand). Everything canonical in this skill comes from there. If you find a conflict, the brand site wins. + +## The brand-canon checklist + +These four are non-negotiable. They come straight from the brand site. + +1. **Use only the published palette.** Bitwarden Blue (`#175DDC`), Deep Blue (`#0C3276`), Teal (`#2CDDE9`), Light Teal (`#A2F4FD`), the semantic Green/Red/Yellow, and the neutral ramp (True White / Off White / Light Grey / Medium Grey / True Black). Don't invent shades, tints, or alternate steps. See [`references/color-palette.md`](references/color-palette.md) for HEX/RGB/CMYK. +2. **Use Inter for type.** Inter is the brand typeface for all headlines, copy, and text. See [`references/typography.md`](references/typography.md) for loading and fallback. +3. **Use the official logo lockup.** Horizontal lockup is preferred; vertical and product-specific lockups exist for specific cases. Honor clear-space rules. Download from the canonical URL — don't recreate the shield from scratch. See [`references/logo-usage.md`](references/logo-usage.md). +4. **Apply the 36px rounded-radius foundation** to container surfaces — panels, cards, hero sections, pills, badges. The brand site is explicit that **buttons are the only canonical exception** to the 36px system. + +## Quick start + +Three steps to put a deliverable on-brand: + +1. **Link Inter.** Add the Google Fonts preconnect and stylesheet to your `` — see [`references/typography.md`](references/typography.md) for the exact snippet. +2. **Drop in the tokens.** Paste the contents of [`assets/bitwarden-tokens.css`](assets/bitwarden-tokens.css) into a ` + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-blue.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-blue.svg new file mode 100644 index 00000000..356c6500 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-blue.svg @@ -0,0 +1,29 @@ + + + + Bitwarden + + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-white.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-white.svg new file mode 100644 index 00000000..885265bd --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-lockup-vertical-white.svg @@ -0,0 +1,29 @@ + + + + Bitwarden + + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-blue.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-blue.svg new file mode 100644 index 00000000..61011bbf --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-blue.svg @@ -0,0 +1,24 @@ + + + + Bitwarden + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-white.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-white.svg new file mode 100644 index 00000000..d8325026 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-shield-white.svg @@ -0,0 +1,24 @@ + + + + Bitwarden + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css new file mode 100644 index 00000000..cb3b91c1 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css @@ -0,0 +1,63 @@ +/* + * Bitwarden brand tokens — canonical values only. + * + * Source of truth: https://bitwarden.com/brand + * + * What this file is: + * - The full published palette (HEX) as CSS custom properties. + * - The 36px rounded-radius foundation. + * - Inter as the primary font-family on :root. + * + * What this file is NOT: + * - A component vocabulary. There are no card/button/banner/chip styles here + * because they are not part of the Bitwarden brand. Component shape is a + * pragmatic choice the deliverable makes. + * - A theme. There is no dark-surface variant here because the brand site + * is silent on dark surfaces. If you need dark mode, derive surface colors + * from Deep Blue (#0C3276) rather than inventing a new neutral. + * - A type scale. Heading sizes, weights, and line-heights are pragmatic + * choices the deliverable makes. + * + * The 36px radius applies to container surfaces (panels, cards, hero sections, + * pills, badges). Per brand canon, the ONLY exception is buttons. + */ + +:root { + /* Primary */ + --bw-blue: #175ddc; + --bw-deep-blue: #0c3276; + + /* Accents */ + --bw-teal: #2cdde9; + --bw-light-teal: #a2f4fd; + + /* Semantic — use sparingly, primarily for success/error communication */ + --bw-green: #7bf1a8; + --bw-red: #ff6550; + --bw-yellow: #ffd700; + + /* Neutrals */ + --bw-true-white: #ffffff; + --bw-off-white: #f3f6f9; + --bw-light-grey: #d8e2eb; + --bw-medium-grey: #99a7b5; + --bw-true-black: #000000; + + /* Radius foundation — 36px. Buttons are the only canonical exception. */ + --bw-radius: 36px; + --bw-radius-pill: 999px; + + /* Typography — Inter is the primary typeface per brand. */ + font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Helvetica Neue", + Arial, + sans-serif; +} diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-blue.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-blue.svg new file mode 100644 index 00000000..02215ba7 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-blue.svg @@ -0,0 +1,24 @@ + + + + Bitwarden + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-white.svg b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-white.svg new file mode 100644 index 00000000..1707e454 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-wordmark-white.svg @@ -0,0 +1,24 @@ + + + + Bitwarden + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/color-palette.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/color-palette.md new file mode 100644 index 00000000..e7ebd42e --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/color-palette.md @@ -0,0 +1,64 @@ +# Bitwarden color palette + +Source of truth: [`bitwarden.com/brand`](https://bitwarden.com/brand). The HEX/RGB/CMYK values below are lifted from the published palette. Use only these colors. Do not invent shades, tints, or alternate steps. + +## Primary + +| Name | HEX | RGB | CMYK | +| -------------- | --------- | ------------- | ------------------ | +| Bitwarden Blue | `#175DDC` | 23 / 93 / 220 | 84 / 66 / 0 / 0 | +| Deep Blue | `#0C3276` | 12 / 50 / 118 | 100 / 91 / 26 / 12 | + +## Accents + +| Name | HEX | RGB | CMYK | +| ---------- | --------- | --------------- | --------------- | +| Teal | `#2CDDE9` | 44 / 221 / 233 | 58 / 0 / 15 / 0 | +| Light Teal | `#A2F4FD` | 162 / 244 / 253 | 30 / 0 / 5 / 0 | + +## Semantic + +Per the brand site: _"The tertiary Green, Yellow, and Red should be used sparingly, primarily in product graphics and for success/error communications."_ + +| Name | HEX | RGB | CMYK | +| ------ | --------- | --------------- | ---------------- | +| Green | `#7BF1A8` | 123 / 241 / 168 | 49 / 0 / 30 / 5 | +| Red | `#FF6550` | 255 / 101 / 80 | 0 / 60 / 69 / 0 | +| Yellow | `#FFD700` | 255 / 215 / 0 | 0 / 16 / 100 / 0 | + +> Note on Yellow: the brand site's HEX field renders with a malformed value, but the published RGB (255, 215, 0) unambiguously resolves to `#FFD700`, which is also consistent with the published CMYK. If the brand site is later corrected, follow it. + +## Neutrals + +| Name | HEX | RGB | CMYK | +| ----------- | --------- | --------------- | ----------------- | +| True White | `#FFFFFF` | 255 / 255 / 255 | 0 / 0 / 0 / 0 | +| Off White | `#F3F6F9` | 243 / 246 / 249 | 3 / 1 / 1 / 0 | +| Light Grey | `#D8E2EB` | 216 / 226 / 235 | 14 / 6 / 3 / 0 | +| Medium Grey | `#99A7B5` | 153 / 167 / 181 | 42 / 28 / 22 / 0 | +| True Black | `#000000` | 0 / 0 / 0 | 75 / 68 / 67 / 90 | + +## Recommended pairings (WCAG AA, body-text scale) + +Pairings labeled "AA" hit at least 4.5:1 for normal text. Pairings labeled "AA-large" hit at least 3:1 — use only for ≥18pt or ≥14pt bold. + +| Foreground | Background | Status | Notes | +| ----------------- | ----------------- | -------- | ---------------------------------------------------------- | +| `--bw-true-black` | `--bw-true-white` | AA | Default body text on light surfaces. | +| `--bw-deep-blue` | `--bw-true-white` | AA | Body or heading text on light surfaces. | +| `--bw-deep-blue` | `--bw-off-white` | AA | Body text on a slightly softened light surface. | +| `--bw-blue` | `--bw-true-white` | AA-large | Headings or CTAs, not body. Body Blue-on-white is too low. | +| `--bw-true-white` | `--bw-deep-blue` | AA | Default body text on dark surfaces. | +| `--bw-true-white` | `--bw-blue` | AA-large | Headings or CTAs, not body. | +| `--bw-deep-blue` | `--bw-light-teal` | AA | Accent panel with readable body. | + +> The brand site does not publish a contrast matrix. The pairings above are pragmatic — verify against the actual size, weight, and rendering of your deliverable using a contrast checker (e.g. WebAIM). + +## Surface choices (pragmatic — the brand site is silent) + +The brand site does not prescribe a surface mode for deliverables. Two safe defaults: + +- **Light surface** — use `--bw-off-white` or `--bw-true-white` as the page background, `--bw-deep-blue` for text, `--bw-blue` and `--bw-teal` for accents. +- **Dark surface** — derive the page background from `--bw-deep-blue` (use it directly, or compose a slightly lighter shade on top via a 10–20% opacity `--bw-true-white` layer). **Do not invent a new dark neutral.** Use `--bw-true-white` for body text and `--bw-teal` / `--bw-light-teal` for accents. + +Whichever you pick, document the choice in the deliverable's own README — it isn't brand canon and shouldn't be presented as such. diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/logo-usage.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/logo-usage.md new file mode 100644 index 00000000..4c16fa1d --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/logo-usage.md @@ -0,0 +1,68 @@ +# Logo usage + +Source of truth: [`bitwarden.com/brand`](https://bitwarden.com/brand). Lockup choice, clear-space rules, and the official SVG come from there. + +## Lockups + +- **Horizontal lockup — primary.** Per the brand site: _"The primary and preferred composition will be the horizontal lockup."_ Use this unless the available space makes it impossible. +- **Vertical lockup — secondary.** Use only when horizontal won't fit — e.g. narrow sidebars, vertical banners. +- **Product-specific lockups.** Bitwarden products have their own lockups for in-product UI and comparative diagrams. Use these when the artifact is specifically about a single product (e.g. Password Manager, Secrets Manager). These lockups are NOT bundled with this plugin — fetch them from `bitwarden.com/brand`. + +## Color variants + +The brand site ships two color variants of every lockup: + +- **Brand blue (`#175DDC`)** — for use on light surfaces. +- **White (`#FFFFFF`)** — for use on dark surfaces. + +Switching between blue and white on the appropriate surface is **not** a recolor. Both ship in the official lockup file. Using blue on a dark surface, or recoloring to any other shade, is. + +## Clear space + +- **Horizontal logo** — at minimum, leave one shield-width of clear space on every side. Nothing — text, icons, illustration, edge of canvas — encroaches inside that margin. +- **Vertical logo** — at minimum, leave one X-height (the height of the lowercase "x" in the "Bitwarden" wordmark) of clear space on every side. + +## Bundled assets + +This plugin ships the canonical paths extracted verbatim from the official lockup SVG. Use whichever variant fits the deliverable. + +| File | What it is | Use on | +| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| `assets/bitwarden-lockup-official.svg` | The full official lockup file, verbatim from the brand site. Contains every variant at every scale, both colors, on one canvas. | Reference. Use when you need the canonical source file directly. | +| `assets/bitwarden-lockup-horizontal-blue.svg` | Primary horizontal lockup (shield + wordmark) | Light surface | +| `assets/bitwarden-lockup-horizontal-white.svg` | Primary horizontal lockup (shield + wordmark) | Dark surface | +| `assets/bitwarden-lockup-vertical-blue.svg` | Secondary vertical lockup (shield above wordmark) | Light surface | +| `assets/bitwarden-lockup-vertical-white.svg` | Secondary vertical lockup (shield above wordmark) | Dark surface | +| `assets/bitwarden-shield-blue.svg` | Shield only | Light surface | +| `assets/bitwarden-shield-white.svg` | Shield only | Dark surface | +| `assets/bitwarden-wordmark-blue.svg` | Wordmark only | Light surface | +| `assets/bitwarden-wordmark-white.svg` | Wordmark only | Dark surface | + +Every derived asset preserves the original path data and coordinate system from the official lockup; only the surrounding `` wrapper and the `viewBox` crop are local. The shield is the same path at every size — scale it via the consuming page's CSS rather than swapping to a different shield variant. + +### When to use which + +- **Default to a full lockup** (horizontal preferred, vertical only when horizontal doesn't fit). +- **Use the shield alone** for small chip-scale uses where a full lockup would be illegible — e.g. a 32px header chip, a favicon-adjacent context. +- **Use the wordmark alone** only when the shield is already established elsewhere on the same deliverable (e.g. a long-form document where the header carries the shield and a footer carries the wordmark). The brand site does not prescribe a wordmark-only lockup; this is a pragmatic affordance. + +### Tinting from a single asset + +If you want a single shield/wordmark asset to flow with the deliverable's surface (light or dark) via CSS, swap the SVG's `fill="#175DDC"` for `fill="currentColor"` in your local copy and set the surrounding element's `color` property. Switching between blue and white this way is canonical; setting `color` to any other value is a recolor and not permitted. + +## Do-not list + +- **Don't recolor** to anything other than the published blue or white. +- **Don't outline** the logo or wordmark. +- **Don't compress or stretch.** Preserve the aspect ratio. +- **Don't place on busy backgrounds** without a solid panel underneath. The shield must read cleanly. +- **Don't recreate from scratch** when the official SVG is available — your trace will not match the canonical outlines. +- **Don't rotate** or apply effects (drop shadow, glow, gradient overlay). + +## Official source + +If you ever need a variant this plugin doesn't ship (a product-specific lockup, an alternate composition), fetch directly from `bitwarden.com/brand`. The canonical source URL embedded in this plugin's lockup file is: + +``` +https://images.ctfassets.net/7rncvj1f8mw7/6RNJEeiUeUvaJFcUXV5R49/e73a356cad20bce2336afcff8829485b/BitwardenLogo.svg +``` diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/typography.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/typography.md new file mode 100644 index 00000000..b96766da --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/references/typography.md @@ -0,0 +1,67 @@ +# Typography + +Source of truth: [`bitwarden.com/brand`](https://bitwarden.com/brand). The brand site says: _"Inter is an open-source Google font. It is used for all headlines, copy and text."_ + +## Primary typeface — Inter (canonical) + +Use Inter for headlines, body copy, captions — everything except code. + +### Loading Inter from Google Fonts + +For a one-pager or dashboard that can hit Google's CDN, link Inter with a `preconnect` for performance: + +```html + + + +``` + +If the deliverable will be opened offline or in an environment that blocks Google Fonts, ship Inter as a self-hosted woff2 — but verify you're using the file released under the SIL Open Font License so redistribution is legitimate. + +### Fallback stack + +When Inter fails to load, fall back to system sans-serif before the generic. The tokens CSS already sets this on `:root`: + +```css +font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Helvetica Neue", + Arial, + sans-serif; +``` + +## Type scale (pragmatic — the brand site is silent) + +The brand site doesn't prescribe heading sizes, weights, or line-heights. Anything you choose is a deliverable-level decision, not brand canon. + +Reasonable defaults for an HTML one-pager or dashboard: + +| Role | Size | Weight | Line-height | +| --------------- | ---------------- | ------ | ----------- | +| Display heading | 2.5rem (40px) | 700 | 1.15 | +| Section heading | 1.5rem (24px) | 600 | 1.25 | +| Body | 1rem (16px) | 400 | 1.55 | +| Caption / label | 0.8125rem (13px) | 500 | 1.4 | + +If your deliverable has a stronger existing scale (e.g. a slide template), keep that — it's the right level for that artifact to decide. + +## Code typography (pragmatic — the brand site is silent) + +The brand site does not address code typography. A reasonable default monospace stack: + +```css +font-family: + "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; +``` + +Avoid pairing code in a heavy slab — code should sit visually quieter than body text, not louder. From 8a98768384e0c5043e7025acf780ea64d0165718 Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Fri, 22 May 2026 09:43:21 -0400 Subject: [PATCH 03/22] feat(design-tools): register bitwarden-design-tools v0.1.0 in marketplace Add the new plugin to .claude-plugin/marketplace.json and to the root README.md plugin catalog table so it's discoverable. Also add to .cspell.json the domain terms surfaced by the plugin's content: lockup, lockups, CMYK, wordmark, Segoe, Cantarell, Neue, Menlo, Consolas, ctfassets, evenodd. --- .claude-plugin/marketplace.json | 6 ++++++ .cspell.json | 11 +++++++++++ README.md | 1 + 3 files changed, 18 insertions(+) diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 12cd5b9c..d84aa870 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -80,6 +80,12 @@ "source": "./plugins/bitwarden-delivery-tools", "version": "1.2.0", "description": "Delivery lifecycle skills for Bitwarden initiatives — initiative funnel navigation, work transitions, tech breakdowns and cross-team signoffs, commits, pull requests, preflight checks, and change labeling." + }, + { + "name": "bitwarden-design-tools", + "source": "./plugins/bitwarden-design-tools", + "version": "0.1.0", + "description": "Apply Bitwarden brand identity (palette, typography, logo, radius foundation) to standalone HTML deliverables, dashboards, and mockups." } ] } diff --git a/.cspell.json b/.cspell.json index bc701bc1..341872df 100644 --- a/.cspell.json +++ b/.cspell.json @@ -15,12 +15,16 @@ "blogposts", "boardId", "bwwl", + "Cantarell", "catchable", "checkmarx", + "CMYK", "codeBlock", "CODEOWNERS", "Confluence", + "Consolas", "CQL", + "ctfassets", "customfield", "cvss", "Dashlane", @@ -30,6 +34,7 @@ "ECDH", "ECIES", "editui", + "evenodd", "excalidraw", "executesql", "exfiltrated", @@ -54,8 +59,11 @@ "JQL", "keyserver", "lockfiles", + "lockup", + "lockups", "maxResults", "mcp", + "Menlo", "metacharacters", "modelcontextprotocol", "msword", @@ -63,6 +71,7 @@ "myapp", "mypassword", "myproject", + "Neue", "Newtonsoft", "nextPageToken", "numstat", @@ -85,6 +94,7 @@ "sast", "sbom", "semver", + "Segoe", "shellcheck", "shortlog", "shortstat", @@ -115,6 +125,7 @@ "vulns", "WCAG", "webui", + "wordmark", "wordprocessingml", "xoxb", "Zeroize", diff --git a/README.md b/README.md index 9cd8647a..86079e4c 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ A curated collection of plugins for AI-assisted development at Bitwarden. Enable | [bitwarden-atlassian-tools](plugins/bitwarden-atlassian-tools/) | 2.2.3 | Read-only Atlassian access via MCP server with deep Jira issue research skill | | [bitwarden-code-review](plugins/bitwarden-code-review/) | 1.11.0 | Autonomous code review agent following Bitwarden engineering standards with GitHub integration | | [bitwarden-delivery-tools](plugins/bitwarden-delivery-tools/) | 1.2.0 | Delivery lifecycle skills: initiative funnel navigation, work transitions, tech breakdowns and cross-team signoffs, commits, PRs, preflight, labeling | +| [bitwarden-design-tools](plugins/bitwarden-design-tools/) | 0.1.0 | Apply Bitwarden brand identity (palette, typography, logo, 36px radius foundation) to standalone HTML deliverables, dashboards, and mockups | | [bitwarden-devops-engineer](plugins/bitwarden-devops-engineer/) | 0.1.3 | DevOps engineering assistant: workflow compliance linting, action security auditing, and org-wide CI/CD remediation | | [bitwarden-init](plugins/bitwarden-init/) | 1.1.0 | Initialize and enhance CLAUDE.md files with Bitwarden's standardized template format | | [bitwarden-product-analyst](plugins/bitwarden-product-analyst/) | 0.1.5 | Product analyst agent for creating comprehensive Bitwarden requirements documents from multiple sources | From 32e45f77e3590473545be8b54803d988f583f07d Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Wed, 17 Jun 2026 11:47:29 -0400 Subject: [PATCH 04/22] feat(design-tools): expand applying-bitwarden-branding to build + review - Merge review/audit guidance and design-lifecycle composition into the skill - Add review calibration: canon violations vs brand-silent judgment calls - Fix --bw-yellow to #FDC700 to match brand repo palette.scss (was #FFD700) - Add scripts/refresh-brand-canon.sh to verify/refresh bundled palette vs source - Tighten the trigger description per skill-authoring guidance --- .../applying-bitwarden-branding/SKILL.md | 94 +++++++++++++------ .../assets/bitwarden-tokens.css | 2 +- .../references/color-palette.md | 4 +- .../scripts/refresh-brand-canon.sh | 88 +++++++++++++++++ 4 files changed, 156 insertions(+), 32 deletions(-) create mode 100755 plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/scripts/refresh-brand-canon.sh diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md index 62181c8e..7dd8f1b3 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md @@ -1,35 +1,50 @@ --- name: applying-bitwarden-branding -description: Apply Bitwarden's canonical brand identity (palette, Inter, official logo lockup, 36px radius foundation) to a standalone HTML deliverable. Fires on direct asks — "make this look like Bitwarden", "Bitwarden-themed dashboard/report/HTML", "apply Bitwarden styling/branding/palette", "add the Bitwarden logo", "on-brand", "brand this", "throw a Bitwarden coat of paint on this" — and ALSO whenever the user asks to build a standalone HTML deliverable (recap, dashboard, slide deck, internal tool, mockup, one-pager, report) without specifying a different brand. Inside the Bitwarden marketplace, on-brand is the default. Does NOT fire for product UI in bitwarden/clients, the web vault, mobile apps (those use @bitwarden/components — a separate design system), third-party brand work, or partner co-branding. +description: Apply or review Bitwarden branding on standalone shareable deliverables (dashboards, recaps, reports, slide decks, one-pagers, mockups) and design-adjacent assets. Use when building or auditing a Bitwarden-audience deliverable, on explicit asks like "make this look like Bitwarden", "Bitwarden-themed deck", "is this on-brand?", or "brand-check this", and proactively when producing a shareable deliverable with no other brand specified. Not for product UI in bitwarden/clients, the web vault, or mobile apps (use @bitwarden/components), third-party work, or partner co-branding. --- # Applying Bitwarden branding ## What this skill is for -Standalone HTML deliverables — dashboards, recaps, reports, mockups, slide decks, one-pagers. Things a person opens, screenshots, and shares. +Two jobs, one brand canon: -**Not for product UI.** If the work lives inside `bitwarden/clients`, the web vault, or a mobile app, stop and use `@bitwarden/components`. That's a separate design system with its own tokens, components, and conventions. This skill does not apply. +- **Build** an on-brand standalone deliverable: dashboards, recaps, reports, slide decks, one-pagers, mockups. Things a person opens, screenshots, and shares. +- **Review** whether an existing deliverable — or a design-adjacent asset — is on-brand, and say precisely what to fix. -**Single source of truth:** [`bitwarden.com/brand`](https://bitwarden.com/brand). Everything canonical in this skill comes from there. If you find a conflict, the brand site wins. +Not for product UI. Work inside `bitwarden/clients`, the web vault, or a mobile app uses `@bitwarden/components` — a separate design system with its own tokens and conventions. This skill does not apply there. + +## Single source of truth + +[`bitwarden.com/brand`](https://bitwarden.com/brand) and its backing repository [`github.com/bitwarden/brand`](https://github.com/bitwarden/brand). Everything canonical here mirrors those; on any conflict, the brand repository's published values win. + +The canon is bundled in this skill (`assets/`, `references/`) so it is available offline and the logo can be embedded verbatim with no network round-trip. The bundle is the reliable default. + +Staying current is optional. Bundled values can fall behind the source over time. When network access is available, run the drift guard first: + +``` +${CLAUDE_PLUGIN_ROOT}/skills/applying-bitwarden-branding/scripts/refresh-brand-canon.sh --verify +``` + +It fetches the authoritative palette from the brand repository and reports any drift against the bundle. On a reported mismatch, prefer the live value it prints. On error or no network, fall back to the bundled canon. The same script runs in CI to keep the bundle fresh. ## The brand-canon checklist -These four are non-negotiable. They come straight from the brand site. +These four are non-negotiable. They come straight from the brand repository. -1. **Use only the published palette.** Bitwarden Blue (`#175DDC`), Deep Blue (`#0C3276`), Teal (`#2CDDE9`), Light Teal (`#A2F4FD`), the semantic Green/Red/Yellow, and the neutral ramp (True White / Off White / Light Grey / Medium Grey / True Black). Don't invent shades, tints, or alternate steps. See [`references/color-palette.md`](references/color-palette.md) for HEX/RGB/CMYK. -2. **Use Inter for type.** Inter is the brand typeface for all headlines, copy, and text. See [`references/typography.md`](references/typography.md) for loading and fallback. -3. **Use the official logo lockup.** Horizontal lockup is preferred; vertical and product-specific lockups exist for specific cases. Honor clear-space rules. Download from the canonical URL — don't recreate the shield from scratch. See [`references/logo-usage.md`](references/logo-usage.md). -4. **Apply the 36px rounded-radius foundation** to container surfaces — panels, cards, hero sections, pills, badges. The brand site is explicit that **buttons are the only canonical exception** to the 36px system. +1. Use only the published palette: Bitwarden Blue (`#175DDC`), Deep Blue (`#0C3276`), Teal (`#2CDDE9`), Light Teal (`#A2F4FD`), the tertiary Green/Red/Yellow, and the neutral ramp (True White, Off White, Light Grey, Medium Grey, True Black). Invent no shades, tints, or alternate steps. See [`references/color-palette.md`](references/color-palette.md) for HEX/RGB/CMYK. +2. Use Inter for type, across headlines, copy, and text. See [`references/typography.md`](references/typography.md) for loading and fallback. +3. Use the official logo lockup. Horizontal is preferred; vertical and product-specific lockups exist for specific cases. Honor clear-space rules. Embed the bundled SVG verbatim; do not recreate the shield from scratch. See [`references/logo-usage.md`](references/logo-usage.md). +4. Apply the 36px rounded-radius foundation to container surfaces (panels, cards, hero sections, pills, badges). Buttons are the only canonical exception. -## Quick start +## Quick start (build) Three steps to put a deliverable on-brand: -1. **Link Inter.** Add the Google Fonts preconnect and stylesheet to your `` — see [`references/typography.md`](references/typography.md) for the exact snippet. -2. **Drop in the tokens.** Paste the contents of [`assets/bitwarden-tokens.css`](assets/bitwarden-tokens.css) into a ` + + +
+ +

Internal Decision Deck · Q3

+

Project Atlas: Service Reliability Review

+

+ A fictional internal deck used as an off-brand fixture. None of these + numbers are real. +

+
+ +
+

Where we are

+

Reliability at a glance

+
+
+
99.2%
+

Availability (30d)

+

▼ 0.4 pts vs target

+
+
+
412ms
+

p95 latency

+

▲ improved 8%

+
+
+
7
+

Sev-2 incidents

+ needs attention +
+
+
+ +
+

What broke

+

Top incident themes

+
+
+

Connection pool exhaustion

+

Recurred across three services this quarter.

+ pool.max = 20 // too low +
+
+

Cache stampede

+

Thundering herd after a deploy-time flush.

+
+
+

Retry storms

+

Unbounded client retries amplified a brownout.

+
+
+
+ +
+

The ask

+

Proposed investments

+
    +
  • Adopt adaptive connection pooling across the platform.
    • +
  • Standardize a retry budget with jittered backoff.
    • +
  • Fund an on-call ergonomics pass for the reliability rotation.
    • +
+

Decision requested by end of quarter.

+
+ + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html new file mode 100644 index 00000000..bff98d0d --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html @@ -0,0 +1,193 @@ + + + + + + + Engineering Weekly Recap — Sample + + + + + +
+ + Bitwarden + + + Bitwarden +
+
+

Engineering Weekly Recap

+

+ A fictional sample page. None of these numbers are real. +

+
+
+

Merged PRs

+
128
+
+
+

Median review time

+
6.4h
+
+
+

Deploys

+
42
+
+
+

+ Backend + Clients + Platform +

+ View the brand guide +
+ + + diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/rubric.json b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/rubric.json new file mode 100644 index 00000000..3c866ad6 --- /dev/null +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/rubric.json @@ -0,0 +1,112 @@ +{ + "note": "Pre-registered BEFORE any blinded run exists. Assertions are objective and scriptable so grading is deterministic and bias-free. Provenance/drift is measured by OUTPUT INSPECTION, never by agent self-report (self-report changes behavior).", + "canonical_palette_lowercase": { + "blue": "#175ddc", + "deep_blue": "#0c3276", + "teal": "#2cdde9", + "light_teal": "#a2f4fd", + "green": "#7bf1a8", + "yellow": "#fdc700", + "red": "#ff6550", + "off_white": "#f3f6f9", + "true_white": "#ffffff", + "true_black": "#000000" + }, + "drift_watch": [ + "Yellow value disputed across sources (#fdc700 vs #ffd700). Resolve ground truth from bitwarden.com/brand at analysis time — this is a Phase-2 drift signal, not a gradable assertion yet." + ], + "official_lockup_signature": "Path-data substrings are extracted at grade time from the skill's live bundled assets (../assets/*.svg) by grade.py:load_lockup_sigs. Presence of any in an output distinguishes verbatim use of an OFFICIAL asset from a redrawn/improvised shield.", + "apply_assertions": [ + { + "id": "loads_inter", + "desc": "Output loads/uses Inter as the primary typeface", + "type": "scriptable" + }, + { + "id": "no_offbrand_fonts", + "desc": "No off-brand display/mono fonts (Big Shoulders, IBM Plex) remain as primary type", + "type": "scriptable", + "applies_to": ["eval1_deck"] + }, + { + "id": "uses_blue_primary", + "desc": "Bitwarden Blue #175ddc present and used as a primary accent", + "type": "scriptable" + }, + { + "id": "uses_deep_blue", + "desc": "Deep Blue #0c3276 present", + "type": "scriptable" + }, + { + "id": "palette_purity", + "desc": "Count of distinct hex colors OUTSIDE the canonical palette (lower is better); report count, not just pass/fail", + "type": "scriptable_metric" + }, + { + "id": "official_lockup_not_redrawn", + "desc": "Output embeds the official lockup path signature rather than a hand-drawn shield", + "type": "scriptable" + }, + { + "id": "radius_36", + "desc": "border-radius:36px applied to at least one container surface", + "type": "scriptable" + }, + { + "id": "valid_self_contained_html", + "desc": "Parses as a complete standalone HTML document", + "type": "scriptable" + } + ], + "review_tp_assertions": { + "ground_truth_faults_in_deck": [ + "non-Inter fonts (Big Shoulders Display, IBM Plex Sans/Mono)", + "off-brand palette (slate/green/amber; none of the canonical hexes present)", + "missing official Bitwarden lockup", + "container radii far below 36px" + ], + "assertions": [ + { + "id": "detect_fonts", + "desc": "Flags the non-Inter typography", + "type": "scriptable_keyword" + }, + { + "id": "detect_palette", + "desc": "Flags the off-brand palette / absence of canonical hexes", + "type": "scriptable_keyword" + }, + { + "id": "detect_missing_logo", + "desc": "Flags the missing official lockup", + "type": "scriptable_keyword" + }, + { + "id": "detect_radius", + "desc": "Flags the non-36px radii", + "type": "scriptable_keyword" + }, + { + "id": "cites_specific_values", + "desc": "Cites actual values/line refs from the file (not generic advice)", + "type": "blind_llm" + } + ] + }, + "review_fp_assertions": { + "note": "The mock control (inputs/onbrand-control.html) is substantially on-brand. Its only genuine fault is the off-palette orange CTA hover (#ff7a18). The Deep-Blue-derived dark surface and the third data-viz series are brand-silent judgment calls, NOT faults — flagging them as violations is a false positive. 'False positive' is measured against this ground truth, not against raw off-palette-ness.", + "assertions": [ + { + "id": "affirms_correct_core", + "desc": "Confirms Inter + core palette are correct rather than flagging them", + "type": "blind_llm" + }, + { + "id": "false_positive_count", + "desc": "Count of findings that are NOT genuine faults (lower is better)", + "type": "blind_llm_metric" + } + ] + } +} From aa4994ae10ebcce9378eed96d17e87084bceaa28 Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Wed, 17 Jun 2026 16:02:20 -0400 Subject: [PATCH 19/22] fix(design-tools): correct radius-on-full-bleed and default to dark mode Two guidance corrections to applying-bitwarden-branding from review feedback: 1. Radius on full-bleed surfaces. The 36px foundation was being applied to edge-to-edge headers, rounding only the bottom corners against straight page edges (looks broken). Clarify that the radius is for surfaces that float with space around them; an element that bleeds flush to the page/viewport edge should be inset (so all corners float) or left square on the flush edges. 2. Dark mode by default. The skill now ships BOTH light and dark surfaces: deliverables follow the device 'prefers-color-scheme' for the initial surface and expose a light/dark toggle that overrides it, with the dark surface derived from Deep Blue. Surface mode is no longer a per-deliverable question. Updated the bundled example to demonstrate the pattern (CSS @media default + data-theme override, JS-synced icon/label), and the token-file comment. Folds into the unreleased 0.2.0 changelog (Changed + Fixed). Example validated: parses clean, theme wiring present, no inline handlers. --- plugins/bitwarden-design-tools/CHANGELOG.md | 4 +- .../applying-bitwarden-branding/SKILL.md | 10 +- .../assets/bitwarden-tokens.css | 9 +- .../examples/on-brand-one-pager.html | 102 ++++++++++++++---- 4 files changed, 96 insertions(+), 29 deletions(-) diff --git a/plugins/bitwarden-design-tools/CHANGELOG.md b/plugins/bitwarden-design-tools/CHANGELOG.md index 4fef7dac..3442341a 100644 --- a/plugins/bitwarden-design-tools/CHANGELOG.md +++ b/plugins/bitwarden-design-tools/CHANGELOG.md @@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- `applying-bitwarden-branding` now covers both **building** on-brand standalone deliverables (dashboards, recaps, reports, slide decks, one-pagers, mockups) and **reviewing** whether a deliverable is on-brand. Reviews are calibrated to separate canonical violations from brand-silent pragmatic choices, and brand-silent choices that visibly shape the deliverable (surface mode, voice and tone) are surfaced to the requester when working interactively rather than silently defaulted. The canon is now bundled (assets + tokens) for offline, verbatim use rather than referenced externally. +- `applying-bitwarden-branding` now covers both **building** on-brand standalone deliverables (dashboards, recaps, reports, slide decks, one-pagers, mockups) and **reviewing** whether a deliverable is on-brand. Reviews are calibrated to separate canonical violations from brand-silent pragmatic choices, and brand-silent choices that visibly shape the deliverable (voice and tone) are surfaced to the requester when working interactively rather than silently defaulted. The canon is now bundled (assets + tokens) for offline, verbatim use rather than referenced externally. +- `applying-bitwarden-branding` now ships **both light and dark surfaces by default**. Deliverables follow the device's `prefers-color-scheme` for the initial surface and expose a light/dark toggle that overrides it, with the dark surface derived from Deep Blue. Previously surface mode defaulted to light and was treated as a per-deliverable question. ### Added @@ -21,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - `--bw-yellow` corrected to `#FDC700` to match the brand repository's `$tertiary-yellow` (was `#FFD700`). +- Clarified the 36px radius rule: the foundation is for surfaces that float with space around them, and full-bleed headers/footers flush to the page or viewport edge should not be rounded (inset them so all corners float, or leave the flush edges square). Was producing rounded corners against straight page edges on full-bleed headers. ### Removed diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md index 4df91350..87b85854 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/SKILL.md @@ -29,7 +29,7 @@ These are non-negotiable. They come straight from the brand repository. 1. Use only the published palette: Bitwarden Blue (`#175DDC`), Deep Blue (`#0C3276`), Teal (`#2CDDE9`), Light Teal (`#A2F4FD`), the tertiary Green/Red/Yellow, and the neutral ramp (True White, Off White, Light Grey, Medium Grey, True Black). Invent no shades, tints, or alternate steps. See [`references/color-palette.md`](references/color-palette.md) for HEX/RGB/CMYK. 2. Use Inter for type, across headlines, copy, and text. See [`references/typography.md`](references/typography.md) for loading and fallback. 3. Use the official logo lockup. Horizontal is preferred; vertical and product-specific lockups exist for specific cases. Honor clear-space rules. Embed the bundled SVG verbatim; do not recreate the shield from scratch. See [`references/logo-usage.md`](references/logo-usage.md). -4. Apply the 36px rounded-radius foundation to container surfaces (panels, cards, hero sections, pills, badges). Buttons are the only canonical exception. +4. Apply the 36px rounded-radius foundation to container surfaces that float with space around them (panels, cards, hero sections, pills, badges). Do not round an edge that bleeds flush to the page or viewport boundary: a full-bleed header or footer should either be inset (given margin so all four corners float) or left square on the flush edges. Rounding only the bottom corners of an edge-to-edge band looks broken. Buttons are the only canonical exception. 5. Capitalize the B in Bitwarden, never the W. Lowercase "bitwarden" appears only inside the official logo lockup, never in copy, headlines, handles, or URLs. ## Quick start (build) @@ -47,13 +47,15 @@ Three steps to put a deliverable on-brand: See [`references/logo-usage.md`](references/logo-usage.md) for the full catalog and when to use each. -That is the canonical surface. Everything else is a pragmatic choice — see below. +4. Ship light and dark. Default the surface to the device setting with `@media (prefers-color-scheme: dark)` and add a visible light/dark toggle that overrides it. Derive the dark surface from `--bw-deep-blue`; keep the palette and logo identical across modes. See "Surface mode" below and the bundled example. + +Steps 1-3 are the canonical surface; step 4 is the skill's standing default. Everything else is a pragmatic choice — see below. ## Where the brand site is silent -These decisions still have to be made, but the brand site does not prescribe them; they are pragmatic, not canonical. When working interactively and the choice will visibly shape the deliverable (surface mode and voice/tone most of all), ask the requester rather than assume. Otherwise apply the default below and note the assumption in the deliverable. +These decisions still have to be made, but the brand site does not prescribe them; they are pragmatic, not canonical. When working interactively and the choice will visibly shape the deliverable (voice and tone most of all), ask the requester rather than assume. Otherwise apply the default below and note the assumption in the deliverable. -- Surface mode (light vs. dark). Pragmatic. Default to a light surface (`--bw-off-white` or `--bw-true-white` with `--bw-deep-blue` text). For a dark surface, derive the background from `--bw-deep-blue` rather than inventing a new neutral. +- Surface mode (light vs. dark). Ship both by default. Drive the initial surface from the device setting with `@media (prefers-color-scheme: dark)`, and include a visible control to toggle between light and dark that overrides the device default. Build the light surface from `--bw-off-white`/`--bw-true-white` with `--bw-deep-blue` text; derive the dark surface from `--bw-deep-blue` rather than inventing a new neutral. The palette and logo are identical in both modes — only the surface and text invert. The bundled example shows the pattern. - Type scale (heading sizes, weights, line-heights). Pragmatic. A safe four-step default: display 2.5rem/700, section 1.5rem/600, body 1rem/400, caption 0.8125rem/500. See [`references/typography.md`](references/typography.md). - Code font. Pragmatic. `"SF Mono", "JetBrains Mono", Menlo, Consolas, monospace`. The brand is silent on code typography. - Component shapes (cards, banners, chips, toolbars, badges). Pragmatic. The brand defines no component vocabulary. Apply the 36px radius to container surfaces (canonical); choose whatever padding, spacing, and border treatment fits. diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css index 732717c7..efc90386 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/assets/bitwarden-tokens.css @@ -12,9 +12,12 @@ * - A component vocabulary. There are no card/button/banner/chip styles here * because they are not part of the Bitwarden brand. Component shape is a * pragmatic choice the deliverable makes. - * - A theme. There is no dark-surface variant here because the brand site - * is silent on dark surfaces. If you need dark mode, derive surface colors - * from Deep Blue (#0C3276) rather than inventing a new neutral. + * - A theme. This file holds only canonical values, so it has no light/dark + * surface tokens — those are deliverable-level. The skill ships BOTH modes + * by default: drive the initial surface from the device setting + * (@media (prefers-color-scheme: dark)) with a light/dark toggle that + * overrides it, and derive the dark surface from Deep Blue (#0C3276) rather + * than inventing a new neutral. See the skill's example for the pattern. * - A type scale. Heading sizes, weights, and line-heights are pragmatic * choices the deliverable makes. * diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/examples/on-brand-one-pager.html b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/examples/on-brand-one-pager.html index e74ff1e4..6440c9f6 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/examples/on-brand-one-pager.html +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/examples/on-brand-one-pager.html @@ -12,8 +12,10 @@ - Inter from Google Fonts (canonical). - Inline shield in the header (canonical when used at chip scale). - 36px radius foundation on container surfaces (canonical). - - A light/dark surface toggle. The brand site is SILENT on surface - mode, so both modes are pragmatic. The dark mode derives its + - Both light and dark surfaces, shipped by default. The initial mode + follows the device (prefers-color-scheme) and a header toggle + overrides it. The brand site is silent on surface mode, so the + specific surface values are pragmatic: the dark mode derives its background from --bw-deep-blue rather than introducing a new neutral, per references/color-palette.md. @@ -111,6 +113,29 @@ --stat-value: var(--bw-teal); } + /* + * Default the surface to the device setting. This applies until the user + * makes an explicit choice (the toggle sets [data-theme]); data-theme="light" + * opts back out on a dark device. Same dark values as above — duplicated so + * no-JS and pre-JS rendering already match the device (no flash of light). + */ + @media (prefers-color-scheme: dark) { + body:not([data-theme="light"]) { + --surface-page: var(--bw-deep-blue); + --surface-card: color-mix( + in srgb, + var(--bw-true-white) 6%, + var(--bw-deep-blue) + ); + --text-primary: var(--bw-true-white); + --text-secondary: var(--bw-light-grey); + --text-on-card: var(--bw-light-grey); + --eyebrow-bg: color-mix(in srgb, var(--bw-teal) 18%, transparent); + --eyebrow-fg: var(--bw-light-teal); + --stat-value: var(--bw-teal); + } + } + *, *::before, *::after { @@ -192,8 +217,12 @@ display: inline-block; } - body[data-theme="dark"] .theme-toggle .icon-sun, - body:not([data-theme="dark"]) .theme-toggle .icon-moon { + /* + * Pre-JS default shows the sun. The toggle script swaps the icon, label, + * and aria-pressed to match the effective mode (device default or the + * explicit override). + */ + .theme-toggle .icon-moon { display: none; } @@ -372,17 +401,6 @@ class="theme-toggle" aria-label="Toggle light and dark surface" aria-pressed="false" - onclick=" - (function (b) { - var d = b.dataset.theme === 'dark'; - b.dataset.theme = d ? '' : 'dark'; - var t = document.querySelector('.theme-toggle'); - t.setAttribute('aria-pressed', (!d).toString()); - t.querySelector('.label').textContent = d - ? 'Dark mode' - : 'Light mode'; - })(document.body) - " > The brand canon, applied.

Palette, Inter, the official shield, and the 36px radius foundation — - assembled into one valid composition. Toggle the surface mode in the - header to see the same composition rendered against light and dark - surfaces. Both are pragmatic; the canonical pieces are identical. + assembled into one valid composition. The surface follows your device + by default; use the header toggle to switch light and dark. The + canonical pieces are identical in both.

@@ -455,10 +473,12 @@

What this page demonstrates

of scaling the shield up.

- Surface mode is a pragmatic decision the brand site does not - prescribe. The dark surface here derives its background from + Both surface modes ship by default: the page follows the device's + light/dark preference and the header toggle overrides it. The brand + site does not prescribe surface mode, so the values are pragmatic — + the dark surface derives its background from --bw-deep-blue and lifts elevated panels with a 6% - --bw-true-white overlay — no new neutral introduced. + --bw-true-white overlay, with no new neutral introduced.

@@ -467,5 +487,45 @@

What this page demonstrates

bitwarden.com/brand + + From f06a6df2d005f59436525ac4485645348f783be6 Mon Sep 17 00:00:00 2001 From: Patrick Honkonen Date: Mon, 22 Jun 2026 13:07:15 -0400 Subject: [PATCH 20/22] test(design-tools): de-bias eval fixtures The mock input fixtures carried comments and visible text that revealed the answer key (on/off-brand verdicts, which choices were faults, even a pointer to rubric.json). The skill under test reads the input verbatim, so those hints would measure reading the answer key rather than detecting brand issues. Strip all eval-meta from the fixtures so they are pristine artifacts; ground truth stays in rubric.json and the eval README, which the skill never sees. Add a blindness rule to the README. Grader unaffected (it strips comments): off-brand deck still 0.14, on-brand control still 1.0. --- .../applying-bitwarden-branding/evals/README.md | 7 +++++++ .../evals/inputs/offbrand-deck.html | 9 +-------- .../evals/inputs/onbrand-control.html | 14 -------------- 3 files changed, 8 insertions(+), 22 deletions(-) diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/README.md b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/README.md index 13b4f293..f4d6d5db 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/README.md +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/README.md @@ -11,6 +11,13 @@ deterministically where it can. metrics, or internal decks. Keep it that way. If a fixture needs to feel realistic, invent the content. +**Keep the fixtures free of eval-meta.** No comment or visible text should mark a +file as a fixture, call it on- or off-brand, label which choices are faults, or +point at the rubric. The skill under test reads the input verbatim, so any such +hint poisons the result — it would measure reading the answer key, not detecting +brand issues. Ground truth lives in this README and in `rubric.json`, which the +skill never sees. + - `inputs/offbrand-deck.html` — deliberately off-brand (Big Shoulders / IBM Plex fonts, invented slate/green palette, no official lockup, sub-36px radii). - `inputs/onbrand-control.html` — substantially on-brand (Inter, Bitwarden diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/offbrand-deck.html b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/offbrand-deck.html index 74d57247..4d7ca831 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/offbrand-deck.html +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/offbrand-deck.html @@ -1,10 +1,4 @@ - @@ -117,8 +111,7 @@

Internal Decision Deck · Q3

Project Atlas: Service Reliability Review

- A fictional internal deck used as an off-brand fixture. None of these - numbers are real. + A fictional internal deck. None of these numbers are real.

diff --git a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html index bff98d0d..8474b045 100644 --- a/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html +++ b/plugins/bitwarden-design-tools/skills/applying-bitwarden-branding/evals/inputs/onbrand-control.html @@ -1,13 +1,4 @@ - @@ -20,7 +11,6 @@ />