website_designs

Cutecore Design Reference

Cutecore is a digital and fashion aesthetic defined by the deliberate juxtaposition of kawaii (cute) imagery with signifiers of horror, violence, and psychological distress. It operates on a spectrum from disorganized, cluttered “NEET” environments to highly curated maximalist displays. The visual language creates cognitive dissonance by wrapping themes of trauma, morbid curiosity, and regression in childhood nostalgia and saccharine pastel warmth. Unlike straightforward kawaii, Cutecore is unsettling by design – it rejects sanitization and uses cuteness as a vehicle for darker emotional expression.

Visual Characteristics

Core Motifs and Patterns

Cute / Innocent Layer:

Sanrio characters (My Melody, Rilakkuma, Pompompurin) and anime character sprites
Plush toys, figurines, and dolls arranged in dense shrine-like displays
Strawberries, caramel pudding, cake, and other sweets imagery
Pastel rainbows, stars, hearts, and sparkles
Ribbons, bows, ruffled bedding, and decorative pillows
Floor-to-ceiling character “shrines” using repetition for visual obsession

Horror / Edgy Layer:

Realistic blood splatters and drip textures overlaid on pastel backgrounds
Bandages, eyepatches, medical gauze, and injury depictions
Weapons depicted through emoji or pixel art (knives, syringes, box cutters)
Bruise-like color patches and wound imagery
Survival horror game screens displayed on vintage consoles (Game Boy, Nintendo DS)

Environmental / Textural:

Discarded fast food packaging (Happy Meal boxes, fry cartons) as scattered elements
Unmade beds, laundry piles, and darkened rooms with blackout curtains
Computer and TV screen glow as ambient lighting source
Vintage technology (Game Boy Advance, flip phones, CRT monitors)
Pink LED strip lighting casting a hazy, filtered glow
Digital decay effects: JPEG compression artifacts, pixelation, visual noise

Design Principles

Cognitive dissonance as a tool – every cute element should be paired or undercut with something unsettling
Maximalist density – surfaces should feel packed, cluttered, and obsessive rather than airy
Claustrophobic framing – tight compositions with minimal breathing room, implying obsession
Layered texture – soft plushies against hard/dark elements; analog warmth against digital decay
Strictly controlled pastel palette – the sweetness of color is the vehicle for dissonance
Digital collage aesthetic – frantic overlays, glitch effects, stolen fanart fragments, and blood splatters
Depth through clutter – visual weight created by dense, overlapping elements
Artificial warmth – everything lit by pink/amber LED glow or screen light, never harsh daylight

Color Palette

Primary Scheme

Role	Colors
Base / Background	Pastel pink, soft white, cream pink
Sweet accents	Pastel yellow, pastel blue, pastel lavender
Signature accent	Strawberry red (signifying both innocence and blood)
Hot accent	Hot pink, magenta pink
Dark contrast	Near-black, dark plum, bruise purple
Glow / Lighting	Pink LED glow, warm amber screen light

Detailed Palette

Color	Hex (suggested)	Usage
Soft Pink	`#FFB6C1`, `#FFC0CB`	Primary background, base surface
Blush Pink	`#F8A4B8`, `#F2889A`	Secondary backgrounds, card surfaces
Hot Pink	`#FF69B4`, `#FF1493`	Active accents, highlights, buttons
Strawberry Red	`#DC143C`, `#C41E3A`	Blood accents, warning elements, dissonance pops
Pastel Yellow	`#FFFACD`, `#FFEAA7`	Sweet accent, badges, decorative elements
Pastel Blue	`#AEC6CF`, `#B5D3E7`	Cool sweet accent, secondary elements
Pastel Lavender	`#E6E6FA`, `#D8B4FE`	Soft accent, borders, hover states
Cream White	`#FFF5F5`, `#FFFAF0`	Light backgrounds, card surfaces
Bandage Beige	`#F5DEB3`, `#FAEBD7`	Bandage/medical motif accents
Bruise Purple	`#4A1942`, `#2D1B33`	Dark contrast, shadows, edgy overlays
Dark Plum	`#6B2D5B`, `#8B3A6B`	Deep accent, horror-layer headings
Screen Glow	`#FF8EC7`, `#FFB3D9`	Ambient glow effects, box shadows
Near Black	`#1A0A14`, `#120812`	Dark mode contrast, text on light backgrounds
Blood Drip	`#8B0000`, `#B22222`	Gore accents, decorative splatter elements

