Style Guide

Typography, color, and components

This page documents the visual system used across the site. Three typefaces each have a fixed job: Cormorant Garamond for titles, Jost for labels and navigation, and Tenor Sans for paragraph copy. All values below are defined once in css/style.css.

Typefaces

Three fonts, three roles

Cormorant Garamond

Display & headings

Laura & Jordan

We're Getting Married

Box Cañon Falls · Maid of Honor · What should I wear?

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 &

Used forCouple names, page and section headings, card titles, FAQ questions, footer names

Weights loadedRegular 400, Medium 500, Italic 400 (the ampersand)

TreatmentUppercase with 0.08em tracking for titles; mixed case with 0.04 to 0.06em for card titles

CSS variable--serif

Jost

Navigation, labels & UI

June 19, 2027 • Ouray, Colorado

HomeOur StoryTravelThings to DoPhotosRSVP

Closest Airport · Maid of Honor · Your Full Name

Light 300Regular 400Medium 500

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Used forDate line and countdown, navigation, section subtitles, small labels and tags, buttons, form fields, footer, and emphasized text inside paragraphs

Weights loadedLight 300, Regular 400, Medium 500

TreatmentAlmost always uppercase with wide tracking, 0.14em for nav up to 0.22em for labels

CSS variable--sans

Tenor Sans

Paragraph copy

Welcome to our wedding website! We are so excited to celebrate this day with the people we love most. Here you'll find everything you need to know about the weekend: where to stay, what to do, and how to let us know you're coming. Please take a look around, and don't forget to RSVP by May 15, 2027.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Used forAll body paragraphs: welcome text, story text, card descriptions, travel details, bios, FAQ answers

Weights loadedRegular 400 only. Tenor Sans has a single weight, so emphasis switches to Jost Medium

Treatment13px, no tracking, 1.75 line height, soft grey ink

CSS variables--body, --body-size, --body-tracking

Type Scale

Every text style on the site

Element	Font	Size	Tracking	Case	Color
Couple names	Cormorant Garamond 400	28 to 68px, fluid	0.08em	Uppercase	Ink
Date, location, countdown	Jost 400	15px	0.22em	Uppercase	Ink
Navigation	Jost 400	14px	0.14em	Title case	Soft ink, active is Ink with underline
Section heading	Cormorant Garamond 400	38px, 30px for sub-sections	0.08em	Uppercase	Ink
Section subtitle	Jost 400	13px	0.22em	Uppercase	Faint ink
Paragraph copy	Tenor Sans 400	13px	0	Sentence case	Soft ink
Emphasis in paragraphs	Jost 500	1.08em of parent	0.01em	As written	Ink
Card and event titles	Cormorant Garamond 400	26 to 28px	0.04 to 0.10em	Mixed, events uppercase	Ink
Tags and small labels	Jost 400	11 to 13px	0.20 to 0.22em	Uppercase	Faint ink
Wedding party names	Cormorant Garamond 400	24px	0	As written	Ink
FAQ questions	Cormorant Garamond 400	22px	0	Sentence case	Ink
Buttons	Jost 400	13px	0.20em	Uppercase	Ink, inverts on hover
Form labels	Jost 400	12px	0.20em	Uppercase	Soft ink
Form inputs	Jost 400	15px	0	As typed	Ink
Footer names	Cormorant Garamond 400	26px	0.10em	Uppercase	Ink
Footer details	Jost 400	12px	0.20em	Uppercase	Faint ink

Color

A restrained neutral palette that lets the photos lead

Ink

--ink #2b2b2b

Soft ink

--ink-soft #555555

Faint ink

--ink-faint #8a8a8a

Line

--line #d9d9d9

Paper

--paper #ffffff

Paper, alt

--paper-alt #f7f6f4

Sage accent

--accent #7a8b7a

Sage, dark

--accent-dark #5f6f5f

Components

Shared building blocks

Buttons

Outlined Solid

Divider rule

Event card

Ceremony

4:00 PM

Gold Mountain Ranch

Ouray, Colorado

View Map

Image placeholder

Photo labelimages/example.jpg

Font loading

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&family=Tenor+Sans&display=swap" rel="stylesheet">

:root {
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --body:  "Tenor Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --body-size: 13px;
}