Design for AI

Playful rounded: UI design prompt

Palette, type rules and a pasteable prompt for playful rounded. Also called Duolingo style, chunky playful UI, 3D button UI, gamified UI, friendly rounded design. 2019 onward (Duolingo redesign 2019, Headspace, Notion mascots).

Traits

  • fully rounded shapes: pill buttons, 16-24px card radius, circular avatars and badges
  • chunky "pressable" buttons with a solid bottom edge (border-bottom 4px in a darker shade) that squashes on press
  • bright, saturated, cheerful palette: green, blue, yellow, red, purple on white
  • bold rounded sans in heavy weights; big friendly headlines
  • mascots and flat illustrated characters with expressive faces
  • progress bars, streaks, XP, badges: game mechanics as UI
  • bouncy motion: spring easings, wiggles, confetti on success

Palette

#ffffff page, #4b4b4b text, #58cc02 green, #1cb0f6 blue, #ffc800 yellow, #ff4b4b red, #ce82ff purple, #e5e5e5 line

Type

Nunito (800-900 for headings, 700 for buttons), Fredoka, Baloo 2 or Varela Round; headings 800 at 32-56px, body 500 at 17px, buttons 700 uppercase at 15px with 0.05em tracking

Do

  • build buttons with a solid colour, border-bottom 4px in a 20% darker shade, radius 16px; on active remove the bottom border and translateY(4px)
  • give every state a colour and an icon: correct is green, wrong is red, locked is grey
  • use one mascot in three poses (idle, happy, sad) and reuse it consistently

Don't

  • do not use thin fonts or grey text under #777; the style is high energy
  • do not use drop shadows for depth; use the 3D bottom edge
  • do not mix in sharp corners anywhere, including inputs and images

Known for it: Duolingo, Headspace (partial), Khan Academy Kids, Kahoot

CSS seed
:root {
  --bg: #ffffff;
   --fg: #4b4b4b;
   --accent: #58cc02;
   --accent-dark: #58a700;
   --accent2: #1cb0f6;
   --accent3: #ffc800;
   --line: #e5e5e5;
   --radius: 16px;
   --font: 'Nunito',sans-serif
}
Prompt

Build the site in playful rounded Duolingo-like style. Background #ffffff, text #4b4b4b, muted #afafaf, lines #e5e5e5. Colours: green #58cc02 (dark #58a700), blue #1cb0f6 (dark #1899d6), yellow #ffc800 (dark #e5a800), red #ff4b4b, purple #ce82ff. Font Nunito: headings 800 at 52/36/26px, body 500 at 17px line-height 1.5, buttons 700 uppercase 15px with 0.05em tracking. Buttons: solid fill, white text, border-radius 16px, 50px tall, border-bottom 4px solid the darker shade; on active border-bottom 0 and translateY(4px), 80ms. Secondary buttons: white with 2px #e5e5e5 border and 4px bottom edge. Cards: 2px #e5e5e5 border, radius 16px, 24px padding, no shadow. Progress bar: 16px tall pill, #e5e5e5 track, #58cc02 fill with a lighter 4px highlight stripe on top. Badges are 64px circles with flat icons. Add a friendly mascot illustration (flat, rounded, big eyes) next to the hero headline. Motion: spring (cubic-bezier(0.34,1.56,0.64,1)) at 300ms on appear; mascot wiggles 3deg on hover; confetti burst on form success.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in playful rounded Duolingo-like style. Background #ffffff, text #4b4b4b, muted #afafaf, lines #e5e5e5. Colours: green #58cc02 (dark #58a700), blue #1cb0f6 (dark #1899d6), yellow #ffc800 (dark #e5a800), red #ff4b4b, purple #ce82ff. Font Nunito: headings 800 at 52/36/26px, body 500 at 17px line-height 1.5, buttons 700 uppercase 15px with 0.05em tracking. Buttons: solid fill, white text, border-radius 16px, 50px tall, border-bottom 4px solid the darker shade; on active border-bottom 0 and translateY(4px), 80ms. Secondary buttons: white with 2px #e5e5e5 border and 4px bottom edge. Cards: 2px #e5e5e5 border, radius 16px, 24px padding, no shadow. Progress bar: 16px tall pill, #e5e5e5 track, #58cc02 fill with a lighter 4px highlight stripe on top. Badges are 64px circles with flat icons. Add a friendly mascot illustration (flat, rounded, big eyes) next to the hero headline. Motion: spring (cubic-bezier(0.34,1.56,0.64,1)) at 300ms on appear; mascot wiggles 3deg on hover; confetti burst on form success.

## Tokens
:root { --bg:#ffffff; --fg:#4b4b4b; --accent:#58cc02; --accent-dark:#58a700; --accent2:#1cb0f6; --accent3:#ffc800; --line:#e5e5e5; --radius:16px; --font:'Nunito',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.