Semantic tokens (recommended for UI)
Use theme-aware semantic tokens for application chrome (text, surfaces, borders, focus, interactive, and status roles). They are defined in the design-system global stylesheet and switch with data-sk-theme on the document root (light, dark, or system), typically set by s-theme-provider (or the docs site theme control in the main layout header). Components mounted inside a shadow root pick up dark mode automatically: data-sk-theme sets the inherited --sk-theme custom property on :root, which cascades through shadow boundaries — consumer apps don't need to forward anything to their shadow hosts.
| Category |
Examples (custom properties) |
| Text |
--color-text-primary, --color-text-secondary, --color-text-disabled, --color-text-inverse |
| Surfaces |
--color-surface-canvas, --color-surface-elevated, --color-surface-muted, --color-surface-input |
| Borders & focus |
--color-border-default, --color-border-strong, --color-focus-ring, --color-focus-ring-offset |
| Interactive |
--color-interactive-primary, --color-interactive-primary-hover, --color-interactive-secondary-fg |
| Status |
--color-status-error-fg, --color-status-error-bg, --color-status-success-bg, --color-status-info-bg, … |
| Functional / links |
--color-info, --color-error, --color-link-hover, --color-brand-orange, … |
Demo & API
Palette scales (foundational)
Fixed brand scales use the --palette-<hue>-<step> naming convention (for example --palette-gray-darkest). The legacy --color-<hue>-<step> names remain available as aliases that resolve to the same values so existing apps keep working; prefer --palette-* for new code and for chart or data-visualization literals. Palette swatches stay literal hex values and do not change when the active theme toggles—unlike semantic tokens above, which track light/dark via data-sk-theme.
Red
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Orange
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Yellow
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Green
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Blue
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Purple
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Beige
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Gray
| Color |
Custom Property |
Value (for reference only) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
White
| Color |
Custom Property |
Value (for reference only) |
|
--palette-white |
#ffffff |
Color Aliases
| Color |
Custom Property |
Alias to (palette backing in light theme) |
|
|
--palette-orange-medium |
|
|
--palette-blue-medium |
|
|
--palette-blue-dark |
|
--palette-green-medium |
|
|
--palette-yellow-darker |
|
|
--palette-red-dark |
|
|
--palette-gray-medium |
|
|
--palette-blue-dark |
|
|
--palette-blue-medium |
|
|
--palette-blue-light |
Gradients
| Gradient Name |
Custom Property |
|
--gradient-blue-dark |
|
--gradient-blue-medium |
|
--gradient-gold-medium |
|
--gradient-gold-light |
|
--gradient-purple-dark |
|
--gradient-purple-light |
|
--gradient-teal-darkest |
|
--gradient-teal-dark |
|
--gradient-teal-medium |
|
--gradient-teal-light |
|
--gradient-teal-lightest |
Guidelines
Use Custom Properties
To ensure consistent branding and meaning, you must use the Custom
Properties and not hard-coded values. If colors change, they need to change globally and this will not happen if
you have hard-coded color values.
For UI surfaces and typography, prefer semantic tokens (see above). For fixed brand palette steps, use --palette-*; legacy --color-<hue>-<step> names remain supported as aliases for the same values.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com
