Foundations / AI Gradient
AI Gradient
A separate, intentionally cool palette signals AI-native features without contaminating the warm prestige identity. The contrast is deliberate: warm parchment for human knowledge, cool luminescence for machine intelligence.
The Gradient
Two theme variants. The dark theme variant uses pastel 300-level hues to remain legible against dark surfaces. The light theme variant uses vivid 500-level hues for contrast against light backgrounds.
Dark Theme · Pastel 300
--g-ai-dark
#f0abfc → #c4b5fd → #67e8f9
Fuchsia 300 · Violet 300 · Cyan 300
Light Theme · Vivid 500
--g-ai-light
#d946ef → #8b5cf6 → #06b6d4
Fuchsia 500 · Violet 500 · Cyan 500
Allowed Uses
The gradient is an accent — never a primary surface. It signals "AI-powered" features through small, targeted applications.
✓ Icon fills
✓ Card borders
✓ Thin dividers
✓ Indicator dots
✓ Ambient glows
✓ Orb containers
Forbidden Uses
✗ Text fill / gradient text
Never apply the gradient as a CSS text color or clip-path text fill. Text must be a solid color with sufficient contrast.
✗ Badge text color
Badge text is always a solid color token. The gradient is too low-contrast at small sizes.
✗ Button background
Button backgrounds use the semantic --primary token. The AI gradient is not a button color.
✗ Body or page background
Page backgrounds are always the paper/card tokens. The gradient never covers large areas.
Radial Glows
Three ambient radial glows for dark-theme AI sections. Applied as background layers at low opacity, never as foreground elements.
Violet Glow
#8b5cf6
Dark surfaces only · Never on paper
Cyan Glow
#06b6d4
Dark surfaces only · Never on paper
Fuchsia Glow
#d946ef
Dark surfaces only · Never on paper