Suggested CSS Custom Properties

:root {
  /* Sweet pastel base tones */
  --cute-soft-pink: #ffb6c1;
  --cute-blush: #f8a4b8;
  --cute-cream: #fff5f5;
  --cute-white: #fffaf0;

  /* Kawaii accents */
  --cute-hot-pink: #ff69b4;
  --cute-magenta: #ff1493;
  --cute-pastel-yellow: #ffeaa7;
  --cute-pastel-blue: #aec6cf;
  --cute-lavender: #e6e6fa;
  --cute-pastel-lilac: #d8b4fe;

  /* Dissonance / horror accents */
  --cute-strawberry: #dc143c;
  --cute-blood: #8b0000;
  --cute-blood-bright: #b22222;
  --cute-bruise: #4a1942;
  --cute-dark-plum: #6b2d5b;

  /* Neutrals */
  --cute-bandage: #f5deb3;
  --cute-near-black: #1a0a14;

  /* Glow and lighting */
  --cute-glow-pink: #ff8ec7;
  --cute-glow-soft: #ffb3d9;
  --cute-glow-amber: #ffcc80;

  /* Functional mappings */
  --cute-bg-primary: var(--cute-soft-pink);
  --cute-bg-secondary: var(--cute-cream);
  --cute-bg-card: var(--cute-white);
  --cute-text-primary: var(--cute-near-black);
  --cute-text-secondary: var(--cute-dark-plum);
  --cute-text-heading: var(--cute-hot-pink);
  --cute-accent: var(--cute-magenta);
  --cute-accent-danger: var(--cute-strawberry);
  --cute-border: var(--cute-blush);
  --cute-link: var(--cute-hot-pink);
  --cute-link-hover: var(--cute-magenta);
  --cute-shadow: rgba(255, 105, 180, 0.25);
}

Approaches

Pastel pink dominance – pink in multiple shades forms the backbone; other pastels are supporting cast
Red as dual signifier – strawberry red reads as both “cute fruit” and “blood” depending on context
Strictly controlled warmth – even when introducing horror elements, the palette stays pastel and warm
Glow over shadow – prefer pink/amber glowing box-shadows over traditional dark drop shadows
Dark accents are rare but sharp – bruise purple and near-black appear sparingly for maximum contrast
Never cold or clinical – avoid grays, cool whites, or sterile blues

Typography

Typeface Characteristics

Cutecore typography blends childlike sweetness with digital anxiety:

Rounded, bubbly display fonts – headlines should feel like toy packaging or children’s show titles
Handwriting-mimicking fonts – prioritizing visual texture over legibility, as if scrawled in a diary
Kaomoji and Unicode decoration – text is augmented with emoticons (>_<), sparkle characters, and decorative Unicode borders
Emoji as typography – strings like ribbon, strawberry, bandage, and pudding emoji used as visual punctuation
Slight imperfection – fonts that feel hand-drawn or wobbly rather than geometrically precise
Decorative Unicode borders – characters like |, *, and complex Unicode frames used for text decoration

Recommended Web Fonts (Google Fonts / Free)

Font	Style	Usage
Quicksand	Rounded geometric sans-serif	Body text, UI elements, navigation
Comfortaa	Rounded, wide sans-serif	Headlines, section titles
Baloo 2	Bubbly, rounded display	Hero text, large headings
Patrick Hand	Handwritten, casual	Accent text, diary-style annotations
Caveat	Handwritten, natural	Captions, decorative labels
Indie Flower	Handwritten, whimsical	Scattered decorative text
Nunito	Rounded, friendly sans-serif	Body text alternative
Pangolin	Rounded handwriting hybrid	Subheadings, callouts
Boogaloo	Playful, rounded display	Large decorative headings
Gloria Hallelujah	Marker-style handwriting	Annotations, scrawled notes

Typography CSS Example

/* Headlines -- bubbly, rounded display */
h1, h2, h3 {
  font-family: 'Comfortaa', 'Baloo 2', cursive;
  font-weight: 700;
  color: var(--cute-text-heading);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

/* Body text -- rounded, friendly */
body {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cute-text-primary);
}

