Nerio uses primitive, semantic, and component tokens plus composable runtime sets so visual decisions remain portable across themes, products, and source-installed components.
Token architecture
CSS variables
Layer
Purpose
Examples
Primitive
Raw values without product meaning. Use them to build semantic tokens, not product UI directly.
Composable selectors that remap semantic and component tokens without rebuilding source.
data-themedata-modedata-density
Primitive tokens
Primitive tokens are immutable raw values. Theme, mode, and density selectors never redefine them; runtime changes remap semantic and component aliases instead.
Nerio uses a hybrid neutral foundation. Opaque grays anchor canvas, primary surfaces, text, actions, and contrast-critical roles. Cool dark alpha neutrals in light mode and white alpha neutrals in dark mode drive adaptive controls, hover and pressed states, selected surfaces, subdued borders, and grid lines. Their compositing is intentional: the same semantic layer remains legible when it is placed on white or on a muted group surface.
Color
Token
gray-0
--n-gray-0
gray-100
--n-gray-100
gray-500
--n-gray-500
gray-950
--n-gray-950
cool gray alpha 8%
--n-gray-a-8
white alpha 10%
--n-white-a-10
purple-600
--n-purple-600
blue-600
--n-blue-600
green-600
--n-green-600
orange-600
--n-orange-600
red-600
--n-red-600
Scale
Token
Default
Spacing
--n-space-4
16px on the comfortable scale
Control size
--n-size-control-md
32px default control height
Radius
--n-radius-md
16px primitive corner
Icon size
--n-icon-size-md
16px default icon size
Border width
--n-border-width-default
1px default border
Elevation
--n-shadow-sm
Restrained raised-surface shadow
Semantic tokens
Components consume semantic roles, never alpha primitives directly. Mode selectors map adaptive roles to --n-gray-a-* or --n-white-a-*, while opaque canvas, foreground, primary action, status, and chart-series roles retain predictable contrast.
Role
Token
Canvas
--n-color-surface-canvas
Default surface
--n-color-surface-default
Control
--n-color-surface-control
Control hover
--n-color-surface-control-hover
Subtle
--n-color-surface-subtle
Sunken
--n-color-surface-sunken
Raised
--n-color-surface-raised
Overlay
--n-color-surface-overlay
Primary text
--n-color-text-primary
Secondary text
--n-color-text-secondary
Subtle border
--n-color-border-subtle
Primary action
--n-color-action-primary
Role
Alias
Default
Adaptive control
--n-color-surface-control
--n-gray-a-6 / --n-white-a-8
Adaptive border
--n-color-border-default
--n-gray-a-10 / --n-white-a-10
Density spacing
--n-density-space-md
--n-space-3
Density spacing
--n-density-space-lg
--n-space-4
Density spacing
--n-density-space-xl
--n-space-5
Control radius
--n-radius-control
--n-radius-lg
Container radius
--n-radius-container
--n-radius-xl
Overlay radius
--n-radius-overlay
--n-radius-2xl
Raised elevation
--n-shadow-surface-raised
--n-shadow-sm
Floating elevation
--n-shadow-surface-floating
--n-shadow-md
Body type
--n-body-font-size
--n-font-size-md
Contrast contract
Contrast targets document the minimum intended ratio for Core roles. Customize contrast by overriding semantic color variables such as --n-color-text-primary and --n-color-action-primary; contrast targets are documentation tokens, not a runtime axis.
Tailwind CSS v4 is the Core component authoring engine. The bridge exposes stable Nerio foundation and semantic variables as utilities without copying their values into Tailwind. Component recipes may reference narrower component variables directly with static arbitrary utilities.
