Brand
The Trail of Bits visual system: one wordmark, a restrained palette, and three typefaces. The same design tokens that drive this site, in one place.
Logo
Usage
- Keep clear space around the mark equal to the height of the “o”.
- Use the black mark on light backgrounds, the white mark on dark.
- Don't recolor, outline, stretch, rotate, or add effects to the mark.
Color
Neutrals
Canvas
--color-canvas
Page background
Surface
--color-surface
Cards and panels
Surface muted
--color-surface-muted
Insets, hover fills
Surface tint
--color-surface-tint
Subtle section fills
Sidebar
--color-sidebar
Navigation, dark surfaces
Ink & lines
Ink
--color-ink
Primary text and marks
Ink muted
--color-ink-muted
Secondary text
Ink soft
--color-ink-soft
Labels and metadata
Line
--color-line
Hairline borders
Line strong
--color-line-strong
Emphasis borders
Accent
Accent
--color-accent
Decorative marks — dots, rails, fills
Accent strong
--color-accent-strong
Eyebrows, links, text emphasis (AAA)
Typography
FH Lecturis
Display
Solving difficult security problems
Headlines and the wordmark. Used sparingly, at large sizes, light weight.
--font-display
Geist
Sans · body & UI
We fix software, not just bugs.
Body copy, UI, and everything that isn't a headline or a label.
--font-sans
Geist Mono
Mono · labels
AUDIT REPORT · 2026 · BLOCKCHAIN
Eyebrows, metadata, stats, code, and uppercase labels.
--font-mono
Shape
Corners are nearly square. The system stays sharp and editorial rather than soft.
Card
1px
Control
3px
Chip
4px
