Nexus Design SystemRadius, borders & shadows
Corner radius, border width and shadow are three separate theme fields. Change corners (Radius in the theme picker), stroke (Border Width) or elevation (Shadow), and the matching examples update.
Radius
nxds has nine radius utilities. Eight follow corners. full is always 9999px.
base
sm
md
lg
xl
2xl
3xl
4xl
full
| Mode | md value (px) |
|---|---|
| square | 0 |
| subtle | 4 |
| smooth | 8 |
| round | 12 |
| extra-round | 16 |
Border widths
Each stroke mode sets three widths: thin, default and thick. The sample box after the table uses --nx-borderwidth-thick, so it changes with stroke.
| Mode | thin (px) | default (px) | thick (px) |
|---|---|---|---|
| normal | 0.5 | 1 | 2 |
| fine | 0.5 | 0.5 | 1 |
| strong | 1 | 2 | 3 |
border-width: var(--nx-borderwidth-thick)
Shadows
nxds has seven shadow levels and an inset shadow. All of them follow elevation. Light and dark mode have separate shadows, because a light-mode shadow disappears on a dark background.
2xs
xs
sm
base
lg
xl
2xl
inner