Thursday, June 25, 2026

Visual specification

1. Color Specification

• Primary hue — H:285° (deep violet). Open corridor 275°–310°, unvisited in all seven prior builds. Not blue (too common), not magenta (too effusive) — 285° is the specific shade of held resolve.
• Neutral palette — violet-ink family, tinted H:285° at 0.5–1% chroma so every surface belongs to the same night:
  • 50: #F7F5FC · 100: #EDE9F5 · 200: #D8D1E8 · 300: #BEB4D5
  • 400: #9F93BF · 500: #7E70A8 · 600: #5E5088 · 700: #423568
  • 800: #281E48 · 900: #120A2C
• Accent color:
  • Light: #CEAEFF · Default: #B07FFF · Dark: #7030E8 · Glow: #9050FF
• Secondary accent — none
• Background:
  • Page bg: #0E0B18 (near-void, violet-tinted, deeper than neutral.900)
  • Card bg: #1A1430
  • Sidebar bg: #130F22
• Text colors:
  • Primary: #F0ECF8 (near-white, 16.8:1 against #0E0B18) ✓
  • Secondary: #BEB4D5 (neutral.300, ~7:1) ✓
  • Muted: #7E70A8 (neutral.500 — used for signal data, large-text only)
  • Accent text: #B07FFF (7.2:1 against page bg, all large/display use) ✓

2. Typography (chassis-derived)

• Hero phrase rendering — Three lines, left-aligned at padding-left: 4vw, rendered in Big Shoulders Display weight 900:
  • Line 1: "WINNERS" — font-size: clamp(120px, 22vw, 360px), color #F0ECF8, line-height: 0.88, letter-spacing: -0.02em
  • Line 2: "DON'T QUIT." — font-size: clamp(100px, 18vw, 280px), color #B07FFF, line-height: 0.88, letter-spacing: -0.02em
  • 32px gap + 1px hairline rule in #281E48
  • Line 3: "THAT'S WHY THEY WIN." — font-size: clamp(44px, 10vw, 160px), color #F0ECF8, weight 700, letter-spacing: 0.04em, line-height: 1.0
  • Total stacked height at 1440×900: ≈ 680px = 76% of viewport height ✓
  • Widest line ("DON'T QUIT." at 18vw) spans ≈ 1198px = 83% of viewport width ✓
• Line heights — Hero: 0.88; Signal labels: 1.1 (snug); Body/body data: 1.6 (loose for small Atkinson text on dark)
• Letter spacings — Hero: −0.02em (tight, condensed already); Body labels: 0em (normal); ALL-CAPS eyebrows: 0.10em (wider); Signal values (tabular): 0.05em (wide)

3. Layout Specification

• Archetype: Specimen — Typography is the entire design surface. The hero phrase fills 76% of viewport height and 83% of width; everything else is footnote. Chosen because this phrase does not need illustration or supporting imagery — the recursive logic of the words IS the image, and only maximum typographic scale can render that logic visibly.

• CSS grid/flex structure:

  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Row 1: nav strip. Row 2: hero phrase block. Row 3: signal footer. */
    min-height: 100vh;
    padding: 0;
  }
  
  .hero-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5vh 4vw;
    max-width: none;
  }
  

• Major dimensions:

  • Hero/featured area: min-height: 78vh, flex-column centered vertically
  • Max content width: none — type runs to near-full viewport width
  • Side padding: 4vw left (type flush to left), 2vw right
  • Signal footer band: height: 48px, fixed at bottom
  • Nav strip: height: 48px, top, full width

• Nav placement — Top strip, height: 48px, padding: 0 4vw. Left: site initials "D.M." in Atkinson Hyperlegible 13px, letter-spacing: 0.10em, color #7E70A8. Right: links "Work · About · Contact" in same treatment, muted. The nav is intentionally nearly invisible — a footnote at the margin of the type monument.

• Hero phrase grid zone — Row 2 (main flex column), full viewport width minus 4vw left padding, vertically centered within 78vh. The three typographic lines occupy a block from approximately y: 10vh to y: 86vh.

4. Component Character

• Border radius — Cards: none (0). Buttons: 2px (sm). Tags: 2px. The design is architectural; rounding would soften the monument.
• Border treatment — Single-pixel hairline only. The rule between "DON'T QUIT." and "THAT'S WHY THEY WIN." is 1px solid #281E48. Signal data tags use 1px solid #281E48 border.
• Shadow — None. Dark field + type monument needs no depth simulation.
• Density — Sparse: the hero type block is the only thing that matters. Signal footer is compressed into a single 48px band.
• Interactive states — Nav links: hover to #B07FFF (accent), transition color 0.12s ease. Signal footer tags: no hover (static data display).

5. Signal Integration

• Signal elements live — Bottom footer band, height: 48px, pinned to viewport bottom. Full-width horizontal strip, background: #130F22, border-top: 1px solid #281E48. Content rendered in Atkinson Hyperlegible 13px, color: #7E70A8, letter-spacing: 0.05em.

• Sports scores — Tigers loss styled as: DET label in #5E5088 smallcaps · 2 – 4 in #BEB4D5 tabular-nums · L in #7030E8 (accent dark, a violet bruise). Placed in footer band, leftmost position.

