01
02
Bricolage declaration in three stacked lines — near-white setup, aqua teal punchline — deep slate bands descending from manifesto to signal strip to work grid, the craft ethic of "by hand." earning the only color on the page.
Why
The hero phrase arrived from Hacker News today: "I'm going back to writing code by hand" (414 points), a developer's counter-cultural declaration in the age of AI-generated everything. For a personal portfolio site that literally rebuilds its own design daily through AI orchestration, the irony is structural — the phrase is both a sincere statement of craft values and a wink at the mechanism displaying it. That tension makes it poster-worthy: you can read it as aspiration, as critique, or as comedy, and all three readings survive scrutiny. The period after "by hand." is not decoration; it's a full stop against noise.
The Stack archetype was the only honest container. A Specimen (used twice in the last week) would have isolated the phrase from all evidence — but this phrase needs bands below it: the Tigers win that happened while someone was presumably coding, the golf leaderboard filing with quiet scores, the HN context so the viewer knows where the phrase came from. Stack lets the hero declaration stand undivided at full viewport height, then unfolds the supporting world in distinct bands below — signal strip, work grid, capabilities — each with its own background treatment, none competing with the phrase above. Bricolage Grotesque's variable humanist grotesque is exactly right because it has genuine warmth and craft character at display scale; it's not the scream of Anton or Bebas, it's a voice that sounds like a person.
Aqua teal at H:163° was both mandated and correct. The narrow 158°–170° window that remained after eliminating all recent hues happens to be the most precisely "craft-technical" color available: it reads as spring freshness, as the glow of a terminal running a build, as the color of something carefully made. The near-black #0B1C24 ground is not anonymous void — it's tinted blue-green toward H:200° so even the negative space participates in the palette's coherence. The design's single chromatic event is "by hand." landing in vivid teal at the end of the three-line hero block — everything builds to that 10 characters.
Visual specification
1. Color Specification
#EEF3F5#D8E4E9#B3C9D1#8AADB9#628F9F#437282#2E5666#1E3D4E#122837#0B1C24#3EC9B8 (light), #15B39F (default), #0A9687 (dark); glow: rgba(62,201,184,0.25). Contrast vs. bg: ~8.7:1 ✓#0B1C24; card bg: #122837; mid-band bg: #1E3D4E#EEF3F5 (~17.5:1 on bg ✓); secondary: #B3C9D1; muted: #628F9F2. Typography
display chassis token, clamp(52px, 7.8vw, 118px). Three stacked lines, left-aligned at 6vw from left edge, filling ~85% canvas width:
I'm going back
to writing code
by hand.
#D8E4E9 (neutral.100, warm near-white). "by hand." in vivid teal #3EC9B8 — the phrase earns its color at the landing. Bricolage Grotesque's variable weight pulls toward 700 at this size.body chassis token at 11px, letter-spacing: 0.10em, ALL CAPS, in neutral.400: ↑ HACKER NEWS · 414 PTS · MAY 11sm chassis token at 13px, tabular-nums for scores, neutral.200lg chassis token at clamp(18px, 2vw, 28px), neutral.50base chassis token at 16px, neutral.200, line-height 1.5-0.025em; body: 0em; caps/labels: 0.10em3. Layout Specification
display: flex; flex-direction: column; width: 100vw; overflow-x: hidden. Each band: width: 100%; padding: 0 6vw.height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; bg: transparent overlaid on hero bandmin-height: 88vh; bg: #0B1C24; phrase aligned to padding-bottom: 10vh (bottom-weighted)height: 112px; bg: #122837; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: centermin-height: 60vh; bg: #1E3D4E; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1pxmin-height: 40vh; bg: #0B1C24; two-column listmax-width: none throughout; padding: 0 6vw for breathing roomletter-spacing: 0.06embottom: 10vh; left: 6vw. The three lines cascade left at display scale. Eyebrow sits 20px above the first hero line.4. Component Character
none (0px — the craft ethos is sharp-edged); buttons: none; tags: 2px#1E3D4E lines.background transitions to #1E3D4E on hover (200ms ease); project titles shift to #3EC9B8; nav links: opacity 1 → 0.7 on hover with accent color crossfade; cursor: pointer5. Signal Integration
#3EC9B8 (accent teal), weight bold, font-variant-numeric tabular-nums. Label above: "TIGERS" in neutral.400 caps 11px letter-spaced.↑ HACKER NEWS · 414 PTS · MAY 11 in neutral.400 at 11px all-caps. The quote IS the attribution — the hero phrase is contextualized but not diminished.Self-check
Rationale
The hero phrase arrived from Hacker News today: "I'm going back to writing code by hand" (414 points), a developer's counter-cultural declaration in the age of AI-generated everything. For a personal portfolio site that literally rebuilds its own design daily through AI orchestration, the irony is structural — the phrase is both a sincere statement of craft values and a wink at the mechanism displaying it. That tension makes it poster-worthy: you can read it as aspiration, as critique, or as comedy, and all three readings survive scrutiny. The period after "by hand." is not decoration; it's a full stop against noise.
The Stack archetype was the only honest container. A Specimen (used twice in the last week) would have isolated the phrase from all evidence — but this phrase needs bands below it: the Tigers win that happened while someone was presumably coding, the golf leaderboard filing with quiet scores, the HN context so the viewer knows where the phrase came from. Stack lets the hero declaration stand undivided at full viewport height, then unfolds the supporting world in distinct bands below — signal strip, work grid, capabilities — each with its own background treatment, none competing with the phrase above. Bricolage Grotesque's variable humanist grotesque is exactly right because it has genuine warmth and craft character at display scale; it's not the scream of Anton or Bebas, it's a voice that sounds like a person.
Aqua teal at H:163° was both mandated and correct. The narrow 158°–170° window that remained after eliminating all recent hues happens to be the most precisely "craft-technical" color available: it reads as spring freshness, as the glow of a terminal running a build, as the color of something carefully made. The near-black #0B1C24 ground is not anonymous void — it's tinted blue-green toward H:200° so even the negative space participates in the palette's coherence. The design's single chromatic event is "by hand." landing in vivid teal at the end of the three-line hero block — everything builds to that 10 characters.
Signal integration
#3EC9B8 (accent teal), weight bold, font-variant-numeric tabular-nums. Label above: "TIGERS" in neutral.400 caps 11px letter-spaced.↑ HACKER NEWS · 414 PTS · MAY 11 in neutral.400 at 11px all-caps. The quote IS the attribution — the hero phrase is contextualized but not diminished.03
aqua teal
hsl(163 72% 52%)
Aqua teal at H:163° — the narrow open window between all recent palette zones — reads as spring-fresh and precision-craft simultaneously: the color of a well-cleaned terminal, a soldering pen's glow, the exact hue of something made by hand with care.
04
Color — 2 ramps, 20 stops
primary
neutral
05
No composition grammar. The pipeline had no such concept in the color-directed era.
06