Kawaii / Cute

Also called: Kawaii UI, Cute UI, Mochi style, Sanrio-ish

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

“Candy mascot”Soft & DimensionalEra: 2010s → today (Japanese/Thai cute culture)PlayfulFriendlyDreamyCalmNew

kawaii-cute / landingEN

kawaii-cute / 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 sm14pxRadius md20pxRadius lg28pxRadius xl40pxDensity×1.08Display 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.

pastel candy paletteround everythingmascot faces (dot eyes + blush)die-cut sticker badgesbubbly rounded typecat-ear avatarspolka dots and tiny heartssoft pink drop shadow

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

Not to be confused with

Claymorphism →Claymorphism is about puffy 3D clay surfaces with inner shadows; Kawaii stays flat-ish and gets its character from mascot faces, stickers and pastel candy colour.Dopamine Design →Dopamine Design uses loud saturated brights (orange, lime, hot pink); Kawaii uses soft milky pastels with deep berry text and cute faces.Y2K Aesthetic →Y2K is bubblegum pink with chrome, iridescence and sparkles; Kawaii has no chrome or gloss — just soft pastels, round shapes and mascots.

On mobile

Use one big mascot on onboarding and a small peeking mascot on the featured card. The floating tab bar is a white pill with a pastel blob behind the active icon; chips and badges become stickers. Keep tap targets 48px+ and keep text dark berry on pastel.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBaloo 2 · 700/800

The quick brown fox

Heading · ThaiKodchasan · 600/700

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

Body · LatinNunito · 400/600/700/800

Clear words make shared decisions.

