A rugged, utilitarian aesthetic that translates Oscar's grouchy personality into a lived-in, textured interface. Where muninn.austegard.com is a polished raven perched on parchment, this site is a grouch peeking out of a dented trash can — rougher, warmer, mossy. Same family, different temperament.
01 — Palette
Oscar's Colors
Extracted from Oscar the Grouch: mossy olive greens from his fur, warm red from his tongue, and galvanized steel grays from his trash can. Each token has a light and dark mode value.
--grouch
Primary — mossy fur
--grouch-deep
Deep shadow fur
--tongue
Accent — tongue red
--muted
Metadata, captions
--code-bg
Code backgrounds
--link-hover
Link hover → tongue
🗑️
Dark mode = inside the trash can. The background shifts to deep mossy charcoal with a green tint. Greens brighten to glow in the dim interior. The tongue-red accent warms up. Toggle above to preview.
02 — Typography
Type System
Fraunces for display — an optical-size variable font with built-in wonkiness, like hand-painted signage on a trash can. DM Sans for body — clean, readable, gets out of the way. JetBrains Mono for code — a builder's font.
Display — Fraunces
Variable, 400–900, WONK axis
Hi 👋 I'm Oskar
Tools & Utilities
Body — DM Sans
400, 500, 700 + italic
A collection of tools for cyclists, AI tinkerers, and anyone who builds things on the web. Some are polished, some are held together with duct tape. All of them work. Probably.
Mono — JetBrains Mono
400, 500
const grouch = { mood: 'grouchy', habitat: 'trash can' };
03 — Texture
Surface Treatments
Subtle SVG grain over the page background (already active on this page). Galvanized steel gradients for structural elements. Corrugated patterns for emphasis bars.
Grain overlay
Steel gradient
Corrugated
04 — Components
UI Elements
Building blocks that carry the grouch's personality without overdoing it.
Code
const config = {
mood: 'grouchy',
habitat: 'trash_can',
loves: ['trash', 'rain']
};
Tags
cycling
ai-tools
bluesky
web-dev
05 — Family
Relationship to Muninn
Same household, different personalities. Both use CSS custom properties, 70ch max-width, and generous whitespace. But the palettes, textures, and type are distinct.
muninn.austegard.com
Muninn
The raven of memory. Polished, parchment-toned, academic calm.
sage links →
austegard.com (proposed)
austegard.com
The grouch's workshop. Mossy, textured, slightly dented. Charming anyway.
olive links →
Shared DNA: Both sites use the same structural pattern — 70ch max-width,
CSS custom properties for theming, system-like sans-serif body text, minimal decoration,
content-first layout. The grouch's greens complement the raven's
indigo without clashing. The tongue-red accent plays a similar role to muninn's
coral — warm punctuation in a cooler palette.
06 — Implementation
Drop-in CSS
Copy this into your style.css. The entire design system in ~80 lines.
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--grouch: #5d6d3b;
--grouch-deep: #3f4a2b;
--tongue: #a43a3a;
--can: #666963;
--bg: #f0f1eb;
--fg: #242621;
--muted: #767871;
--rule: #d8dad2;
--code-bg: #e6e7df;
--link: #4d5d30;
--link-hover: #a43a3a;
--surface: #ffffff;
--font-display: 'Fraunces', serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--grain-opacity: 0.04;
}
@media (prefers-color-scheme: dark) {
:root {
--grouch: #94a86d;
--grouch-deep: #b2c48e;
--tongue: #e66b6b;
--can: #8e918b;
--bg: #12140f;
--fg: #e2e3dd;
--muted: #7a7c75;
--rule: #2c2f27;
--code-bg: #1d2019;
--link: #a8bc7c;
--link-hover: #e66b6b;
--surface: #1a1d16;
--grain-opacity: 0.06;
}
}
html {
max-width: 70ch;
padding: 2em 1em;
margin: auto;
line-height: 1.6;
font-size: 1.15em;
}
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
min-height: 100vh;
}
/* Grain texture */
body::after {
content: '';
position: fixed;
inset: 0;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,..."); /* SVG noise */
background-size: 256px;
pointer-events: none;
z-index: 100;
}
h1, h2, h3 {
font-family: var(--font-display);
font-variation-settings: "SOFT" 0, "WONK" 1;
line-height: 1.25;
}
h1 { font-size: 2rem; font-weight: 900; }
h2 { font-size: 1.4rem; font-weight: 700; color: var(--grouch); }
a { color: var(--link); transition: color 0.2s; }
a:hover { color: var(--link-hover); }
code, pre {
font-family: var(--font-mono);
background: var(--code-bg);
border-radius: 3px;
}
code { padding: 0.15em 0.4em; font-size: 0.85em; }
pre { padding: 1em; overflow-x: auto; border: 1px solid var(--rule); }