/* Handwritten diary text */
.cute-handwritten {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: 1.3em;
  color: var(--cute-dark-plum);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* Kaomoji / decorative text treatment */
.cute-kaomoji {
  font-family: 'Quicksand', monospace;
  font-size: 0.85rem;
  color: var(--cute-hot-pink);
  letter-spacing: 0.15em;
  opacity: 0.8;
}

/* Emoji decorative border text */
.cute-emoji-border {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-align: center;
  line-height: 2;
  user-select: none;
}

/* Labels and tags */
.cute-tag {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

Layout Principles

Grid and Structure

Dense, shrine-like arrangements – content blocks packed tightly together mimicking character merchandise walls
Maximalist surface coverage – minimal whitespace; every area should feel intentionally filled
Claustrophobic framing – tight padding, close margins, elements that feel like they are pressing against boundaries
Layered z-index stacking – elements overlapping each other with absolute positioning
Collage-style composition – mixed sizes, scattered placement, as if items were pinned to a wall or dumped on a bed
Rounded containers – heavy use of border-radius for a soft, toy-like feeling
Glow-based visual hierarchy – use glowing box-shadows and borders instead of size/weight alone to draw attention

Section Organization

Use gradient pink washes between sections for seamless flow
Apply decorative emoji or Unicode dividers between content blocks
Create shrine-style grids – repeating the same character or motif in dense rows
Employ sticker-like overlapping elements – badges, hearts, and stars that break the grid
Use screen/monitor frame metaphors – content areas that look like they’re displayed on a CRT or Game Boy screen
Incorporate bandage and tape motifs as section connectors or dividers
Alternate between pink-lit sections and dark bruise-purple sections for the cute/horror duality

CSS/Design Techniques

Pastel Pink Glow Background

/* Soft pink ambient glow background */
.cute-bg {
  background-color: var(--cute-soft-pink);
  background-image:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(255, 105, 180, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(255, 179, 217, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 234, 167, 0.08) 0%,
      transparent 60%
    );
}

/* Digital noise / JPEG decay overlay */
.cute-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

Shrine Grid Layout

/* Dense character shrine grid */
.cute-shrine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  padding: 1rem;
}

/* Varied sizing for obsessive repetition feel */
.cute-shrine-grid > :nth-child(4n+1) { grid-row: span 2; }
.cute-shrine-grid > :nth-child(7n+3) { grid-column: span 2; }

/* Collage-style scattered layout */
.cute-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 50px;
  gap: 0.25rem;
  padding: 1rem;
  position: relative;
}

/* Items overlap and scatter */
.cute-collage-item:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 4; transform: rotate(-3deg); z-index: 2; }
.cute-collage-item:nth-child(2) { grid-column: 3 / 8; grid-row: 2 / 6; transform: rotate(2deg); z-index: 3; }
.cute-collage-item:nth-child(3) { grid-column: 6 / 10; grid-row: 1 / 4; transform: rotate(-1deg); z-index: 1; }
.cute-collage-item:nth-child(4) { grid-column: 8 / 13; grid-row: 2 / 5; transform: rotate(1.5deg); z-index: 4; }
.cute-collage-item:nth-child(5) { grid-column: 1 / 6; grid-row: 4 / 8; transform: rotate(0.5deg); z-index: 2; }
.cute-collage-item:nth-child(6) { grid-column: 5 / 9; grid-row: 5 / 8; transform: rotate(-2deg); z-index: 5; }

Kawaii Card Styles

/* Base cute card -- rounded, glowing */
.cute-card {
  background: var(--cute-bg-card);
  border: 2px solid var(--cute-blush);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px var(--cute-shadow);
  overflow: hidden;
}

.cute-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 105, 180, 0.35);
  border-color: var(--cute-hot-pink);
}

/* Horror-accented card variant */
.cute-card--edgy {
  border-color: var(--cute-strawberry);
  box-shadow: 0 4px 16px rgba(220, 20, 60, 0.15);
}

.cute-card--edgy::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, var(--cute-strawberry) 30%, transparent 70%);
  opacity: 0.4;
  border-radius: 0 16px 0 0;
  pointer-events: none;
}

/* Sticker-style floating card */
.cute-sticker-card {
  background: var(--cute-bg-card);
  border: 3px solid var(--cute-hot-pink);
  border-radius: 24px;
  padding: 1rem 1.5rem;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow:
    2px 3px 0 var(--cute-blush),
    4px 6px 12px var(--cute-shadow);
}

