Gamified Playful

Also called: Gamified UI, Duolingo-like, Learning-game UI

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.

“Streak & XP”Mobile‑first StylesEra: 2015–now (language-learning apps)PlayfulFriendlyBoldNew

Open full screen ↗

gamified-playful / landingEN

gamified-playful / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg18pxRadius xl24pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

chunky 3D buttonssolid bottom edgebright greenstreak flameXP progress barlesson path nodesmascotgems & heartsheavy rounded type

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

Not to be confused with

Claymorphism →Claymorphism is puffy pastel clay with soft inner/outer shadows; Gamified Playful is flat bright colour on white with a hard solid bottom edge.Flat Design →Flat design has no depth at all; Gamified Playful adds the 3D bottom edge, press-down states and game HUD elements (streak, XP, hearts).Kawaii / Cute →Kawaii is pastel candy with faces on everything; Gamified Playful uses saturated primaries, one mascot and progress mechanics.

On mobile

Mobile is the main stage: a HUD row (course flag as the green brand tile, streak flame, gems, hearts), a unit banner, then a zig-zag path of round lesson nodes with the mascot. Buttons keep the 4px bottom edge and drop it on press — it is cheap and feels great under the thumb.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinNunito · 700/800/900

The quick brown fox

Heading · ThaiMitr · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinNunito · 400/600/700/800

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 18px · xl 24px · pill 999px`
Border	`2px`
Shadow	`0 4px 0 var(--c-border)`
Display	`clamp(2.5rem, 5.4vw, 4.4rem)`
Motion	`110ms cubic-bezier(.3,1.4,.6,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Gamified Playful (gamified-playful) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 18px;
  --background: #FFFFFF;
  --foreground: #3C3C3C;
  --card: #FFFFFF;
  --card-foreground: #3C3C3C;
  --popover: #FFFFFF;
  --popover-foreground: #3C3C3C;
  --primary: #58CC02;
  --primary-foreground: #173F00;
  --secondary: #1CB0F6;
  --secondary-foreground: #06293B;
  --muted: #F7F7F7;
  --muted-foreground: #6B6B6B;
  --accent: #F7F7F7;
  --accent-foreground: #3C3C3C;
  --destructive: #E02B2B;
  --border: #E5E5E5;
  --input: #E5E5E5;
  --ring: #58CC02;
  --chart-1: #58CC02;
  --chart-2: #1CB0F6;
  --chart-3: #FF9600;
  --chart-4: #CE82FF;
  --chart-5: #FF4B4B;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #3C3C3C;
  --sidebar-primary: #58CC02;
  --sidebar-primary-foreground: #173F00;
  --sidebar-accent: #F7F7F7;
  --sidebar-accent-foreground: #3C3C3C;
  --sidebar-border: #E5E5E5;
  --sidebar-ring: #58CC02;
}

