Hogwarts Castle
71043 · Harry Potter
6,020 pieces of pure shelf presence.
The Brick Drop · lego-tools.sethdesigns.co · Live Design System
The LEGO 2026 Timeline — decoded
This is the design language of your actual live tool site — the mobile-first web app at lego-tools.sethdesigns.co. Every color, type rule, and interface piece below is pulled straight from its real code and rebuilt here (plus real screenshots), with plain-English notes on what each thing is and why it works.
The 60-second read
It's a phone-first app, not a document. Near-black stage, LEGO yellow as the lead voice, red as backup, and one tall condensed typeface throughout. It leans dense — 15px base text, tight line height — because it's a scannable tool. Its signature move is the set card: a full-bleed product photo with a giant grade letter dropped over the top-left corner, share-poster style. The whole thing hangs off a sticky top bar and a five-icon bottom tab bar, like a native app.
1
typeface does everything — Avenir Next Condensed
15px
base text — denser than a normal web page
5
screens on one bottom tab bar (it's a PWA)
01The real screens
Three surfaces make up the whole tool. Here they are, exactly as they render live.
The one-line identity
A near-black LEGO “tool” brand: yellow leads, red backs it up, everything is condensed, and the product photo does the talking. Notice yellow appears on every screen as the “you are here / this is active / this is good” signal.
02Colors & what they mean
A near-black stage so the accent colors can carry meaning. Nothing here is decorative.
Surfaces & text
The quiet layers you build on and read. Cards sit one shade above the page; text steps down from white to two greys. That --text-muted value was even bumped brighter for accessibility (it now passes AA contrast).
--bg
#0a0a0a
Page ground
--bg-secondary
#111111
Header, tab bar
--card-bg
#1a1a1a
Cards, panels
--border
#2a2a2a
Hairline dividers
--text
#ffffff
Primary text
--text-muted
#9e9e9e
Captions / meta (AA-safe)
Brand — the two voices
Yellow leads, red backs it up. Yellow = the wordmark, the active tab, a "good" grade, anything you can tap. Red = the "LEGO" mark, section accents, and urgent stuff (a "HOT TAKE" or "RETIRING" flag).
--lego-yellow
#F2D300
Dominant accent
--lego-red
#E3000B
Secondary accent
Semantic palette
The full LEGO color set, used to mean things: green fills a "good value" bar, red fills a "brand markup" penalty bar, cyan/blue mark set numbers and links, and the rest are occasional category accents. The blue is the little left-edge rail you see on every card.
--accent-green
#00852B
Value / good bars
--accent-blue
#016CB8
Card left rail
--accent-cyan
#00A3DA
Set numbers / links
--accent-orange
#FF7800
Caution
--accent-purple
#8B008B
Category accent
--accent-pink
#E4ADC8
Category accent
03The type — dense & condensed
One font does the whole job: Avenir Next LT Pro Condensed (served from Typekit, with the system "Avenir Next Condensed" as the fallback). The personality is two opposite moves.
Big & tight vs. small & wide. Headlines and grade letters pack together with negative spacing so they feel confident and poster-like. Tiny labels — eyebrows, set numbers, tab labels — go UPPERCASE and spaced far apart. And the whole app runs at a tight 15px / 1.4 because it's a dense, scannable tool (the Methodology page loosens up for reading).
Live
big & tight · grade letterA−
small & wide · card eyebrowThe Brick Drop
weights in play300–500 body · 700 names · 800 labels · 900 display & grades
04The app shell — bars & nav
What makes it feel like an app, not a webpage: a sticky brand bar on top, a fixed tab bar on the bottom, and several flavors of in-between navigation.
The top bar. Two marks share the row — the @THEBRICKDROP wordmark (the author) on the left, the LEGO 2026 TIMELINE lockup on the right — then a big search field with inline page links. It's sticky, with a subtle blur behind it.
Live
@THEBRICKDROPLEGO2026Timeline
Search sets, themes, or set #…
The month rail + filter chips. A one-letter-per-month scrubber (current month underlined in yellow), then pill filters. The active filter is a solid yellow pill; the rest are hollow. + Theme is dashed to say "add your own."
Live
JFMAMJJASOND
AllComing SoonConfirmedRetiring+ Theme
The bottom tab bar. Five destinations, always reachable. Icon over a tiny uppercase label; the current tab turns yellow. Straight out of the native-app playbook.
Live
Two more nav styles. The Calculator uses underline sub-tabs; the Methodology uses hollow pill-tabs. Both mark the active one in yellow.
05The signature: the set card
If the app has a logo-level element, it's this. The code calls it card-v3 — "share-card DNA applied to every tile."
A 4:5 full-bleed product photo. A dark gradient scrim top and bottom keeps text readable over any image. Top-left: a tiny "THE BRICK DROP" eyebrow with a huge 64px grade letter right under it (yellow — or dim grey + smaller when the grade is still "pending"). Top-right: a status flag and a save heart. Bottom-left: set name, then
number · THEME, then a one-line italic "take." Every card carries a thin blue rail on its left edge.Live rebuild
🏰
The Brick Drop
A−
Retiring
♡
🏎️
The Brick Drop
B
Coming Soon
♡
Custom Garage Mustang GT
42236 · Technic
On the fence — parts carry it, brand tax drags.
Why it works
The grade is the first thing you see, the photo sells the set, and the italic "take" gives one honest human sentence — all in a tile you could screenshot straight to Instagram. That last part is intentional: the card was literally designed from the share-poster outward.
06The Verdict Card
Tap a set and this opens — the full "why this grade" breakdown. It's the app's most information-dense component.
A big colored grade pill next to the title "The Brick Drop Score" and its version. Then the italic Brick Drop Take (bylined with the logo). Then "Why this grade" as a row of labeled bars — green for what adds value, red for the brand-markup penalty, "soon" for a dimension still in progress. Below: comparison pills (vs a typical set in its theme, vs the community), and a three-up Save / Share / Buy action row. An optional red HOT TAKE banner caps it when the grade disagrees with the crowd.
Live rebuild
Hot Take — community says B, we say A−
A−
The Brick Drop Score
v2.4
“A breathtaking centerpiece — the piece variety earns it, even with the brand tax.”
Why this grade
Piece material$212
Build experience$88
Minifigs$46
Brand markup−22%
Resale (v4)soon
vs typical Icons set: Bcommunity: B+
♡ Save
↗ Share
→ Buy at LEGO
07Buttons, chips & value cards
The smaller repeated pieces that hold the rest together.
Two buttons. A solid yellow button with black text for the main action (LOOK UP), and a yellow-outlined button for the big secondary call-to-action ("Tweak the math"). Yellow is always the "do it" color.
Live
The value card. Used in the Calculator's "Top / Worst Values" carousels and list views: a flat card with the cyan set number, the name, and a compact price · pieces · theme meta line — same blue left rail as everything else.
Live rebuild
#75404
Acclamator-Class Assault Ship
$501,500 pcsStar Wars
08Do's & don'ts
The rules that keep the tool feeling like itself.
Do
- Let yellow mean "active / good / tappable" — one consistent job across every screen.
- Lead with the product photo and drop the grade over it — the card is the hero.
- Stay dense — 15px condensed text, tight leading; it's a scan-tool, not an essay.
- Fill bars with meaning — green adds value, red is the penalty.
- Keep the app shell fixed — sticky top bar, bottom tab bar, always reachable.
Don't
- Don't switch fonts — Avenir Next Condensed is the whole voice; no Oswald/Anton (that's the carousel brand).
- Don't use gold — the yellow is exactly
#F2D300. - Don't sprinkle color for looks — if it isn't a status or a value, it stays grey.
- Don't crowd the grade letter — it owns the top-left corner of every card.
- Don't lighten the ground — near-black is what makes the accents pop.
In one breath: a near-black, phone-first LEGO tool where a single condensed typeface, a yellow-leads-red-backs palette, and a photo-forward grade card do all the work — top bar and tab bar holding it together like a native app.
— The Brick Drop · LEGO 2026 Timeline · design system as-built · 2026-07-03