Design Tokens
Reference guide for Nocta UI’s global design tokens — colors, shadows, and radii.
Colors
All colors are defined in the modern oklch() color space, giving precise control over contrast and perceptual brightness across light and dark themes.
Token
Preview
Shadows
Nocta UI defines a consistent shadow scale for elevation levels. All shadows use subtle opacity to maintain depth without harsh contrast.
Token
Layers
Shadows are identical in both themes for consistent depth perception.
Radius
Border radius tokens define how rounded corners appear throughout the system.
Token
Value
Modify this token to globally adjust the curvature of all components in your project.
Motion
Token
Value
Nocta UI hooks this tokens into animations, so updating the curves immediately affects motion primitive.