Kawaii Minimal

Kawaii Minimal — Style Reference

Rounded, pastel, airy, with a small bounce — cute without being loud.

Theme: light

Kawaii Minimal stitches the softness of Japanese kawaii culture to the restraint of minimalism: a warm white ground, pastel accents, fully rounded or 24px radii, soft shadows, a rounded sans, and abundant whitespace. It permits bounce — hover scales to 1.05, press to 0.95 — and that is the only exaggeration it allows. Dark grounds, glow and neon, fluorescent saturation, heavy black borders and dense information are all refused. Cuteness here comes from proportion and temperature rather than piled-on ornament.

Colors

Typography

Nunito — The only face: rounded sans, weights capped at 700, leading at 1.7 for breathing room.

• Substitute: 'Segoe UI', 'PingFang SC', system-ui, sans-serif
• Weights: 400, 500, 700
• Sizes: 13, 15, 17, 20, 26, 34
• Line height: 1.25 (display), 1.35 (headings), 1.7 (body)
• Letter spacing: 0 on display, 0.04em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: airy

Spacing Scale

Border Radius

• Page max-width: 960px
• Section gap: 128px
• Card padding: 32px
• Element gap: 24px

Components

Bouncy Button

Role: Action button

Pink fill, white text, fully rounded, no border, 17px/700, 14px 28px padding, shadow 0 4px 12px at 18% pink. Hover scales to 1.05 and widens the shadow to 24px; press scales 0.95. 200ms on cubic-bezier(0.34, 1.56, 0.64, 1) — that overshoot curve is the style's signature.

• Sizes: padding 14px 28px; label 17px
• States: hover: scale 1.05; active: scale 0.95

Soft Card

Role: Content card

White fill, 24px radius, a 1px pink-200 border or none, 32px padding, shadow 0 4px 12px at 18% pink. A 40px pastel icon bed on a fully rounded shape may sit top-left. Hover lifts 4px and widens the shadow to 24px.

Pill Input

Role: Input field

White fill, fully rounded, a 1px pink-200 border, 12px 20px padding at 15px. The placeholder sits at 60% pink-400. Focus turns the border pink-400 and adds a 3px ring at 20%.

Pastel Chip

Role: Category and status chips

Fully rounded on a 15% pastel ground (pink, lavender, sky or butter), no border, 13px/500, 6px 14px padding, with deep pink or dark grey text rather than white.

Gentle Avatar

Role: Avatars and icon containers

Fully round at 32 to 64px on a pastel ground with a 1px white border at 60%, holding a 16 to 24px white or deep pink icon. Hover rotates six degrees and scales 1.08.

Do's and Don'ts

Do

• Ground in warm white, never dark
• Fully round or 24px radii
• Pastel accents, at most two per screen
• Bounce: 1.05 on hover, 0.95 on press
• Shadows stay soft and pink-tinted
• Keep over half the page empty

Don't

• No dark or black grounds
• No glow or neon
• No fluorescent saturation
• No heavy black borders
• Do not pack information densely
• No sharp right angles

Surfaces

Elevation

• Soft: 0 4px 12px rgba(249,168,212,0.18)
• Soft hover: 0 8px 24px rgba(249,168,212,0.28)

Imagery

Rounded illustration: animals, food, plants, with thick soft lines and flat pastel fills. Photography works when it stays soft, warm and airy. No cold geometry, dark photography or realistic icon walls.

Layout

Capped at 960px with 24px padding, sections 128px apart. One column or two card columns with at least 24px between elements. The target is over fifty percent empty page, since emptiness is part of the charm.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #57534e
• background: #fff7ed
• card: #ffffff
• pink: #f9a8d4
• lavender: #a78bfa
• sky: #67e8f9

EXAMPLE COMPONENT PROMPTS:

1. Build a kawaii minimal card: white fill, 24px radius, a 1px #fbcfe8 border, 32px padding, shadow 0 4px 12px rgba(249,168,212,0.18). A 40px pastel icon circle (rgba(249,168,212,0.15) fill, fully rounded) sits top-left. Title at 26px/700 in #57534e, body at 15px/400 on 1.7 leading. Hover applies translateY(-4px) and widens the shadow to 0 8px 24px rgba(249,168,212,0.28). The primary button fills #f9a8d4, fully rounded, white text, scaling 1.05 on hover and 0.95 on press over 200ms cubic-bezier(0.34,1.56,0.64,1). The page ground is #fff7ed.

Similar Brands

• Soft Utility — Both soft and friendly, though kawaii is more pastel and far less dense
• Shoujo Manga — Both from Japanese cute culture, though shoujo carries ribbons and screentone

Quick Start

:root {
  /* Colors */
  --color-pink: #f9a8d4;
  --color-warm-white: #fff7ed;
  --color-lavender: #a78bfa;
  --color-sky: #67e8f9;
  --color-butter: #fde68a;
  --color-deep-pink: #f47abd;

  /* Typography — Font Families */
  --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 34px;
  --leading-display: 1.25;
  --text-heading: 26px;
  --leading-heading: 1.35;
  --text-subheading: 20px;
  --leading-subheading: 1.45;
  --text-body-lg: 17px;
  --leading-body-lg: 1.7;
  --text-body: 15px;
  --leading-body: 1.7;
  --text-label: 13px;
  --leading-label: 1.5;
  --tracking-label: 0.04em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 960px;
  --section-gap: 128px;
  --card-padding: 32px;
  --element-gap: 24px;
  --density: airy;

  /* Border Radius */
  --radius-cards: 24px;
  --radius-panels: 32px;
  --radius-buttons: 999px;
  --radius-inputs: 999px;

  /* Surfaces */
  --surface-warm-white: #fff7ed;
  --surface-white: #ffffff;
  --surface-pink-wash: rgba(249,168,212,0.14);
}