Kawaii / Pastel Pop

---
name: kawaii-pastel-pop
description: Apply the Kawaii / Pastel Pop visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Kawaii / Pastel Pop, mentions kawaii, cute pop, pastel kawaii, or describes pastel baby blue, pink, mint, lilac, super-rounded 20–40px corners, mascot characters — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Kawaii / Pastel Pop Design System

Cute rounded Japanese pop: baby blue, pink, mint, and lilac pastels, super-round Baloo type, mascot characters with dot eyes, sparkles and sticker details. Everything is soft, bouncy, and impossible to be mad at.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Kawaii / Pastel Pop.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (kawaii, cute pop, pastel kawaii, Japanese cute, sanrio style), or describes its traits: pastel baby blue, pink, mint, lilac; super-rounded 20–40px corners; mascot characters; sparkle and sticker accents; bubbly rounded type; soft pastel shadows.

## Design tokens

### Color palette

- Blush-white page background: `#fff6fb` (--color-bg)
- Card background, clean white: `#ffffff` (--color-surface)
- Soft plum primary text — never harsh black: `#46344e` (--color-text)
- Secondary text, muted lavender-plum: `#7b6685` (--color-text-muted)
- Deep candy pink — CTAs, links, and active states: `#c9377f` (--color-accent)
- Pastel pink — fills, blobs, and blush details: `#ffdaf5` (--color-pink)
- Baby blue — fills and secondary surfaces: `#b0e1ff` (--color-blue)
- Mint — success tints and fills: `#defffa` (--color-mint)
- Lilac — badges and decorative fills: `#e6c6ff` (--color-lilac)
- Cream — warm highlight fills: `#fff8e1` (--color-cream)
- Soft pink hairline for outlined elements: `#f3dceb` (--color-border)

### Typography

- Display / headings: Baloo 2 (fallback: Arial Rounded MT Bold, sans-serif)
- Body: Quicksand (fallback: Verdana, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 88 — Airy and bouncy; elements float apart like balloons, with room for mascots and stickers to peek between them.
- Border radius: md 20px, lg 28px, xl 40px, blob 60% 40% 55% 45% / 55% 50% 50% 45%, pill 999px — Nothing under 20px; buttons are pills, cards are marshmallows, and image masks can go full blob.
- Border treatment: none — Softness comes from fills and shadows; when an outline is needed, use 2px in a pastel tone, gently rounded.

### Shadows

- puff: `0 4px 14px rgba(201, 55, 127, 0.12)` — Default card shadow, a pink-tinted puff
- puff-lg: `0 10px 28px rgba(201, 55, 127, 0.16)` — Hover lift and modals
- sticker: `0 2px 0 rgba(70, 52, 78, 0.15)` — Tiny hard edge under sticker elements and badges

### Layout

- Max content width: 1140px
- Mascot-led hero: character front and center, headline curving around it
- Pastel blob shapes floating behind sections
- Sticker-style badges rotated -6 to 6 degrees
- Cards in loose, generous grids with big gaps

### Effects

- Sparkle, star, and heart accents scattered near key elements
- Pastel blob backgrounds with very soft edges
- Mascot expression changes for empty, error, and success states
- Slight jelly squash-and-stretch on press

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 150ms / 280ms / 500ms
- Everything enters with a soft bounce (overshoot easing)
- Buttons squash to 0.95 scale on press and spring back
- Mascot idles with a gentle 2–3s float loop
- Sparkles twinkle on hover near interactive elements

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fff6fb;
  --color-surface: #ffffff;
  --color-text: #46344e;
  --color-text-muted: #7b6685;
  --color-accent: #c9377f;
  --color-pink: #ffdaf5;
  --color-blue: #b0e1ff;
  --color-mint: #defffa;
  --color-lilac: #e6c6ff;
  --color-cream: #fff8e1;
  --color-border: #f3dceb;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-blob: 60% 40% 55% 45% / 55% 50% 50% 45%;
  --radius-pill: 999px;
  --shadow-puff: 0 4px 14px rgba(201, 55, 127, 0.12);
  --shadow-puff-lg: 0 10px 28px rgba(201, 55, 127, 0.16);
  --shadow-sticker: 0 2px 0 rgba(70, 52, 78, 0.15);
  --border-default: none;
  --font-display: "Baloo 2", "Arial Rounded MT Bold", sans-serif;
  --font-body: Quicksand, Verdana, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White pill-shaped floating bar with puff shadow; logo with mascot head, rounded links; active link sits in a pastel pink pill
- **Hero:** Mascot illustration center-stage over pastel blobs, Baloo headline in plum, candy-pink pill CTA with a sparkle on hover
- **Card:** White marshmallow card, 28px radius, puff shadow, pastel header blob or icon, 24px padding; hover lifts with a tiny bounce
- **Button (primary):** Candy pink #c9377f fill, white text, 999px pill, puff shadow, squash-and-spring on press
- **Button (secondary):** Pastel pink fill with plum text, pill; deepens one pastel step on hover
- **Form fields:** White fill, 2px pastel border, 20px radius; focus turns the border candy pink and adds a soft pink glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A mascot with simple dot eyes and blush marks reacting throughout the UI — waving in the hero, peeking over cards, crying at the 404 — surrounded by floating sparkle and heart sticker accents. Spend boldness here; keep everything else quiet.

## Do

- Give the mascot real jobs: onboarding guide, empty states, error apologies
- Keep pastels for fills and reserve the deep candy pink for interaction
- Round everything — corners, type, icons, even chart bars
- Use squash-and-stretch micro-motion to make the UI feel jelly-soft

## Don't

- No pure black text or hard gray borders — plum and pastels only
- Never use pastel-on-pastel for text; the tints are backgrounds
- Don't overload sparkles — two or three per view keeps them magical
- Avoid sharp corners anywhere; a single square element breaks the spell

## Accessibility notes

- Deep candy pink #c9377f on the blush background is ~4.6:1 — fine for text and large UI, but keep button text white and bold
- All pastel tones (pink, blue, mint, lilac) fail contrast as text — they are fills only, always carrying plum text
- Bounce and float animations must respect prefers-reduced-motion; provide a static mascot fallback

## Reference sites

- Sanrio: https://www.sanrio.com
- LINE FRIENDS: https://www.linefriends.com
- Tamagotchi: https://tamagotchi-official.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip kawaii-pastel-pop.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/kawaii-pastel-pop.json

Settings → Capabilities → Skills → Upload skill → kawaii-pastel-pop.zip