Design System

The visual language of Fade — colors, typography, components, and patterns.

Colors Typography Logo Components Spacing

Logo

Primary, icon, and horizontal variants

Primary

fade-logo-primary.svg

Icon

fade-logo-icon.svg

Horizontal

fade-logo-horizontal.svg

Color Palette

13 core colors — navy foundation, brass accents, cream warmth

#1A1A2E

Fade Navy

--color-fade-navy

Primary backgrounds, admin nav

#0D0D1A

Fade Jet

--color-fade-jet

Page background, hero base

#2D2D44

Fade Slate

--color-fade-slate

Secondary card bg, dividers

#333347

Fade Med Navy

--color-fade-med-navy

Card bg variant

#C8A96E

Fade Brass

--color-fade-brass

Accent, CTAs, active states

#8B7A4A

Fade Antique

--color-fade-antique

Dark accent, hover states

#F5E6C8

Fade Cream

--color-fade-cream

Light text on dark, cards

#FBF9F5

Fade Parchment

--color-fade-parchment

Page bg light mode

#E8DCC4

Fade Stone

--color-fade-stone

Borders, subtle lines

#D4C5A0

Fade Muted

--color-fade-muted

Muted text on dark

#6B5B3E

Fade Amber

--color-fade-amber

Muted accent, warnings

#3A7D5C

Fade Success

--color-fade-success

Active, success states

#A04040

Fade Error

--color-fade-error

Danger, delete, errors

Typography

Playfair Display (headings) + Inter (body)

The quick brown fox

H1 Page Title

text-5xl

700

The quick brown fox

H2 Section

text-4xl

600

The quick brown fox

H3 Card Title

text-2xl

600

The quick brown fox

H4 Subheading

text-xl

500

The quick brown fox jumps over the lazy dog.

Body Large

text-lg

400

The quick brown fox jumps over the lazy dog.

Body Default

text-base

400

The quick brown fox jumps over the lazy dog.

Body Small

text-sm

400

The quick brown fox jumps over the lazy dog.

Caption Tiny

text-xs

500

LABEL TEXT EXAMPLE

Label UI

text-xs uppercase tracking-wider

600

fade-barber-shop-slug

Mono Code/Slug

text-sm font-mono

400

UI Components

Buttons, pills, cards, inputs, avatars

Buttons

Pills / Badges

NavyGoldCreamActivePendingDisabled

Cards

Default Card

.card — White bg, rounded-xl, shadow

Navy Card

.card-navy — Dark bg, cream text

Inputs

Avatars

Spacing & Layout

Container widths, padding scale, grid patterns

Spacing Scale

4xs

3xs

2xs

2xl

3xl

Container Widths

max-w-5xl — Page content

max-w-4xl — Hero sections

max-w-md — Forms, cards

CSS Class Reference

All custom utility classes

Buttons

.btn

Base button: flex, h-12, px-8, uppercase

.btn-primary

Navy bg, cream text

.btn-cta

Brass bg, navy text, gold shadow

.btn-outline

Transparent, stone border

Cards

.card

White bg, stone border, rounded-xl

.card-navy

Navy bg, rounded-xl

Pills

.pill

Base: inline-flex, rounded-full

.pill-gold

Brass bg, navy text

.pill-cream

Cream bg, amber text

Inputs

.input

h-12, px-4, rounded-lg

.input-error

Red border, red text

Decorations

.text-fade-gradient

Gold-to-cream gradient text

.bg-fade-hero

Navy-to-brass gradient bg

Avatars

.avatar

Rounded-full, navy bg, brass text