Prismatic Design System
Seven gem jewel tones in spectral progression, inspired by light refracting through a prismatic lens. Each color is named for the gemstone it evokes.
A three-font system: Orbitron for display and technical labels, Josefin Sans for elegant headings, and DM Sans for readable body text.
REFRACTED LIGHT
Through Faceted Glass
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Thin Weight Elegance
Light Weight for Subtitles
SemiBold for Section Titles
Thin uppercase tracking
Light 300 — When white light enters a prism, it slows and bends. Each wavelength refracts at a slightly different angle, splitting into a continuous spectrum of colors from red through violet.
Regular 400 — A kaleidoscope mirrors this phenomenon through reflection rather than refraction. Angled mirrors inside a tube create infinite symmetrical patterns from small colored objects, producing mandalas of light.
Medium 500 — Caption and UI text. From the Greek kalos (beautiful), eidos (form), and skopein (to look at).
SPECTRUM OF LIGHT
A 4px base unit scales through ten steps in spectral progression from ruby through amethyst. Consistent spacing creates the precise optical geometry the kaleidoscope demands.
Input fields with dark glass surfaces and prismatic focus rings. Custom checkboxes glow ruby, radios glow amethyst, and every control catches the light on interaction.
Content containers that refract, reflect, and diffuse light. Each card style draws from a different optical phenomenon — prismatic borders, faceted geometry, frosted glass, and mirror reflection.
An animated rainbow border rotates continuously around a dark panel. The conic gradient cycles through all seven gem tones, creating a living frame of refracted light.
Hexagonal clip-path with a deep gem gradient, like looking into a cut stone.
Frosted glass with backdrop-filter blur and subtle border. The background kaleidoscope pattern shows through softly, like peering through etched crystal.
A reflection fades beneath the card, mimicking the internal mirrors of a kaleidoscope that multiply and transform every element they catch.
Status messages illuminated by their respective gem tones. Each alert glows with the color of its meaning — sapphire for knowledge, emerald for growth, citrine for caution, ruby for urgency.
Light travels at 299,792,458 meters per second in a vacuum. When it enters a denser medium like glass, it slows down and bends — this is the principle behind every kaleidoscope.
Pattern calibration complete. All six mirrors are aligned at 60-degree intervals, producing perfect hexagonal symmetry across the full visible spectrum.
Spectral intensity exceeding comfortable viewing thresholds. Consider reducing brightness or applying a neutral-density filter to the light source.
Critical misalignment detected in mirror assembly. Asymmetric refraction may cause destructive interference patterns. Recalibrate immediately.
Pure CSS kaleidoscope patterns demonstrating the optical techniques at the heart of this design system. Each pattern uses only gradients, box-shadows, and geometry — no images.