Colors — Core Palette

Background #F5F0E8
Surface #FFFDF8
Ink #2C2520
Muted #6B5F56
Faint #9A8E84

Colors — Accent

Accent (Terracotta) #C0693B
Link (Teal) #2A7B7B
Selection (Gold) #C49A3C

Colors — Sections

Travel #2A7B7B
Poetry #7B5EA7
Entertainment #D4635C
Fashion #C4617A
Art #B8862C
Music #3B6FA0
Dance #C0693B
Letters #5D6B7A

Typography

Masthead — Playfair Display

The Traveling Times

Headlines — Lora

A Beginner’s Guide to Painting with Watercolors

Body — Source Serif 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

UI — DM Sans

TRAVEL · 5 MIN READ · MARCH 15, 2026

Type Scale

--text-4xl The Traveling Times
--text-3xl The Traveling Times
--text-2xl The Traveling Times
--text-xl The Traveling Times
--text-lg The Traveling Times
--text-md The Traveling Times
--text-base The Traveling Times
--text-sm The Traveling Times
--text-xs The Traveling Times

Section Badges

Travel Poetry Entertainment Fashion Art Music Dance Letters

Buttons

Buttons use --color-ink by default, with --color-accent for the accent variant. Hover swaps background and text colors.

Spacing Scale

The spacing scale uses --space-{n} tokens based on a 0.25rem (4px) base unit.

--space-1 0.25rem
--space-2 0.5rem
--space-3 0.75rem
--space-4 1rem
--space-6 1.5rem
--space-8 2rem
--space-10 2.5rem
--space-12 3rem
--space-16 4rem
--space-20 5rem
--space-24 6rem

Borders & Radius

--radius-sm: 2px   --radius-md: 4px

Corners are kept tight for a print-editorial feel. Rule colors: --color-rule for light dividers, --color-rule-heavy for emphasis.