Draft for discussion. Colors, type and layout will be refined after our call.

Design System · Draft

Color

Taken from the show artwork: the warm dark around the edges, the glow of the parchment, and the orange frame. Orange is the show's signal color, used for "play" and "this is the show."

Aa
Night
#1E1A17

Deepest background: hero, footer

Aa
Umber
#2E2823

Raised surface on dark: player

Aa
Sepia
#7A5A3A

Parchment glow: gradients, accents

Aa
Oath Orange
#F5961E

The frame. Play, "Latest." Dark backgrounds only.

Aa
Ember
#9A4A08

Links and buttons on light

Aa
Parchment
#EFE6D6

Light section background

Aa
Vellum
#F8F4EC

Page background; text on dark

Aa
Ink
#2A221C

Text on light

Aa
Ink Muted
#6B5A4A

Dates, captions on light

Aa
Vellum Muted
#B9AC98

Secondary text on dark

 
Rule
#D6C8B0

Hairline dividers (decorative)

Text contrast, WCAG 2 (AA needs 4.5:1 for body text; AAA needs 7:1)
PairRatioResult
Vellum on Night15.75:1AAA
Vellum on Umber13.26:1AAA
Vellum Muted on Night7.75:1AAA
Orange on Night7.62:1AAA
Night on Orange7.62:1AAA
Orange on Umber6.42:1AA
Vellum on Sepia5.71:1AA
Ink on Vellum14.24:1AAA
Ink on Parchment12.62:1AAA
Ink Muted on Vellum6.01:1AA
Ink Muted on Parchment5.32:1AA
Ember on Vellum5.70:1AA
Ember on Parchment5.05:1AA
Vellum on Ember5.70:1AA
Orange on Parchment1.83:1Fails: not used for text

Type

The artwork's title uses classical Roman capitals. Cinzel is the closest free web match, used for the show name, section heads and buttons. Libre Caslon Text, from the Caslon family of 18th-century American printing, carries titles and reading text.

Display · Cinzel 400
clamp 40–88px

The Oath and the Office

H2 · Cinzel 400
44px

This Week

Featured title · Caslon 400
35px

The Presidents and the People

Card title · Caslon 400
28px

Sample essay title set at a realistic length to test wrapping

Subtitle / quote · Caslon italic
22.5px

Five Leaders Who Threatened Democracy and the Citizens Who Fought to Defend It

Body · Caslon 400
18px / 1.6

Sample paragraph. This is how running text will read on the site: episode descriptions, essay excerpts and the About section all use this face at 18px with generous line spacing, so longer reading stays comfortable on a phone. Italic for titles and emphasis, and bold used sparingly.

Label · Cinzel 700
12.8px, tracked

Latest Episode · Listen · Read on Substack

Spacing

A 4px base. Each component uses the step that suits it, from tight label gaps to wide section breaks.

4 · 8 · 12
16 · 24 · 32
48 · 64 · 96 · 128

Homepage mockup

Components in Place

A rough layout to show the system at work. All titles, dates and copy below are samples, not real content.

The Oath and the Officewith Corey Brettschneider

Latest Episode · [Date] Sample

Sample episode title set at a realistic length to test wrapping

Episode [00] · 52 min

[Sample description] Two or three lines from the episode's show notes appear here, pulled in automatically from the podcast feed.

9:24 52:14
Sample thumbnail

Video · 48:10

Sample video title: the full episode as it appears on YouTube

[Date] Sample

Essay · Substack

Sample essay title set at a realistic length

[Date] Sample

[Sample excerpt] The opening lines of the latest essay appear here, about four lines at most, so readers get enough of the argument to want the rest. The full piece lives on Substack, and this card links straight to it. Anything past the fourth line is trimmed.

Read the full essay on Substack →

The New Book

The Presidents and the People

Five Leaders Who Threatened Democracy and the Citizens Who Fought to Defend It

[Publisher description goes here] A short paragraph about the book, supplied by Corey or the publisher, set at a comfortable reading width.

[Review quote, to be supplied. Only real, sourced quotes appear here.]

[Reviewer, Publication]