Divider
A 1px rule that separates content or sections. Colour comes from the --devider/default token, which re-themes automatically in dark mode.
Type
Horizontal spans the available width; Vertical fills the height of its row. Both are 1px.
Horizontal
Vertical
Label
Label
Label
Style
The Figma component defines Light and Heavy styles, but both currently resolve to the same --devider/default token — the distinction is reserved for future weighting.
Light
Heavy
In context
Dividers separating list rows, splitting inline items, and framing a labelled section header.
Account settings
Notifications
Privacy & security
or continue with
Token Reference
The devider spelling is an intentional carry-over from the Figma variable name.
| Token | Value | Usage |
|---|---|---|
| --devider/default | #efefef | Divider colour (light) |
| --devider/default (dark) | #484848 | Divider colour (dark theme) |
| Thickness | 1px | Horizontal height / vertical width |