Body · ThaiKodchasan · 400/500/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 14px · md 20px · lg 28px · xl 40px · pill 999px`
Border	`2px`
Shadow	`0 5px 0 rgba(240,150,185,0.30), 0 12px 24px rgba(240,150,185,0.22)`
Display	`clamp(2.75rem, 6vw, 4.75rem)`
Motion	`300ms cubic-bezier(.34,1.45,.64,1)`
Density	`×1.08`

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 · Kawaii / Cute (kawaii-cute) — 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=Baloo+2:wght@700;800&family=Nunito:wght@400;600;700;800&family=Kodchasan:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 28px;
  --background: #FFF4F7;
  --foreground: #5B2A43;
  --card: #FFFFFF;
  --card-foreground: #5B2A43;
  --popover: #FFFFFF;
  --popover-foreground: #5B2A43;
  --primary: #FF8DB8;
  --primary-foreground: #4A1430;
  --secondary: #9FE5CF;
  --secondary-foreground: #1D4A3C;
  --muted: #FFE6EF;
  --muted-foreground: #8A5670;
  --accent: #FFE6EF;
  --accent-foreground: #5B2A43;
  --destructive: #D3305F;
  --border: #F6C6D8;
  --input: #F6C6D8;
  --ring: #FF8DB8;
  --chart-1: #FF8DB8;
  --chart-2: #6FD1B4;
  --chart-3: #FFC94D;
  --chart-4: #B9A2FF;
  --chart-5: #8FC8FF;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #5B2A43;
  --sidebar-primary: #FF8DB8;
  --sidebar-primary-foreground: #4A1430;
  --sidebar-accent: #FFE6EF;
  --sidebar-accent-foreground: #5B2A43;
  --sidebar-border: #F6C6D8;
  --sidebar-ring: #FF8DB8;
}

.dark {
  --background: #2A1B2F;
  --foreground: #FFEFF6;
  --card: #3A2741;
  --card-foreground: #FFEFF6;
  --popover: #3A2741;
  --popover-foreground: #FFEFF6;
  --primary: #FF9EC4;
  --primary-foreground: #3D0F27;
  --secondary: #9FE5CF;
  --secondary-foreground: #123A2E;
  --muted: #33223A;
  --muted-foreground: #E2C2D3;
  --accent: #33223A;
  --accent-foreground: #FFEFF6;
  --destructive: #FF8FA8;
  --border: #5C4066;
  --input: #5C4066;
  --ring: #FF9EC4;
  --chart-1: #FF9EC4;
  --chart-2: #9FE5CF;
  --chart-3: #FFD66E;
  --chart-4: #C9B6FF;
  --chart-5: #9DD2FF;
  --sidebar: #3A2741;
  --sidebar-foreground: #FFEFF6;
  --sidebar-primary: #FF9EC4;
  --sidebar-primary-foreground: #3D0F27;
  --sidebar-accent: #33223A;
  --sidebar-accent-foreground: #FFEFF6;
  --sidebar-border: #5C4066;
  --sidebar-ring: #FF9EC4;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Kawaii / Cute (kawaii-cute) — 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=Baloo+2:wght@700;800&family=Nunito:wght@400;600;700;800&family=Kodchasan:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #FFF4F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE6EF;
  --color-text: #5B2A43;
  --color-text-muted: #8A5670;
  --color-primary: #FF8DB8;
  --color-on-primary: #4A1430;
  --color-secondary: #9FE5CF;
  --color-on-secondary: #1D4A3C;
  --color-accent: #FFD66E;
  --color-border: #F6C6D8;
  --color-success: #23845B;
  --color-warning: #B26B00;
  --color-danger: #D3305F;
  --color-chart-1: #FF8DB8;
  --color-chart-2: #6FD1B4;
  --color-chart-3: #FFC94D;
  --color-chart-4: #B9A2FF;
  --color-chart-5: #8FC8FF;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 3px 0 rgba(240,150,185,0.35);
  --shadow-md: 0 5px 0 rgba(240,150,185,0.30), 0 12px 24px rgba(240,150,185,0.22);
  --shadow-lg: 0 8px 0 rgba(240,150,185,0.30), 0 22px 40px rgba(240,150,185,0.28);
  --font-heading: "Baloo 2", "Kodchasan", system-ui, sans-serif;
  --font-body: "Nunito", "Kodchasan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Kodchasan", monospace;
}

.dark {
  --color-bg: #2A1B2F;
  --color-surface: #3A2741;
  --color-surface-2: #33223A;
  --color-text: #FFEFF6;
  --color-text-muted: #E2C2D3;
  --color-primary: #FF9EC4;
  --color-on-primary: #3D0F27;
  --color-secondary: #9FE5CF;
  --color-on-secondary: #123A2E;
  --color-accent: #FFD66E;
  --color-border: #5C4066;
  --color-success: #7FE0B3;
  --color-warning: #FFCB6B;
  --color-danger: #FF8FA8;
  --color-chart-1: #FF9EC4;
  --color-chart-2: #9FE5CF;
  --color-chart-3: #FFD66E;
  --color-chart-4: #C9B6FF;
  --color-chart-5: #9DD2FF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Kawaii / Cute (kawaii-cute). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9569,
            0.9686
          ],
          "hex": "#fff4f7"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.902,
            0.9373
          ],
          "hex": "#ffe6ef"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.1647,
            0.2627
          ],
          "hex": "#5b2a43"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.3373,
            0.4392
          ],
          "hex": "#8a5670"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5529,
            0.7216
          ],
          "hex": "#ff8db8"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.0784,
            0.1882
          ],
          "hex": "#4a1430"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.898,
            0.8118
          ],
          "hex": "#9fe5cf"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.2902,
            0.2353
          ],
          "hex": "#1d4a3c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.4314
          ],
          "hex": "#ffd66e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.7765,
            0.8471
          ],
          "hex": "#f6c6d8"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.5176,
            0.3569
          ],
          "hex": "#23845b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.4196,
            0
          ],
          "hex": "#b26b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.1882,
            0.3725
          ],
          "hex": "#d3305f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5529,
            0.7216
          ],
          "hex": "#ff8db8"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.8196,
            0.7059
          ],
          "hex": "#6fd1b4"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7882,
            0.302
          ],
          "hex": "#ffc94d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.6353,
            1
          ],
          "hex": "#b9a2ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.7843,
            1
          ],
          "hex": "#8fc8ff"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1059,
            0.1843
          ],
          "hex": "#2a1b2f"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.1529,
            0.2549
          ],
          "hex": "#3a2741"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.1333,
            0.2275
          ],
          "hex": "#33223a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9373,
            0.9647
          ],
          "hex": "#ffeff6"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.7608,
            0.8275
          ],
          "hex": "#e2c2d3"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6196,
            0.7686
          ],
          "hex": "#ff9ec4"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.0588,
            0.1529
          ],
          "hex": "#3d0f27"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.898,
            0.8118
          ],
          "hex": "#9fe5cf"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.2275,
            0.1804
          ],
          "hex": "#123a2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.4314
          ],
          "hex": "#ffd66e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.251,
            0.4
          ],
          "hex": "#5c4066"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8784,
            0.702
          ],
          "hex": "#7fe0b3"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7961,
            0.4196
          ],
          "hex": "#ffcb6b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5608,
            0.6588
          ],
          "hex": "#ff8fa8"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6196,
            0.7686
          ],
          "hex": "#ff9ec4"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.898,
            0.8118
          ],
          "hex": "#9fe5cf"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.4314
          ],
          "hex": "#ffd66e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7137,
            1
          ],
          "hex": "#c9b6ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.8235,
            1
          ],
          "hex": "#9dd2ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 40,
        "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.9412,
              0.5882,
              0.7255
            ],
            "hex": "#f096b9",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9412,
              0.5882,
              0.7255
            ],
            "hex": "#f096b9",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 5,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9412,
              0.5882,
              0.7255
            ],
            "hex": "#f096b9",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9412,
              0.5882,
              0.7255
            ],
            "hex": "#f096b9",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9412,
              0.5882,
              0.7255
            ],
            "hex": "#f096b9",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 22,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Baloo 2",
        "Kodchasan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Nunito",
        "Kodchasan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Kodchasan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 300,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.45,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.08
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
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!