01
02
Violet-tinted void meets near-white in a columnar portfolio where full moon clarity drives ~19:1 contrast, spring moss accents appear only when earned through interaction, and three audience-specific columns (creative direction, technical depth, context) replace sidebar patterns—edited, not decorated.
Why
The full moon (96.5% illumination) and its demand for maximum clarity architect the entire token system. Hue 280° (cool violet) tints all neutrals at 5–8% saturation—imperceptible warmth, unifying the palette through a single hue family rather than temperature shifts. The result: #09080B page background against #F0EDF6 near-white text creates ~19:1 contrast, matching the high-visibility environment of a full moon night and mirroring the brief's "lucid" mood. Spring moss green (H 140°, S ~31%) is deployed with deliberate constraint—full saturation appears exactly once per viewport (the 2px accent rule above featured work), everywhere else reduced to interaction states or disabled opacity. This restraint honors both the spring signal and the full moon's monochromatic discipline. The broadsheet archetype (three columns segmented by audience role) organizes information with editorial clarity and density appropriate to Wednesday's midweek focus. No shadows, no gradients—instead, hairline dividers (1px), precise letter-spacing (7-value scale from −0.025em to +0.15em), and breathing room in line-height (1.05–1.85) echo Radiohead's geometric accuracy and Guided by Voices' raw, unadorned intentionality.
Mood
A night of maximum visibility meets the midweek grind. Spring's renewal energy is here, but it's Wednesday—the moon is nearly full and bright enough to cast shadows, yet we're in the thick of work, not celebration. There's a productive tension today: the Hacker News conversation around decentralization and platform independence (Ghostty leaving GitHub, Radicle adoption) collides with the collaborative, audience-first thinking in today's Awwwards sites. Build the design to feel both luminous and focused—bright but not festive, clear but not sparse. Let the full moon's contrast live alongside the quiet competence of a mid-week portfolio review.
Composition direction
Broadsheet with Specimen moments.
Today calls for editorial clarity and information hierarchy—Broadsheet's strength—but punctuated by moments of extreme detail and close-reading (Specimen). The Awwwards references show sites built for multiple distinct audiences (The Push, peace put) and strategic layering (THE UN KNOWN). A Broadsheet structure lets you organize information with columnar clarity while landing specific projects or insights with specimen-level zoom. The full moon's high contrast and Wednesday's midweek focus both favor structured, legible composition over loose exploration.
Typography direction
Generous vertical breathing but tight, precise horizontal spacing. Headings should whisper authority rather than shout—this is Wednesday professionalism, not a launch day. Let the type scale be generous (the daylight is long at 13.6 hours, and the full moon deserves visual air), but lock down letter-spacing and line-height with confidence. The Radiohead influence should live here: angular precision in tracking and alignment, not in serif/sans choices. Avoid softness; favor clarity and intentional spacing over decoration.
Signal integration
Full moon (96.5% illumination) → High contrast in light/dark balance throughout. This is the dominant atmospheric signal. Increase separation between foreground and background elements. Shadows should be crisp, highlights bright. Use this to create visual clarity that mirrors the moon's illumination—think stark, readable, almost theatrical. This is felt first when landing on the site.
Hacker News: Ghostty/platform independence discourse → Subtle decentralization visual language. Not heavy-handed. Work the idea of distribution and independence into layout—perhaps asymmetrical composition choices, or elements that don't rely on a central axis. The news cycle is discussing leaving centralized platforms; let that thinking inform how information is organized without making it literal.
Awwwards sites: multi-audience design + strategic layering → Implement clear audience segmentation or role-based entry points. Today's reference sites succeed by serving multiple stakeholders clearly. If dougmar.ch surfaces different work for different viewers (technical depth vs. creative direction vs. collaboration examples), this is the day to make those pathways more explicit through composition.
Spring season (April, fresh growth) → Restrained green or growth-adjacent accent. Not aggressive. A single accent color drawn from spring—moss, sage, or muted chartreuse—used sparingly in typography, underlines, or minimal border elements. Saturation should be moderate, not pop. This is texture, not dominance.
Detroit Tigers loss (2-5) → Dismissive callout, tucked low or in footer. If sports results appear on the site, acknowledge the loss with wry editorial voice—brief scoreline, maybe a one-liner with swagger. Not sad, not celebratory. Just a fact stated with personality. Keeps the mood grounded; prevents the design from feeling saccharine.
Radiohead + Guided by Voices on rotation → Angular precision in type rendering and alignment. Radiohead's geometric precision should influence kerning and baseline alignment. Guided by Voices' lo-fi ethos permits imperfection but demands intentionality. The tension between precision (Radiohead) and rawness (GBV) should show up as confident but unstyled typography—no unnecessary flourishes.
Oscar Wilde quote ("Whenever people agree with me I always feel I must be wrong") → Optional anchor for contrarian positioning. If this resonates with the portfolio's voice, feature it briefly—perhaps as a small epigraph or in a footer callout. It's a meta-commentary on taste and independent thinking. Only include if it genuinely reflects how dougmar.ch positions itself; don't force it.
Palette direction
Cool-to-neutral base (no warm temperature signal today) with high contrast to match the full moon's visibility. Spring saturation is moderate—avoid pastels or washed tones; favor clarity over softness. Think of the palette as lucid: clean neutrals (near-white, true gray, deep charcoal) with a single restrained accent in spring green or moss. Contrast should be high throughout—the long daylight (13.6 hours) and near-full moon both permit and reward brightness and shadow separation. Avoid muddy mid-tones; favor legibility and visual separation. This is a cool, clear palette with minimal color noise.
03
cool violet
hsl(280 6% 50%)
Hue 280° violet-tints all neutrals at 5–8% saturation to mirror moonlight through spring air—imperceptibly warm-free. Page void (#09080B) against near-white text (#F0EDF6) creates ~19:1 contrast matching the full moon's visibility. Spring moss (H 140°, S ~31%) deployed at full strength exactly once per viewport (2px rule above featured work); elsewhere reduced opacity or interactive only. No second accent hue—the violet cast of the neutrals provides all secondary color energy. Discipline befits the full moon's clarity and Wednesday's focused midweek tempo.
04
Color — 2 ramps, 14 stops
neutral
moss
05
No composition grammar. The pipeline had no such concept in the color-directed era.
06