Techcle Wiki

Plan

3 min read

Plan 0003: Minimal Editorial Design

Spec: codev/specs/0003-minimal-editorial-design.md

Implementation Strategy

Apply design changes incrementally, testing visual appearance after each phase. All changes are CSS and template modifications - no new dependencies.

Phase 1: Color System

Goal: Replace default colors with brand palette.

Tasks

  1. Update CSS variables in src/styles/global.css:

    :root {
  /* Brand colors from logo */
  --color-cream: #F7F6F3;
  --color-charcoal: #2F3437;
  --color-forest: #3F8358;
 
  /* Derived */
  --color-muted: #6B7280;
  --color-border: #E5E4E1;
 
  /* Map to semantic names */
  --color-bg: var(--color-cream);
  --color-text: var(--color-charcoal);
  --color-link: var(--color-forest);
  --color-text-muted: var(--color-muted);
}

  2. Verify all color references use variables (no hardcoded hex values)

  3. Test: Background is cream, text is charcoal, links are green

Deliverables

  • Brand colors defined in CSS variables
  • All colors use variables
  • Visual verification passes

Phase 2: Logo Integration

Goal: Add logo to header and set up favicon.

Tasks

  1. Update src/layouts/Base.astro header:

    <header class="header">
  <a href="/" class="site-brand">
    <img src="/images/logos/thelongrun-avatar.svg" alt="" class="site-logo" />
    <span class="site-title">The Long Run</span>
  </a>
  <nav>
    <a href="/">Essays</a>
    <a href="/about">About</a>
    <a href="/rss.xml">RSS</a>
  </nav>
</header>

  2. Add logo styles to global.css:

    .site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
 
.site-logo {
  width: 32px;
  height: 32px;
}

  3. Copy public/images/logos/thelongrun-avatar-128.png to public/favicon.png

  4. Update src/components/SEO.astro to include favicon:

    <link rel="icon" type="image/png" href="/favicon.png" />

Deliverables

  • Logo appears in header
  • Favicon shows in browser tab
  • Logo links to home

Phase 3: Typography Refinement

Goal: Improve reading experience with refined typography.

Tasks

  1. Update base typography in global.css:

    html {
  font-size: 18px;
  line-height: 1.7;
}
 
h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
 
h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
 
.prose {
  font-size: 1.05rem;
  line-height: 1.8;
}

  2. Refine blockquote styling:

    blockquote {
  border-left: 3px solid var(--color-forest);
  padding-left: 1.25rem;
  margin: 2rem 0;
  color: var(--color-muted);
}

  3. Update code block styling to match brand:

    code {
  background: rgba(47, 52, 55, 0.06);
  color: var(--color-charcoal);
}
 
pre {
  background: rgba(47, 52, 55, 0.04);
  border: 1px solid var(--color-border);
}

Deliverables

  • Headlines have tighter letter-spacing
  • Body text has generous line-height
  • Code blocks match brand aesthetic

Phase 4: Layout Polish

Goal: Refine spacing and interactive states.

Tasks

  1. Update header layout:

    .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}

  2. Refine link hover states:

    a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
 
a:hover {
  text-decoration: underline;
}
 
.essay-item h2 a {
  color: var(--color-text);
}
 
.essay-item h2 a:hover {
  color: var(--color-link);
}

  3. Add more vertical rhythm to essay list:

    .essay-item {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}
 
.essay-item:last-child {
  border-bottom: none;
}

  4. Polish footer:

    footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
}

Deliverables

  • Header has bottom border separator
  • Essay titles turn green on hover
  • Essay list items have subtle separators
  • Footer is minimal and muted

Testing Checklist

Visual Verification

After each phase, verify:

  • npm run dev - Check local preview
  • npm run build - Build succeeds
  • All pages render correctly (home, essay, about)
  • Mobile responsive (check at 375px width)

Final Acceptance

  • Background is cream (#F7F6F3)
  • Text is charcoal (#2F3437)
  • Links are forest green (#3F8358)
  • Logo appears in header at 32px
  • Favicon shows in browser tab
  • Headlines have letter-spacing
  • Body has generous line-height (1.8)
  • Hover states work on links
  • No visual regressions from original site

Files to Modify

src/styles/global.css      # Main changes
src/layouts/Base.astro     # Header with logo
src/components/SEO.astro   # Favicon link
public/favicon.png         # Copy from logos folder

Notes for Builder

  • Test in browser after each phase - CSS changes are visual
  • Keep the existing mobile breakpoint logic
  • Don’t add any new dependencies
  • The cream background (#F7F6F3) is intentionally warm, not pure white
  • Subtle transitions (0.15s) on hover - nothing flashy

Graph View