Design: Warm Parchment + Verdigris Aeronautical Theme

[ALRubinger]

Design proposal: Warm Parchment + Verdigris Aeronautical Theme

This PR proposes a new visual design direction for the Aileron docs site, developed through an iterative exploration. It replaces the current neutral gray palette with a warm, distinctive system built around two ideas:

The palette

Warm parchment backgrounds — the base uses very-low-chroma cream/buff neutrals (oklch hue ~75–80) so pages feel like reading quality paper rather than staring at a screen. The sidebar is slightly warmer/darker than the page body, giving a tonal separation like a book's margin vs its text block.

Verdigris accent (oklch(0.44 0.13 188)) — the oxidised-copper green of antique scientific instruments, aeronautical charts, and maritime compasses. It reads as distinctive without being loud, contrasts cleanly on cream at WCAG AA, and is completely clear of Claude's amber/orange brand space.

The aeronautical layer

"Aileron" is a flight control surface. The design folds in aeronautical chart language as a subtle texture layer — visible to anyone who knows aviation, invisible as theming to everyone else:

• Graticule grid — the latitude/longitude crosshatch of a VFR sectional chart runs at very low opacity across the page and sidebar (.chart-graticule CSS utility class)
• Compass rose watermark — in the main content area (currently in mockup only — can be added as a background SVG to the prose layout if desired)
• Bearing arrows — section headings (h2) get a small verdigris vector arrow prefix via CSS ::before, matching the course-heading notation on aeronautical charts
• Waypoint diamond — the active sidebar item is marked with a small filled rotated square (the standard aeronautical waypoint fix symbol), replacing the plain left border bar
• VOR range rings — faint concentric circles in the sidebar's lower corner, like a VHF Omnidirectional Range station radius on a sectional chart
• Brand wordmark — "AILERON" in verdigris, spaced as a chart label, with "Docs" in muted foreground beside it

Typography

• Inter replaces the system font stack for body and headings — tighter, more architectural
• JetBrains Mono replaces the default monospace for all code blocks

Files changed

File	Change
docs/src/styles/global.css	New warm-parchment + verdigris CSS variable system, graticule utility, bearing-arrow heading pseudo-element, Inter/JetBrains Mono imports, verdigris scrollbar
docs/src/layouts/BaseLayout.astro	Google Fonts preconnect + stylesheet link, updated header with verdigris wordmark + plane icon badge, chart-graticule on body and header, removed hardcoded .dark class
docs/src/components/Sidebar.svelte	Verdigris active states (text-primary), waypoint diamond indicator, VOR range ring SVG, section header labels in uppercase tracking style

What this does not change

• No Astro content files, no MDX, no navigation structure
• No package.json changes (fonts loaded via CDN <link>)
• No shadcn component changes — all colour tokens map through the existing CSS variable system

---

Mockup developed interactively in Replit — canvas previews available showing all explored directions (dark verdigris, ink blue, claret, and the final warm-parchment variant).

[railway-app]

🚅 Deployed to the aileron-pr-382 environment in aileron

Service	Status	Web	Updated (UTC)
docs	✅ Success (View Logs)	Web	Apr 30, 2026 at 7:23 pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.84%. Comparing base (2532022) to head (f9e7a50).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #382      +/-   ##
==========================================
- Coverage   83.94%   82.84%   -1.11%     
==========================================
  Files         186      186              
  Lines       18876    18876              
==========================================
- Hits        15846    15638     -208     
- Misses       2193     2419     +226     
+ Partials      837      819      -18     

Flag	Coverage Δ
integration	10.08% <ø> (-9.98%)	⬇️
unit	78.50% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.