Iridescent
Prismatic Light & Holographic Foil
Surfaces that shift with light — multi-hue gradients, metallic sheens, and foil effects that translate the shimmering qualities of soap bubbles, abalone shells, and butterfly wings into luminous digital interfaces.
Typography
Clean, Geometric & Luminous
Calm, legible type as counterpoint to prismatic richness
Display / Space Grotesk 700
Prismatic Glow
Heading / Outfit 600
Holographic Surfaces Refract Light
Subheading / Sora 600
Spectral color shifting & foil effects
Body / Inter 400
Screen-optimized body text with high x-height and open counters. Essential for readability when text sits near or on top of multicolored gradient backgrounds.
UI Label / Space Grotesk 500
Buttons & Interface Labels
Caption / Inter 400
Muted descriptions, secondary information, timestamps
Type Scale
Font Pairings
Space Grotesk + Inter
Futuristic display meets universal readability
Outfit + Inter
Contemporary elegance, clean throughout
Sora + Inter
Bold gradient-ready headlines, warm body text
Color Palette
Prismatic Spectrum & Dark Bases
Full-spectrum holographic hues on deep, high-contrast canvases
Components
Glass Cards & Holographic Foil
Translucent panels that catch prismatic light on hover
Layered Refraction
Stacked translucent surfaces reveal prismatic backgrounds beneath, creating natural visual hierarchy through light and color depth.
Glass DepthSpectral Motion
Gradients shift smoothly through the full color spectrum, simulating how holographic foil catches and disperses ambient light.
Animation GradientFoil Interactivity
Metallic sheen effects respond to hover and interaction, creating tactile, premium-feeling surfaces that reward user engagement.
Hover SheenPrismatic Orbs
Floating conic-gradient spheres with heavy blur create ambient iridescent backgrounds that shift and breathe organically.
Background BlurGlassmorphic Panels
Frosted semi-transparent panels with backdrop-filter blur float above iridescent backgrounds, creating the signature holographic-under-glass effect.
Blur GlassPearlescent Badges
Compact UI elements with prismatic gradient underlays and glass borders serve as status indicators, tags, and premium labels.
Badge PremiumVisual Effects
CSS Prismatic Techniques
Holographic, foil, and spectral effects -- all pure CSS, no images
Full Spectrum Sweep
Animated linear gradient cycling through all prismatic stops creates a flowing holographic ribbon.
Conic Foil Rotation
Rotating conic gradient simulates holographic foil catching light from different angles.
Glass Over Prism
Frosted backdrop-filter panels float above prismatic backgrounds for layered depth.
Metallic Sheen
Sweeping highlight gradient mimics light sliding across a polished metallic surface.
Floating Orbs
Blurred radial gradients with slow animations create ambient iridescent glow.
Color-Dodge Blend
Layered gradients with mix-blend-mode create complex prismatic interactions.
Interactive Elements
Iridescent Buttons
Prismatic gradients, glass panels, and metallic sheen on hover
Iridescent design translates the shimmering, color-shifting wonder of prismatic light into digital interfaces — surfaces that feel alive, luminous, and perpetually catching light from new angles.— The Prismatic Design Principle
Ready to Refract?
Build holographic interfaces that captivate with prismatic depth, metallic sheen, and spectral color.
Back to the Prism