KawaiiMinimal
PaletteComponentsAnimationsApp DemoPhilosophy
←StyleKit
可爱极简 — Kawaii Minimal

Soft. Warm.
Delightful.

Japanese kawaii warmth meets minimalist restraint. Pastel palettes, generous whitespace, and spring animations that feel like a warm hug.

8,400+
Happy Users
24k
Daily Check-ins
156k
Habits Tracked
4.9
Joy Score
Palette

Pastel color system

Five core pastels inspired by cherry blossoms, warm cream, lavender fields, aqua morning mist, and golden afternoon light. Each swatch does a Cloud Lift on hover.

Sakura Pink
#F9A8D4
Primary
Warm Cream
#FFF7ED
Background
Soft Lavender
#A78BFA
Secondary
Aqua Mist
#67E8F9
Tertiary
Butter Yellow
#FDE68A
Accent

Gradient combinations

Sakura → Lavender
Lavender → Aqua
Aqua → Butter
Butter → Sakura
Components

Soft building blocks

Every component is rounded, gentle, and interactive. Spring easing on all hover states — no rigid linear transitions.

Primary — Jelly Bounce (squash-stretch)

Outline & Gradient — spring easing

Size variants

Interactions

Animation rules demo

Four named interaction patterns — hover or click each demo to feel the difference. Spring easing runs everywhere.

Jelly Bounce

hover:scale-x-[1.05] hover:scale-y-[0.97]
cubic-bezier(0.34,1.56,0.64,1)

Hover to see squash-and-stretch

Cloud Lift

hover:-translate-y-2
hover:shadow-[0_20px_40px_rgba(244,114,182,0.25)]

Hover the card to float it upward

Squishy Press

active:scale-[0.92] active:translate-y-[4px]
tightens shadow — soft-mushy tactile

Click and hold — feels like pressing a soft pillow

Spring Easing

cubic-bezier(0.34,1.56,0.64,1)
vs linear — side by side

Linear
Spring cubic-bezier
App Demo

Kawaii habit tracker

A mock lifestyle app showing the design system in context — rounded completions, pastel progress bars, Cloud Lift stats, and Jelly Bounce add button.

Today's Habits

Friday, Feb 21

Morning meditation
85%
Read 30 minutes
60%
Drink 8 glasses
100%
Evening walk
40%
Journaling
72%
Current Streak
12
days in a row
Today
3/5
habits completed
Mood Chart
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Philosophy

Design principles

Three core ideas that define kawaii-minimal. Warmth without saccharine excess. Minimalism without coldness. Motion without rigidity.

Soft & Round

No sharp edge survives

rounded-full for pills and avatars. rounded-3xl for cards. rounded-2xl minimum for all interactive elements. Organic shapes invite touch and trust.

  • rounded-full, rounded-3xl, rounded-2xl
  • Soft blob shapes for backgrounds
  • Pill buttons and oval inputs

Pastel Color

Desaturated, warm, inviting

Every hue sits in the 200-300 Tailwind range. Never neon, never cold corporate blue. Tinted shadows that echo the card's accent color.

  • #F9A8D4 pink-300 primary
  • #A78BFA purple-300 secondary
  • Tinted shadows — no gray

Spring Motion

Elastic, joyful, never rigid

cubic-bezier(0.34,1.56,0.64,1) — the spring overshoots and settles. Squash-stretch on press. Linear transitions are banned from this style.

  • cubic-bezier(0.34,1.56,0.64,1)
  • hover:scale-x-[1.05] hover:scale-y-[0.97]
  • active:scale-[0.93] active:translate-y

Do

  • bg-[#FFF7ED] warm white background always
  • rounded-2xl / rounded-3xl / rounded-full corners
  • Soft pastel shadows with color tint
  • Spring cubic-bezier(0.34,1.56,0.64,1) everywhere
  • Squash-stretch: scale-x/scale-y non-proportional
  • Pastel pink #F9A8D4 as primary accent
  • Generous p-6 / p-8 / gap-6 spacing
  • Small SVG heart, star, flower accents
  • font-sans font-medium — approachable weight

Don't

  • No dark or black backgrounds
  • No sharp corners: rounded-none, rounded-sm
  • No glow or neon effects
  • No high-saturation bright neon colors
  • No bold dark borders (border-gray-800)
  • No dense cluttered layouts
  • No rigid linear transitions
  • No proportional scale-x/scale-y (kill the jelly)
  • No cold corporate blue or harsh contrast
Features

Made with gentle care

Pastel first

Every color is desaturated just enough to feel warm without being garish.

Round everything

No sharp edge survives. rounded-2xl minimum, rounded-full for pills and avatars.

Breathe freely

Generous padding and whitespace. Content never feels cramped or urgent.

Spring physics

Hover interactions overshoot and settle — like poking a marshmallow.

Warm shadows

Shadows tinted with the card color, never gray or black. Soft and inviting.

Tiny delights

Small heart, star, and flower accents tucked into corners for unexpected joy.

KawaiiMinimal

Japanese kawaii warmth meets minimalist restraint. Pastel palettes, generous whitespace, and spring animations.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteSakura PinkWarm CreamSoft LavenderAqua MistButter Yellow
Made withfor StyleKit
Back to StyleKit→