Paco & Betty Photography

Brand Style Guide

Colors, typography, and design tokens for Paco & Betty Photography

Logo

Wordmark

Paco & Betty Logo - Dark
Paco & Betty Logo - Light

Dark version -- for light backgrounds

Light version -- for dark backgrounds

Typography

Typefaces

Headings

Playfair Display

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Class: font-serif

Weights: 400 (Regular), 700 (Bold)

Usage: Page titles, section headings, feature callouts. Often paired with italic for emphasis on key words.

Body & UI

Geist

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Class: font-sans

Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

Usage: Body copy, navigation, buttons, labels, form inputs. All UI elements use Geist as the default sans-serif.

Type Scale

text-5xlGolden Hour
text-3xlSection Heading
text-2xlCard Title
text-lgSubheading
text-baseBody text uses Geist at base size with relaxed line height for comfortable reading.
text-smSecondary body text, descriptions, metadata
text-[11px]Section Labels & Eyebrow Text

Color Palette

Core Colors

Primary

#C4873B

--primary

CTAs, links, accent highlights

Foreground

#2A2017

--foreground

Headings, body text

Background

#F7F4F1

--background

Page background

Card

#FDFCFA

--card

Card surfaces, elevated elements

Secondary

#EDE5DA

--secondary

Alternate section backgrounds

Muted

#EFE9E1

--muted

Subdued backgrounds, disabled states

Muted Foreground

#7A6E5F

--muted-foreground

Secondary text, captions

Accent

#D4A55A

--accent

Hover states, subtle highlights

Border

#DED3C4

--border

Borders, dividers, separators

Brand Colors

Golden

#D9A84E

--golden

Golden hour accent, brand warmth

Golden Dark

#9E6A24

--golden-dark

Darker golden accent

Warm Cream

#F5F1EB

--warm-cream

Warm neutral background

Warm Dark

#1A1410

--warm-dark

Dark backgrounds (navbar, footer)

Guidelines

Design Notes

Warm Palette

Every color is rooted in warm amber and earth tones that evoke golden hour light. Avoid cool blues or grays that break the warmth.

Typography Pairing

Playfair Display for headings paired with Geist for body. Use italic Playfair sparingly to highlight key words in headings.

Eyebrow Labels

Section labels use 11px uppercase with 0.3em letter-spacing in the primary color. This creates consistent visual hierarchy across all sections.

Spacing & Layout

Sections use py-24 (lg:py-32) for generous vertical rhythm. Content is constrained to max-w-7xl with px-6. Prefer flexbox with gap classes for spacing.