Age-Adaptive UI
Four UI tiers from one component library. Zero per-age forks. CSS tokens drive everything.
What
Chicknz shows different UI to a 4-year-old versus a teenager. The little tier has oversized tap targets and icon-first navigation. The teen tier looks like a normal productivity app. The same React components render all four tiers. No forked codebases, no per-age feature flags buried in conditionals.
The decision that mattered
Drive every age difference through CSS custom properties instead of forking components. A tier is a named set of token overrides. Adding a new tier is a config change, not a rebuild.
Token naming is harder than it looks. It took three rounds of renaming before the scheme stopped causing confusion in code review. Names have to be obvious to future-you at 1 AM, not just to present-you who invented the abstraction.
Good / Bad / Ugly
CSS tokens + CVA variants drove all four tiers from one component library with zero per-age forks.
Token naming took three renamings before it stopped being confusing in code review.
The little-tier tap target made desktop feel cartoonishly large before I added a viewport gate.
Shipped
Four UI tiers (little / kid / tween / teen) live in preview.
Next
Teen tier skill-tree surface.