Blood Splatter / Gore Decorative Effect

/* Decorative blood drip -- horror accent */
.cute-blood-drip {
  position: relative;
}

.cute-blood-drip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 8px;
  height: 40px;
  background: linear-gradient(
    180deg,
    var(--cute-strawberry) 0%,
    var(--cute-blood) 60%,
    transparent 100%
  );
  border-radius: 0 0 50% 50%;
  opacity: 0.6;
  pointer-events: none;
}

.cute-blood-drip::after {
  content: '';
  position: absolute;
  top: 0;
  right: 35%;
  width: 5px;
  height: 25px;
  background: linear-gradient(
    180deg,
    var(--cute-blood-bright) 0%,
    var(--cute-blood) 70%,
    transparent 100%
  );
  border-radius: 0 0 50% 50%;
  opacity: 0.4;
  pointer-events: none;
}

/* Blood splatter dot pattern */
.cute-splatter {
  position: relative;
}

.cute-splatter::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image:
    radial-gradient(circle at 15% 85%, var(--cute-strawberry) 2px, transparent 2px),
    radial-gradient(circle at 82% 12%, var(--cute-blood-bright) 3px, transparent 3px),
    radial-gradient(circle at 45% 92%, var(--cute-strawberry) 1.5px, transparent 1.5px),
    radial-gradient(circle at 70% 78%, var(--cute-blood) 2.5px, transparent 2.5px),
    radial-gradient(circle at 25% 15%, var(--cute-blood-bright) 1px, transparent 1px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

Bandage / Medical Tape Element

/* Adhesive bandage strip */
.cute-bandage {
  position: absolute;
  width: 80px;
  height: 24px;
  background: var(--cute-bandage);
  border: 1px solid #e0c9a0;
  border-radius: 4px;
  transform: rotate(-8deg);
  z-index: 5;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Center pad of the bandage */
.cute-bandage::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 16px;
  background: #e8d5b8;
  border-radius: 2px;
}

/* Perforated dots on bandage */
.cute-bandage::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 8px;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 6px 6px;
}

Pink LED Glow Effect

/* Ambient pink LED glow on sections */
.cute-led-glow {
  position: relative;
}

.cute-led-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--cute-hot-pink),
    var(--cute-glow-pink),
    var(--cute-magenta),
    var(--cute-glow-pink),
    var(--cute-hot-pink)
  );
  box-shadow:
    0 0 15px var(--cute-glow-pink),
    0 0 40px var(--cute-glow-soft),
    0 0 80px rgba(255, 142, 199, 0.3);
  z-index: 10;
}

/* Glowing border for containers */
.cute-glow-border {
  border: 2px solid var(--cute-hot-pink);
  box-shadow:
    0 0 8px var(--cute-glow-pink),
    0 0 20px rgba(255, 142, 199, 0.2),
    inset 0 0 8px rgba(255, 142, 199, 0.1);
}

CRT / Screen Frame Metaphor

