Techniques
Corner bow badge
A tiny red Sanrio bow tucked into a card's top-right corner as a signature mark, drawn in pure CSS.
.card { position: relative; }
.card .bow {
position: absolute;
top: -10px;
right: 18px;
width: 34px;
height: 22px;
}
.card .bow::before,
.card .bow::after {
content: "";
position: absolute;
top: 0;
width: 15px;
height: 22px;
background: #E4002B;
border-radius: 60% 40% 40% 60% / 50%;
}
.card .bow::before { left: 0; transform: rotate(-12deg); }
.card .bow::after { right: 0; transform: rotate(12deg); }
.card .bow > span { /* center knot */
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
background: #C40025;
border-radius: 50%;
transform: translate(-50%, -50%);
}
Blushed pastel ground
The signature page: a bubblegum ground softened by a radial blush and an optional scatter of pale hearts, treating negative space as sweetness.
.page {
background:
radial-gradient(circle at 50% 0%, #FFE4EF 0%, #FFD6E8 60%);
min-height: 100vh;
}
.page.dotted {
background-image:
radial-gradient(circle at 50% 0%, #FFE4EF 0%, #FFD6E8 60%),
radial-gradient(#FFFFFF 1.5px, transparent 1.6px);
background-size: 100% 100%, 22px 22px;
background-blend-mode: normal, soft-light;
}
Soft pill button with bounce
The canonical action: a full-pill red button that lifts and springs on hover with a pink-red glow.
.btn-kitty {
padding: 0 26px;
height: 44px;
border: none;
border-radius: 9999px;
background: #E4002B;
color: #fff;
font-family: 'Baloo 2', sans-serif;
font-weight: 700;
box-shadow: 0 6px 18px rgba(228,0,43,0.10);
transition: transform .25s cubic-bezier(0.34,1.56,0.64,1),
box-shadow .25s ease, background .12s ease;
}
.btn-kitty:hover {
background: #C40025;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 28px rgba(228,0,43,0.16);
}