Global color tokens
On this page
On this page
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ffffff
|
Lightest surface (light theme) or primary text (dark theme) |
|
|
|
|
#000000
|
Brand black (avoid using) |
|
Accent
Theme Tokens
Base
Responsive accent-base color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-accent-base-on-light on a themable container with a light color palette and --rh-color-accent-base-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#0066cc
|
Inline link (light theme) |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
Brand
Responsive accent-brand color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-accent-brand-on-light on a themable container with a light color palette and --rh-color-accent-brand-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ee0000
|
Brand red (light theme) |
|
|
|
|
#ee0000
|
Brand red (dark theme) |
|
Brand
Theme Tokens
Red
Responsive brand-red color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-brand-red-on-light on a themable container with a light color palette and --rh-color-brand-red-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ee0000
|
Brand red on light background |
|
|
|
|
#ee0000
|
Brand red on dark background |
|
|
|
|
#fbc5c5
|
Lightest brand red |
|
|
|
|
#f9a8a8
|
lighter brand red |
|
|
|
|
#f56e6e
|
Light brand red |
|
|
|
|
#a60000
|
Dark brand red/Brand red hover |
|
|
|
|
#5f0000
|
Darker brand red |
|
|
|
|
#5f0000
|
Darkest brand red |
|
Green
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#e9f7df
|
Alert - success background |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#d1f1bb
|
Label - Filled (Green) border color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#afdc8f
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#87bb62
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#63993d
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#3d7317
|
Alert - Success accent |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#204d00
|
Alert - Success title text |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Orange
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#ffe8cc
|
Label - Filled (Orange) background color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#fccb8f
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f8ae54
|
Label - Filled (Orange) border color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f5921b
|
Label - Filled (Orange) accent color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#ca6c0f
|
Label - Filled (Orange) accent color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#9e4a06
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#732e00
|
Label - Filled (Orange) text color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Canvas
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ffffff
|
Primary canvas (light theme) |
|
|
|
|
#151515
|
Primary canvas (dark theme) |
|
Blue
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#e0f0ff
|
Alert - Info background |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#b9dafc
|
Label - Filled (Blue) border color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#92c5f9
|
Inline link (dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#4394e5
|
Alert - Info accent |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#0066cc
|
Label - Filled (Blue) accent color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#004d99
|
Inline link hover (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#003366
|
Alert - Info title text |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Gray
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#f2f2f2
|
Tertiary surface (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#e0e0e0
|
Secondary surface (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#c7c7c7
|
Subtle borders (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#a3a3a3
|
Subtle icon (hover state) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#707070
|
Subtle icon |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#4d4d4d
|
Secondary text (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#383838
|
Tertiary surface (dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#292929
|
Alternative tertiary surface (not available for use with context provider) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#1f1f1f
|
Secondary surface (dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#151515
|
Primary surface (dark theme) or primary text (light theme) |
|
||||||||||||||||
Purple
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#ece6ff
|
Label - Filled (Purple) background color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#d0c5f4
|
Inline link visited hover (dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#b6a6e9
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#876fd4
|
Inline link visited (dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#5e40be
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#3d2785
|
Inline link visited (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#21134d
|
Inline link visited hover (light theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Red orange
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#ffe3d9
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#fbbea8
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f89b78
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f4784a
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f0561d
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#b1380b
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#731f00
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
Red
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#fce3e3
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#fbc5c5
|
Lightest brand red |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f9a8a8
|
Lighter brand red |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#f56e6e
|
Light brand red |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#ee0000
|
Brand red (light and dark theme) |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#a60000
|
Dark brand red |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#5f0000
|
Darker brand red |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Teal
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#daf2f2
|
Alert - Default background |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#b9e5e5
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#9ad8d8
|
Label (Cyan) border color |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#63bdbd
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#37a3a3
|
Alert - Default accent |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#147878
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#004d4d
|
Alert - Default title text |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Yellow
| Ex. | Token name | Value | Use case | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
#fff4cc
|
Alert - Warning background |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#ffe072
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#ffcc17
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#dca614
|
Alert - Warning accent |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#b98412
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#96640f
|
|
|||||||||||||||||
Color function variants
|
|||||||||||||||||||
|
|
#73480b
|
Alert - Warning title text |
|
||||||||||||||||
Color function variants
|
|||||||||||||||||||
Interactive
Theme Tokens
Primary
Default
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#0066cc
|
Primary interactive - default (Light theme) |
|
|
|
|
#92c5f9
|
Primary interactive - default (Dark theme) |
|
Hover
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#003366
|
Primary interactive - hover (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - hover (Dark theme) |
|
Active
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#003366
|
Primary interactive - active (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - active (Dark theme) |
|
Focus
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#003366
|
Primary interactive - focus (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - focus (Dark theme) |
|
Visited
Default
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-visited-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#5e40be
|
Primary interactive visited - default (Light theme) |
|
|
|
|
#b6a6e9
|
Primary interactive visited - default (Dark theme) |
|
Hover
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#21134d
|
Primary interactive visited - hover (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - hover (Dark theme) |
|
Active
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#21134d
|
Primary interactive visited - active (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - active (Dark theme) |
|
Focus
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#21134d
|
Primary interactive visited - focus (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - focus (Dark theme) |
|
Secondary
Default
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive - default (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - default (Dark theme) |
|
Hover
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive - hover (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - hover (Dark theme) |
|
Active
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive - active (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - active (Dark theme) |
|
Focus
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive - focus (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - focus (Dark theme) |
|
Visited
Default
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-visited-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive visited - default (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - default (Dark theme) |
|
Hover
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive visited - hover (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - hover (Dark theme) |
|
Active
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive visited - active (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - active (Dark theme) |
|
Focus
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Secondary interactive visited - focus (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - focus (Dark theme) |
|
Blue
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#b9dafc
|
Inline link hover (dark theme) |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
|
|
|
#0066cc
|
Inline link (light theme) |
|
|
|
|
#003366
|
Inline link hover (light theme) |
|
Purple
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ece6ff
|
Inline link visited hover (dark theme) |
|
|
|
|
#b6a6e9
|
Inline link visited (dark theme) |
|
|
|
|
#5e40be
|
Inline link visited (light theme) |
|
|
|
|
#ece6ff
|
Inline link visited hover (light theme) |
|
Status
Theme Tokens
Danger
Represents an action which could have destructive consequences, e.g. deleting a file.
Responsive status-danger color value. Typically read-only – use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-danger-on-light on a themable container with a light color palette and --rh-color-status-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#b1380b
|
Danger status color (light theme) |
|
|
|
|
#f0561d
|
Danger status color (dark theme) |
|
Caution
Represents an action or notice which should immediately draw the attention
Responsive status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-caution-on-light on a themable container with a light color palette and --rh-color-status-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ca6c0f
|
Caution status color (light theme) |
|
|
|
|
#f5921b
|
Caution status color (dark theme) |
|
Warning
Represents an action or notice which elicits a warning of potential danger
Responsive status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-warning-on-light on a themable container with a light color palette and --rh-color-status-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#dca614
|
Warning status color (light theme) |
|
|
|
|
#ffcc17
|
Warning status color (dark theme) |
|
Neutral
Represents an action or notice which has neither positive nor negative connotations, is neither explicitly constructive or explicitly destructive.
Responsive status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-neutral-on-light on a themable container with a light color palette and --rh-color-status-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Neutral accent color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral accent color (dark theme) |
|
Note
Represents an action or notice which is informational, or a tip on how best to complete a task.
Responsive status-note color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-note-on-light on a themable container with a light color palette and --rh-color-status-note-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#5e40be
|
Note/tip status color (light theme) |
|
|
|
|
#b6a6e9
|
Note/tip status color (dark theme) |
|
Info
Represents an action or notice which is informational, or a tip on how best to complete a task.
Responsive status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-info-on-light on a themable container with a light color palette and --rh-color-status-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#5e40be
|
Info status color (light theme) |
|
|
|
|
#b6a6e9
|
Info status color (dark theme) |
|
Success
Represents a notice of success.
Responsive status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-success-on-light on a themable container with a light color palette and --rh-color-status-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#3d7317
|
Success status color (light theme) |
|
|
|
|
#87bb62
|
Success status color (dark theme) |
|
Surface
Responsive surface color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to the surface color corresponding to the surface' color palette.
Theme Tokens
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ffffff
|
Primary surface (light theme) |
|
|
|
|
#f2f2f2
|
Tertiary surface (light theme) |
|
|
|
|
#e0e0e0
|
Secondary surface (light theme) |
|
|
|
|
#383838
|
Tertiary surface (dark theme) |
|
|
|
|
#292929
|
Alternative tertiary surface (not available for use with context provider) |
|
|
|
|
#1f1f1f
|
Secondary surface (dark theme) |
|
|
|
|
#151515
|
Primary surface (dark theme) |
|
Status
Danger
Responsive surface-status-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-danger-on-light on a themable container with a light color palette and --rh-color-surface-status-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ffe3d9
|
Danger status surface color (light theme) |
|
|
|
|
#ffe3d9
|
Danger status surface color (dark theme) |
|
Caution
Responsive surface-status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-caution-on-light on a themable container with a light color palette and --rh-color-surface-status-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ffe8cc
|
Caution status surface color (light theme) |
|
|
|
|
#ffe8cc
|
Caution status surface color (dark theme) |
|
Warning
Responsive surface-status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-warning-on-light on a themable container with a light color palette and --rh-color-surface-status-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#fff4cc
|
Warning status surface color (light theme) |
|
|
|
|
#73480b
|
Warning status surface color (dark theme) |
|
Default
Responsive surface-status-default color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-default-on-light on a themable container with a light color palette and --rh-color-surface-status-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#f2f2f2
|
Default status surface color (light theme) |
|
|
|
|
#f2f2f2
|
Default status surface color (dark theme) |
|
Neutral
Responsive surface-status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-neutral-on-light on a themable container with a light color palette and --rh-color-surface-status-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#f2f2f2
|
Neutral status surface color (light theme) |
|
|
|
|
#f2f2f2
|
Neutral status surface color (dark theme) |
|
Info
Responsive surface-status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-info-on-light on a themable container with a light color palette and --rh-color-surface-status-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ece6ff
|
Info status surface color (light theme) |
|
|
|
|
#ece6ff
|
Info status surface color (dark theme) |
|
Success
Responsive surface-status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-success-on-light on a themable container with a light color palette and --rh-color-surface-status-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#e9f7df
|
Success status surface color (light theme) |
|
|
|
|
#e9f7df
|
Success status surface 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.
