takescake site-wide 2026 expressive redesign
2026-07-19 | 2 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__inneris 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 + search as the interactive visual); 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.
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
- / — brand-first hero, stats below the fold
- /deck — staged brew → list (source language)
- /scan, /upgrade-planner, /commander-staples
- /camera — unchanged immersion (no marketing chrome)
Still iterating (next agents)
- Scan density — restyle CardScanner panel/queue/results to studio surfaces without changing capture IA
- Collection forms — compact rows + CollectionSidebar to full studio tokens
- Synergy Explorer — done (2026-07-19): navy/teal studio shell + case-file IA; see
synergy-explorer-case-file-ux.md - CardRow dark — done (2026-07-19):
tone="studio"+ RowBadge/RowActions; seeshared-card-row-dark-surface.md