Radius, borders & shadows
Three independent appearance axes, each a runtime mode swapped through the theme picker (bottom-right). Corner radius, border width, and elevation move separately — set the Radius, Border, and Shadow controls and watch each specimen below re-render on its own axis.
Radius
Nine radius utilities. Eight react to the active Radius mode; full stays pinned at 9999px. Swap the mode and the rest re-round.
| Mode | md value (px) |
|---|---|
| square | 0 |
| subtle | 4 |
| smooth | 8 |
| round | 12 |
| extra-round | 16 |
Border widths
The picker offers three distinct border-width designs. The box below sets its width from the runtime --nx-borderwidth-thick var, so it thickens or thins as you swap the Border control.
| Mode | thin (px) | default (px) | thick (px) |
|---|---|---|---|
| normal | 0.5 | 1 | 2 |
| fine | 0.5 | 0.5 | 1 |
| strong | 1 | 2 | 3 |
Shadows
Seven elevation tiers plus an inset shadow, each reacting to the active Shadow mode. Shadows are theme-split — tuned per light and dark, since a drop-shadow that defines a card edge in light vanishes against a near-black dark canvas.