Colors
The Colors system defines the complete palette for the framework: grayscale, chromatic hues, blend pairs, and semantic roles (primary, success, error, warning). Use these tokens with bg--, text--, and other utilities. See Background and Text Color for usage examples.
Grayscale Palette
The complete range of grayscale shades available in the framework, from pure black to pure white. These tokens use the same lightness scale as chromatic and blend palettes.
Chromatic Palette
The framework offers 10 hues × 14 lightness steps (red, orange, yellow, lime, green, cyan, blue, violet, purple, pink), using the same steps as grayscale (10, 15, 20, …, 75). Select a color device (e.g. Inky Impression 7.3, Tidbyt) from the Device Preview above to see these colors in action. Use the Raw Colors / Preview Colors toggle to compare full-bright tokens vs device-representative rendering.
Semantic Colors
Semantic color roles map meaning to base hues. Use bg--primary, text--success, and similar utilities for intent-based styling. These alias underlying tokens (e.g. primary → blue) and inherit all device/bit-depth behavior. Themes can override via --color-{role} CSS variables.
| Role | Underlying Token | Use |
|---|---|---|
| primary | blue |
Main actions, accents |
| success | green |
Confirmations, positive states |
| error | red |
Errors, destructive actions |
| warning | orange |
Cautions, alerts |
Token Syntax
Apply these color tokens with utility prefixes. The Background page documents bg--{token}; the Text Color page documents text--{token}. Other utilities (border, outline, etc.) may use the same tokens where applicable.
| Utility | Example | Use |
|---|---|---|
| bg-- | bg--gray-50, bg--red-40 |
Background colors |
| text-- | text--gray-50, text--blue-60, text--success |
Text colors |
| bg-- / text-- (semantic) | bg--primary, text--error, text--success |
Semantic roles (primary, success, error, warning) |
Grayscale: black, gray-10 through gray-75, white.
Chromatic: {hue} (pure color) or {hue}-{step} (e.g. red-50, blue-40).
Blend: {colorA}-{colorB}-{step} (e.g. red-blue-50, green-yellow-25).
Semantic: primary, success, error, warning (alias base hues).
Backward Compatibility
For backward compatibility, the original shade names (gray-1 through gray-7) are still supported but deprecated. These map to equivalent extended shades:
<!-- Deprecated (but still works) -->
<div class="bg--gray-1">Gray 1</div>
<div class="bg--gray-2">Gray 2</div>
<!-- Preferred (new naming) -->
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-20">Gray 20</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 4/8/16-bit |
|---|---|---|---|
| Semantic | |||
--black
|
#000000 | — | — |
--color-error
|
var(--red) | — | — |
--color-primary
|
var(--blue) | — | — |
--color-success
|
var(--green) | — | — |
--color-warning
|
var(--orange) | — | — |
--white
|
#FFFFFF | — | — |
| Grayscale | |||
--gray-10
|
#111111 | — | — |
--gray-15
|
#222222 | — | — |
--gray-20
|
#333333 | — | — |
--gray-25
|
#444444 | — | — |
--gray-30
|
#555555 | — | — |
--gray-35
|
#666666 | — | — |
--gray-40
|
#777777 | — | — |
--gray-45
|
#888888 | — | — |
--gray-50
|
#999999 | — | — |
--gray-55
|
#AAAAAA | — | — |
--gray-60
|
#BBBBBB | — | — |
--gray-65
|
#CCCCCC | — | — |
--gray-70
|
#DDDDDD | — | — |
--gray-75
|
#EEEEEE | — | — |
| Legacy Grayscale | |||
--gray-1
|
#111111 | — | — |
--gray-2
|
#333333 | — | — |
--gray-3
|
#555555 | — | — |
--gray-4
|
#777777 | — | — |
--gray-5
|
#999999 | — | — |
--gray-6
|
#BBBBBB | — | — |
--gray-7
|
#DDDDDD | — | — |