palette · dna1In the files
Night game under the lights
Anchored to
big-stage spectacle quality · own predictionstadium lights surface · own prediction
Translates: big-stage spectacle · stadium lights
Through the convention: light-tower silhouettes cutting cones of white light into a night sky
InterpretationBig-stage spectacle drawn the way light-tower photographs draw it: a near-black night sky, a deep stand blue, cones of hard white light, scoreboard-bulb amber for every number and one tally red for what the guess missed. An electric royal blue nods to a ballpark night without copying any club's colour.
#080b17#131a33#2c55f0#ffb320#ff4b36#eef1f8
Made with css-palette for “The big stage”: Six custom properties on :root hold the night-game palette so every section draws from the same lights.
Away from the sketch: 2 colours
typography · dna2In the files
Score-bug capitals over stat-sheet figures
Anchored to
bold scoreboard type surface · own predictionwinning as proof quality · own predictionESPN brand · own prediction
Translates: bold scoreboard type · winning as proof
Through the convention: broadcast score bugs: boxed condensed capitals on a dark bar
InterpretationBold scoreboard type set the way broadcast score bugs set it: boxed heavy condensed capitals in Anton on a dark bar, with Barlow Condensed for body and every figure in tabular numerals, so the numbers line up like a stat sheet.
Your agent thinks it knows the crowd. It named 22 of 714.
Anton
Your agent thinks it knows the crowd. It named 22 of 714.
Barlow Condensed
font-variant-numeric: tabular-nums
Made with library-font for “Game-day broadcast”: Anton and Barlow Condensed fetched from the library and loaded with @font-face carry the score-bug capitals and the stat-sheet figures.
typography · dna10In the files
Marquee letters for the comedy stage
Anchored to
banter and roast humour quality · own predictionMartin TV · own predictionComing to America film · own prediction
Translates: banter and roast humour · irreverent
Through the convention: 90s sitcom title cards: chunky, bouncy lettering on one flat bright colour
InterpretationThe roast and the ticket fields set in Bungee, the chunky signage capitals of stand-up marquees and 90s sitcom title cards, so the comedy sections speak in a different, louder voice than the broadcast.
Your agent thinks it knows the crowd. It named 22 of 714.
Bungee
Made with library-font for “Couch banter”: Bungee fetched from the library sets the roast heading and the ticket fields.
Away from the sketch: 1 type family
imagery · dna6In the files
Light towers over the stand, a lone mic on the stage
Anchored to
glossy arena staging surface · own predictionstadium lights surface · own predictionbanter and roast humour quality · own prediction
Translates: glossy arena staging · stadium lights
Through the convention: stand-up special posters: a lone mic stand under one spotlight on a dark curtain, the title in tall marquee letters
InterpretationOriginal line drawings: two stadium light towers with banks of lamps throwing cones over a stand silhouette in the hero, and a mic stand under a single spotlight on a curtain for the roast of the problem.
#roastsvg#light-towerssvg#mic-stage
Made with inline-svg for “The big stage”: Light towers and the mic stand are simple geometric silhouettes that read best as crisp inline SVG and can be animated.
Away from the sketch: 1 new part
motion · dna7In the files
Broadcast crawl and beam sweep
Anchored to
live broadcast energy pacing · own predictionfast-paced pacing · own prediction
Translates: live broadcast energy · fast-paced
InterpretationLive broadcast energy as a news crawl that runs the facts along a lower-third bar, and light beams that sweep slowly over the hero; quick, punchy entrances for each section; all paused by a control and stopped for reduced motion.
@keyframes ticker-crawl@keyframes beam-sweepanimation: ticker-crawl 42s linear infinite
Made with css-motion for “Game-day broadcast”: The crawl and the beam sweep are transform and opacity keyframes with a pause control and a reduced-motion rule.
voice · dna8In the files
Roast-night banter with a closer's confidence
Anchored to
banter and roast humour quality · own predictionFriday film · own predictionJay-Z music · own prediction
Translates: banter and roast humour · confident
InterpretationThe copy talks straight to the jury, ribs the overconfident guess like a roast and closes like a headliner, while every number and name stays exactly as the facts give it.
Your agent thinks it knows the crowd. It named 22 of 714.
Nice guess. Now check the scoreboard.
Pick your seat.
Made with copy for “Couch banter”: The banter lives in the headings and intros written around the fixed facts.
layout · dna3In the files
Campaign slogan stacked edge to edge
Anchored to
underdog hustle quality · own predictionNike brand · own predictionShoe Dog book · own prediction
Translates: underdog hustle
Through the convention: athletic campaign posters: one imperative slogan stacked edge to edge in heavy condensed capitals
InterpretationUnderdog hustle as athletic campaign posters state it: the one-line promise stacked in three heavy lines that run nearly edge to edge of the first screen, imperative and unhedged.
#hero-sloganfont-size: clamp(3.4rem, 10.5vw, 10.5rem)
Made with css-layout for “Underdog hustle”: The slogan stack is a sizing and line-break decision on the hero headline, done in CSS with clamp().
Away from the sketch: 1 new part
layout · dna5In the files
Bulb-dot scoreboard numerals
Anchored to
live broadcast energy pacing · own predictionpunchy cuts pacing · own prediction
Translates: live broadcast energy
Through the convention: ballpark scoreboards: bulb-dot numerals glowing on black and a line score of innings across the top
InterpretationThe blind-spot figures shown as a ballpark board lights them: giant numerals masked into a grid of round bulbs, amber on black, the guess's score beside the measured total like home and away.
#scoreboardmask-size: 6px 6px
Made with css-art for “Game-day broadcast”: A radial-gradient mask turns heavy numerals into bulb dots without any image.
structure · dna4In the files
The five steps as a line score of five innings
Anchored to
Moneyball film · own predictioncompetitive tone · own prediction
Translates: competitive
Through the convention: ballpark scoreboards: bulb-dot numerals glowing on black and a line score of innings across the top
InterpretationThe method read as a game: a ballpark line score with five inning columns (1st to 5th), each column one step, so the jury reads the process left to right like a scoreboard instead of a numbered list.
#line-scoregrid-template-columns: repeat(5, minmax(0, 1fr))
Made with css-layout for “Game-day broadcast”: A CSS grid of five inning columns under a header row reproduces a line score and collapses to stacked innings on a phone.
Away from the sketch: 1 new part
interaction · dna9In the files
Ticket stubs for the ways in
Anchored to
Ticketmaster brand · own predictioncelebratory tone · own prediction
Translates: celebratory
Through the convention: concert ticket stubs: a perforated edge and section, row and seat fields
InterpretationThe live try, the gallery and the blind vote as concert ticket stubs with a perforated edge and section, row and seat style fields; each stub lifts and tilts on hover or focus like a ticket pulled from a pocket.
#ticketstransition: transform .2s cubic-bezier(.2, .9, .3, 1.4)
Made with css-motion for “The big stage”: The stub's perforation is CSS and its lift is a springy transform transition on hover and focus.
Away from the sketch: 1 new part