.dark {
  --background: #131F24;
  --foreground: #F1F7FB;
  --card: #1A2A31;
  --card-foreground: #F1F7FB;
  --popover: #1A2A31;
  --popover-foreground: #F1F7FB;
  --primary: #58CC02;
  --primary-foreground: #0E2A00;
  --secondary: #1CB0F6;
  --secondary-foreground: #06293B;
  --muted: #22343C;
  --muted-foreground: #AFC1CA;
  --accent: #22343C;
  --accent-foreground: #F1F7FB;
  --destructive: #FF6B6B;
  --border: #37464F;
  --input: #37464F;
  --ring: #58CC02;
  --chart-1: #58CC02;
  --chart-2: #1CB0F6;
  --chart-3: #FF9600;
  --chart-4: #CE82FF;
  --chart-5: #FF6B6B;
  --sidebar: #1A2A31;
  --sidebar-foreground: #F1F7FB;
  --sidebar-primary: #58CC02;
  --sidebar-primary-foreground: #0E2A00;
  --sidebar-accent: #22343C;
  --sidebar-accent-foreground: #F1F7FB;
  --sidebar-border: #37464F;
  --sidebar-ring: #58CC02;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Gamified Playful (gamified-playful) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F7F7;
  --color-text: #3C3C3C;
  --color-text-muted: #6B6B6B;
  --color-primary: #58CC02;
  --color-on-primary: #173F00;
  --color-secondary: #1CB0F6;
  --color-on-secondary: #06293B;
  --color-accent: #FFC800;
  --color-border: #E5E5E5;
  --color-success: #3E8E00;
  --color-warning: #C25E00;
  --color-danger: #E02B2B;
  --color-chart-1: #58CC02;
  --color-chart-2: #1CB0F6;
  --color-chart-3: #FF9600;
  --color-chart-4: #CE82FF;
  --color-chart-5: #FF4B4B;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 0 var(--color-border);
  --shadow-md: 0 4px 0 var(--color-border);
  --shadow-lg: 0 6px 0 var(--color-border);
  --font-heading: "Nunito", "Mitr", system-ui, sans-serif;
  --font-body: "Nunito", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #131F24;
  --color-surface: #1A2A31;
  --color-surface-2: #22343C;
  --color-text: #F1F7FB;
  --color-text-muted: #AFC1CA;
  --color-primary: #58CC02;
  --color-on-primary: #0E2A00;
  --color-secondary: #1CB0F6;
  --color-on-secondary: #06293B;
  --color-accent: #FFC800;
  --color-border: #37464F;
  --color-success: #79D634;
  --color-warning: #FFB020;
  --color-danger: #FF6B6B;
  --color-chart-1: #58CC02;
  --color-chart-2: #1CB0F6;
  --color-chart-3: #FF9600;
  --color-chart-4: #CE82FF;
  --color-chart-5: #FF6B6B;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Gamified Playful (gamified-playful). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9686,
            0.9686
          ],
          "hex": "#f7f7f7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.2353,
            0.2353
          ],
          "hex": "#3c3c3c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.4196,
            0.4196
          ],
          "hex": "#6b6b6b"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3451,
            0.8,
            0.0078
          ],
          "hex": "#58cc02"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.2471,
            0
          ],
          "hex": "#173f00"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.6902,
            0.9647
          ],
          "hex": "#1cb0f6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.1608,
            0.2314
          ],
          "hex": "#06293b"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7843,
            0
          ],
          "hex": "#ffc800"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.898,
            0.898
          ],
          "hex": "#e5e5e5"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.5569,
            0
          ],
          "hex": "#3e8e00"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.3686,
            0
          ],
          "hex": "#c25e00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.1686,
            0.1686
          ],
          "hex": "#e02b2b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3451,
            0.8,
            0.0078
          ],
          "hex": "#58cc02"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.6902,
            0.9647
          ],
          "hex": "#1cb0f6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5882,
            0
          ],
          "hex": "#ff9600"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8078,
            0.5098,
            1
          ],
          "hex": "#ce82ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2941,
            0.2941
          ],
          "hex": "#ff4b4b"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1216,
            0.1412
          ],
          "hex": "#131f24"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1647,
            0.1922
          ],
          "hex": "#1a2a31"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.2039,
            0.2353
          ],
          "hex": "#22343c"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9686,
            0.9843
          ],
          "hex": "#f1f7fb"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6863,
            0.7569,
            0.7922
          ],
          "hex": "#afc1ca"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3451,
            0.8,
            0.0078
          ],
          "hex": "#58cc02"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.1647,
            0
          ],
          "hex": "#0e2a00"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.6902,
            0.9647
          ],
          "hex": "#1cb0f6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.1608,
            0.2314
          ],
          "hex": "#06293b"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7843,
            0
          ],
          "hex": "#ffc800"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2157,
            0.2745,
            0.3098
          ],
          "hex": "#37464f"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4745,
            0.8392,
            0.2039
          ],
          "hex": "#79d634"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0.1255
          ],
          "hex": "#ffb020"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4196
          ],
          "hex": "#ff6b6b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3451,
            0.8,
            0.0078
          ],
          "hex": "#58cc02"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.6902,
            0.9647
          ],
          "hex": "#1cb0f6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5882,
            0
          ],
          "hex": "#ff9600"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8078,
            0.5098,
            1
          ],
          "hex": "#ce82ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4196
          ],
          "hex": "#ff6b6b"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.898,
              0.898,
              0.898
            ],
            "hex": "#e5e5e5"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.898,
              0.898,
              0.898
            ],
            "hex": "#e5e5e5"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.898,
              0.898,
              0.898
            ],
            "hex": "#e5e5e5"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Nunito",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Nunito",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 110,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      1.4,
      0.6,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!