• Quote treatment — The quote IS the hero phrase (the entire page IS the quote). No separate blockquote element. Attribution "— Unknown" appears beneath Line 3 in Atkinson Hyperlegible 12px, color: #5E5088, letter-spacing: 0.08em, left-aligned at the same 4vw indent.

• Signal footer left-to-right (all in Atkinson Hyperlegible 13px, color: #7E70A8, separated by | in #281E48):

  • DET 2–4 L (Tigers loss)
  • ☽ 84% (waxing gibbous moon, 84.4% illumination)
  • ☀ 14.7h (daylight hours)
  • The War on Drugs · Wet Leg (music signals)
  • OpenAI chip ↑712 (HN top story score in #BEB4D5)

• Awwwards — Not surfaced in the minimal Specimen layout; the design's only surface is the phrase. AMFA/Himachal references could appear as hover-reveal tooltips on the footer band if the Unified Designer chooses to add depth — but the base design omits them to preserve the Specimen's singularity.

Self-check

1. Hero quotability: Yes — "Winners don't Quit. That's why they Win." is a self-contained, recursive declaration; the tautological logic makes it screenshot-worthy independent of any context.
2. Because-of chain: Yes — The phrase's declarative/recursive nature demanded Specimen (type as the complete argument); Specimen demanded big-shoulders-atkinson (signage condensed at monument scale, tagged Specimen); the phrase's defiant tone demanded the open 275°–310° violet corridor (rare, authoritative, unvisited); the violet-on-void demanded minimal Specimen layout with signal data compressed to a single 48px footer strip.
3. Render feasibility: Yes — At 1440×900, Big Shoulders Display condensed at 22vw ("WINNERS") and 18vw ("DON'T QUIT.") achieves ≥76% viewport height and ≥83% viewport width without overflow; Atkinson Hyperlegible body at 13–14px maintains legibility in the footer strip.

Rationale

The hero phrase arrived from signals.quote with no real competition today. The Tigers are in off-season or coming off losses, there's no tournament drama (Travelers Championship is merely scheduled), and the Hacker News stories — while interesting — are tech news, not poster material. "Winners don't Quit. That's why they Win." earns its stage through formal logic: it's a tautology that closes on itself, a loop that becomes a monument at sufficient scale. The recursive structure (winners → don't quit → that's why → they win) contains its own proof, and at 8/10 risk weight, the execution mandate is to make the cliché strange by rendering it as pure typographic architecture.

Specimen is the only honest archetype for a phrase this formally complete. It doesn't need illustration, supporting data, or narrative context — it is the argument. Big Shoulders Display at 22vw and 18vw in condensed weight 900 renders the logic visually: "WINNERS" at maximum scale in near-white declares the subject; "DON'T QUIT." slightly smaller in deep violet (#B07FFF) enacts the predicate in a different chromatic register; the 1px hairline rule creates the logical separator; "THAT'S WHY THEY WIN." at 10vw closes the tautology in white at expanded tracking, reading as the conclusion after the comma-beat of the rule. The recursive visual syntax — white then violet then white, big then medium then large — maps to the phrase's own recursive logic.

Deep violet at H:285° is both mandate-compliant and thematically correct. The corridor 275°–310° is the only hue zone unvisited in the entire seven-build archive. Violet is the color of held resolve: not warm enough to comfort (amber was June 20), not cold enough to distance (teal was June 21), but authoritative and slightly uneasy — the precise emotional register of "don't quit" as a declaration to yourself rather than others. The page background #0E0B18 is not pure black but a deep violet-tinted near-void, meaning even the darkest surfaces belong to the same chromatic family as the accent. The signal footer band at the bottom of the viewport compresses Tigers loss, moon phase, daylight hours, music, and the OpenAI chip story into a single 48px strip of Atkinson Hyperlegible — the only body text visible on a page that otherwise belongs entirely to the phrase.

Signal integration

• Signal elements live — Bottom footer band, height: 48px, pinned to viewport bottom. Full-width horizontal strip, background: #130F22, border-top: 1px solid #281E48. Content rendered in Atkinson Hyperlegible 13px, color: #7E70A8, letter-spacing: 0.05em.

• Sports scores — Tigers loss styled as: DET label in #5E5088 smallcaps · 2 – 4 in #BEB4D5 tabular-nums · L in #7030E8 (accent dark, a violet bruise). Placed in footer band, leftmost position.

• Quote treatment — The quote IS the hero phrase (the entire page IS the quote). No separate blockquote element. Attribution "— Unknown" appears beneath Line 3 in Atkinson Hyperlegible 12px, color: #5E5088, letter-spacing: 0.08em, left-aligned at the same 4vw indent.

• Signal footer left-to-right (all in Atkinson Hyperlegible 13px, color: #7E70A8, separated by | in #281E48):

  • DET 2–4 L (Tigers loss)
  • ☽ 84% (waxing gibbous moon, 84.4% illumination)
  • ☀ 14.7h (daylight hours)
  • The War on Drugs · Wet Leg (music signals)
  • OpenAI chip ↑712 (HN top story score in #BEB4D5)

• Awwwards — Not surfaced in the minimal Specimen layout; the design's only surface is the phrase. AMFA/Himachal references could appear as hover-reveal tooltips on the footer band if the Unified Designer chooses to add depth — but the base design omits them to preserve the Specimen's singularity.