← Back to site

Warm Paper

Design system for a personal site — minimal, warm, and readable.

Colors

A restrained palette built on warm neutrals with a single brown accent. Designed to feel like aged paper with quality ink.

Background
#faf9f6
Text
#2c2c2c
Secondary
#6b6b6b
Accent
#8b7355
Divider
#e8e4df

Typography

Headings use Libre Baskerville for warmth and authority. Body text uses Source Serif 4 for superior readability at length.

Heading 1
The quiet craft of making
Libre Baskerville / 2rem (32px) / 700 / 1.3
Heading 2
Selected Work
Libre Baskerville / 1.25rem (20px) / 700 / 1.4
Heading 3
About this project
Libre Baskerville / 1.1rem (17.6px) / 700 / 1.4
Body
I design thoughtful digital products and write about the intersection of technology, craft, and everyday life. The best work comes from restraint.
Source Serif 4 / 1rem (18px) / 400 / 1.7
Small
Product Design, 2024 — A reading app for long-form essays.
Source Serif 4 / 0.85rem (15.3px) / 400 / 1.6
Caption
© 2024 Alex Reed. All rights reserved.
Source Serif 4 / 0.75rem (13.5px) / 400 / 1.5

Spacing

An 8px-based scale with generous vertical rhythm. White space is a feature, not a bug.

xs — 4px
sm — 8px
md — 16px
lg — 24px
xl — 32px
2xl — 48px
3xl — 64px
4xl — 96px

Links & Buttons

Interactions are subtle — color shifts and underlines on hover. No heavy drop shadows or transformations.

Default link — accent color, underline on hover Subtle link — secondary color, accent on hover
Button Accent Button

Dividers

Thin, warm-toned lines to separate content without visual weight.

Thin (default) — 1px solid #e8e4df

Thick — 2px solid #e8e4df

Accent (short) — 1px solid #8b7355, 60px wide

Cards

Minimal bordered containers for grouping content. No shadows — just a thin warm border.

Tidal — A reading app
A focused reading environment for long-form essays and articles. Designed around distraction-free consumption.
Product Design · 2024
On Slowness
A three-part essay series exploring the value of deliberate pacing in creative work and daily life.
Writing · 2023

Layout

Single column, max-width 640px, centered. Generous padding on all sides. Content breathes.

Header — name & tagline
Bio section
Work list
Footer & links

Design Principles

1. Restraint over decoration

Every element should earn its place. When in doubt, remove.

2. Warmth over cold precision

Serif fonts, cream backgrounds, and brown tones create an inviting, human feel.

3. Space is content

Generous whitespace improves readability and signals confidence.

4. Quiet interactions

Hover states should be subtle — a color shift, not a transformation.