Brett Johnson Design System

The single source of truth for brand tokens, UI components, and visual patterns powering brettjohnson.xyz.

What’s in here

Design Tokens

Color palette, typography scale, spacing system, and motion presets — all as CSS custom properties and Tailwind v4 theme tokens. Explore →

Brand Identity

Logo usage rules, voice and tone guidelines, and photography direction. Explore →

Components

Documented React components from @brettjohnson/ui with props, variants, and usage examples. Explore →

Patterns

Composite layout patterns — hero sections, service grids, and full-page templates. Explore →

Tailwind Config

The shared @brettjohnson/config-tailwind theme file and how to consume it in each app. Explore →

Contributing

How to propose new tokens, add components to the shared library, and open design PRs. Explore →

Brand at a Glance

Token	Value
Primary Red	`#C0392B`
Dark Background	`#0A0A0A`
Charcoal Surface	`#1A1A1A`
Gray Border	`#2D2D2D`
Sans Font	Inter
Mono Font	JetBrains Mono

Stack

Design tokens live in packages/config-tailwind/theme.css. Components live in packages/ui/src/. This docs site lives at apps/design/ and is deployed to design.brettjohnson.xyz.