This is the live, locked visual language behind The Drop Score — every color, every type rule, and every building block, rendered for real (not screenshotted) and explained in plain English. This page is built in the system it documents, so what you're reading is the design.
Near-black background. LEGO yellow leads, red is the second voice. Tall, condensed type. Big things are packed tight; tiny labels are spaced out and shouted in caps. Color never decorates — it always means something (green = good, yellow = caution, red = the verdict, cyan = an explainer). It's the same look as Seth's live "Lego Timeline" tool site, so the grader feels like it belongs to the same brand.
2
brand colors do the heavy lifting — yellow & red
13
reusable building blocks in the component catalog
1
stylesheet is the single source of truth
01Where the look comes from
The Drop Score doesn't have its own private style. It deliberately borrows the look of the tool it lives next to.
Everything here mirrors the live "Lego Timeline" tool site (lego-tools.sethdesigns.co). That site already established the brand's "tool" personality: a near-black stage with LEGO yellow forward, red as backup, and tall condensed lettering. Reusing it means the grader feels like a native part of the same family the moment you land on it — no re-learning, no re-litigating "what should this look like."
One important don't-confuse-this
There's a second, separate brand language called "Obsidian Dispatch" — charcoal + crimson, narrow Anton/Oswald type — and that one is only for the Instagram carousels. The rule is simple: LEGO yellow is tool-only. If you're looking at yellow, you're looking at a tool. If you're looking at crimson-on-charcoal, that's social. Don't mix them.
A note on the font. The real brand face is Avenir Next LT Pro Condensed, served from an Adobe Typekit kit that's locked to Seth's own domains. On this local file it quietly falls back to your Mac's built-in Avenir Next Condensed — same family, looks right here. On a random other computer it'd fall back further, which is the only reason this page won't be pixel-identical everywhere.
02The colors (and what they mean)
Every color has a job. Nothing is here just because it looks nice.
Surfaces & text — the stage
These are the quiet ones: the near-black grounds you build on top of, and the whites/greys you read. The whole point is to stay calm so the accent colors can carry meaning.
--bg
#0a0a0a
Page ground — near-black
--bg-secondary
#111111
Sticky bars, table of contents
--card-bg
#1a1a1a
Cards, stat tiles, Q&A
--border
#2a2a2a
Hairline dividers
--text
#ffffff
Primary text
--text-secondary
#b0b0b0
Body-secondary, captions
Brand — the two voices
Yellow is the star: logo, headlines, the "good" grade, anything active. Red is the second voice — section numbers, verdicts, urgency. Lead with yellow; bring in red for emphasis, never the reverse.
--lego-yellow
#F2D300
Dominant accent — headlines, "good"
--lego-red
#E3000B
Secondary accent — verdicts, urgency
Semantic palette — the meanings
These are used to say something: green means good/keep, orange means caution/mid, cyan means info or an analogy, and the deeper blue/purple/pink are occasional category accents. Pick by meaning, not by taste.
--accent-green
#00852B
Good / match / keep
--accent-orange
#FF7800
Caution / mid
--accent-cyan
#00A3DA
Info / analogy / "partly"
--accent-blue
#016CB8
Info alt
--accent-purple
#8B008B
Category accent
--accent-pink
#E4ADC8
Category accent
The "inks" — readable versions for text
The raw LEGO green and red are gorgeous as fills and borders, but too dark to read as small text on near-black. So the system keeps lightened twins — the "inks" — for any colored words or labels. Rule of thumb: raw colors for shapes, inks for text.
--ink-green
#43c47e
Green text on near-black
--ink-red
#ff5a62
Red text on near-black
--ink-cyan
#36b8e6
Cyan text / links
--ink-orange
#ff9d4d
Orange text on near-black
03The type — two rules
The whole typographic personality comes down to two opposite moves.
Rule 1 — big things get packed tight. Headlines, giant stat numbers, and grade letters use negative letter-spacing so they feel dense and confident. Rule 2 — tiny labels get spaced wide and SHOUTED. Kickers, eyebrows, chips, and table headers go uppercase with generous letter-spacing. Big + tight vs. small + wide is the signature.
Live
Rule 1 · big & tightGrade A−
Rule 2 · small & wideWorth it? · Joy · Holds value
weights used400 body · 500 secondary · 600 nav · 800 labels · 900 display — all one condensed family
04The building blocks
Thirteen reusable pieces cover every page in the project. Here's each one, live, with what it's for.
Hero / verdict block. The one-paragraph headline takeaway that opens a report — the TL;DR. Yellow rail down the left, subtle gradient panel.
Live
Hero block — the TL;DR
One paragraph that says the whole thing before anyone scrolls. Bold for the load-bearing words, yellow italics for a quoted question.
Stat strip. Three "by-the-numbers" tiles. The number can be white (neutral), yellow (the headline figure), or red (a warning). Already used up top on this very page.
Live
61
yellow = the headline number
~22
white = a neutral count
2
red = a warning number
Callout boxes. Four flavors, chosen by meaning not color-preference: red = the verdict/bottom line, cyan = an analogy or explainer, green = a relief or confirmed positive, yellow = a caution or gotcha.
Live
Verdict (red)
The blunt answer / the bottom line.
Analogy (cyan)
An explainer, comparison, or worked metaphor.
Key (green)
A relief, a confirmed positive, the load-bearing insight.
Surprise / caution (yellow)
A caveat, a gotcha, or the thing they need to hear.
Q&A + badges. Poses a question in the reader's own words, then answers bluntly on the first line with a colored badge before the reasoning.
Live
"Is this set actually worth the money?"
VerdictYes — with one caveat.
Then the reasoning. Badges: yes / cautionpartlyno / relief.
Debate. Two columns for an honest, adversarial "on one hand / on the other" — the case for on the left, the case against on the right.
Live
⚔ The case for
A genuinely stunning centerpiece.Retiring soon — likely to hold value.
✂ The case against
$500 is a serious commitment.It's a display piece, not a play set.
Before / after + grade letters. A side-by-side comparison, plus the "reads" pattern — the small breakdown rows (Worth it? / Joy? / Hold value?) with big colored grade letters.
Live
Before
B−
the dim / "today" state
→
After
💰 Worth it?C−
🤩 Joy?A−
📈 Hold value?B
Value ↔ Joy
Numbered path. Ranked, prioritized steps — top item = highest leverage. Each number sits in a yellow-ringed circle.
Live
Start with the highest-leverage move.One line on why it matters most.
Then the next one down.Ranked by impact, top first.
Table + status tags + chips. Data tables get yellow uppercase headers and pill-shaped status tags (keep / watch / rethink). Chips are for tag clouds and jargon lists.
Live
Set
Call
Keep Rivendell
Green — a confident recommend.
Watch Galaxy Explorer II
Yellow — too early to call.
Rethink Overpriced polybag
Red — hard pass.
licensedretiring soondisplay piece18+ set
Masthead & table of contents. You've already seen both live — the yellow-underlined title block at the very top, and the two-column "What's on this page" box. They open every long-form report.
05The signature: the grade card
If the design system has a hero, this is it — the actual product surface a user comes for. It's the latest V1 direction (2026-06-30).
The grade leads (that huge condensed letter). Under it, three plain-language "reads" give the at-a-glance split — Worth it? · Will you love it? · Holds value? Then the "why" is built from real review quotes, never internal jargon. The left card is the everyday, well-reviewed case. The right card is the honest answer to thin data: no scary "unproven" stamp, just a plain "Early read," blanks where it genuinely can't call it, and a promise to sharpen.
🏔️
Rivendell
10316 · Icons
A−
"A breathtaking centerpiece — just bring your wallet."
💰 Worth it?B~$500, but a lot of set
🤩 Will you love it?Aa genuine stunner
📈 Holds value?A−LOTR, retiring soon
✦ What people love
"The most beautiful thing LEGO has ever made." The layered build and density of detail win almost everyone over.
△ The one catch
At ~$500 it's a real commitment — some call that steep for a set you display rather than play with.
From 18 real reviews
🚀
Galaxy Explorer II
10497 · Icons
BEarly read
"Looks promising — but it's still early."
💰 Worth it?—not enough said yet
🤩 Will you love it?B+a couple of early fans
📈 Holds value?—too new to call
✦ Early word
Only 2 reviews so far — "gorgeous, but I want more time with it." This grade will sharpen as more land.
2 reviews · updates as more come in
Why this card matters
It resolves the whole "can I trust an AI grade?" question without a badge or a lab score. It just shows what real people said, counts them out loud, and blanks out what it honestly can't call yet. Trust here isn't a stamp — it's the receipts, in plain language.
06The do's and don'ts
The short list that keeps every future page on-brand.
Do
Lead with LEGO yellow; red is the second voice, not the first.
Keep the ground near-black — let color come from accents, not backgrounds.
UPPERCASE + wide spacing for any label under ~13px; tight spacing for anything huge.
Use color to mean something — green=good, orange=caution, cyan=info, red=verdict.
Modest corners, hard hairlines — 6–12px radii, crisp 1px dividers.
Don't
Don't use the carousel brand here — no Oswald/Anton, no charcoal+crimson. That's social, not tool.
Don't introduce gold (#FFD54A) — the brand yellow is #F2D300.
Don't put raw green/red on small text — use the lightened "ink" twins.
Don't leak engine jargon into what a user reads — plain language only.
Don't decorate with color — if it doesn't mean anything, don't add it.
That's the entire system: one near-black stage, two brand voices, a meaningful palette, two type rules, thirteen blocks, and one signature grade card. Every Drop Score page — this one included — is built from exactly these parts.