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

ElementFontSizeTrackingCaseColor
Couple namesCormorant Garamond 40028 to 68px, fluid0.08emUppercaseInk
Date, location, countdownJost 40015px0.22emUppercaseInk
NavigationJost 40014px0.14emTitle caseSoft ink, active is Ink with underline
Section headingCormorant Garamond 40038px, 30px for sub-sections0.08emUppercaseInk
Section subtitleJost 40013px0.22emUppercaseFaint ink
Paragraph copyTenor Sans 40013px0Sentence caseSoft ink
Emphasis in paragraphsJost 5001.08em of parent0.01emAs writtenInk
Card and event titlesCormorant Garamond 40026 to 28px0.04 to 0.10emMixed, events uppercaseInk
Tags and small labelsJost 40011 to 13px0.20 to 0.22emUppercaseFaint ink
Wedding party namesCormorant Garamond 40024px0As writtenInk
FAQ questionsCormorant Garamond 40022px0Sentence caseInk
ButtonsJost 40013px0.20emUppercaseInk, inverts on hover
Form labelsJost 40012px0.20emUppercaseSoft ink
Form inputsJost 40015px0As typedInk
Footer namesCormorant Garamond 40026px0.10emUppercaseInk
Footer detailsJost 40012px0.20emUppercaseFaint 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

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;
}