Color Tokens
The color tokens used throughout the design system.
The Forge theme is built on a set of tokens that define the colors used throughout the design system. These tokens are used to define the colors of the components and the overall look and feel of the design system.
Surface
The surface colors are used to define the background colors for content areas.
| Token | On color | Preview |
|---|---|---|
--forge-theme-surface | --forge-theme-on-surface | Aa |
--forge-theme-surface-inverse | --forge-theme-on-surface-inverse | Aa |
--forge-theme-surface-container | --forge-theme-on-surface-container | Aa |
--forge-theme-surface-container-minimum | --forge-theme-on-surface-container-minimum | Aa |
--forge-theme-surface-container-low | --forge-theme-on-surface-container-low | Aa |
--forge-theme-surface-container-medium | --forge-theme-on-surface-container-medium | Aa |
--forge-theme-surface-container-high | --forge-theme-on-surface-container-high | Aa |
--forge-theme-surface-dim | ||
--forge-theme-surface-bright | ||
--forge-theme-surface-bright-shadow |
Brand
The brand colors are used to define the primary colors of the design system.
| Token | On color | Preview |
|---|---|---|
--forge-theme-brand | --forge-theme-on-brand | Aa |
Primary
Primary colors are the main colors used throughout the design system.
| Token | On color | Preview |
|---|---|---|
--forge-theme-primary | --forge-theme-on-primary | Aa |
--forge-theme-primary-container-minimum | --forge-theme-on-primary-container-minimum | Aa |
--forge-theme-primary-container-low | --forge-theme-on-primary-container-low | Aa |
--forge-theme-primary-container | --forge-theme-on-primary-container | Aa |
--forge-theme-primary-container-high | --forge-theme-on-primary-container-high | Aa |
Secondary
Secondary colors complement the primary colors and are used to provide additional visual interest.
| Token | On color | Preview |
|---|---|---|
--forge-theme-secondary | --forge-theme-on-secondary | Aa |
--forge-theme-secondary-container-minimum | --forge-theme-on-secondary-container-minimum | Aa |
--forge-theme-secondary-container-low | --forge-theme-on-secondary-container-low | Aa |
--forge-theme-secondary-container | --forge-theme-on-secondary-container | Aa |
--forge-theme-secondary-container-high | --forge-theme-on-secondary-container-high | Aa |
Tertiary
Tertiary colors are used to provide additional visual interest and are typically used for less prominent elements, but still complement the primary color.
| Token | On color | Preview |
|---|---|---|
--forge-theme-tertiary | --forge-theme-on-tertiary | Aa |
--forge-theme-tertiary-container-minimum | --forge-theme-on-tertiary-container-minimum | Aa |
--forge-theme-tertiary-container-low | --forge-theme-on-tertiary-container-low | Aa |
--forge-theme-tertiary-container | --forge-theme-on-tertiary-container | Aa |
--forge-theme-tertiary-container-high | --forge-theme-on-tertiary-container-high | Aa |
Success
Success colors are used to indicate successful actions or states.
| Token | On color | Preview |
|---|---|---|
--forge-theme-success | --forge-theme-on-success | Aa |
--forge-theme-success-container-minimum | --forge-theme-on-success-container-minimum | Aa |
--forge-theme-success-container-low | --forge-theme-on-success-container-low | Aa |
--forge-theme-success-container | --forge-theme-on-success-container | Aa |
--forge-theme-success-container-high | --forge-theme-on-success-container-high | Aa |
Error
Error colors are used to indicate errors or failed actions or states.
| Token | On color | Preview |
|---|---|---|
--forge-theme-error | --forge-theme-on-error | Aa |
--forge-theme-error-container-minimum | --forge-theme-on-error-container-minimum | Aa |
--forge-theme-error-container-low | --forge-theme-on-error-container-low | Aa |
--forge-theme-error-container | --forge-theme-on-error-container | Aa |
--forge-theme-error-container-high | --forge-theme-on-error-container-high | Aa |
Warning
Warning colors are used to indicate warnings or cautionary actions or states.
| Token | On color | Preview |
|---|---|---|
--forge-theme-warning | --forge-theme-on-warning | Aa |
--forge-theme-warning-container-minimum | --forge-theme-on-warning-container-minimum | Aa |
--forge-theme-warning-container-low | --forge-theme-on-warning-container-low | Aa |
--forge-theme-warning-container | --forge-theme-on-warning-container | Aa |
--forge-theme-warning-container-high | --forge-theme-on-warning-container-high | Aa |
Info
Info colors are used to indicate informational actions or states.
| Token | On color | Preview |
|---|---|---|
--forge-theme-info | --forge-theme-on-info | Aa |
--forge-theme-info-container-minimum | --forge-theme-on-info-container-minimum | Aa |
--forge-theme-info-container-low | --forge-theme-on-info-container-low | Aa |
--forge-theme-info-container | --forge-theme-on-info-container | Aa |
--forge-theme-info-container-high | --forge-theme-on-info-container-high | Aa |
Text
The text colors are used to define the colors of text elements with varying emphasis levels.
| Token | On color | Preview |
|---|---|---|
--forge-theme-text-high | ||
--forge-theme-text-high-inverse | ||
--forge-theme-text-medium | ||
--forge-theme-text-medium-inverse | ||
--forge-theme-text-low | ||
--forge-theme-text-low-inverse | ||
--forge-theme-text-lowest | ||
--forge-theme-text-lowest-inverse |
Outline
The outline colors are used to define the colors of outline or border of elements with varying emphasis levels.
| Token | On color | Preview |
|---|---|---|
--forge-theme-outline-high | ||
--forge-theme-outline-medium | ||
--forge-theme-outline-low | ||
--forge-theme-outline |
Emphasis
The emphasis tokens define the opacity levels applied to the on-surface color to create varying levels of visual emphasis. The preview shows the on-surface color at each level.
| Token | Value | Description | Preview |
|---|---|---|---|
--forge-color-emphasis-highest | 0.87 | The highest emphasis opacity, for content that should be nearly fully opaque. | |
--forge-color-emphasis-inverse | 0.8 | The emphasis opacity for content on inverse or dark backgrounds. | |
--forge-color-emphasis-higher | 0.7 | A higher emphasis opacity, for content slightly softened from full emphasis. | |
--forge-color-emphasis-high | 0.65 | A high emphasis opacity, for content that is softened but still prominent, such as pressed states. | |
--forge-color-emphasis-medium-high | 0.6 | An opacity between medium and high emphasis. | |
--forge-color-emphasis-medium | 0.54 | A medium emphasis opacity, for muted content, scrims, and dimmed elements. | |
--forge-color-emphasis-medium-low | 0.38 | A medium-low emphasis opacity. Use it for disabled elements. | |
--forge-color-emphasis-low | 0.24 | A low emphasis opacity, for faint content. | |
--forge-color-emphasis-lower | 0.12 | A lower emphasis opacity, for very faint content such as disabled tracks. | |
--forge-color-emphasis-lowest | 0.08 | The lowest practical emphasis opacity. Use it for subtle tints such as selected-state overlays. | |
--forge-color-emphasis-minimum | 0.04 | The minimum emphasis opacity, for the faintest overlays. |