Joseph West

Brand · v0.1 · Pre-redesign

The house style

The way it looks, reads, and feels.

A working snapshot of the Joseph West Photography system — the typefaces, colors, spacing, components, and editorial rules currently on the live site. This page exists so anyone adding to the site — human or AI — can stay in key.

Last reviewed: 2026-04-17 · Source: Squarespace theme · Supersedes: nothing yet.

01 · Typography

Two serifs, carrying everything.

Orpheus Pro Headings

Light falls through pecan trees.

font-family: "orpheus-pro", "Orpheus Pro", "Cormorant Garamond", Georgia, serif

Loaded via Adobe Fonts on authorized domains. Cormorant Garamond (Google Fonts) serves as a visually similar fallback everywhere else. Used for h1–h6 at 400; no all-caps.

Adobe Garamond Pro Paragraphs

The best pictures from a wedding day are the ones nobody asked for — the laugh before the toast, the hand on a shoulder between frames.

font-family: "adobe-garamond-pro", "Adobe Garamond Pro", "EB Garamond", Garamond, Georgia, serif

Body copy across the site. EB Garamond (Google Fonts) is the free-tier fallback. Base size 16px, line-height 1.6. Italics used sparingly for emphasis.

Morello Miscellaneous

Joseph West

font-family: "Morello", "Allura", "Snell Roundhand", cursive

Custom Positype face, self-hosted as .woff2/.otf from /public/fonts (Pen is default; Marker and Pencil also available as "Morello Marker" and "Morello Pencil"). Allura (Google Fonts) is the fallback. Reserved for the wordmark, signatures, and the occasional flourish. Never runs in body copy, buttons, or UI labels.

Loading order: Adobe Fonts kit (Orpheus Pro, Adobe Garamond Pro) first; Google Fonts (Cormorant Garamond, EB Garamond, Allura) as universal fallbacks; Morello self-hosted from site/public/fonts. Configured in site/src/components/Fonts.astro.

02 · Type scale

Sizes, in real pixels.

Every section on the site pulls from these eight entries. When you or an AI is composing a new page, match the role, don't invent a size.

Display

Orpheus Pro
84px / 1.05
tracking -0.01em

h1 hero

Landing hero, gallery title pages
Page title

Orpheus Pro
56px / 1.08
tracking -0.005em

h1

Standard page headings
Section

Orpheus Pro
32px / 1.15
tracking 0

h2

Section dividers within a page
Subsection

Orpheus Pro
24px / 1.2
tracking 0

h3

Article chapters, card titles
Lede

Adobe Garamond Pro
20px / 1.55
tracking 0

Opening paragraph

First paragraph of any page or section
Body

Adobe Garamond Pro
17px / 1.6
tracking 0

Paragraph

Long-form reading copy
Caption

Adobe Garamond Pro italic
14px / 1.5
tracking 0

Image caption

Photo cutlines, small meta
Eyebrow

Mono
11px / 1.4
tracking 0.18em

KICKER / LABEL

Section kickers, form labels, uppercase tags

03 · Color

A white room with a black door.

The palette is intentionally narrow. Images carry the color; the chrome stays quiet.

Lightest 1 Page background / negative space #FFFFFF

Light 1 Bone — warm neutral, section fills, wordmark on dark #DACEBE

Bright 2 Oxblood — accent sections, emphasis, hero fields #2F0506

Dark accent Wine — links, highlights, brand moments #821D21

Darkest 1 Primary ink — headings on light, chrome on dark #000000

04 · Spacing

Generous gutters, a wide room.

Pages breathe out to the edges of the viewport and stop at 2000px. Content centers inside that. Keep whitespace — don't fill it.

Page Width (Max) Upper bound — content centers within this. 2000px
Site Margin Left/right gutter; scales with viewport. 3vw
Content Column Max width for long-form reading. 980px
Reading Measure Max paragraph width so lines stay legible. 58ch
Section Rhythm Vertical space between major sections. 96px
Base Font Size Paragraph default. All type scales off this. 16px

05 · Buttons & links

