# Kawaii / Cute

> Pastel candy colours, everything round, little mascot faces and die-cut stickers — UI that smiles back.

- Nickname: Candy mascot
- Also called: Kawaii UI, Cute UI, Mochi style, Sanrio-ish
- Category: Soft & Dimensional
- Moods: Playful, Friendly, Dreamy, Calm
- Industries: Food & Restaurant, Kids & Family, E‑commerce, Creative & Portfolio, Fitness & Wellness
- Style page: https://uilingo.dev/styles/kawaii-cute/

Kawaii borrows from Japanese and Thai cute culture: strawberry-milk pink, mint, butter and lavender pastels, corners so round they become pills and blobs, and small mascot characters with dot eyes and blush cheeks peeking from cards, empty states and illustrations. Badges look like die-cut stickers with a white outline and a slight tilt, and the type is bubbly and rounded in both Latin and Thai. It is soft and friendly, but still uses deep berry-brown text so everything stays readable.

## Best for
- Dessert shops, cafés, bubble tea and food delivery
- Kids and family apps, stationery and toy stores
- Character/brand-mascot campaigns and LINE-style sticker culture
- Light lifestyle apps: diaries, habit trackers, pets

## Avoid for
- Finance, legal, B2B and enterprise tools
- Serious health or crisis services
- Dense data dashboards with many series

