# 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 📝

Username 💖
Email Address ✨
Sparkle Level 🌟
About Me 🦄
Choose Your Vibe 💕
Magical Powers 🌈
Sparkle Magic ✨
Rainbow Creation 🌈
Glow Powers 💫
Aesthetic Mode 🎨
Soft Pastel 🌸
Bright Neon ⚡
Dreamy Vibes 💭

## 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!