/* Retro CRT monitor frame for content */
.cute-screen {
  background: var(--cute-near-black);
  border: 12px solid #2a2a2a;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  box-shadow:
    inset 0 0 30px rgba(255, 142, 199, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

/* CRT scanline effect */
.cute-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  border-radius: 4px;
}

.cute-screen .screen-content {
  color: var(--cute-glow-pink);
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 8px var(--cute-glow-pink);
}

Emoji / Unicode Decorative Divider

/* Decorative emoji divider */
.cute-divider {
  text-align: center;
  padding: 1.5rem 0;
  font-size: 1rem;
  letter-spacing: 0.5em;
  user-select: none;
  opacity: 0.7;
}

/* Usage: <div class="cute-divider">...</div> */

/* Sparkle text decoration */
.cute-sparkle {
  position: relative;
}

.cute-sparkle::before {
  content: '\2728';
  position: absolute;
  top: -8px;
  left: -12px;
  font-size: 0.8rem;
  opacity: 0.6;
}

.cute-sparkle::after {
  content: '\2728';
  position: absolute;
  bottom: -8px;
  right: -12px;
  font-size: 0.6rem;
  opacity: 0.4;
}

Dark / Horror Mode Section

/* Dark bruise-purple section for horror contrast */
.cute-dark-section {
  background: linear-gradient(
    135deg,
    var(--cute-bruise) 0%,
    var(--cute-near-black) 50%,
    var(--cute-dark-plum) 100%
  );
  color: var(--cute-glow-pink);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.cute-dark-section h2 {
  color: var(--cute-hot-pink);
  text-shadow: 0 0 20px var(--cute-glow-pink);
}

.cute-dark-section p {
  color: var(--cute-soft-pink);
  opacity: 0.9;
}

/* Flickering glow animation for dark sections */
@keyframes cute-flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  98% { opacity: 1; }
}

.cute-dark-section .cute-flicker {
  animation: cute-flicker 4s infinite;
}

JPEG Compression / Digital Decay

/* Simulated JPEG artifact border */
.cute-glitch {
  position: relative;
}

.cute-glitch::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 105, 180, 0.3) 20%,
    transparent 21%,
    transparent 45%,
    rgba(220, 20, 60, 0.2) 46%,
    transparent 47%,
    transparent 78%,
    rgba(255, 20, 147, 0.25) 79%,
    transparent 80%
  );
  z-index: -1;
  filter: blur(1px);
  animation: cute-shift 3s ease-in-out infinite alternate;
}

@keyframes cute-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(3px); }
}

/* Pixelation effect (apply to images) */
.cute-pixelate {
  image-rendering: pixelated;
  filter: contrast(1.1) saturate(1.2);
}

Materials and Textures (Visual Metaphors for Web)

Physical Cutecore materials and their web equivalents:

Physical Material	Web Equivalent
Plush / fleece fabric	Rounded corners (16px+), soft pink box-shadows, pastel gradients
Bandages / medical tape	Beige rounded strips with dot texture, positioned over edges
Character shrine wall	Dense repeating grid with minimal gap, slight random rotations
Pink LED strip lighting	Glowing border or top-bar with pink box-shadow blur
CRT / Game Boy screen	Dark container with scanline overlay and monochrome pink text glow
JPEG artifacts / noise	SVG noise texture overlay with low opacity, chromatic aberration effect
Blood splatters	Red radial-gradient dots at random positions with low opacity
Fast food packaging	Bright yellow/red small card elements with rounded corners
Ribbons and bows	Decorative border-top with scalloped or wavy pattern
Stickers	Pill-shaped badges with thick borders, slight rotation, and drop shadows

Key Differences from Kawaii / Yami Kawaii

Aspect	Kawaii	Cutecore	Yami Kawaii
Color approach	Pure pastels, consistently cheerful	Pastels undercut by reds and darks	Pastels with medical/illness motifs
Emotional tone	Wholesome, joyful	Dissonant, anxious, obsessive	Melancholic, “sick-cute”
Violence	None	Explicit (blood, weapons, injury)	Implied (bandages, pills, syringes)
Organization	Neat, orderly	Cluttered, shrine-like, claustrophobic	Varies
Digital artifacts	Clean, crisp	Deliberately degraded (JPEG, glitch)	Sometimes glitchy
Overall feel	Children’s show	Disturbing fan shrine	Hospital waiting room

Aesthetic	Relationship to Cutecore
Gurokawa	Closest relative; “grotesque-cute” blending gore with kawaii visuals directly
Pastel Gore	Shares the pastel-meets-blood palette; focuses more on illustrated gore
Yami Kawaii	“Sick-cute” aesthetic; uses medical/mental-illness imagery within kawaii framework
Kawaii Metal	Musical parallel; pairs cute J-pop vocals with heavy metal instrumentation
Lolicore	Shares the juxtaposition of childlike imagery with aggressive/harsh elements
Traumacore	Overlaps in trauma processing themes; uses nostalgic childhood imagery to express pain
Femcel	Shares the anime-obsessive, cluttered digital space and NEET lifestyle elements

