palette · dna1In the files
Night-game scoreboard palette: night field, light-tower white, amber bulbs, a red miss
Anchored to
ambition and hustle quality · own predictionbold sports graphics surface · own predictionMoneyball film · own prediction
Translates: ambition and hustle · bold sports graphics
InterpretationHustle reads as the late game under lights: a deep night-blue ground, warm white from the light towers for text, amber scoreboard bulbs for every number that matters, a field blue for structure and one hot red reserved for what was missed. Moneyball is evidence that numbers are the drama here, so the brightest colour belongs to the stats.
#0a1633#f6efdc#ffb21a#2a63d4#ff4b36#13224a
Made with css-palette for “Scoreboard hustle”: Custom properties on :root hold the six colours so every surface reads from one scoreboard palette.
Away from the sketch: 1 colour
typography · dna2In the files
Tall condensed scoreboard capitals over a sturdy sports-page grotesque, numbers in mono
Anchored to
underdog to champion quality · own predictioncompetitive tone · own prediction
Translates: underdog to champion · competitive
InterpretationThe underdog-to-champion arc wants headlines that stand up tall and loud like a scoreboard, so headings are Big Shoulders Display in heavy capitals; body text is Libre Franklin, the steady grotesque of a sports page; scores, commands and counts are DM Mono with tabular figures, the way a competitive stat line is set.
Here's the tight five.
Big Shoulders Display
Here's the tight five.
Libre Franklin
Here's the tight five.
DM Mono
text-transform: uppercasefont-variant-numeric: tabular-nums
Made with library-font for “Scoreboard hustle”: The three families are fetched locally and loaded by @font-face, with uppercase and tabular figures set in CSS.
Away from the sketch: 2 type families
imagery · dna4In the files
Light towers over a crowd: an inline SVG of two stadium light towers throwing beams onto a field of crowd dots
Anchored to
stadium lights surface · own predictioncrowd and community quality · own predictionLos Angeles quality · own prediction
Translates: stadium lights · crowd and community
InterpretationThe crowd under lights becomes the hero drawing: two lattice light towers, banks of bulbs, wide translucent beams and a curved stand of dots that reads as an audience, under a warm night sky. It is the audience the page is about, drawn rather than photographed.
#herosvg#light-towers
Made with inline-svg for “Night game, live crowd”: No image generator here; an inline SVG draws towers, beams and crowd with full control of the palette and lets the beams animate.
motion · dna5In the files
Lights-up: beams sweep slowly while a marquee ticker runs the set list, both pausable
Anchored to
live-event energy pacing · own predictionfast-paced pacing · own predictionJay-Z music · own prediction
Translates: live-event energy · fast-paced
InterpretationLive-event energy is the moment before the show: the beams sweep across the crowd and a marquee ticker runs fast across the top like an arena board. Jay-Z stands for the arena show. Both loops stop under reduced motion and on the pause button.
@keyframes beam-sweep@keyframes marquee-runanimation: marquee-run 28s linear infinite
Made with css-motion for “Night game, live crowd”: Two CSS keyframe loops, with a reduced-motion rule and a data-motion-toggle pause button.
voice · dna7In the files
Stand-up confidence: setup, punchline, and every number exact
Anchored to
funny tone · own predictionconfident tone · own predictionconversational pacing · own prediction
Translates: funny · confident · conversational
InterpretationHeadings set up a premise and land it in a few words, spoken to the jury directly, confident and a little funny; the facts underneath stay exactly as stated, because the joke never changes the score.
Every agent thinks it knows the crowd.
The guess named 22. The measurement found 714.
Pick your dugout.
Made with copy for “The tight five”: The lines are written into headings and intros around the exact facts.
layout · dna3In the files
Box score: the evidence as a scoreboard grid of panels with one headline stat
Anchored to
Moneyball film · own predictionThe Social Network film · own predictionambition and hustle quality · own prediction
Translates: ambition and hustle
InterpretationMoneyball and The Social Network both turn a spreadsheet into a story, so the evidence section is a box score: ruled panels on a grid, each with its number lit in amber and a plain line saying what it does not show. The blind spot stat spans the top like the inning total.
#box-score#headline-statgrid-template-columns: repeat(12, 1fr)
Made with css-layout for “Scoreboard hustle”: A 12-column CSS grid makes the box score, with the headline stat spanning the full width.
Away from the sketch: 2 new parts
structure · dna6In the files
The tight five: the five steps as a numbered set list, each with a setup and a landing
Anchored to
punchy cuts pacing · own predictionblack comedy culture quality · own predictionChappelle's Show TV · own prediction
Translates: punchy cuts · black comedy culture
InterpretationA comic's tight five is five bits that land in order, so the five steps become a set list: big numbers, one bold beat each, short cuts between them, and the frozen guess as the setup the measurement pays off.
Here's the tight five.
#tight-five
Made with css-layout for “The tight five”: An ordered list styled as a set list with oversized numerals and alternating cuts.
Away from the sketch: 1 new part
interaction · dna8In the files
The lineup: install commands on ticket-stub cards that copy on press
Anchored to
Tesla brand · own prediction
Translates: engineered precision
InterpretationTesla stands in my guess for engineered, no-friction product: the three agents are a lineup of ticket-stub cards whose install commands copy with one press, with a short confirmation and a pressed state.
#lineuptransition: transform .18s ease-out, background-color .18s ease-out
Made with interaction-script for “Scoreboard hustle”: A small script copies each command to the clipboard and confirms it, with CSS transitions for the press.
Away from the sketch: 1 new part