01
02
Big Shoulders instrument panel on a teal-stone daylight field — FOURTEEN HOURS in near-black and OF LIGHT. in marine teal at 10.5vw, stacked as a tide table reading, the dark signal band filing Aaron Rai's −9, a 2−8 Tigers loss, and 14.3h of spring sun below the measurement that opened the page.
Why
The hero phrase arrived from today's environmental data, not from the quote feed. 14.3 hours of daylight on May 19th is a precise, almost scientific reading — the kind of number that belongs on a gauge or a tide table. For a site whose entire premise is reading the environment and translating it into design, making the day's most arresting environmental fact into a 152px declaration is the most honest thing the site can do. The phrase is strange enough to stop a scroll ("FOURTEEN HOURS OF LIGHT.") and specific enough to prove it's real. The period lands as finality.
Stack was the only archetype that could render this correctly. A Poster would have isolated the phrase in a void, treating it as a quotation. Stack treats the phrase as the first reading in a series of registers — each horizontal band is a different instrument measuring the same day. Band 1: the primary signal (light). Band 2: secondary signals (golf, baseball, season). Band 3: the work portfolio. Band 4: context and voice. Band 5: capabilities. The page reads vertically like a printed report, which is exactly right for content that presents itself as environmental measurement. Big Shoulders Display at condensed poster scale is the typeface of gauges and highway signs and calibration panels — it carries a number at scale without making it feel decorative.
The teal palette at H:162° was both mandated (the color window permitted 150°–175°, the most constrained window in recent memory) and conceptually inevitable. H:162° is the color of refracted spring light through glass, of clear water, of the atmosphere on a long May afternoon. Against six consecutive dark designs, a near-white ground with saturated teal type is the boldest available move — not because it's louder, but because it's the first daylit page in a week. The color break in the hero phrase is the payload: "FOURTEEN HOURS" arrives in near-black (a measurement stated), then "OF LIGHT." arrives in teal.500 — the thing being measured takes the live color, and you can almost see it.
Visual specification
1. Color Specification
Primary hue — H:162°, the exact chromatic midpoint of the color mandate's permitted window (150°–175°). Marine teal: the color of a glass of water held up to spring light, of tide-pool shallows, of calibration instruments. Not the over-used blue or the obvious green.
Neutral palette — teal-stone family, every step tinted H:162° at chroma ≈ 0.008–0.012 so surfaces participate in the palette without reading as colored:
#F4F9F7#E8F3EF#D0E8E0#A8CEC3#7BB3A6#589488#3E756B#2B5850#1A3B35#0A201CAccent color:
#6FD7C0 (teal.300)#0F9E85 (teal.500)#086A5A (teal.700)#38BEA5 (teal.400)Secondary accent — none. One frequency of light, sustained.
Background:
#F4F9F7 (stone.50)#E8F3EF (stone.100)#065248 (teal.800)Text colors:
#0A201C (stone.900) — near-black with teal cast#2B5850 (stone.700)#589488 (stone.500)#D6F3EC (teal.100)Contrast checks:
2. Typography (chassis: big-shoulders-atkinson)
Hero phrase rendering — display token, clamp(64px, 10.5vw, 152px), Big Shoulders Display condensed, all-caps (natural to the typeface).
FOURTEEN HOURS — stone.900 (#0A201C)OF LIGHT. — teal.500 (#0F9E85)padding-left: 6vwLine heights:
0.92 — ultra-tight for condensed caps, the two lines press together like a billboard1.11.6 (Atkinson Hyperlegible at small scale benefits from generous leading)1.2Letter spacings:
-0.02em — condensed display at scale needs slight tightening0.08em — all-caps at small size needs tracking0em0.03em3. Layout Specification
Archetype — Stack. Full-width horizontal bands, each a distinct visual moment. "FOURTEEN HOURS OF LIGHT." is a reading from an instrument; Stack renders the page as a set of registers — each band a different measurement from the same day.
CSS structure — top-level: display: flex; flex-direction: column; width: 100%; max-width: none; overflow-x: hidden;
width: 100%; display: block;Major dimensions:
min-height: 100vh; padding: 0 6vw; position: relativemin-height: 72px; padding: 20px 6vw; — teal.800 background, full-bleedpadding: 96px 6vw; — stone.50 bg, teal.400 2px rule as section headerpadding: 80px 6vw; — stone.100 bgpadding: 64px 6vw 48px; — teal.800 bg, light textmax-width: none — full canvas6vw throughout (≈ 86px at 1440px)Nav placement — position: absolute; top: 0; left: 0; right: 0; padding: 28px 6vw; display: flex; justify-content: space-between; align-items: center; z-index: 10 — floats over hero band, transparent background. "DOUG MARCH" in stone.900 (font-size: 13px; letter-spacing: 0.1em; font-weight: 600), nav links right in stone.600.
Hero phrase grid zone — phrase block sits padding-top: 0; margin: auto 0; (vertically centered via flex on Band 1). Hero band uses display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 96px; (top padding clears the nav). The two-line phrase block is max-width: none, left-aligned at 6vw. Below the phrase: fine rule width: 40px; height: 2px; background: teal.400; margin: 40px 0 20px; then date metadata font-size: 13px; letter-spacing: 0.08em; color: stone.500; reading "MAY 19, 2026 · 14.3h DAYLIGHT · ☽ WAXING CRESCENT 13%".
4. Component Character
none (0px) throughout. No rounded corners — the phrase is a measurement and everything else inherits that precision.#38BEA5) appears as the WORK section header above the project grid; 1px stone.200 dividers between capabilities rows.background: stone.100 → stone.200 on hover; 2px solid teal.500 left border appears on hovercolor: stone.600 → teal.500 on hoverbackground: transparent; border: 1px solid teal.500 → background: teal.500; color: stone.50 on hover5. Signal Integration
Signal strip (Band 2, teal.800 bg) — single horizontal row, display: flex; gap: 40px; align-items: center; flex-wrap: wrap;. Each item: font-size: 13px; letter-spacing: 0.08em; in teal.100. Items:
⛳ PGA: AARON RAI −9 — teal.300 (#6FD7C0) for the score; winner accented⚾ TIGERS 2−8 — teal.400, loss noted without drama🌱 SPRING · DAY 139 — teal.100☽ CRESCENT 13% — teal.100▶ MEMORIAL DAY IN 6 DAYS — teal.200Sports scores — inline in signal strip, monospaced numerals via font-variant-numeric: tabular-nums. Tigers loss in teal.400 (not suppressed but not celebrated). PGA winner in teal.300 with the score in a slightly larger weight (semibold).
Quote treatment — Churchill's "AN OPTIMIST SEES THE OPPORTUNITY IN EVERY DIFFICULTY." appears in Band 4 (About) as a pull-quote: font-size: clamp(18px, 2.5vw, 28px); font-style: normal; color: teal.700; letter-spacing: -0.01em; border-left: 3px solid teal.400; padding-left: 24px; — an editorial aside to the day's hero measurement, not competing with it.
Daylight data — the signal origin of the hero phrase. Rendered as fine metadata below the hero text: MAY 19, 2026 · 14.3h DAYLIGHT in stone.500, font-size: 13px; letter-spacing: 0.08em.
Music signals — Guided by Voices, My Morning Jacket noted in footer band (Band 5) as NOW PLAYING: micro-label alongside capabilities.
Self-check
Rationale
The hero phrase arrived from today's environmental data, not from the quote feed. 14.3 hours of daylight on May 19th is a precise, almost scientific reading — the kind of number that belongs on a gauge or a tide table. For a site whose entire premise is reading the environment and translating it into design, making the day's most arresting environmental fact into a 152px declaration is the most honest thing the site can do. The phrase is strange enough to stop a scroll ("FOURTEEN HOURS OF LIGHT.") and specific enough to prove it's real. The period lands as finality.
Stack was the only archetype that could render this correctly. A Poster would have isolated the phrase in a void, treating it as a quotation. Stack treats the phrase as the first reading in a series of registers — each horizontal band is a different instrument measuring the same day. Band 1: the primary signal (light). Band 2: secondary signals (golf, baseball, season). Band 3: the work portfolio. Band 4: context and voice. Band 5: capabilities. The page reads vertically like a printed report, which is exactly right for content that presents itself as environmental measurement. Big Shoulders Display at condensed poster scale is the typeface of gauges and highway signs and calibration panels — it carries a number at scale without making it feel decorative.
The teal palette at H:162° was both mandated (the color window permitted 150°–175°, the most constrained window in recent memory) and conceptually inevitable. H:162° is the color of refracted spring light through glass, of clear water, of the atmosphere on a long May afternoon. Against six consecutive dark designs, a near-white ground with saturated teal type is the boldest available move — not because it's louder, but because it's the first daylit page in a week. The color break in the hero phrase is the payload: "FOURTEEN HOURS" arrives in near-black (a measurement stated), then "OF LIGHT." arrives in teal.500 — the thing being measured takes the live color, and you can almost see it.
Signal integration
Signal strip (Band 2, teal.800 bg) — single horizontal row, display: flex; gap: 40px; align-items: center; flex-wrap: wrap;. Each item: font-size: 13px; letter-spacing: 0.08em; in teal.100. Items:
⛳ PGA: AARON RAI −9 — teal.300 (#6FD7C0) for the score; winner accented⚾ TIGERS 2−8 — teal.400, loss noted without drama🌱 SPRING · DAY 139 — teal.100☽ CRESCENT 13% — teal.100▶ MEMORIAL DAY IN 6 DAYS — teal.200Sports scores — inline in signal strip, monospaced numerals via font-variant-numeric: tabular-nums. Tigers loss in teal.400 (not suppressed but not celebrated). PGA winner in teal.300 with the score in a slightly larger weight (semibold).
Quote treatment — Churchill's "AN OPTIMIST SEES THE OPPORTUNITY IN EVERY DIFFICULTY." appears in Band 4 (About) as a pull-quote: font-size: clamp(18px, 2.5vw, 28px); font-style: normal; color: teal.700; letter-spacing: -0.01em; border-left: 3px solid teal.400; padding-left: 24px; — an editorial aside to the day's hero measurement, not competing with it.
Daylight data — the signal origin of the hero phrase. Rendered as fine metadata below the hero text: MAY 19, 2026 · 14.3h DAYLIGHT in stone.500, font-size: 13px; letter-spacing: 0.08em.
Music signals — Guided by Voices, My Morning Jacket noted in footer band (Band 5) as NOW PLAYING: micro-label alongside capabilities.
03
marine teal
hsl(162 85% 34%)
Teal at H:162° — the precise frequency of clear spring water and morning light refracted through glass — holds the measurement phrase at its maximum authority against a near-white field, delivering six consecutive dark builds their first full daylight reversal.
04
Color — 2 ramps, 20 stops
teal
stone
05
No composition grammar. The pipeline had no such concept in the color-directed era.
06