Quick-Start: Minimal Cutecore Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cutecore Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Quicksand:wght@400;500;700&family=Patrick+Hand&family=Caveat:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --cute-soft-pink: #ffb6c1;
      --cute-blush: #f8a4b8;
      --cute-cream: #fff5f5;
      --cute-white: #fffaf0;
      --cute-hot-pink: #ff69b4;
      --cute-magenta: #ff1493;
      --cute-pastel-yellow: #ffeaa7;
      --cute-pastel-blue: #aec6cf;
      --cute-lavender: #e6e6fa;
      --cute-strawberry: #dc143c;
      --cute-blood: #8b0000;
      --cute-bandage: #f5deb3;
      --cute-bruise: #4a1942;
      --cute-dark-plum: #6b2d5b;
      --cute-near-black: #1a0a14;
      --cute-glow-pink: #ff8ec7;
      --cute-glow-soft: #ffb3d9;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--cute-soft-pink);
      color: var(--cute-near-black);
      font-family: 'Quicksand', sans-serif;
      font-weight: 500;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Comfortaa', cursive;
      font-weight: 700;
      color: var(--cute-hot-pink);
      line-height: 1.2;
    }

    .hero {
      text-align: center;
      padding: 5rem 2rem 3rem;
      background: linear-gradient(
        135deg,
        var(--cute-cream) 0%,
        var(--cute-soft-pink) 50%,
        var(--cute-lavender) 100%
      );
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cute-hot-pink), var(--cute-glow-pink), var(--cute-magenta));
      box-shadow: 0 0 15px var(--cute-glow-pink), 0 0 40px var(--cute-glow-soft);
    }

    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      margin-bottom: 0.5rem;
      text-shadow: 0 0 20px var(--cute-glow-soft);
    }

    .hero .subtitle {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.4rem;
      color: var(--cute-dark-plum);
      transform: rotate(-1.5deg);
      display: inline-block;
    }

    .emoji-divider {
      text-align: center;
      padding: 1.5rem 0;
      font-size: 1rem;
      letter-spacing: 0.5em;
      user-select: none;
      opacity: 0.7;
    }

    .cute-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.2rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem;
    }

    .cute-card {
      background: var(--cute-white);
      border: 2px solid var(--cute-blush);
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 4px 16px rgba(255, 105, 180, 0.2);
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cute-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 8px 30px rgba(255, 105, 180, 0.35);
      border-color: var(--cute-hot-pink);
    }

    .cute-card h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    .tag {
      display: inline-block;
      padding: 0.2rem 0.7rem;
      font-family: 'Quicksand', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      border-radius: 100px;
      margin-bottom: 0.8rem;
      color: #fff;
    }

    .tag--pink { background: var(--cute-hot-pink); }
    .tag--strawberry { background: var(--cute-strawberry); }
    .tag--lavender { background: #9b59b6; }
    .tag--blue { background: #6fa8c7; }

    .dark-section {
      background: linear-gradient(135deg, var(--cute-bruise), var(--cute-near-black));
      color: var(--cute-glow-pink);
      padding: 3rem 2rem;
      text-align: center;
    }

    .dark-section h2 {
      color: var(--cute-hot-pink);
      text-shadow: 0 0 20px var(--cute-glow-pink);
      margin-bottom: 1rem;
    }

    .dark-section p {
      color: var(--cute-soft-pink);
      max-width: 600px;
      margin: 0 auto;
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>My Little Shrine</h1>
    <span class="subtitle">everything is fine (>_<)</span>
  </div>

  <div class="emoji-divider">...</div>

  <section class="cute-grid">
    <div class="cute-card">
      <span class="tag tag--pink">Collection</span>
      <h3>Plushie Wall</h3>
      <p>Forty-seven My Melody plushies arranged by size, watching from the shelf above the bed.</p>
    </div>
    <div class="cute-card">
      <span class="tag tag--strawberry">Sweet</span>
      <h3>Strawberry Milk</h3>
      <p>The empty cartons stacked neatly by the monitor, backlit by pink LED strips.</p>
    </div>
    <div class="cute-card">
      <span class="tag tag--lavender">Digital</span>
      <h3>Pixel Shrine</h3>
      <p>Screenshots saved and resaved until the artifacts became part of the art.</p>
    </div>
    <div class="cute-card">
      <span class="tag tag--blue">Nostalgia</span>
      <h3>Game Boy Corner</h3>
      <p>The screen still glows in the dark, playing the same save file from 2004.</p>
    </div>
  </section>

  <div class="dark-section">
    <h2>After Hours</h2>
    <p>When the LED strips are the only light and the plushies cast long shadows across the ceiling.</p>
  </div>
</body>
</html>

This site is open source. Improve this page.