Keen: A Mental-Fitness Game Platform for Older Adults
A ground-up design system and desktop prototype, built with AI and shipped as an interactive artifact.
Role: Design system + UI
Surfaces: Mobile & desktop
Audience: Adults 60+
Deliverable: Live prototype
The brief
Keen is a platform of cognition and memory games aimed at older adults — "mental fitness" framed to help players stay sharp and guard against cognitive decline. No existing brand, codebase, or Figma file existed to start from; the direction was a set of words: clean and minimal, bold and energetic, animated, a warm terracotta and forest-green palette, geometric modern type. The tone needed to land between two failure modes — nothing clinical like a hospital form, nothing juvenile like a kids' app.
Starting with AI, not a blank page
Rather than sketching a palette and type system from scratch, I used Claude to formulate the initial design system directly from that handful of direction words. I described the audience and tone; Claude proposed the first pass at the color palette, type pairing, and content voice — the warm terracotta-and-forest-green system, the Sora/Public Sans pairing, the sentence-case, numbers-over-adjectives copy rules. That gave me a real, working foundation to react to in minutes rather than days, and freed up my time to focus on the decisions that mattered most: the audience-driven defaults (18px base text, 56–64px tap targets, high-contrast color, deliberately unhurried motion) that no AI could infer from a brief alone.
Designing for the audience first
Because the primary users are older adults, several defaults were pushed past typical web conventions before a single screen was drawn: an 18px base body size instead of 16px, tap targets at 56–64px rather than the usual 44px floor, high-contrast text with no gray-on-gray, and motion that's confident and readable rather than fast and subtle — players should always be able to see what just happened.
Building the system
Rather than jump straight to screens, the foundations were built first: color tokens (a warm cream base, terracotta as primary/CTA, forest green as secondary/success, three additional accents reserved for color-coding game categories), a two-family type system pairing Sora for headings and display numbers with Public Sans for body and UI chrome, and a motion language built around a bouncy easing curve for interactive elements versus a calmer ease for page-level transitions.
Components were built from that foundation up — buttons, inputs, tabs, badges, cards — plus two intentional additions specific to this product: a GameCard tile (icon, title, category color, last-played stat) since the whole product is a catalog of games, and a ProgressBar for streak and completion visualization used across the home and progress screens.
From components to product
The system was then applied to full mobile and desktop app flows — home dashboard, game detail, progress, and settings — reusing the same component set across both surfaces to prove it out as a genuine system rather than a one-off screen design.
Shipping it as a working prototype
Rather than hand over static screens, the desktop flow was packaged into a single self-contained interactive HTML file — no build step, no dependencies — with Claude Code handling the last mile: getting the file onto GitHub and live on GitHub Pages. That let the handoff be a working link instead of a static comp — anyone can click through the real navigation, toggle the switch controls, and feel the bounce-easing on buttons and cards firsthand, rather than inferring interaction from a screenshot.
Outcome
A complete, original design system — tokens, components, and content guidelines — built with no existing brand to draw from, applied consistently across two app surfaces, and delivered as a clickable artifact rather than a flat deck. Using Claude to stand up the initial palette, type, and voice, and Claude Code to ship the live prototype, meant more of my time went to the judgment calls a design system actually lives or dies on. It's set up to be handed to engineering or reconciled against a real brand the moment one exists.