Foundation
Radius
Radius tokens create Nerio's soft shape language while role aliases preserve semantic recognition: compact popups remain tighter, task surfaces become rounder, and Checkbox keeps its dedicated small-radius exception.
Radius scale
| Name | Token | Default | Use |
|---|---|---|---|
| None | --n-radius-none | 0 | Square edges and opt-out cases. |
| Extra small | --n-radius-xs | 4px | Checkboxes and semantic geometry exceptions. |
| Small | --n-radius-sm | 12px | Compact tags and small local details. |
| Medium | --n-radius-md | 16px | Compact popup and item geometry. |
| Large | --n-radius-lg | 20px | Control geometry. |
| Extra large | --n-radius-xl | 28px | Container geometry. |
| 2× extra large | --n-radius-2xl | 32px | Dialog, Sheet, and task-surface geometry. |
| Full | --n-radius-full | 999rem | Circular avatars, pills, progress marks, and spinners. |
Role aliases
Components consume role-based aliases so the primitive scale can change without editing component source.
| Role | Alias | Default primitive |
|---|---|---|
| Control | --n-radius-control | --n-radius-lg |
| Container | --n-radius-container | --n-radius-xl |
| Overlay | --n-radius-overlay | --n-radius-2xl |
| Pill | --n-radius-pill | --n-radius-full |
Usage
:root { --n-radius-sm: 0.75rem; --n-radius-md: 1rem; --n-radius-lg: 1.25rem; --n-radius-xl: 1.75rem; --n-radius-2xl: 2rem;}.project-card { border-radius: var(--n-radius-container);}- Use role aliases in product and component styles.
- Override primitives to change the entire scale consistently.
- Keep controls, containers, and overlays visibly related but distinct.