Faces on things
Two dot eyes, blushing cheeks and a tiny mouth can turn any object into a character.
The Japanese culture of cute. Round shapes, soft pastels and tiny happy faces on everything, from rice balls to buttons, make an interface feel warm and huggable.
Open the kit Copy promptKawaii means cute in Japanese. As a design style it uses round shapes, pastel colours, thick soft outlines and small faces to create affection and delight.
Two dot eyes, blushing cheeks and a tiny mouth can turn any object into a character.
Everything is soft and rounded, with short proportions and no sharp corners.
Pink, mint, lilac and butter yellow with a warm brown outline.
A consistent rounded outline and a small solid shadow make shapes look like stickers.
Kawaii grew from a youth trend in Japan into one of the world's most recognisable design cultures.
Teenagers in Japan popularise a round, playful handwriting style decorated with hearts and stars.
Sanrio introduces Hello Kitty, and cute character merchandise becomes a huge industry.
Harajuku fashion and kawaii stationery spread the look across Asia and beyond.
Shigetaka Kurita designs a set of tiny pictograms for Japanese mobile phones, an ancestor of today's emoji.
Apps, games and brands worldwide use kawaii mascots to feel friendly.
Kawaii motion is bouncy and alive. Characters squash, bounce and blink, and little hearts float away.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Mascots guide children through learning and play.
Online stores sell with characters on every product.
A cute sad face softens bad news like a 404 or failed upload.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Soft pastels outlined in warm cocoa brown instead of black, which keeps things gentle. Tap a swatch to copy its hex value.
:root{
--cream: #FFF6F0;
--pink: #FF8FAB;
--blush: #FFB5C8;
--mint: #B8F0D8;
--lilac: #D9C8FF;
--butter: #FFE8A3;
--cocoa: #5A3E36;
}A chunky rounded pop face for titles and a rounded sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Mochiy Pop One",system-ui,sans-serif;
--font-b: "M PLUS Rounded 1c",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(42px, 9vw, 81px);
--fs-1: 41.5px; --fs-2: 33.2px;
--fs-3: 26.6px; --fs-4: 21.2px;
--fs-body: 17px; --fs-sm: 13.6px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.2;
}
/* fonts: Mochiy Pop One and M PLUS Rounded 1c */Simple, generous layouts. Characters and stickers sit on top like decorations.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Big radius, thick cocoa outlines and a solid drop shadow below, like a sticker.
:root {
--radius: 26px;
--radius-sm: 18px;
--bw: 2.5px;
--shadow: 0 5px 0 #5A3E36;
--shadow-sm: 0 3px 0 #5A3E36;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Kawaii kit · Anti-Boring */
:root{
--bg:#FFF6F0;
--surface:#FFFFFF;
--surface2:#FFE8EE;
--fg:#5A3E36;
--muted:#8A6A60;
--accent:#FF8FAB;
--accent-fg:#FFFFFF;
--accent2:#B8F0D8;
--accent2-fg:#5A3E36;
--border:#5A3E36;
--bw:2.5px;
--radius:26px;
--radius-sm:18px;
--shadow:0 5px 0 #5A3E36;
--shadow-sm:0 3px 0 #5A3E36;
--font-d:"Mochiy Pop One",system-ui,sans-serif;
--font-b:"M PLUS Rounded 1c",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.2;
--gap:24px;
--pad:24px;
--focus:rgba(255,143,171,.45);
--ok:#2E8B6A;
--warn:#9A5A00;
--danger:#D6456B;
--info:#6A5ACD;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 30% 40%,#FFE8A3 0 12%,transparent 13%),radial-gradient(circle at 70% 60%,#D9C8FF 0 16%,transparent 17%),#B8F0D8;
--code-bg:#5A3E36;
--code-fg:#FFF1F4;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.6px;
--fs-body:17px;
--fs-4:21.2px;
--fs-3:26.6px;
--fs-2:33.2px;
--fs-1:41.5px;
--fs-d:clamp(42px, 9vw, 81px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #5A3E36}
.card{padding-top:40px}
.card::before{content:"• ᴗ •";position:absolute;top:10px;left:50%;transform:translateX(-50%);font:700 1rem var(--font-b);color:var(--fg);letter-spacing:.1em}
.card-media{border:2.5px solid var(--border);border-radius:20px}
.badge{background:#FFE8A3;color:#5A3E36}
.badge::after{content:" ♡"}
.check:checked,.radio:checked{background:#FF8FAB}
.switch::before{background:#fff;border:2px solid #5A3E36}
.alert{border-left-width:2.5px;border-radius:18px;box-shadow:0 3px 0 #5A3E36}
.progress{height:1em}
.progress i{background:repeating-linear-gradient(90deg,#FF8FAB 0 12px,#FFB5C8 12px 24px);border-radius:999px}
.tab{font-family:var(--font-d);font-weight:400;border-radius:999px;border:0}
.tab[aria-selected="true"]{background:#FFE8EE;color:#5A3E36}
.tabs{border:0}
.pager a{border-radius:50%;box-shadow:0 3px 0 #5A3E36}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#2A1F2E;
--surface:#362840;
--surface2:#302438;
--fg:#FFF1F4;
--muted:#D8C2CE;
--border:#FFF1F4;
--shadow:0 5px 0 #FF8FAB;
--shadow-sm:0 3px 0 #FF8FAB;
--code-bg:#1A1320;
}
html.alt body{background-image:radial-gradient(rgba(255,143,171,.25) 2px,transparent 2.5px)!important}html.alt .hero h1{-webkit-text-stroke:3px #1A1320;text-shadow:0 6px 0 #1A1320}html.alt .tab[aria-selected="true"],html.alt .badge{color:#5A3E36}html.alt .stage{background:#362840}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a kids' reading app in an authentic Kawaii style.
Palette: Cream #FFF6F0, Pink #FF8FAB, Blush #FFB5C8, Mint #B8F0D8, Lilac #D9C8FF, Butter #FFE8A3, Cocoa #5A3E36.
Typography: Mochiy Pop One for titles, M PLUS Rounded 1c for body.
Layout: Two-column hero on cream with pink polka dots: a chunky pink outlined title, intro and buttons on the left, an original round rice-ball character with a face that bounces and blinks on the right, with floating hearts and stars.
Signature details: Pastel palette outlined in cocoa brown (#5A3E36), 2.5px outlines, solid 5px drop shadows, large radius, tiny faces on cards.
Components: Pill buttons that bounce, cards with a tiny face on top, butter-yellow heart badges, striped pink progress bars.
Motion: Squash and stretch bounce, a quick blink every four seconds, floating hearts.
Avoid: copies of famous characters, sharp corners, black outlines, pastel text.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Well-known mascots are protected. Design your own character.
A smiling face on a medical bill feels wrong. Match the tone to the moment.
Pink and mint text fail contrast. Keep text in cocoa brown.
One character with a clear personality beats a crowd.