ScoreApp — Scorecard Quiz
Quiz FunnelAssessment-style quiz funnel: 'AI scorecards that qualify every lead,' an avatar social-proof pill, and a blue CTA into a scored, personalized result.
- Mood
- Credible, B2B-leaning, results-driven. A quiz that scores and qualifies the lead — diagnostic authority rather than playful personality.
- Colors
- White base, dark near-black headline type, a bright confident blue for CTAs and the score UI, gray body. Clean and trustworthy.
- Type
- Big bold black sans headline, readable gray subhead promising the payoff ('reveal who's ready to buy'), sans throughout, large tabular numerals for scores.
- Layout
- FLOW-FIRST scorecard funnel: social-proof avatar pill → headline → blue Start CTA ('Start for free, no credit card') → assessment questions (scales, sliders, multiple choice, progress bar) → email/contact capture → SCORED RESULT page (overall score gauge, category breakdown bars, personalized recommendations, book-a-call CTA). Homepage centers pill + headline + subhead + CTA.
- Motion
- Score gauge animates to its value, category bars fill, smooth question transitions, progress bar, subtle CTA hover.
- Texture
- Bright, clean, lightly shadowed cards; the score gauge and bars are the visual centerpiece; airy spacing.
- Imagery
- Generate: a scorecard result mockup (a score gauge/percentage ring, category bars, personalized recommendations), a social-proof avatar pill ('151k+ users'), and clean assessment question cards with sliders/scales. Tool: build the gauge + bars in code; GPT-Image for the result-report mockup; Pexels/Flux for the small avatar faces.
- Don't
- No dark theme, no playful cartoon tone, no clutter, no more than one accent. Don't hide the score behind vague fluff — the diagnostic payoff must feel concrete.
Use in a session
scoreapp-scorecard
Tell Claude: build [my thing] using swipe ref scoreapp-scorecard
Full recreation prompt
Recreate a landing page in the "ScoreApp — Scorecard Quiz" style (Quiz Funnel). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout. For this archetype the LAYOUT field carries the funnel/quiz FLOW — preserve that conversion structure, not just the look.
Design DNA:
- Mood: Credible, B2B-leaning, results-driven. A quiz that scores and qualifies the lead — diagnostic authority rather than playful personality.
- Colors: White base, dark near-black headline type, a bright confident blue for CTAs and the score UI, gray body. Clean and trustworthy.
- Typography: Big bold black sans headline, readable gray subhead promising the payoff ('reveal who's ready to buy'), sans throughout, large tabular numerals for scores.
- Layout: FLOW-FIRST scorecard funnel: social-proof avatar pill → headline → blue Start CTA ('Start for free, no credit card') → assessment questions (scales, sliders, multiple choice, progress bar) → email/contact capture → SCORED RESULT page (overall score gauge, category breakdown bars, personalized recommendations, book-a-call CTA). Homepage centers pill + headline + subhead + CTA.
- Motion: Score gauge animates to its value, category bars fill, smooth question transitions, progress bar, subtle CTA hover.
- Texture: Bright, clean, lightly shadowed cards; the score gauge and bars are the visual centerpiece; airy spacing.
- Avoid: No dark theme, no playful cartoon tone, no clutter, no more than one accent. Don't hide the score behind vague fluff — the diagnostic payoff must feel concrete.
Imagery (generate real assets, do not use placeholders): Generate: a scorecard result mockup (a score gauge/percentage ring, category bars, personalized recommendations), a social-proof avatar pill ('151k+ users'), and clean assessment question cards with sliders/scales. Tool: build the gauge + bars in code; GPT-Image for the result-report mockup; Pexels/Flux for the small avatar faces.
Reference exemplar: https://www.scoreapp.com. Build the funnel around the content I give you next, faithfully channeling this aesthetic and this flow, and generate the matching imagery described above.