Deck Studio 2026 redesign: expressive UX that humans can finish

Deck Studio used to dump everything at once: marketing chrome, duplicate commander/concept forms, light controls on a dark shell, power knobs, pins, stats, commerce, and category lists in one endless scroll. That matched how the feature grew—not how people brew.

This rewrite applies 2026 human-centered design research to the Commander tool surface.

Research we used

Material 3 Expressive / CHI 2026

Google’s CHI 2026 work on expressive design and the Material Expressive research showed that size, shape, color, and containment are not decoration—they are functional signifiers. In lab studies, people spotted key actions up to 4× faster and finished tasks about 20% faster when primary controls were larger, better contained, and higher contrast.

We applied that literally:

• One oversized Build deck button (pulsing attention without competing chrome)
• Contained brew panel vs. list workspace
• High-contrast teal/sky accents on a deep navy field (no purple-on-white flat system)

Progressive disclosure (Nielsen / IxDF / IUI 2026)

Classic progressive disclosure—and newer AI-facing guidance—says: put the few features that serve most tasks on the first screen; keep the rest one click away.

Deck Studio now stages:

1. Tune — commander context, concept, power, lands, Build
2. List — categories, swap/lock, collection coverage, export/share
3. Advanced — pin must-includes (collapsed by default)
4. Validate constructed — format validator as a secondary mode, not four always-visible format tabs

Human-centered design (IxDF 2026)

HCD’s 2026 framing: solve the root problem with small, clear interventions. The root problem here was cognitive overload + duplicated entry, not “needs more glassmorphic cards.”

What changed for players

• Brand-first hero: takescake + Deck Studio + one sentence + commander search. No pill clusters, highlight grids, or workflow callouts in the first viewport.
• Single entry path: search lives once in the hero; the panel no longer re-asks for the same concept in a sticky rail.
• Brew → List stages after a build, so you are not scrolling past knobs to edit the list.
• Shared decks directory and shared deck pages reuse the same studio shell language.
• Shared Decks link in the site header.

Technical notes

• New expressive token set under .tc-studio / .tc-deck in globals.css (dark navy, teal/sky accents, containment radii).
• app/deck/page.tsx rewritten as a single-composition shell.
• DeckBuilderPanel keeps the same build/swap/share/collection APIs; only the interaction model and chrome changed.
• Constructed validation remains available behind a mode toggle.

Limitations

• Collection, staples, and search list UIs can adopt tone="studio" next; Deck + Shared Decks already use the shared dark row.
• Scan match rows keep their dedicated scanner chrome but share the same primary+More action hierarchy idea.

Try it

Open /deck, pick a commander, hit Build deck, then switch to List to swap and export.