01
02
Bebas + Plex ruled index on amethyst-stone white — "BECOMES THE STORY" fired in full-saturation magenta across a stone.900 masthead, seven projects and six signals cataloged below in 1px-ruled three-column directory, every row a proof of the claim above it.
Why
The phrase "craft itself becomes the story" arrived from the Awwwards "Power of Storytelling" description in today's signals — and it earns its place as the hero because it is not merely about digital design in general, but about this specific page in particular. A portfolio that redesigns itself every morning, that treats its own construction as the demonstrandum, is a page on which craft literally IS the story. The phrase stands alone without context because any visitor who has arrived here and read it is already looking at the proof. No quote from signals.quote (Celestine Chua's inward-looking aphorism) and no signal-derived headline (Henley at -13, a Xeon that's still running) matched this self-referential precision.
The Index archetype followed directly: if the claim is that craft tells the story, the strongest counter-move to making that claim in a centered hero on a white field is to SHOW the catalog of craft — to make the page itself a directory where every row (seven projects, six signals, career timeline, capabilities) is a line item in the ongoing story. The Index is the only archetype that makes proof structural. A Poster would let the phrase rest on its own authority. An Index makes you earn that authority row by row. The bebas-plex chassis is the only viable pairing: Bebas Neue is the typeface of directories, transit schedules, and catalog headers — institutional declaration without ornament — and IBM Plex Sans is the humanist workhorse that makes the body rows readable at 11–13px density. The two together are precisely the catalog register this archetype requires.
Vivid magenta at H:305° is the only hue family the color mandate left untouched after seven consecutive palettes of ambers, greens, reds, and blues. That constraint was a gift: H:305° is the hue of neon signs in studio windows, of late-night creative pressure reaching its peak — appropriate for June 1, a full moon, and a phrase about the craft being so alive it narrates itself. The violet-tinted amethyst stone neutrals (rather than pure grey) give every catalog row a subconscious cohesion with the magenta accent: the surfaces are part of the same chromatic family as the accent, just drained of saturation, so every row of the index lives in the same world as the hero phrase firing above it.
Visual specification
1. Color Specification
#FAF8FC#F2EFF6#E3DFEC#CBBFDA#B09EC3#8B7AAA#665888#4A3D6A#312548#1A1520#E048D8 (magenta.400)#A01098 (magenta.600, ≈6.3:1 on stone.50 — passes AA body)#C820BF (magenta.500, ≈4.3:1 on stone.50 — passes AA large text)#780870 (magenta.700)0 0 20px rgba(200, 32, 191, 0.35)#FAF8FC (stone.50)#1A1520 (stone.900)#F2EFF6 (stone.100)#1A1520 (~17:1 on stone.50 — excellent)#4A3D6A (stone.700, ~8:1 on stone.50)#8B7AAA (stone.500, ~3.2:1 — use at 18px+ / bold only)#FAF8FC (stone.50)2. Typography (chassis-derived: Bebas Neue + IBM Plex Sans via bebas-plex)
Hero phrase rendering: Bebas Neue (display token), two lines left-aligned in the dark masthead:
CRAFT ITSELF — color stone.50 (#FAF8FC)BECOMES THE STORY — color magenta.400 (#E048D8)clamp(52px, 5.8vw, 92px). At 92px, "BECOMES THE STORY" (17 chars) ≈ 850px wide within 1296px available — fits cleanly.MON 01 JUNE 2026 · FIRST DAY OF SUMMER · FULL MOON 96.5%Index column headers: Bebas Neue, 13px, 0.15em letter spacing, stone.500. Labels: WORK, SIGNALS, ABOUT.
Index row names (project/signal titles): Bebas Neue, 18px, 0.08em letter spacing, stone.900. On hover: magenta.500.
Index row meta (year, type, score): IBM Plex Sans, 11px, 0.05em letter spacing, stone.500, all-caps.
Index row description (one-line brief): IBM Plex Sans, 13px, 0em letter spacing, stone.700. Max one line, no truncation — trim the copy.
Nav links: IBM Plex Sans, 13px, 0.08em letter spacing, stone.400, all-caps. Hover: magenta.400.
Line heights: Hero Bebas: 0.92 (tight stack); Index rows: 1.25 (snug); Description body: 1.5 (normal).
Letter spacings: Hero display: 0.06em; Column headers: 0.15em; Row names: 0.08em; Meta: 0.05em; Body: 0em.
3. Layout Specification
Archetype: Index. "Craft itself becomes the story" declares the thesis in the masthead; everything below — seven projects, five signals, career entries, capabilities — is the evidence, presented as a ruled directory where each row carries weight equal to every other. The catalog IS the proof of the hero claim.
CSS grid/flex structure:
/* Full page */
display: grid;
grid-template-rows: 48px minmax(28vh, auto) 36px 1fr;
/* nav | masthead | column-headers | index-body */
/* Masthead (col-spanning full width across all 3 index cols) */
padding: 36px 5vw 52px;
background: #1A1520;
/* Column headers + index body */
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
column-gap: 0;
padding-left: 5vw;
padding-right: 5vw;
/* Column dividers: border-right on cols 1 and 2 */
border-right: 1px solid #E3DFEC; /* stone.200 */
/* Row rules: border-bottom on every index row */
border-bottom: 1px solid #E3DFEC;
Major dimensions:
height: 48px; padding: 0 5vw; (fixed, dark)min-height: 28vh; padding: 36px 5vw 52px; (dark)height: 36px; border-bottom: 2px solid #1A1520;flex: 1 / min-height: ~60vhnone — full viewport, no centering constraint5vw everywhereNav placement: Top bar, 48px height, stone.900 bg flush with masthead. Left: site name "DOUG MARCH" in Bebas 20px, stone.50. Right: nav links (WORK, ABOUT, CONTACT) in IBM Plex Sans 13px, stone.400, uppercase, 0.08em tracking. Hover: magenta.400, 0.1s ease.
Hero phrase grid zone: Full-width masthead row, spans all 3 column zones. Left-aligned at 5vw. Two-line Bebas at clamp(52px, 5.8vw, 92px). Line 1 stone.50; Line 2 magenta.400. Date/season tagline 8px below the phrase, IBM Plex Sans 12px stone.400.
4. Component Character
Border radius: 0px throughout — no softening. The Index catalog is angular; rounded corners would undercut the catalog register.
Border treatment: Ruled — 1px stone.200 horizontal between every index row; 1px stone.200 vertical between columns; 2px stone.900 bold rule separating column headers from index body (visual demarcation). No card borders — the row IS the container.
Shadow: None. Flat system. Depth comes from rule weight, color contrast, and type hierarchy — not elevation.
Density: Compact. Index row height 48px, row padding 10px 16px. Column header padding 8px 16px. Everything touching the grid; no float space. 12 rows per column fits comfortably in a 900px viewport after nav (48px) + masthead (≈252px) + headers (36px).
Interactive states: Row hover → row bg shifts to #FDF0FC (magenta.50), row name shifts to #C820BF (magenta.500). Transition: 80ms ease, flat — no shadow, no scale, no border-color change. Clean catalog interaction.
5. Signal Integration
Where signal elements live: Center column of the index, under the SIGNALS column header. Every signal is formatted identically to every work entry — Bebas row name, IBM Plex Sans meta, one-line description. The signals are catalog-peers of the work.
Sports scores styled:
SCHWAB CHALLENGE in Bebas, meta RUSSELL HENLEY −13 · FINAL in IBM Plex Sans 11px stone.500. Description: → 15TH CLUB in magenta.600 13px (cross-reference to Doug's golf AI project — a small proof that the index has depth).DETROIT TIGERS in Bebas, meta 1–2 LOSS · MAY 31 in stone.500. Description: Close game, wrong side in stone.700 italic.Quote displayed as: NOT the hero phrase. Rendered beneath the two-line hero in the masthead as a sub-footnote — IBM Plex Sans italic 13px, stone.500 (on dark masthead): "If you look inwards, you'll find the answer has been in you all along." One line, subdued, registering as context not declaration.
Full moon: Signal row: FULL MOON Bebas label, meta 96.5% · DAY 16 OF CYCLE, with a filled Unicode circle ● in magenta.400 at 10px before the label.
HN top story: Signal row: HN label (Bebas), meta CLOUDFLARE TURNSTILE WEBGL — 698 PTS, description fingerprinting concerns, 2026 in stone.700.
Music: Signal row: LISTENING label, meta GUIDED BY VOICES · MY MORNING JACKET.
First day of summer / date: Embedded in masthead tagline below hero phrase: MON 01 JUNE 2026 · FIRST DAY OF SUMMER · FULL MOON — IBM Plex Sans 12px, stone.400, all-caps, 0.12em tracking. Not a separate component — part of the masthead declaration zone.
Every noteworthy signal appears: Golf ✓, Tigers ✓, Moon ✓, HN top ✓, Music ✓, Season ✓. Daylight hours (14.6 hrs) can appear as a signal row: DAYLIGHT label, 14.6 HRS · SUNRISE 04:51 / SUNSET 19:24.
Self-check
clamp(52px, 5.8vw, 92px) in a two-line split, left-aligned in a 28vh dark masthead at 1440×900, with "CRAFT ITSELF" (~12 chars) and "BECOMES THE STORY" (~17 chars) both fitting within 1296px available width at maximum scale.Rationale
The phrase "craft itself becomes the story" arrived from the Awwwards "Power of Storytelling" description in today's signals — and it earns its place as the hero because it is not merely about digital design in general, but about this specific page in particular. A portfolio that redesigns itself every morning, that treats its own construction as the demonstrandum, is a page on which craft literally IS the story. The phrase stands alone without context because any visitor who has arrived here and read it is already looking at the proof. No quote from signals.quote (Celestine Chua's inward-looking aphorism) and no signal-derived headline (Henley at -13, a Xeon that's still running) matched this self-referential precision.
The Index archetype followed directly: if the claim is that craft tells the story, the strongest counter-move to making that claim in a centered hero on a white field is to SHOW the catalog of craft — to make the page itself a directory where every row (seven projects, six signals, career timeline, capabilities) is a line item in the ongoing story. The Index is the only archetype that makes proof structural. A Poster would let the phrase rest on its own authority. An Index makes you earn that authority row by row. The bebas-plex chassis is the only viable pairing: Bebas Neue is the typeface of directories, transit schedules, and catalog headers — institutional declaration without ornament — and IBM Plex Sans is the humanist workhorse that makes the body rows readable at 11–13px density. The two together are precisely the catalog register this archetype requires.
Vivid magenta at H:305° is the only hue family the color mandate left untouched after seven consecutive palettes of ambers, greens, reds, and blues. That constraint was a gift: H:305° is the hue of neon signs in studio windows, of late-night creative pressure reaching its peak — appropriate for June 1, a full moon, and a phrase about the craft being so alive it narrates itself. The violet-tinted amethyst stone neutrals (rather than pure grey) give every catalog row a subconscious cohesion with the magenta accent: the surfaces are part of the same chromatic family as the accent, just drained of saturation, so every row of the index lives in the same world as the hero phrase firing above it.
Signal integration
Where signal elements live: Center column of the index, under the SIGNALS column header. Every signal is formatted identically to every work entry — Bebas row name, IBM Plex Sans meta, one-line description. The signals are catalog-peers of the work.
Sports scores styled:
SCHWAB CHALLENGE in Bebas, meta RUSSELL HENLEY −13 · FINAL in IBM Plex Sans 11px stone.500. Description: → 15TH CLUB in magenta.600 13px (cross-reference to Doug's golf AI project — a small proof that the index has depth).DETROIT TIGERS in Bebas, meta 1–2 LOSS · MAY 31 in stone.500. Description: Close game, wrong side in stone.700 italic.Quote displayed as: NOT the hero phrase. Rendered beneath the two-line hero in the masthead as a sub-footnote — IBM Plex Sans italic 13px, stone.500 (on dark masthead): "If you look inwards, you'll find the answer has been in you all along." One line, subdued, registering as context not declaration.
Full moon: Signal row: FULL MOON Bebas label, meta 96.5% · DAY 16 OF CYCLE, with a filled Unicode circle ● in magenta.400 at 10px before the label.
HN top story: Signal row: HN label (Bebas), meta CLOUDFLARE TURNSTILE WEBGL — 698 PTS, description fingerprinting concerns, 2026 in stone.700.
Music: Signal row: LISTENING label, meta GUIDED BY VOICES · MY MORNING JACKET.
First day of summer / date: Embedded in masthead tagline below hero phrase: MON 01 JUNE 2026 · FIRST DAY OF SUMMER · FULL MOON — IBM Plex Sans 12px, stone.400, all-caps, 0.12em tracking. Not a separate component — part of the masthead declaration zone.
Every noteworthy signal appears: Golf ✓, Tigers ✓, Moon ✓, HN top ✓, Music ✓, Season ✓. Daylight hours (14.6 hrs) can appear as a signal row: DAYLIGHT label, 14.6 HRS · SUNRISE 04:51 / SUNSET 19:24.
03
vivid magenta
hsl(305 71% 47%)
Vivid magenta at H:305° — the only hue zone untouched by the last seven palettes, and the color of neon signs in studio windows, of creative pressure made visible — turns a ruled catalog of craft into a lit dashboard where the hero phrase fires like a circuit being closed.
04
Color — 2 ramps, 20 stops
magenta
stone
05
No composition grammar. The pipeline had no such concept in the color-directed era.
06