Bubblicorn Style Reference 🦄✨

E-Girl Aesthetic | Rounded Corners | Pastel Vibes

Color Palette 💖

Bubblegum 1 #FF69B4
Bubblegum 2 #FF1493
Sparkle 1 #B0FFE8
Sparkle 2 #00FFFF
Neon 1 #FF10F0
Neon 2 #FFE66D
Lavender #E6B3FF
Periwinkle #CCCCFF
Primary Text #FFE6FF

Typography ✨

H1: Rainbow Gradient ✨

H2: Hot Pink Primary 💕

H3: Lavender Dreams 💜

H4: Mint Sparkle 🌿

H5: Periwinkle Soft 🦋
H6: Light Primary ⭐

This is bold bubblegum text and this is sparkly emphasized text. Body text uses Nunito with Noto Emoji for perfect emoji rendering 🦄🌈✨. All headings use Quicksand for that cute, rounded aesthetic!

Inline code snippets are styled with rounded borders and soft pink backgrounds.

// Code block example ✨
function kawaii() {
    return "So cute! 💖";
}
This is a blockquote with rounded corners and a bubblegum pink accent border~ So aesthetic! 💕

Button Styles 🎀

Special Button (Gradient)

Default Button

Navigation Button

Sparkle Button

Neon Button


Cards & Glow Effects 💫

Bubblegum Glow 💖

Used for primary actions and important highlights. Sweet pink vibes!

Sparkle Glow ✨

Used for success states and achievements. Magical mint cyan tones!

Neon Glow ⚡

Used for warnings and attention-grabbing elements. Electric vibes!

Elevated Card 🌙

Uses subtle pink-tinted elevated background with soft rounded corners.

Solid Card 🌌

Dark solid magenta background for strong contrast sections.


Kawaii Card (Light Mode) 🌸

Super Cute Featured Content! 💕

This ultra-kawaii card uses a bright white background (rgba(255, 255, 255, 0.92)) with a thick rainbow gradient border. Perfect for special announcements, featured content, or anything that needs extra cuteness! ✨

Design Specs:

  • Background: rgba(255, 255, 255, 0.92) - Ultra bright! 🌟
  • Border: 4px gradient (Hot Pink → Lavender → Cyan)
  • Heading color: #8B008B (dark magenta)
  • Text color: #2d1435 (dark purple)
  • Strong: #FF1493 | Em: #00CED1
  • Rounded corners: 20px (extra soft!)

Use this variant when you need maximum cuteness and readability. The card-kawaii class automatically applies light-mode styling to all child elements with that perfect e-girl aesthetic! 🦄

Standard Dark Card 🌙

Regular pastel-tinted card for normal content.

Kawaii Light Card 🌸

Maximum brightness and cuteness overload!


Tables 📊

Unicorn 🦄 Level Sparkles ✨ Status
Rainbow Dash 99 12,540 ✨ Online 💚
Stardust 87 15,890 ✨ Online 💚
Moonbeam 76 9,320 ✨ Away 💖
Glitter 95 21,770 ✨ Offline ⚡
Total Unicorns 59,520 ✨ 4 Active 🦄

Form Elements 📝


Progress Indicators 📈

Native Progress Element

Custom Progress Bars

Sparkle Power ✨ 850/1000
85%
Kawaii Experience 💖 6,240/10,000
62%
Quest Progress 🌈 3/12 Complete
25%

Badges & Pills 🏷️

New 💖 Verified ✨ Hot ⚡ Common 🌙 Cute 💕 Active 🌟

Use Cases

Status: Online 💚 Away 💖 Offline ⚡

Tiers: Bronze 🥉 Gold 🥇 Legendary ✨


Tab Interface 📑

Overview ✨

This is the overview tab with rounded corners and soft pastel vibes. Tab content displays in a card-style container with full styling support!

Character Stats 🌟

  • Cuteness: 99 💕
  • Sparkle: 87 ✨
  • Magic: 95 🌈
  • Vibes: 100 💫

Inventory 🎀

Your equipped items and magical accessories!

Rainbow Sword 🗡️ Sparkle Potion x5 ✨ Stardust: 12,450 ⭐


Timeline Component 🕐

2025-01-15 🌸

Journey Begins! 🦄

Welcome to the magical world! Your kawaii adventure starts here ✨

2025-02-03 💖

First Quest Completed!

Completed "Rainbow Mission" - Earned 500 Sparkles ✨

2025-03-12 🌟

Level 99 Achieved!

Reached legendary status! Unlocked unicorn powers 🦄

2025-04-20 ⚡

Mythical Item Found!

Discovered "Crystal of Eternal Sparkles" in treasure chest 💎


Statistics Display 📊

12.5K
Sparkles Earned ✨
98%
Cuteness Level 💕
247
Quests Done 🌈
Vibes Score 💫

Chart Elements 📈

Skill Levels 🌟

Cuteness 💕 92/100
92%
Sparkle ✨ 78/100
78%
Magic 🌈 65/100
65%
Vibes 💫 88/100
88%

Alert Boxes 📢

Success! ✨ Your magical profile has been updated successfully!
Notice 💕 Your sparkle session will expire in 5 minutes.
Warning ⚡ Unable to connect to unicorn server. Please try again!
Info 🌙 Magical maintenance scheduled for tomorrow at 2:00 AM UTC.

Implementation Guide for LLMs 📚

Quick Start Checklist ✨

  1. Copy :root CSS variables block
  2. Apply vertical gradient background to body
  3. Use .container for max-width centering
  4. Build layouts with .grid .grid-[2|3|4] classes
  5. All borders are ROUNDED (8px-20px range)
  6. Style components with modifier classes (.btn-special, .card-glow-bubblegum)

Border Radius System 💫

/* Rounded corners everywhere! */
--radius-sm: 8px;    /* Small elements */
--radius-md: 12px;   /* Standard cards */
--radius-lg: 16px;   /* Large sections */
--radius-xl: 20px;   /* Extra cute! */
--radius-full: 9999px; /* Pills/badges */

Color Harmony 🌈

Bubblegum: Hot pinks for primary actions

Sparkle: Mint/cyan for success states

Neon: Electric pink/yellow for warnings

Pastels: Lavender, periwinkle for soft accents

Typography Usage 💕

Element Color/Style Font
<h1> 5-color rainbow gradient Quicksand
<h2> #FF69B4 (hot pink) Quicksand
<h3> #E6B3FF (lavender) Quicksand
<h4> #B0FFE8 (mint) Quicksand
<strong> #FF69B4 (hot pink) -
<em> #B0FFE8 (mint) -

Fonts: Quicksand (headers) | Nunito + Noto Emoji (body)

Button Behaviors 🎀

/* Special button hover */
.btn-special:hover {
    transform: translateY(-4px) scale(1.05);
    /* Floats up + grows slightly */
}

/* Standard button hover */
.btn-default:hover {
    transform: translateY(-2px) scale(1.03);
    /* Subtle lift effect */
}

Critical Design Rules ✨

  • Always rounded corners: Use border-radius on everything!
  • Border thickness: 2px standard, 4px for kawaii cards
  • Opacity: bg-elevated: 0.06, bg-card: 0.18, bg-darker: 0.25
  • Hover effects: Buttons lift up AND scale (translateY + scale)
  • Colors: Pastel/neon mix - high saturation but playful
  • Fonts: Quicksand (headers), Nunito (body) - both rounded!
  • Background: 180deg vertical gradient (deep purple → teal)
  • Emojis: Use liberally for that e-girl aesthetic! 🦄✨💕
  • Glows: More intense than demoBuild - embrace the neon!