Faerie Fire

Prismatic Magic | Ethereal Edges | Iridescent Code

✨ Unique Feature: Prismatic Borders

This design system features animated rainbow prismatic borders that continuously shift through all colors of the magical spectrum. The effect is created using gradient masks and keyframe animations.

Look at the card below to see the prismatic border in action—it cycles through violet, pink, cyan, green, and gold in an endless, mesmerizing flow.

Sharp faerie edges meet liquid light. Magic crystallized in CSS.

Witness the Prismatic Effect

This card's border flows through the entire rainbow spectrum continuously. The animation is smooth, CPU-efficient, and requires no JavaScript.

Technical implementation: Uses a pseudo-element with an animated gradient background and mask-composite to create the border effect while maintaining sharp corners.

Prismatic Spectrum

Soft Violet

#c084fc

Bright Pink

#f472b6

Bright Cyan

#67e8f9

Mint Green

#86efac

Fairy Gold

#fbbf24

Deep Purple

#a855f7

Deep Pink

#ec4899

Deep Cyan

#22d3ee

Magical Actions

Violet & Rainbow

Notice the Shimmer

Hover over buttons to see enhanced glow effects. The rainbow button continuously shifts colors.

Enchanted Badges

Magical Ethereal Prismatic Iridescent

Magical Messages

Enchantment Success: The spell weaves through reality with prismatic beauty.
Faerie Notice: Magical energies detected in the ethereal plane.
Crystal Info: Iridescent frequencies resonating at optimal levels.

Design Philosophy

Prismatic Magic Principles

  • Sharp Faerie Edges: Zero border radius—crystalline precision
  • Animated Prismatic Borders: Rainbow gradients that flow endlessly
  • Iridescent Glows: Multiple box-shadows create ethereal depth
  • Shimmer Effects: Buttons feature diagonal light sweeps
  • Sparkle Decorators: Animated ✨ on major headings
  • Cormorant + Urbanist: Elegant serif meets modern sans
  • Five-Color Spectrum: Violet, pink, cyan, green, gold