Style Guide

The Vesper brand style bible. Single source of truth for all visual decisions across the website, Vesper Audit, Vesper Inspect, and any future products. When a component or pattern is finalised here, it propagates to all products.

Brand Colors

Core palette

Violet
--violet
#784a9d
Violet hover
--violet-hover
#6a3d8a
Violet mid
--violet-m
#8066ad
Lavender
--lavender
#998ac2
Amber gold
--amber
#fdbb25
Teal
--teal
#139589

Teal is reserved for Vesper Inspect popup chrome only (toggle, badge, mode buttons). Not used in the tooltip, on the website, or in Audit.

Backgrounds

--bg
#101420
--bg2
#111437
--bg3
#192135
Depth
#150d3a
--bg
#f7f8fc
--bg2
#edf0f7
--bg3
#e4e8f2

Text

--text
#f0f4ff
--text2
#8892a8
--text3
#6d7f99
--text
#111827
--text2
#374151
--text3
#6b7280

Borders

--border
rgba(120,74,
157,0.18)
--border2
rgba(120,74,
157,0.09)
UI chrome
rgba(120,74,
157,0.25)

UI chrome (0.25) is for component borders that need more presence: kbd, dividers, popup chrome in Inspect.

--border
rgba(107,58,
154,0.2)
--border2
rgba(107,58,
154,0.12)

Lavender by mode

Lavender is used for links, section labels, and nav hover. The value changes per mode to maintain contrast.

Lavender
#998ac2
Lavender
#5a3498

Status

Green
#15803d
Amber
#f39e1e
Red
#b92025

Status colors are the same in both modes - used as full-bleed header backgrounds with white text.

Typography

H1/H2 use Bricolage Grotesque. H3/H4 + UI use Gabarito. Code uses JetBrains Mono. Dyslexia mode uses Atkinson Hyperlegible.

h1 / Bricolage / 48px / 700 / -0.01em

Page Heading

h2 / Bricolage / 32px / 700 / -0.005em

Section Heading

h3 / Gabarito / 22px / 600

Subsection Heading

h4 / Gabarito / 18px / 600

Minor Heading

body / Gabarito / 18px / 400 / lh 1.75

Body text for paragraphs and general prose. Used across doc pages and marketing copy.

small / 13px / 400 / lh 1.65

Small text for captions, metadata, and secondary descriptions.

label / 11px / 700 / 0.1em UC

Section Label

code / JetBrains Mono / 14px
inline-code
eyebrow / 13px / 600 / 0.12em UC

Eyebrow Label

Text Links

Links follow a single consistent system sitewide. Prose links (in body copy, lists, table cells) always have an underline. Navigation links (sidebar, footer, breadcrumbs, site map) use lavender color without underline.

Prose links

Vesper Audit uses axe-core to surface WCAG violations. See the quick start guide to get up and running. For support, contact the team.

Navigation links

Footer link Privacy Policy Site Map
/* Dark mode */ a color: #998ac2 (--lavender) no underline by default p a, li a, td a + underline underline-color: rgba(153,138,194,0.5) a:hover color: #f0f4ff (--text) underline-color: var(--text) a:visited color: #998ac2 (--lavender) a:focus-visible outline: 2px solid #784a9d (--violet) offset: 2px a:active color: #784a9d (--violet)
/* Light mode */ a color: #5a3498 (--lavender) no underline by default p a, li a, td a + underline underline-color: rgba(107,58,154,0.4) a:hover color: #111827 (--text) underline-color: var(--text) a:visited color: #5a3498 (--lavender) a:focus-visible outline: 2px solid #6b3a9a (--violet) offset: 2px a:active color: #6b3a9a (--violet)

Buttons

Primary button Disabled download Secondary button
btn-primary background: var(--violet) color: #fff font-weight: 600 :hover background: #6a3d8a :visited color: #fff (locked - never shows browser default) .disabled opacity: 0.5 pointer-events: none aria-disabled="true" btn-secondary background: transparent color: var(--text2) border: 1px solid rgba(153,138,194,0.45) (dark) border: 1px solid rgba(107,58,154,0.45) (light) :hover border-color: var(--violet) color: var(--text) Rule: All buttons include a relevant icon (arrow-right for links, download for installs) Icons use currentColor so they automatically match button text color

Callouts

Four semantic callout types. Choose based on purpose, not aesthetics.

Note / Info - Purple

Technical details, code references, page IDs, configuration values.

Example: Note

Use callout--note for technical context. Also use callout--info as an alias.

Warning - Amber

Tips, gotchas, supplementary info. "By the way..." content.

Good to know

Use callout--warning for tips and supplementary information the user should be aware of but won't break anything if missed.

Success - Green

Confirmations, positive outcomes, "this is the right way" examples.

You're all set

Use callout--success to confirm a completed step or affirm a correct approach.

Danger - Red

Caution, destructive actions, data loss risks. "Stop and read this" content.

Caution

Use callout--danger for anything that could cause data loss, break functionality, or require irreversible action.

callout--note / callout--info Purple Technical details, code, config values callout--warning Amber Tips, gotchas, supplementary info callout--success Green Confirmations, correct approaches callout--danger Red Caution, destructive, irreversible actions HTML: <div class="callout callout--warning"> <strong>Heading (optional)</strong> <p>Body text.</p> </div> Both modes: tinted bg matching callout color, text uses var(--text)

Code Blocks

<a href="/pricing">View pricing details</a>
<a href="/report">Read the 2025 annual report</a>

Inline code example: Use npm run build to generate the dist folder.

/* Dark mode */ pre bg: var(--pre-bg) = rgba(120,74,157,0.18) pre border: var(--code-border) = rgba(153,138,194,0.35) pre code color: #ffffff (white) inline code bg: var(--code-bg) = rgba(120,74,157,0.22) inline code fg: var(--code-text) = #ffffff inline code bd: var(--code-border) = rgba(153,138,194,0.35) td/th code: same vars as inline code (code-bg, code-text, code-border)
/* Light mode */ pre bg: var(--pre-bg) = rgba(107,58,154,0.07) pre border: var(--code-border) = rgba(107,58,154,0.25) pre code color: #4c1d95 inline code bg: var(--code-bg) = rgba(107,58,154,0.1) inline code fg: var(--code-text) = #1a0a2e inline code bd: var(--code-border) = rgba(107,58,154,0.25) td/th code: same vars as inline code (code-bg, code-text, code-border)

Toggle Switches

role="switch" aria-checked="true|false" on: background: var(--violet) = #784a9d off: background: var(--bg3) border: var(--border) thumb: white circle, 18px

Report Status Colors

Used in Vesper Audit PDF reports and Notion output. These are fixed values - not theme-dependent.

Critical
#b92025
Serious
#f39e1e
Moderate
#fdbb25
Clean
#15803d
Minor
#6d7f99

Stat counters

Pages
#f0f4ff
Violations
#f39e1e
Clean
#4ade80

Spacing Scale

4px - tight gap (icon + label) 8px - small gap (button padding horizontal) 12px - compact row gap 16px - standard element gap 20px - section inner padding 24px - component breathing room 32px - section gap (mobile) 40px - page horizontal padding 48px - section padding (tablet) 64px - section gap (desktop) 80px - page top padding 96px - doc content bottom padding

Border Radius

3px - inline code 4px - small badges 5px - sidebar nav links 7px - nav buttons 8px - callouts, code blocks 10px - cards, mobile drawer actions 12px - screenshot wrap, A11y panel 20px - mobile TOC pill links 99px - pill buttons (back to top)