Nerio separates brand theme, color mode, and density so one component API can work across many products without creating combined theme names.
Runtime axes
Axis
Attribute
Values
Theme
data-theme
purple, blue, green, orange, red, neutral, or custom
Mode
data-mode
system, light, dark
Density
data-density
comfortable, compact
Preset themes
brand accents
Theme
Attribute value
Primary accent token
Purple
data-theme="purple"
--n-purple-600
Blue
data-theme="blue"
--n-blue-600
Green
data-theme="green"
--n-green-600
Orange
data-theme="orange"
--n-orange-600
Red
data-theme="red"
--n-red-600
Neutral
data-theme="neutral"
--n-gray-950
Mode behavior
Light mode uses a white canvas, gray control surfaces, and white raised surfaces. Dark mode remaps the same roles to gray-950, gray-900, and gray-800. Purple and neutral also use lighter primary actions in dark and system-dark modes to preserve contrast.
The appearance control exposes System, Light, and Dark explicitly. System follows live OS preference changes, and theme, mode, and density selections are restored independently before hydration.
Role
Token
Canvas
--n-color-surface-canvas
Control
--n-color-surface-control
Raised surface
--n-color-surface-raised
Primary action
--n-color-action-primary
Action foreground
--n-color-action-on-primary
Density
Value
Use
comfortable
Default spacing for mixed product and documentation surfaces.
compact
Remaps semantic density aliases and component tokens for dense operational interfaces without changing primitive spacing values.
