Skip to content

Style Guide

Design system

The colors, typography, and components that make up the BHAgency template.

Colors

Background

bg-background

Surface

bg-surface

Border

border-border

Foreground

text-foreground

Muted

text-muted

Accent

text-accent

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Large body text — the quick brown fox jumps over the lazy dog.

Muted body text — the quick brown fox jumps over the lazy dog.

Small text — the quick brown fox jumps over the lazy dog.

Buttons

Text link →

Badges & pills

Accent pillNeutral pillEyebrow label

Cards

Surface card

A standard content card on the surface background.

Accent card

A highlighted card using the accent tint.

Outline card

A transparent card with just a border.

Form inputs