Foundations / Shadows

Shadows

The shadow system uses a warm ink base — hsl(37 40% 8%) — echoing the orange-warm undertone of both the paper and ink palette. Cold blue-grey shadows are forbidden. Every elevation level feels like the same document under different light.

Elevation Scale

8 levels plus two specialty variants. Each card below is elevated to its own shadow level.

2XS

--shadow-2xs

--shadow-xs

--shadow-sm

Base

--shadow

--shadow-md

--shadow-lg

--shadow-xl

2XL

--shadow-2xl

Burgundy

--shadow-burg

AI Glow

--shadow-ai

Specialty Shadows

Featured Card

--shadow-burg

Burgundy glow. Used on featured cards, primary CTAs on hover, and "most popular" pricing tiers.

0 8px 32px hsl(345 100% 25% / 0.2)

AI Feature

--shadow-ai

AI gradient glow. Reserved exclusively for AI-native feature cards and the hero orb ambient glow.

0 8px 32px hsl(270 60% 60% / 0.2)

Paper Texture

An SVG noise texture at 2–4% opacity reinforces the material world aesthetic on key surfaces. Subtle enough to be unconscious, present enough to feel physical.

Without texture

With texture (4% noise)

CSS Implementation

.paper-texture {
  background-image: url("data:image/svg+xml,...noise...");
  background-size: 256px;
  /* Opacity controlled via SVG opacity attribute: 0.02–0.04 */
}

Focus Rings

All interactive elements use a 2px solid focus ring. Burgundy on light theme, Champagne on dark theme. WCAG 2.2 AA compliant. Never hidden or suppressed.

Light Theme

2px solid #800020 · offset-2

Dark Theme

2px solid #E8C98A · offset-2

← Motion AI Gradient →