Spec

Spec 0003: Minimal Editorial Design

Overview

Apply a cohesive visual design to The Long Run site using brand colors from the logo, refined typography, and a clean editorial aesthetic inspired by iA Writer and Bear blog.

Goals

1. Establish a consistent visual identity using the logo’s color palette
2. Add the logo to the site header
3. Improve typography for comfortable long-form reading
4. Create a design that feels timeless and editorial
5. Maintain simplicity - no decorative elements

Non-Goals

• Dark mode (can be added later)
• Custom fonts (system fonts are intentional for longevity)
• Complex layouts or sidebars
• JavaScript-driven interactions

Requirements

R1: Color System

Derive the design system from the logo colors:

:root {
  /* From logo */
  --color-cream: #F7F6F3;      /* Background - warm off-white */
  --color-charcoal: #2F3437;   /* Text - dark gray */
  --color-forest: #3F8358;     /* Accent - green */
 
  /* Derived */
  --color-muted: #6B7280;      /* Secondary text */
  --color-border: #E5E4E1;     /* Subtle borders */
}

Usage:

• Page background: --color-cream
• Body text: --color-charcoal
• Links and accents: --color-forest
• Metadata/dates: --color-muted

R2: Logo Integration

Add the logo to the site header:

Desktop: Logo (SVG, 32px height) + “The Long Run” text Mobile: Logo only or logo + abbreviated text

Logo files available:

• public/images/logos/thelongrun-avatar.svg (scalable)
• public/images/logos/thelongrun-avatar-128.png (favicon)

Favicon: Use the 128px PNG or generate proper favicon sizes.

R3: Typography Refinement

Keep system fonts but refine the typography:

html {
  font-size: 18px;           /* Base size */
  line-height: 1.7;          /* Generous for reading */
}
 
h1 {
  font-size: 2.25rem;
  font-weight: 600;          /* Slightly lighter than bold */
  letter-spacing: -0.02em;   /* Tighten headlines */
}
 
.prose {
  font-size: 1.1rem;         /* Slightly larger body */
  line-height: 1.8;          /* Extra breathing room */
}

R4: Layout Adjustments

Content width: Keep 680px max-width (optimal for reading)

Spacing:

• More vertical rhythm between sections
• Generous margins around blockquotes
• Clear separation between essay list items

Header:

• Simple horizontal layout: logo + site name on left
• Navigation links on right (Home, About, RSS)
• Subtle bottom border using --color-border

Footer:

• Minimal: copyright + RSS link
• Use --color-muted for text

R5: Interactive States

Links:

• Default: --color-forest with no underline
• Hover: Underline appears
• Visited: Slightly muted green (optional)

Essay titles in list:

• Default: --color-charcoal
• Hover: --color-forest

R6: Code Blocks

Style code to fit the editorial aesthetic:

code {
  background: rgba(47, 52, 55, 0.06);  /* Charcoal at 6% */
  color: var(--color-charcoal);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}
 
pre {
  background: rgba(47, 52, 55, 0.04);  /* Charcoal at 4% */
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

Acceptance Criteria

1. Colors match logo - Page background is cream, text is charcoal, links are forest green
2. Logo appears in header - SVG logo renders at correct size
3. Favicon works - Browser tab shows the logo
4. Typography is refined - Headlines have letter-spacing, body has generous line-height
5. Links use green accent - All links are forest green, underline on hover
6. Mobile responsive - Site looks good on phone screens
7. No visual regressions - All existing content still renders correctly

Design Reference

Inspiration:

• iA Writer (clean, focused, system fonts)
• Bear Blog (minimal, fast, editorial)
• Craig Mod’s essays (generous typography, warm tones)

Anti-inspiration (avoid):

• Heavy drop shadows
• Gradient backgrounds
• Decorative borders
• Complex grid layouts

Files to Modify

• src/styles/global.css - Main stylesheet
• src/layouts/Base.astro - Add logo to header, update favicon
• src/components/SEO.astro - Add favicon links
• public/favicon.ico - Generate from logo PNG

Out of Scope

• Dark mode toggle
• Theme customization
• Print stylesheet
• Animation/transitions beyond hover states