## Do
- Keep text deep berry-brown (#5B2A43) on pastels for contrast, never pastel on pastel
- Use radius ≥ 14px (token sm) everywhere and full pills for controls
- Follow the mascot budget: landing = hero card, first feature, highlighted plan and two at the CTA; elsewhere one per section, one per mobile screen
- Tilt stickers −3° to +2° with a 3px white outline

## Don't
- Don’t use pure black, hard corners or harsh neon
- Don’t add mascots beyond the budget (never on every feature or testimonial card)
- Don’t set long body text in handwriting fonts
- Don’t rely on pastel alone to show state; add icons and labels

## Audit
Passed after 2 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 "Kawaii / Cute" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
Pastel candy colours, everything round, little mascot faces and die-cut stickers — UI that smiles back.
Design keywords: pastel candy palette, round everything, mascot faces (dot eyes + blush), die-cut sticker badges, bubbly rounded type, cat-ear avatars, polka dots and tiny hearts, soft pink drop shadow.

## Visual language
Soft, sweet and friendly: a strawberry-milk pink canvas (#FFF4F7) scattered with tiny pastel hearts, sparkles and polka dots, white cards with fat 2.5px pink outlines and a soft pink drop edge, and every shape rounded into pills and blobs. Small mascot characters — a bao bun and a strawberry mochi with dot eyes, blush cheeks and a tiny smile — peek over a few chosen spots (see the mascot budget). Badges are die-cut stickers with a white outline and a slight tilt. Text stays deep berry-brown (#5B2A43) so the pastels never cost readability.

## Signature details (must be visible)
- Pastel candy set derived from tokens: pink = color-mix(in srgb,#FF8DB8 24%,#FFFFFF), mint = secondary 38% over surface, butter = accent 40% over surface, lilac = color-mix(in srgb,#B9A2FF 30%,#FFFFFF) — used for icon blobs, KPI cards and alternate sections
- Mascot budget (the one rule, used everywhere). Landing: on the hero top card (with a speech bubble), over the first feature card, over the highlighted pricing plan, and two flanking the CTA — five in total, never more. Other web pages: at most one mascot per section. Mobile: one per screen. Mascots are inline SVG: rounded bun/mochi body with 3.5px #5B2A43 outline, 5px dot eyes with a white catch-light, pink blush ellipses at 60–70% opacity and a small curved smile, peeking ~40px over a card edge
- Sticker badges and eyebrows: pastel fill, 3px solid #FFFFFF outline, 0 2–3px 0 rgba(240,150,185,.4–.45) drop, rotate −3° to +2°; Latin sticker labels weight 800, Thai 700
- Scalloped band edges on both sides: the band ::before at top:-13px and ::after at bottom:-13px with transform: scaleY(-1), each height 14px with radial-gradient(circle at 14px 14px, <band colour> 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x. The fill is always the band's own colour (e.g. mint) so the bumps bulge into the neighbouring canvas. The nav bottom uses the same recipe in white
- Candy buttons: full pill, pink #FF8DB8 with berry text, a solid 4px bottom edge color-mix(in srgb,#FF8DB8 55%,#C2557F) and two white 'shine' dots (3px at 14px 8px, 1.6px at 21px 6px) with the left padding widened by 6px so they never touch the first glyph; no dots on small buttons; hover lifts 2px and tilts −1°
- Cat ears on avatars: two rounded #FF8DB8 triangles with a lighter #FFD1E1 inner ear above the circle
- Bubbly type: headings Baloo 2 700 (Kodchasan 700 for Thai) with text-shadow 0 3px 0 color-mix(in srgb,#FF8DB8 35%,#FFF4F7); weight 800 only for Latin sticker labels; Nunito body; Kodchasan for Thai body — it is the approved rounded Thai face, not a handwriting font

## Design tokens — use these exact values
Colours (light mode):
  - background #FFF4F7
  - surface #FFFFFF
  - surface-2 #FFE6EF
  - text #5B2A43
  - text-muted #8A5670
  - primary #FF8DB8 (text on it #4A1430)
  - secondary #9FE5CF (text on it #1D4A3C)
  - accent #FFD66E
  - border #F6C6D8
  - success #23845B · warning #B26B00 · danger #D3305F
  - chart series #FF8DB8, #6FD1B4, #FFC94D, #B9A2FF, #8FC8FF
Radius: sm 14px, md 20px, lg 28px, xl 40px, pill 999px
Border width: 2px
Shadows: sm `0 3px 0 rgba(240,150,185,0.35)`, md `0 5px 0 rgba(240,150,185,0.30), 0 12px 24px rgba(240,150,185,0.22)`, lg `0 8px 0 rgba(240,150,185,0.30), 0 22px 40px rgba(240,150,185,0.28)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1.08 density
Motion: 300ms cubic-bezier(.34,1.45,.64,1)

## Typography (Latin + Thai)
- Headings: Baloo 2 700/800 with Thai fallback Kodchasan 600/700
- Body: Nunito 400/600/700/800 with Thai fallback Kodchasan 400/500/600
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@400;600;700;800&family=Kodchasan:wght@400;500;600;700&display=swap
- CSS stacks: heading `"Baloo 2", "Kodchasan", system-ui, sans-serif`; body `"Nunito", "Kodchasan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 700, heading tracking -0.01em (Latin only), sentence-case labels.
- 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: Kodchasan is a rounded, bubbly loopless Thai with soft terminals that matches Baloo 2’s bubbly, round display shapes and Nunito’s rounded body text.

## Components
- Radius: ≥14px (token sm) everywhere, full pills for controls; cards 28px
- Outlines: cards, inputs and secondary buttons use a 2.5px decorative outline that deliberately exceeds the 2px border token
- Buttons: primary candy-pink pill with the 4px darker bottom edge; secondary white pill with 2.5px pink outline and pink bottom edge; press drops 3px
- Cards: white, radius 28px, 2.5px #F6C6D8 outline, soft pink shadow; hover lifts 4px and tilts −0.6°; highlighted plan is solid pink with a white outline and the mochi mascot peeking over the top
- Icon containers: 52px organic blobs (border-radius 50% 50% 46% 54% / 55% 50% 50% 45%) cycling pink, mint, butter, lilac with a 3px white rim
- Inputs: white pills with 2.5px pink outline and pink leading icon; focus = pink border plus 5px pink halo
- Switch: mint when on; the white knob has two dot eyes and blush — a tiny face
- Progress: candy-stripe fill (repeating 45° pink/light-pink stripes) in a rounded outlined track
- Speech bubble: white, 2.5px pink outline, radius 18px 18px 18px 4px, Baloo/Kodchasan 800/700 in the pink edge colour; copy follows the page language — 'Yum!' in English, the Thai exclamation 'aroi!' written in Thai script on Thai pages
- Dashboard: floating white rounded sidebar with a pink candy pill for the active item; KPI cards in four different pastels (KPI pastel cards are dashboard-only); fully rounded bars with white outlines, round-capped donut, dashed table dividers and sticker status badges

## 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: split style. Sections in order: hero → features → steps → stats → testimonials → pricing → faq → cta. Feature section as grid.
Split hero: big berry headline and candy buttons on the left, a product card cluster on the right with the bao-bun mascot sitting on the top card and its speech bubble. Sections alternate the pink-dotted canvas and mint bands with scalloped top and bottom edges; keep the gap between hero and first section tight (first section padding-top ≈ 8 × base unit). Features: 6 white outlined cards in a 3×2 grid at ≥1024px with pastel blob icons, the mochi peeking over the first card. Stats: white ellipse blobs (organic border-radius ≈ 50%, 2.5px white outline, alternate ones rotated ±2°) with pink Baloo numerals, sitting on the dotted pink canvas between two mint bands. Steps use coloured circle numbers; testimonials are white outlined cards; pricing highlights the middle plan with the mochi mascot; the CTA is a butter-yellow card flanked by two mascots.

## Content
Use realistic product copy (fictional brand) suited to: Dessert shops, cafés, bubble tea and food delivery. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Keep text deep berry-brown (#5B2A43) on pastels for contrast, never pastel on pastel
- Use radius ≥ 14px (token sm) everywhere and full pills for controls
- Follow the mascot budget: landing = hero card, first feature, highlighted plan and two at the CTA; elsewhere one per section, one per mobile screen
- Tilt stickers −3° to +2° with a 3px white outline

## Don't
- Don’t use pure black, hard corners or harsh neon
- Don’t add mascots beyond the budget (never on every feature or testimonial card)
- Don’t set long body text in handwriting fonts
- Don’t rely on pastel alone to show state; add icons and labels
- Pure black text, hard square corners or thin 1px hairlines
- Saturated neon brights — that reads as Dopamine Design or Gen-Z chaos
- Chrome, gloss and iridescence (Y2K) or puffy inner-shadow clay surfaces (Claymorphism)
- Mascots beyond the budget, e.g. one on every feature or testimonial card
- Pastel text on pastel backgrounds; keep text deep berry and check 4.5:1
- Script or handwriting fonts for body copy (rounded Kodchasan is fine)

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Kawaii / Cute" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```