# Gamified Playful > Bright green chunky buttons with a 3D bottom edge, streak flames, XP bars, lesson paths and a friendly mascot — learning that feels like a game. - Nickname: Streak & XP - Also called: Gamified UI, Duolingo-like, Learning-game UI - Category: Mobile‑first Styles - Moods: Playful, Friendly, Bold - Industries: Education, Kids & Family, Fitness & Wellness, Gaming, Healthcare - Style page: https://uilingo.dev/styles/gamified-playful/ Gamified Playful turns every task into a level. Buttons and cards are chunky rounded tiles with a solid darker bottom edge (0 4px 0) that squashes flat when pressed; progress is a thick pill XP bar with a glossy stripe; the home screen is a winding path of round lesson nodes with a mascot cheering beside it; and the header shows streak, gems and hearts. Type is heavy, rounded and upper-case for actions. White canvas, light-grey 2px borders and a few loud flat colours (green, sky blue, orange, gold) keep it clean enough to use every day. ## Best for - Language and skill-learning apps - Habit, fitness and wellness trackers - Onboarding and quiz flows that need motivation - Kids and teen products ## Avoid for - Banking, legal or medical records - Enterprise admin and data-heavy tools - Luxury and premium brands ## Do - Give every button and card a solid 4px darker bottom edge and collapse it on press - Show progress constantly: XP bar, streak count, completed nodes - Use upper-case 800-weight labels on buttons (Latin only) - Keep the canvas white with 2px #E5E5E5 borders so colour stays meaningful ## Don't - No blurry soft shadows or gradients on buttons - Don’t add brights beyond the six game colours (green, blue, orange, gold, purple, red); no pinks, teals or pastels - Don’t hide progress or rewards behind menus - Don’t use thin or condensed fonts ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Gamified Playful" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Bright green chunky buttons with a 3D bottom edge, streak flames, XP bars, lesson paths and a friendly mascot — learning that feels like a game. Design keywords: chunky 3D buttons, solid bottom edge, bright green, streak flame, XP progress bar, lesson path nodes, mascot, gems & hearts, heavy rounded type. ## Visual language A learning game in app form: a clean white canvas with light-grey 2px borders (#E5E5E5), and on top of it chunky rounded tiles in six flat, loud game colours — bright green #58CC02, sky blue #1CB0F6, orange #FF9600, gold #FFC800, plus purple #CE82FF and red #FF4B4B as supporting brights — each with a solid darker bottom edge that makes it look like a pressable toy block. Type is heavy and round (Nunito 800–900, Mitr for Thai), buttons shout in upper-case, and progress is everywhere: streak flame, gems, hearts, thick XP bars, a winding path of round lesson nodes and a cheerful green seedling mascot. Bright and bouncy, but tidy enough for daily use. ## Signature details (must be visible) - Headings: Nunito 900 for display/h1/h2, 800 for h3, KPI and stat numbers (token headingWeight 800). Thai h1/h2 render in Mitr 700 (set :lang(th) h1,h2 { font-weight:700 }; Mitr has no 900); Thai h3 and card titles 600; Thai buttons, tabs and badges 700, no case, no tracking. Hero headline colour is dark green #46A302 (3.2:1, large text only) — never #58CC02 on white for text - Exactly six game brights: green #58CC02, blue #1CB0F6, orange #FF9600, gold #FFC800, purple #CE82FF, red #FF4B4B. No pink, teal or pastel brights (the only pinks are the mascot cheeks) - 3D bottom edge on every button, card, chip and input: box-shadow 0 4px 0 (green #46A302, blue #1899D6, orange #CD7900, gold #E0A800, purple #A568CC, red #E03C3C, pale green #A5ED6E, pale blue #84D8FF, grey #E5E5E5); on :active translateY(4px) and the shadow drops to 0 - Buttons: 14px radius, no border, 800 weight, upper-case Latin with 0.05em tracking (Thai: no case, 700); primary = #58CC02 with dark-green #173F00 text - XP bar: 16px pill track #E5E5E5, fill #58CC02 with a glossy white stripe (rgba(255,255,255,.4) from 22% to 42% of the height) - Lesson path: 70×62px round nodes with a 7px solid bottom edge; done = green with a check, current = gold star with a progress ring and a 'START' speech bubble, locked = grey with a lock. Mobile path: a vertical column with node centres 86px apart, each node shifted by translateX offsets 0, −46, 10, 54, 0px. Web hero mock: 3–4 nodes may run horizontally about 110px apart, joined by a dotted #E5E5E5 connector (6px stroke, round dots every 16px). START bubble: white, 2px #E5E5E5 border, 0 4px 0 #E5E5E5 edge, #46A302 900 text, sitting 12px above the node with a 10px caret. Progress ring: 7px stroke, track #E5E5E5, arc #FFC800 with round caps covering about a third (30–50%), radius = node radius + 12px - HUD row on the home screen: course flag (a flag emoji or the green brand tile with a 3px darker bottom edge), orange flame + streak count, blue gem + count, red heart + lives. Emoji 🔥 💎 ❤️ are fine in the HUD (the demo uses them on web), or use inline SVG filled #FF9600 / #1CB0F6 / #FF4B4B; counts take the same colour at 900 weight - Mascot: a round green seedling blob (CSS gradients) with big white eyes, pink cheeks, a smile and a leaf on top; it bobs 8px on a 2.4s loop when motion is allowed - Colour rotation for icon tiles and KPIs: green, blue, orange, purple #CE82FF, each a rounded square with its own darker bottom edge - Edge and tint colours are decorative extras outside the tokens, declared once as CSS custom properties: --g-green-d #46A302, --g-blue-d #1899D6, --g-orange-d #CD7900, --g-gold-d #E0A800, --g-purple-d #A568CC, --g-red-d #E03C3C, pale edges --g-green-e #A5ED6E / --g-blue-e #84D8FF / --g-cream-e #FFC46B, pale panel fills green #D7FFB8, blue #DDF4FF, cream #FFF4D6 - Reds: hearts, lives and the danger button fill #FF4B4B with edge #E03C3C (danger button text #3A0000). The danger token #E02B2B is only for form error text and borders - Text and tint colours (all declared, nothing else): secondary/ghost text #0F7DB5; eyebrow and info badge #0F6E9C on #DDF4FF; success badge #2B6B00 on #D7FFB8; warning badge #8A4A00 on #FFF0D5; danger badge #B3161B on #FFDFE0; featured/gold badge #5A3B00 on #FFC800 with a 0 2px 0 #E0A800 edge; disabled #8A8A8A on #E5E5E5 with 0 4px 0 #CFCFCF; mascot cheeks #FF9AC1 ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #FFFFFF - surface-2 #F7F7F7 - text #3C3C3C - text-muted #6B6B6B - primary #58CC02 (text on it #173F00) - secondary #1CB0F6 (text on it #06293B) - accent #FFC800 - border #E5E5E5 - success #3E8E00 · warning #C25E00 · danger #E02B2B - chart series #58CC02, #1CB0F6, #FF9600, #CE82FF, #FF4B4B Radius: sm 10px, md 14px, lg 18px, xl 24px, pill 999px Border width: 2px Shadows: sm `0 2px 0 var(--c-border)`, md `0 4px 0 var(--c-border)`, lg `0 6px 0 var(--c-border)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 110ms cubic-bezier(.3,1.4,.6,1) ## Typography (Latin + Thai) - Headings: Nunito 700/800/900 with Thai fallback Mitr 500/600/700 - Body: Nunito 400/600/700/800 with Thai fallback Anuphan 400/500/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Mitr:wght@500;600;700&family=Anuphan:wght@400;500;600;700&display=swap - CSS stacks: heading `"Nunito", "Mitr", system-ui, sans-serif`; body `"Nunito", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5.4vw, 4.4rem), heading weight 800, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Mitr’s chunky rounded geometry matches Nunito’s heavy round terminals for headlines and buttons; Anuphan is a friendly, open loopless sans that keeps Thai body text light next to Nunito. ## Components - Primary button: green #58CC02, text #173F00, 0 4px 0 #46A302; secondary: white, 2px #E5E5E5 border, blue #0F7DB5 text, 0 4px 0 #E5E5E5; ghost: blue upper-case text - Thai labels: buttons, tabs and badges stay in Thai with no case and no tracking (Mitr 700). Add a short Latin micro-label ('START', 'XP', 'LV 3') only where it is a game term - Cards: white, 2px #E5E5E5 border, 18px radius, 0 4px 0 #E5E5E5; hover lifts 2px and the edge grows to 6px - Selected states (chip, segmented option, radio card, sidebar item, active tab icon): light blue #DDF4FF fill, 2px #84D8FF border and matching bottom edge, blue text - Inputs: 50px, #F7F7F7 fill, 2px #E5E5E5 border, 14px radius, 600 weight text. On focus: border #1CB0F6, fill #FFFFFF, and the bottom edge removed (box-shadow:none), with no glow - Checkboxes: 26px, 8px radius, checked = blue with a white 3px tick and a 2px blue bottom edge; switch = green when on - Badges: small pills, 800 weight upper-case Latin (Thai 700, no case); info #0F6E9C on #DDF4FF, success #2B6B00 on #D7FFB8, warning #8A4A00 on #FFF0D5, danger #B3161B on #FFDFE0; featured badge #5A3B00 on gold #FFC800 with a 0 2px 0 #E0A800 edge - Dashboard: white sidebar with 800 upper-case items, active item boxed in light blue; KPI cards each get a coloured icon tile; line chart 4.5px with the second series as round dots; bars rounded with a darker inner bottom - Tab bar: white, 2px top border, the active icon sits in a light-blue rounded square with a blue border - Mobile featured / unit banner: green tile with dark-green text, 5px darker bottom edge and an outlined icon button - Spacing: sections 96px vertical padding (64px under 768px), card padding 24px, grid gaps 16–24px. Nav: white bar with a 2px #E5E5E5 bottom rule; under 560px it keeps only the logo and a compact green CTA (0.8rem, 0 12px padding, nowrap) and hides the sign-in link. Footer: white with a 2px #E5E5E5 top rule and 800-weight link headings ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → stats → features → steps → testimonials → cta. Feature section as alternating. Split hero with a huge dark-green (#46A302) headline, a plain lead and two chunky buttons; the product shot is a game board made of bordered tiles: a HUD row (🔥 12 · 💎 142 · ❤ 5, 900 weight) over a 2px divider, a mini lesson path of 3–4 round nodes running horizontally (done green with check, current gold star with progress ring and 'START' bubble, locked grey) with no chart title or badge above it, and a KPI tile with a glossy 16px XP bar, with an 88px mascot peeking from the tile's lower-left corner. The stats row of tiles in rotating colours sits on white; the features section sits on #F7F7F7 with 2px #E5E5E5 rules above and below, as alternating rows whose illustration panels are ~280px tall tiles with 2px borders and 4px edges, each holding real game content: the mascot on green #D7FFB8 (edge #A5ED6E), a 2×2 quiz answer grid with one selected on blue #DDF4FF (edge #84D8FF), and a league table with XP on cream #FFF4D6 (edge #FFC46B). Then round numbered step nodes, testimonials as bordered tiles and a big green CTA block with an 8px dark-green bottom edge. Dashboards use a light sidebar with boxed active item and progress-heavy widgets (XP-style bars, leaderboards). ## Content Use realistic product copy (fictional brand) suited to: Language and skill-learning apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Give every button and card a solid 4px darker bottom edge and collapse it on press - Show progress constantly: XP bar, streak count, completed nodes - Use upper-case 800-weight labels on buttons (Latin only) - Keep the canvas white with 2px #E5E5E5 borders so colour stays meaningful ## Don't - No blurry soft shadows or gradients on buttons - Don’t add brights beyond the six game colours (green, blue, orange, gold, purple, red); no pinks, teals or pastels - Don’t hide progress or rewards behind menus - Don’t use thin or condensed fonts - Puffy pastel tiles with soft inner and outer shadows (that becomes claymorphism) - Pastel candy palettes and faces on every element (kawaii) - Copying a real brand's mascot or logo — design an original character ## Stack notes One self-contained HTML file with a