takescake

takescake site-wide 2026 expressive redesign

2026-07-19 | 3 min read

takescake site-wide 2026 expressive redesign

Deck Studio was the pilot. This pass rolls the same 2026 human-centered language across the product canvas and chrome so every route feels like one product.

What “whole site” means here

  • Global tokens — indigo/purple + light surfaces retired; teal/sky primaries and dark surfaces are defaults in :root (--studio-* plus aliased --color-*)
  • No light content card — .tc-main__inner is transparent (no faux card depth, no holo stamp) so every route sits on the same navy canvas
  • Fonts — Syne (display) + Manrope (body) via next/font
  • Chrome — header brand mark (takescake + accent dot), search-first bar, teal active states; footer uses studio ink/lines
  • Homepage — brand-first hero (takescake + one headline + one lede + Deck/Scan CTAs + full-width search stage); card results render as a dense art-forward gallery across a widened ~96rem canvas; coverage stats and feature grids stay below the fold
  • Tools — scan, collection, planner, staples, cards, search, posts share studio ink/heroes without rewriting every interior form

Token decisions (foundation)

Token Value Role
--studio-bg / --color-surface-dark #061018 Page canvas
--studio-ink / --color-text-primary #f3f8fc Primary text
--studio-muted rgba(210,230,242,0.68) Secondary text
--studio-accent #5eead4 Brand / primary CTA
--studio-accent-2 #38bdf8 Links / secondary accent
--studio-surface rgba(10,22,36,0.88) Interactive panels only
--studio-line rgba(148,200,230,0.22) Borders

--color-deck-* now aliases the same navy/teal system so Deck Studio and the rest of the site do not diverge.

Homepage gallery (2026-07-19 follow-up)

The hero no longer splits brand copy and search into a half-width glass column. Search is a full-width stage under the brand block, and CardSearch accepts density="gallery" so results use a dense 5:7 art grid (minmax(160px, 1fr)) on a homepage shell widened to min(96rem, …). Oracle text is collapsed in gallery density; /search and /cards keep the default denser-text layout.

Why: MTG prints share a fixed aspect ratio, so a full-bleed auto-fill grid (Scryfall/TCGplayer pattern) uses the monitor better than masonry or a boxed half-panel.

Mobile commerce shell (2026-07-20)

Phones were losing conversion to colliding chrome (floating command bar), tiny CTAs, and a tall hero that pushed search below the fold. The mobile pass ships a thumb-zone dock and conversion-first surfaces:

  1. Tokens — --touch-min (48px on phone), --mobile-dock-h (includes safe-area), tighter shell spacing
  2. Always-on dock — MobileBottomDock with Scan / Find / Buy (planner) / Own / Deck; optional recent-card toast with Buy + Own (subId1=mobile-dock)
  3. Header — compact search (16px inputs to stop iOS zoom), full-viewport Navigate sheet with backdrop
  4. Homepage — shorter brand/title/lede; full-width Deck/Scan CTAs; search gallery stays reachable
  5. Gallery — forced 2-column Buy tiles; Buy always visible (no hover dependency); indigo Buy shadows retired for teal
  6. Scanner — full-width Log ≥48px; More overflow stays in-viewport
  7. Collection / Deck / Planner / Staples / Synergy — sticky primary CTAs clear the dock; staples 2-col with large quick-add; synergy case stacks full-width
  8. Noise off — particles, swipe hint, holo stamp, floating CommandCenter, and tray hidden on ≤768px

See also: Mobile bottom dock commerce layout.

Research still in force

CHI 2026 / Material Expressive: size, shape, color, containment as functional signifiers. Progressive disclosure for dense tools. HCD: fix the root overload of competing themes, not just one page.

What to click

Still iterating (next agents)

  1. Scan density — restyle CardScanner panel/queue/results to studio surfaces without changing capture IA
  2. Collection forms — compact rows + CollectionSidebar to full studio tokens
  3. Mobile commerce — done (2026-07-20): MobileBottomDock + thumb-zone CTAs; see mobile-bottom-dock-commerce-layout.md
  4. Synergy Explorer — done (2026-07-19): navy/teal studio shell + case-file IA; see synergy-explorer-case-file-ux.md
  5. CardRow dark — done (2026-07-19): tone="studio" + RowBadge/RowActions; see shared-card-row-dark-surface.md

Related Posts