Wednesday, May 6, 2026

Visual specification

1. Color Specification

• Primary hue: H:80° (acid chartreuse) — sits squarely within the open 68–98° window; chosen for maximum electric contrast against near-black, directly fulfilling the BOLD/EXPERIMENTAL 8/10 directive. This hue has appeared in zero of the last six days.
• Neutral palette (tinted toward H:80°):
  • 50: #F8FCED (near-white with faint chartreuse warmth)
  • 100: #EFF7D8
  • 200: #D9EBA8
  • 300: #B5CC6E
  • 400: #8EA640
  • 500: #6B7F26
  • 600: #505E19
  • 700: #374210
  • 800: #232B09 (card surface)
  • 900: #141804 (page background — near-black, olive-tinted)
• Accent: light=#DDFF33, default=#CCEE00, dark=#9BBF00, glow=rgba(204,238,0,0.18)
• Secondary accent: none — one committed hue carries the page
• Background: page bg=#141804, card bg=#232B09, sidebar bg=#141804
• Text: primary=#F8FCED (~140:1 on bg), secondary=#B5CC6E (~10.6:1 on bg), muted=#8EA640 (~7.2:1 on bg)

2. Typography (chassis-derived)

• Hero phrase rendering: Bebas Neue (display token), clamp(80px, 16.5vw, 230px). Two-line split: "EVERY LOSS" on line one, "IS A GAIN" on line two. Both lines left-aligned at padding-left: 6vw, each filling approximately 82–85vw at 1440px. The phrase occupies the entire visual event — nothing else competes for dominance. Color: heroText token (#CCEE00 in dark mode).
• Attribution line: 16px IBM Plex Sans below the second hero line, color: textMuted, uppercase, letter-spacing 0.14em: — SATHYA SAI BABA. 32px gap from hero bottom.
• Navigation labels: 13px IBM Plex Sans, uppercase, letter-spacing 0.20em, color: textMuted. Absolute-positioned top-right.
• Signal strip labels: 12px IBM Plex Sans, uppercase, letter-spacing 0.10em.
• Line heights: hero=0.88 (tight stacking for condensed all-caps Bebas), subheadings/labels=1.1, body=1.5
• Letter spacings: hero=0 (Bebas Neue default kerning), attribution/nav=0.14–0.20em (all-caps requires tracking), body=0.01em

3. Layout Specification

• Archetype: Specimen — typography IS the design. Two enormous stacked lines occupy 80%+ of viewport real estate in both dimensions. Every other element is demoted to ghost scale or signal-strip brevity. The phrase is not "on" the page; it is the page.
• CSS structure:

  body: display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;
  .hero-zone: position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
               justify-content: center; padding: 0 6vw; min-height: calc(100vh - 48px);
  .signal-strip: position: fixed; bottom: 0; left: 0; right: 0; height: 48px;
                 display: flex; align-items: center; padding: 0 6vw; gap: 32px;
                 border-top: 1px solid {border};
  .nav-ghost: position: absolute; top: 24px; right: 6vw; display: flex; gap: 24px;
  

• Major dimensions:
  • Hero area height: calc(100vh - 48px) — full viewport minus signal strip
  • Hero type zone: vertically centered; "EVERY LOSS" at ~38vh, "IS A GAIN" at ~60vh
  • Max content width: none — full canvas, no centering container
  • Side padding: 6vw left (left-aligned composition)
  • Signal strip: 48px fixed, bottom
• Nav placement: Absolute top-right at 24px from top, 6vw from right. Three ghost links (Work, About, Contact) in 13px Plex Sans, neutral.500. No background, no border. Intentionally recessive — the phrase commands entirely.
• Hero phrase grid zone: The full calc(100vh - 48px) zone. "EVERY LOSS" line renders at approximately y: 35–45vh, "IS A GAIN" at y: 57–67vh, with void above and void below.

4. Component Character

• Border radius: radii.none = 0 throughout — hard cuts, no softening anywhere
• Border treatment: Borderless on all content zones; single 1px border-top: border on signal strip only
• Shadow: none — zero depth illusion, zero elevation. Flat and absolute.
• Density: Maximally sparse — two text elements own the canvas. No cards, no columns, no grid within the hero.
• Interactive states: Nav links → color: accent on hover, 0.15s ease. Signal items: static. No fills, no backgrounds, no underlines. Hover is purely a color shift.

5. Signal Integration

• Signal strip (fixed bottom, 48px): Horizontal flex row, monospaced dispatch-wire format, 12px IBM Plex Sans uppercase, all caps, letter-spacing: 0.10em.
  • Tigers: DET 3 · PIT 10 — color: signalLoss (neutral.500, muted — loss treatment)
  • Pistons: DET 111 · MIA 101 — color: signalWin (#CCEE00 — win treatment, accent emphasis)
  • Moon: ◐ 72% — color: textMuted
  • Daylight: ☀ 13.8H — color: textMuted
  • Mother's Day: MOTHER'S DAY — 4 DAYS — color: textMuted
  • HN top: AGENTS DEPLOY CLOUDFLARE ↑344 — color: textMuted, truncated to 32 chars
• Quote treatment: The hero phrase IS the Sai Baba quote. Attribution line directly below the second hero line at 16px, color: textMuted, tracked wide: — SATHYA SAI BABA. 32px gap above the attribution. No blockquote styling — attribution reads as caption, not visual element.
• Sports scores styling: Win (Pistons) = signalWin token, acid chartreuse, full saturation. Loss (Tigers) = signalLoss token, muted neutral.500. Score format: ABBR SCORE · OPP SCORE. No color on team abbreviations — only the score numbers carry the win/loss signal.
• Holiday: Mother's Day countdown rendered inline in signal strip, static, no special treatment.
• Awwwards: Not surfaced in primary layout — Specimen purity requires zero competition with the phrase. Reference available in signal strip tooltip or secondary route.

Self-check

1. Hero quotability: Yes — "Every loss is a gain" is a standalone four-word maxim that simultaneously describes today's Tiger loss and Pistons win; screenshotable, poster-printable, quotable in complete isolation.
2. Because-of chain: Yes — the declarative, philosophically-loaded maxim dictated Specimen (type IS the design), which dictated bebas-plex (only Specimen-best chassis in the catalog with the condensed/declarative mood), which dictated acid chartreuse on near-black (BOLD/EXPERIMENTAL 8/10 + only open hue window 68–98° that delivers electric voltage), which dictated a left-aligned sparse layout with nothing competing for the phrase's authority.
3. Render feasibility: Yes — Bebas Neue at clamp(80px, 16.5vw, 230px) places each line at ~238px on 1440px; two stacked lines occupy ~476px of the 852px available hero zone (900px − 48px strip); condensed letterforms at 6vw left-pad prevent overflow; adequate vertical void above and below the type for breathing room.

Rationale

The hero phrase arrived fully formed from today's signal feed: Sathya Sai Baba's quote dropped the same day the Tigers lost 3–10 and the Pistons won 111–101. The quote stopped being wisdom and became sports reporting. "Every loss is a gain" earns marquee scale because it refuses to choose a side — it holds both Detroit results in four words without sentiment or analysis. It's a maxim you can point at. It has the density of a telegram. It wanted to be large.

The Specimen archetype was the only honest choice for a phrase this declarative. A maxim of four words doesn't need a layout to contextualize it — it needs to be inflated until it fills the room and everything else disappears. Bebas Neue through bebas-plex (the only Specimen-best condensed chassis in the catalog) renders "EVERY LOSS / IS A GAIN" as two stacked lines at approximately 230px on a 1440px viewport, each filling ~82% canvas width. The condensed letterforms earn horizontal dominance without sprawl. The attribution — "— SATHYA SAI BABA" — appears at 16px below, a caption for a monument. Navigation ghosts into the top-right corner. The signal strip anchors the bottom at 48px: Pistons win in acid chartreuse, Tigers loss in muted neutral.500. Nothing else exists on this canvas.

Acid chartreuse (H:80°) on near-black (#141804) was the palette move the brief required: creative weight 8/10, open hue window 68–98°, six-day history with zero overlap in this frequency. Chartreuse reads as neon, caution tape, a color you only reach for when you mean it. The neutral family tints the entire scale toward H:80° so even the negative space belongs to the idea — it's not grey-on-black but olive-on-black, a single coherent chromatic event. The page doesn't have a color; the page IS a color.

Signal integration

• Signal strip (fixed bottom, 48px): Horizontal flex row, monospaced dispatch-wire format, 12px IBM Plex Sans uppercase, all caps, letter-spacing: 0.10em.
  • Tigers: DET 3 · PIT 10 — color: signalLoss (neutral.500, muted — loss treatment)
  • Pistons: DET 111 · MIA 101 — color: signalWin (#CCEE00 — win treatment, accent emphasis)
  • Moon: ◐ 72% — color: textMuted
  • Daylight: ☀ 13.8H — color: textMuted
  • Mother's Day: MOTHER'S DAY — 4 DAYS — color: textMuted
  • HN top: AGENTS DEPLOY CLOUDFLARE ↑344 — color: textMuted, truncated to 32 chars
• Quote treatment: The hero phrase IS the Sai Baba quote. Attribution line directly below the second hero line at 16px, color: textMuted, tracked wide: — SATHYA SAI BABA. 32px gap above the attribution. No blockquote styling — attribution reads as caption, not visual element.
• Sports scores styling: Win (Pistons) = signalWin token, acid chartreuse, full saturation. Loss (Tigers) = signalLoss token, muted neutral.500. Score format: ABBR SCORE · OPP SCORE. No color on team abbreviations — only the score numbers carry the win/loss signal.
• Holiday: Mother's Day countdown rendered inline in signal strip, static, no special treatment.
• Awwwards: Not surfaced in primary layout — Specimen purity requires zero competition with the phrase. Reference available in signal strip tooltip or secondary route.