A design system where depth emerges from chromatic light
This design system makes one bold distinctive choice that defines its visual character. Rather than creating depth through traditional gray drop shadows, we use multi-layer chromatic depth. This technique stacks multiple colored box-shadows in complementary hues, creating a prismatic effect that suggests both technical precision and elemental power.
The approach draws from split-complementary color theory. Our primary color is violet, positioned at approximately 270 degrees on the color wheel. The split complements are red-orange (at approximately 30 degrees) and cyan (at approximately 180 degrees). When these colors layer with slight offsets, they create a chromatic aberration effect similar to what you might see in optical phenomena like light refracting through storm clouds or shimmering across dragon scales.
Traditional drop shadows use neutral gray or black with transparency, creating depth through luminosity alone. This works effectively but feels flat and utilitarian. Chromatic depth adds another dimension by introducing color relationships. The violet-red-cyan trinity creates visual tension and harmony simultaneously. Violet and cyan are cool colors that recede visually, while red-orange advances, creating a push-pull effect that makes surfaces feel more dimensional.
The effect also carries symbolic weight. Prismatic light has been associated with power and magic across cultures, from rainbow serpents in indigenous Australian mythology to the aurora borealis in northern European folklore. Dragons, traditionally depicted with iridescent scales that shift in color, embody this prismatic quality. By building this chromatic layering into the core design system, we create an aesthetic that feels both modern and mythologically resonant.
Basic cards use subtle chromatic layers. Notice the slight red shift to the bottom-right and cyan shift to the top-left, creating gentle dimensionality.
Elevated cards intensify the effect with larger offsets and more saturated colors, creating stronger separation from the background.
Powerful cards maximize the chromatic effect and add a subtle breathing animation, suggesting contained energy. Watch it pulse.
The chromatic depth effect is achieved through carefully ordered box-shadows. Each shadow serves a specific purpose in building the overall effect. Understanding the layering helps you implement and customize the technique.
/* Chromatic depth anatomy */
box-shadow:
/* Inner glow: defines the object's edge */
0 0 0 1px var(--violet-900),
/* Color shifts: create the prismatic effect */
1px 1px 0 var(--red-900), /* Red shifts down-right */
-1px -1px 0 var(--cyan-900), /* Cyan shifts up-left */
/* Colored diffusion: depth and atmosphere */
2px 4px 8px rgba(168, 85, 247, 0.15), /* Violet depth */
-2px -2px 6px rgba(6, 182, 212, 0.1); /* Cyan ambient light */The order matters significantly. Shadows are rendered from last to first in the list, meaning the bottom shadow appears on top. We start with the inner glow to define edges, then add the chromatic shifts, and finally layer the diffused colored shadows that create ambient atmosphere.
The color system is built on split-complementary harmony. Violet serves as the primary power color, anchoring the palette. Red-orange and cyan split the complement, creating dynamic tension. Gold adds warmth and emphasizes important elements without fighting for attention.
#c084fc
Primary headings, key interactions
#a855f7
Interactive elements, borders
#7e22ce
Strong accents, depth layers
#f43f5e
Heat, intensity, chromatic shift
#06b6d4
Cool energy, secondary interactions
#eab308
Emphasis, prismatic accent
Buttons inherit the chromatic depth effect, with enhanced layers appearing on hover. The interaction is subtle but satisfying, providing tactile feedback through visual shifts.
Badges use minimal chromatic effects to avoid visual clutter, focusing on clear categorical communication through color and typography.
Tables maintain the chromatic vocabulary through colored borders and subtle background treatments.
| Color | Function | Chromatic Role |
|---|---|---|
| Violet | Primary power | Anchors the palette, creates foundation |
| Red-Orange | Heat & intensity | Warm shift, creates forward motion |
| Cyan | Cool energy | Cold shift, creates receding depth |
| Gold | Accent | Prismatic highlight, draws focus |
The chromatic depth effect requires understanding color relationships and shadow layering. While it may seem complex at first, the pattern becomes intuitive once you grasp the underlying principles.
Select a primary color and identify its split complements. This creates a triad with built-in tension and harmony. For this system, violet (270°) pairs with red-orange (30°) and cyan (180°). These colors are far enough apart to create contrast but close enough to feel cohesive.
Build the effect in layers, starting with edge definition and ending with atmospheric glow. Each layer serves a specific purpose. The inner glow provides crisp edges. The chromatic shifts create the prismatic aberration. The colored diffusion adds depth and atmosphere.
Not every element needs maximum chromatic depth. Use the effect strategically to create hierarchy. Standard cards use subtle shifts. Elevated cards intensify the effect. Powerful elements maximize it and may add animation.
This system embraces restraint in animation. Movement exists to communicate state changes or draw attention to important interactions, not to create spectacle. The powerful card pulse animation demonstrates this principle. It breathes slowly, taking four seconds for a complete cycle. The effect is almost subliminal—you might not consciously notice it, but it registers as aliveness and contained power.
When implementing animations, favor subtle changes in shadow depth, small translations, or gentle opacity shifts over dramatic transformations. The goal is to enhance the chromatic depth system, not compete with it. Let the layered colors do the heavy visual lifting while animations provide gentle accents.