Three weights, no more.

Every call-to-action fits in one of three shapes. Never style a one-off button; reach for the closest spec.

Primary

Main CTAs: Book, Contact, Inquire

Book a consult

Secondary

Alternate actions on dark fields

See the work

Tertiary

Low-commitment links inline with copy

06 · UI components

The small things.

Reusable text-level components. Use the same markup everywhere so rhythm stays consistent across pages.

Eyebrow

Section kicker above a heading

Weddings · Houston

Meta line

Post metadata — date, category, location

2026 · Wedding · Marfa, TX

Caption

Italic photo cutline

Abigail at the hotel, just before the ceremony. Chateau Cocomar, 7:48pm.

Pull quote

Editorial emphasis inside long-form

“We wanted the day to feel like a dinner party with vows in the middle. Joseph understood that before we finished the sentence.”

07 · Image blocks

Four ways an image can sit on a page.

Squarespace image-block presets, tuned to these proportions. When in doubt, reach for Card or Stack; reserve Poster for true hero moments.

Poster

Centered title-over-image. Used for hero moments.

Text Alignment: Center
Content Width: 70%
Title Separation: 3%
Button Separation: 6%

Card

Image beside text. Used for features, service tiles.

Content Position: Center
Text Alignment: Left
Image Width: 50%
Image Separation: 9%
Title Separation: 6%
Button Separation: 8%

Collage

Image with content floated over or beside it.

Content Position: Top
Text Alignment: Left
Image Width: 70%
Content Width: 45%
Content Offset: 5%
Content Padding: 10%
Title Separation: 4%
Button Separation: 6%

Stack

Image over text. Used for grids and series.

Text Alignment: Left
Image Separation: 7%

08 · Image treatment

How the pictures should feel.

Color, exposure, cropping, and file conventions. These rules live upstream of any single page — if an image doesn't meet them, it doesn't ship.

Color
Warm highlights, honest skin, a little green in the shadows. Filmic, never teal. No crushed blacks. Keep white balance editorial, not clinical.
Exposure
Slightly overexposed highlights are welcome on skin. Avoid blown-out whites in dresses — detail in the fabric is the story.
Crop ratios
3:2 for full-bleed editorial. 4:5 for portraits on mobile. 1:1 only for grids — never as a hero.
File conventions
Hero images ship at 2500px wide, quality 82, .webp when supported. Descriptive alt text, never "image" or auto-generated filenames.

09 · Motion

One animation, used everywhere.

StyleFade

SpeedMedium

Elements fade in once as they scroll into view. Nothing bounces, spins, or loops. If an animation calls attention to itself, it's wrong — the picture is the show.

10 · Voice & tone

Write like you're mailing a Polaroid.

Specific, quiet, and warm. Assume the reader is smart and short on time. Never oversell an image that can speak for itself.

Banned

Capturing magic
Telling your story
Love is love
Let's create something beautiful together
Epic / stunning / breathtaking
Exclamation points (reserve them)
Emoji in marketing copy

Approved

Specific nouns over adjectives (“a cedar chapel in Marfa,” not “a stunning venue”).
Short sentences. Then longer ones when earned.
Name the person, the place, the weather.
Write like you're sending a Polaroid with a note on the back.
If you can cut a word, cut it.

11 · Photography principles

Five rules behind every frame.

Light first, subject second

Chase the light that's already in the room. A flash is a last resort, not a signature.

Wide, medium, close

Every moment deserves a landscape, a portrait, and a detail. Without all three, it isn't a story.

Leave the edges alone

We don't crop to hide. Compose in-camera; give the edits back to the people in them.

Color comes from film

Warm highlights, honest skin, a little green in the shadows. Never crushed blacks, never teal.

Deliver fewer, better

A hundred frames you'll print beats a thousand you'll scroll past.

This page is a working snapshot — real copy and a proper logo lockup land with the redesign. Edit site/src/pages/brand.astro to change it. Fonts are loaded from Adobe Fonts (authorized domains) with Google Fonts fallbacks everywhere else; Morello is self-hosted.