Border tokens
Width
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
1px |
Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional. |
|
|
|
|
2px |
Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
|
|
|
3px |
Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it should not be applied to all 4 sides at once. |
|
Radius
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
0.0px
|
This token resets the border radius of a container back to 0 or sharp. It must be applied to all 4 corners of a container at once. |
|
|
|
|
3px
|
Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
|
|
|
64px
|
Applies a 64px border radius to at least 1 corner of a container. It should be used for elements needing a circle or pill-shaped background like Avatar, Badge, or Switch. It may also be used for Hybrid style branding. Applying to all 4 corners at once is optional. It may replace the default 3px radius when not all corners need the same value. |
|
Color
Theme Tokens
Strong
Responsive border-strong color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-border-strong-on-light on a themable container with a light color palette and --rh-color-border-strong-on-dark on a themable container with a dark color palette
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-strong-on-light, #151515), var(--rh-color-border-strong-on-dark, #ffffff))
|
Responsive |
|
|
|
|
#151515
|
Strong border color (light theme) |
|
|
|
|
#ffffff
|
Strong border color (dark theme) |
|
Subtle
Responsive border-subtle color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-subtle-on-light on a themable container with a light color palette and --rh-color-border-subtle-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-subtle-on-light, #c7c7c7), var(--rh-color-border-subtle-on-dark, #707070))
|
Responsive |
|
|
|
|
#c7c7c7
|
Subtle border color (light theme) |
|
|
|
|
#707070
|
Subtle border color (dark theme) |
|
Interactive
Responsive border-interactive color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-interactive-on-light on a themable container with a light color palette and --rh-color-border-interactive-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-interactive-on-light, #0066cc), var(--rh-color-border-interactive-on-dark, #92c5f9))
|
Responsive |
|
|
|
|
#0066cc
|
Interactive border color (light theme) |
|
|
|
|
#92c5f9
|
Interactive border color (dark theme) |
|
Destructive
Responsive border-destructive color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-destructive-on-light on a themable container with a light color palette and --rh-color-border-destructive-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-destructive-on-light, #b1380b), var(--rh-color-border-destructive-on-dark, #f0561d))
|
Responsive |
|
|
|
|
#b1380b
|
Destructive border color (light theme) |
|
|
|
|
#f0561d
|
Destructive border color (dark theme) |
|
Status
Danger
Responsive border-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-danger-on-light on a themable container with a light color palette and --rh-color-border-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-danger-on-light, #b1380b), var(--rh-color-border-status-danger-on-dark, #f0561d))
|
Responsive |
|
|
|
|
#b1380b
|
Danger border color (light theme) |
|
|
|
|
#f0561d
|
Danger border color (dark theme) |
|
Caution
Responsive border-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-caution-on-light on a themable container with a light color palette and --rh-color-border-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-caution-on-light, #ca6c0f), var(--rh-color-border-status-caution-on-dark, #f5921b))
|
Responsive |
|
|
|
|
#ca6c0f
|
Caution border color (light theme) |
|
|
|
|
#f5921b
|
Caution border color (dark theme) |
|
Warning
Responsive border-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-warning-on-light on a themable container with a light color palette and --rh-color-border-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-warning-on-light, #dca614), var(--rh-color-border-status-warning-on-dark, #ffcc17))
|
Responsive |
|
|
|
|
#dca614
|
Warning border color (light theme) |
|
|
|
|
#ffcc17
|
Warning border color (dark theme) |
|
Neutral
Responsive border-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-neutral-on-light on a themable container with a light color palette and --rh-color-border-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-neutral-on-light, #4d4d4d), var(--rh-color-border-status-neutral-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Neutral border color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral border color (dark theme) |
|
Info
Responsive border-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-info-on-light on a themable container with a light color palette and --rh-color-border-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-info-on-light, #5e40be), var(--rh-color-border-status-info-on-dark, #b6a6e9))
|
Responsive |
|
|
|
|
#5e40be
|
Info border color (light theme) |
|
|
|
|
#b6a6e9
|
Info border color (dark theme) |
|
Success
Responsive border-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-success-on-light on a themable container with a light color palette and --rh-color-border-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-success-on-light, #3d7317), var(--rh-color-border-status-success-on-dark, #87bb62))
|
Responsive |
|
|
|
|
#3d7317
|
Success border color (light theme) |
|
|
|
|
#87bb62
|
Success border color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
