Prompt

“A savings app for teenagers: bright, playful, card-led, parent-approved.”

The agent invented Tenner - A savings app and contactless card for 13 to 17 year olds, set up and supervised by a parent.

Toolchain: pure + inspo
Register: light mode
Build effort: 10+ MCP calls · 5 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The standout move is the fold's device stack: a CSS-drawn phone running a real-looking Tenner screen (balance, two goals with animated progress bars, three recent payments) flanked by two CSS-drawn cards at opposing tilts, one tangerine-to-pink, one grape-to-sky. It takes wise-com's idea that the product UI is the hero image and rainbow-me's toy-object composition, and answers the brief's "card-led" without a single raster asset. The same phone chassis reappears in the dark parents section as the parent view, with an approve request and live toggles, so the two apps the page keeps talking about are both literally on the page.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Rainbow Me - Gave the fold its whole posture: a saturated sky-blue ground with white cloud shapes and a lime sun, a heavy rounded display face, and an iPhone mockup parked in the right third with the headline anchored left against it.
OWO - Send money on WhatsApp - The warm cream paper below the fold, the wide radius scale (16 to 40), and the idea of feature copy living inside saturated colour blocks; the goals bento is a direct descendant of its headline-as-colour-tiles move.
Wise - The hero visual is a working screen rather than an illustration: real balances, two goals with progress bars, three recent payments. Its lime pill CTA and near-black green ink became the lime button and the deep teal ink token.
Family - The black pill plus white pill CTA pair, the sentence-case bold headline over a two-line supporting sentence, and the dark card sitting next to a light one, which became the dark parents section between two light ones.
Middle | Helping you home - The single headline word reversed out inside a filled, fully rounded pill; here "grows." sits in a pink pill tilted two degrees.

How it was built

The actual MCP calls, in order.

recommend
```
brief "A savings app for teenagers: bright, playful, card-led, parent-approved.", mode light, detail full
```
Picked feature-stack, measured the genre as 71% light paper and grotesk-sans display, returned glideapps-com, dia-com, mailchimp-com, forestadmin-com, arrows-to plus the pricing comparison-table reference JSX; the exemplars were generic SaaS, the evidence packet and the table were what I kept
search_screens
```
query "playful fintech card debit card teens family money app bright colours", industry fintech, mode light, limit 10, detail full
```
owo-app, family-co, rainbow-me, wise-com, gusto-com, razorpay-com, deel-com, becomeautonomous-com, middle-finance, public-com with fold autopsies; the first four plus middle-finance set the direction
search_screens
```
query "playful consumer app bright bold colours rounded cards phone mockup hero", style playful, mode light, limit 10, detail full
```
buttondown-email, owo-app, fal-ai, columbia-com, francouvertes-com, rainbow-me, lottiefiles-com, boldmonday-com, chickfila-com, museumofmoney-com; confirmed the rounded-heavy display plus flat colour blocks pattern, and buttondown-email's angled sticker gave me the tilted pill
find_components
```
type hero, industry fintech, vibe playful, limit 10
```
Only gusto-com came back; noted its centred black-pill plus white-pill CTA pair and moved on
find_reference_components
```
type hero
```
Seven editorial hero shapes (documentary, manifesto, marquee, question, split-screen, stat-led, word-as-art); the split-screen "atmospheric panel, no image placeholder" note reinforced drawing the card and phone in CSS rather than faking a photo
get_screen
```
slug rainbow-me
```
Full record: SF Pro Rounded Black display, #84e4fb sky ground, #1d4244 ink, phone right third; used to size the phone against the headline
get_screen
```
slug family-co
```
Full record: radius scale 0/8/12/32, 3-step type scale, Inter body; confirmed the CTA pair and the 72px headline over two-line body
compare
```
slugs owo-app, family-co, rainbow-me, wise-com
```
Shared light register, radius scales 16 to 40 across the set, spacing steps clustering at 96 to 120, wise at 5 type steps; set --gap at clamp(72px, 9vw, 120px) and the five-token type scale
find_components
```
type faq, style playful, limit 6
```
netlify-com and nanorcollection-com crops, neither close to the brief; the FAQ was built from the details/summary pattern instead
find_components
```
type footer, vibe playful, limit 6
```
Zero results; footer built as a plain four-column dark block

Palette, traced

Every token, and the reference it came from.

--paper#fff7e8Page ground below the fold and the phone screen; a lighter cousin of owo-app's cream so the saturated tiles have something warm to sit on
--ink#1b2a30Text, borders, the dark parents section, the footer and the phone bezel; a teal-leaning near-black from rainbow-me and wise-com rather than pure black, which read too corporate against the cream
--sky#7ed8f6Hero ground and the closing CTA band; rainbow-me's sky, pulled a touch toward cyan so the lime and tangerine stay legible on it
--lime#cdf25aPrimary action colour (the lime pill, stat numerals, the approve button) borrowed from wise-com's CTA and used sparingly so it reads as "go"
--tangerine#ff7a3dThe card gradient start, the £0 numeral, one bento tile and one step badge; owo-app's orange, softened slightly for a warmer teen register
--grape#7b5cd6The second card, the chores tile and the identity icon; a cooler counterweight so the page is not only warm
--pink#ffa6d9The headline highlight pill, the round-ups tile and the card gradient end; a soft magenta that ties the card to the headline

Built with the Inspo MCP - try it on your own brief.← All examples