← Back to the app
The Wardrobe Web · design file
How this app
got its look
Three design eras in twelve days, each one a correction taught by
use. This page is written in the third era's language, so you're looking at the
philosophy and the artifact at once.
The Eras
Era 1 · Aug 1-2 — The Catalog
Japanese menswear magazine as interface
The first build treated the wardrobe as an editorial document: unbleached-cotton
ground, Futura mastheads, monospace spec labels, hairline-ruled catalog rows
numbered by buy order. The palette came from the clothes themselves — indigo,
olive drab, ecru — so the page felt like it belonged to the wardrobe it described.
Its strengths were honesty and voice. Its flaw: text was the interface. You
read the wardrobe instead of seeing it.
Kept forever: the wardrobe-derived palette, buy-order
numbering, mono prices, and the conviction that a personal tool deserves a
point of view.
Era 2 · Aug 2-13 — The Instrument
From document to machine
The second era made the page operable: click-to-zoom focus cards with outfit
webs radiating to every compatible piece, likes and passes that persist, filters,
profiles and onboarding, a fit generator, daily fits, a build tracker, seasons,
and a swipe trainer that learns taste. Under the hood it became a system —
daily link patrol, scout pipeline, AI sidecar.
Its flaw was inherited: every new instrument wore Era 1's clothes. Dense
labels, hairlines everywhere, chrome competing with product photography.
Powerful, but it read as an engineer's terminal. "Choppy and basic" was the
accurate review.
Kept forever: every mechanism. The web, the trainer, the
engines — none of that changes. Only the skin was wrong.
Era 3 · Aug 13 — The Commerce Grade (current)
Imagery is the interface; chrome recedes
The teardown question: what do GOAT and Grailed actually do? They let the
product photograph carry every card, kill borders in favor of elevation and
surface contrast, keep type quiet except prices, put search and category pills
where thumbs live, and sell from a sticky sheet, not an inline link. Era 3
rebuilds the skin on those rules: dark-first, twelve-pixel radii, shadow instead
of hairline, an app bar, pill navigation, a hero rail, a product sheet with one
big buy button.
The test: a stranger should mistake it for a funded
commerce app, and James should still feel the Era 1 soul in the palette and the
mono prices.
The Palette, Era 3
Still the wardrobe's own colors —
olive drab, indigo, tan — lifted for dark ground. Era 1's palette never left;
it just moved to accent duty.
Principles that survived all three eras
- Loud in coverage, quiet in color.The owner's clothing signature
is also the design system: expressive layouts, muted palettes. The app dresses
like its user.
- Never lie about the merchandise.Dead links get removed, sold-out
pieces wear RESTOCK badges, prices update from a daily patrol. A pretty page
that lies is worse than an ugly one that doesn't.
- Content is never held hostage by JavaScript.Learned the hard way
when a reveal animation white-paged the app: everything renders first, animation
is a bonus layer, fallbacks force visibility.
- The robots do the boring parts.Link verification, price checks,
image pipelines, seasonal weighting — automated. Human attention is spent on
taste, which is the one thing that can't be.
- Story pieces over correct pieces.The owner keeps what has
provenance. The app's job is to surface pieces worth telling stories about,
not to optimize a spreadsheet.
Iteration log
Aug 01Static lookbook: 55 scouted pieces, phased buy order, six outfit formulas.
Aug 01Product photos embedded; outfit formulas made fully linkable.
Aug 02Interactive Wardrobe Web: click-to-focus, outfit webs, 114 pieces, zero blank cards after a three-tier image hunt.
Aug 02Likes, filters, fit generator, buy-plan export. Zoom-to-center focus cards.
Aug 02Onboarding quiz, per-person profiles, starter capsules. AI stylist chat via local sidecar.
Aug 02White-page regression: reveal animation held cards at opacity zero. Fail-open pattern adopted; visual verification becomes mandatory.
Aug 02Budget lane (surplus originals beat reproductions), Build tracker, tailnet then public HTTPS serving.
Aug 04Monetization scaffold: themed public boards, affiliate switch point, AI endpoint locked.
Aug 13Seasons engine, swipe taste trainer, fit builder v2 with saved fits. Nine days of link rot purged; price hunter finds $160 and $115 discounts; FW26 wave lands; Palace teaches the same-day-sellout lesson.
Aug 13Era 3 begins: commerce-grade redesign, spec'd by the lead model, executed by cheaper ones, verified by screenshot.
Aug 13Era 3 ships: app bar with search, category pill rails, hero rail, image-first cards with overlay badges, right-anchored product sheets with retailer buy CTAs, formulas as a bottom-sheet card rail, circular swipe controls. Two executor agents, five hard-constraint checks, one collision bug caught by the executor itself, zero broken engines.
Aug 13The feedback-loop night: mobile overflow fixed with a real 390px-viewport proof; the last text-wall section becomes visual lane cards; white thumbnail tiles diagnosed as cover-crop on white-background photography and cured with GOAT-style contain-on-light tiles.
Aug 13Notification bell whose feed the daily patrol writes itself. Brand Universe ships: a force-directed bubble map where bubble size is the owner's real relationship to each brand and dashed frontier bubbles queue their own scouting.
Aug 13The Fit Studio: outfits composed as anatomical collages with occasion-aware scoring, per-slot candidate rails, locks, buy-lists, and saved fits. An executor agent caught a silent HTML parser bug and a mobile dead-tap zone during its own verification.
Aug 13App drawer with flash-free theming, device sync over the owner's own sidecar (no OAuth theater), Spin the Fit from an 87-piece multi-view harvest, and a sheet carousel born from one line of feedback: "my natural instinct was to swipe." Copy pass retires Era 1's language; piece counts become computed so words can never go stale again.
Full specification:
DESIGN_SPEC_V3 · Generated by the resident stylist
system, which also wrote the app, the patrol, and this sentence.