The design timeline
Every visual/design change across the whole project — the Instagram content, the live tool site, the share cards, and the Drop Score grader — reconstructed from git history, dated drafts, design specs, and project memory. Read top to bottom to see how the look actually evolved.
1. Social came first. The Instagram look — "Obsidian Dispatch" (charcoal + red banner, Anton caps) — was locked in April, then quietly evolved. 2. The tool grew into an app, peaking at the June Brand Revamp, then reversing into the stripped-back "Is it worth it?" screen. 3. The real leap was the share card (mid-May): a 4:5, image-forward, gradient-overlay card with an image-sampled grade color — and the Crop Curator tool you built to hand-tune every set. 4. The grader then got its own locked LEGO-yellow system that mirrors the tool, ending in the new grade-card.
April 2026 — identity & the first calculator
#1a1a1a, a red banner on every slide, Anton/Oswald caps, the LEGO® rule, and a bespoke palette sampled from each carousel's imagery. Thirteen posted designs were measured pixel-by-pixel.
May 2026 — the app, and the share card breakthrough
After 17 card iterations on the visual companion, the design locked: a 4:5 portrait card, full-bleed set photo, with a black gradient overlay (top + bottom scrims) instead of a separate image block. The two-block layout was explicitly killed — the note in the file reads "Wow, this was a terrible redesign!!!"
- The grade color comes from the image. Each set gets an
accenthex sampled from its own photo; that color fills the grade letter, eyebrow, and URL. LEGO yellow is only the fallback when a set isn't curated. - You built the Crop Curator because the photos didn't sit right in 4:5. A guided, one-set-at-a-time tool:
zoom(30–400%),x/yposition sliders, accent picker, a grade dropdown pre-filled from the math, and the italic "unique fact" line. - You hand-curated the Anchor-30 sets in two rounds — round 1 on white, round 2 full-bleed with eased scrims — nudging each image's crop coordinates until it looked right. That data now covers 173 sets in
set-image-crops.js. - Tall sets get an image swap. Eiffel, Barad-dûr and the Tallneck use BrickLink product-on-white shots via an
image_srcoverride so they fit the 4:5 frame.
June 2026 — the revamp, the reversal, the grader
#0a0a0a, LEGO-yellow, Avenir Next Condensed — mirroring the live tool site so the two never drift. Ships drop-score.css, a styleguide, and a reference report; every doc re-skinned onto it.July 2026 — most recent
Where each track stands today
The image-forward share card is the through-line: born by hand in May, it became the live site's card in June and set the whole image-accent-grade language. The live site is still the June-4 Brand Revamp; the June-13 "Is it worth it?" subtraction is spec'd but not shipped — the obvious next step. The grader's grade-card (June 30) slots straight in.
Honest status: "Obsidian Dispatch" is still the structural axiom in the carousel files — even July drafts cite it. Everything since April is evolution on top of it, not a clean rebrand. There isn't yet a named replacement. The share card already points the way — image-forward, gradient overlay, image-sampled color. Want me to turn that into the new carousel language and retire Obsidian Dispatch for good?
Bottom line: four tracks, one clear instinct across all the recent work — let the photo and the grade do the talking. The share card nailed it first; the tool and grader followed. The social feed is the last piece still waiting for that reset.