Color
Color helps communicate meaning and is important to our brand
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 |
| Accent text | --color-accent-text, --color-accent-text-hover, --color-accent-text-visited, --color-accent-text-on-surface |
| 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