Design system¶
Secrets Bridge has a consistent brand. The SPA, the GitHub org, the README banners, and these docs all use the same tokens, the same fonts, and the same canonical phrasing, so it feels like one product no matter where you encounter it.
If you're contributing copy, building a new page, or shipping external comms, read these three pages first:
- Brand voice: the tagline, wordmark conventions, metaphor family, voice rules
- Tokens & theme: the color palette, type ramp, spacing, and how they're consumed in Tailwind
- Figma file & assets: where the canonical design lives, how to download the brand assets, the sync scripts that pull tokens from Figma into the SPA
Why we wrote this down¶
A brand drifts the moment two people write copy without a shared reference. Every PR adds friction to "wait, do we call it Secrets Bridge or SecretsBridge?" Every external surface (a README, a social card, a marketing site, a conference slide) is an opportunity for a contributor to invent their own variant.
The three pages above are the answer to "what do I match against?"
Match these. If you find yourself wanting to deviate, open an
issue against secrets-bridge/skills
and we'll either update the system or document the exception.
The short version¶
| Question | Answer |
|---|---|
| Tagline? | The brain behind your secrets. (verbatim, including the trailing period) |
| Eyebrow? | UNIFIED SECRETS CONTROL PLANE (all caps) |
| Wordmark in logos / brand identity? | SecretsBridge (one word) |
| Wordmark in body copy / READMEs / prose? | Secrets Bridge (two words) |
| UI font? | Inter |
| Code / CLI font? | JetBrains Mono |
| Primary accent color? | Cyan #06B6D4 (text-accent in Tailwind) |
| Base background? | Navy 900 #0B1220 (bg-bg in Tailwind) |
| Canonical Figma file | Secrets Bridge - Brand |
Everything else is detail, but it's detail we've thought about, written down, and want you to use.