Foundation reference
Visual language
Nerio is compact, soft, and neutral-first. This reference maps the approved visual direction to public tokens; component pages remain the source for individual APIs.
Surface hierarchy
White and black are the foundations. Cool alpha-neutral layers create grouping and interaction without enclosing every region in a border.
pure whitepure blackAccent and semantic color
Theme color is constrained to primary action, focus, links, progress, selection indicators, and intentional brand moments.
Typography hierarchy
Product heading
Section heading
Body text stays compact, regular, and readable at 14px.
const theme = "nerio"Geometry and spacing
--n-radius-control--n-radius-container--n-radius-overlay--n-radius-pill--n-space-1--n-space-2--n-space-3--n-space-4--n-space-6Focus and interaction
Hover and focus feedback use shared motion aliases. Link actions underline on hover and focus-visible; icon-only actions require both an accessible name and a Tooltip.
Density comparison
data-density="comfortable"32px default controldata-density="compact"28px compact controlDensity remaps semantic and component aliases only. Primitive spacing, type, radius, icon, and motion scales remain immutable.
Motion
Hover uses --n-motion-hover-duration; overlays use the shared enter and exit families and remove nonessential travel under reduced motion.