Design tokens
Every value is a CSS custom property --astl-<name>. The player and the authoring kit carry them inside their shadow roots; override any of them on the element itself to brand it. How: Looks.
Generated from packages/tokens/src/tokens.ts. The contrast ratios are computed here with the WCAG 2 formula; the token tests enforce the same minimums.
Type, space, radii, widths and durations. The same in every theme.
| Token | Value |
|---|---|
--astl-font-body |
system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif |
--astl-font-display |
system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif |
--astl-font-mono |
ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace |
--astl-size-content |
1.1875rem |
--astl-size-ui |
1rem |
--astl-size-small |
0.875rem |
--astl-line-height-content |
1.6 |
--astl-space-1 |
0.25rem |
--astl-space-2 |
0.5rem |
--astl-space-3 |
0.75rem |
--astl-space-4 |
1rem |
--astl-space-5 |
1.5rem |
--astl-space-6 |
2rem |
--astl-space-7 |
3rem |
--astl-space-8 |
4rem |
--astl-radius-s |
4px |
--astl-radius-m |
8px |
--astl-radius-l |
12px |
--astl-radius-pill |
999px |
--astl-outline-width |
2px |
--astl-focus-width |
3px |
--astl-focus-offset |
2px |
--astl-target-min |
44px |
--astl-duration-fast |
120ms |
--astl-duration-normal |
200ms |
--astl-separator-display |
none |
Under prefers-reduced-motion: reduce, both durations are 0ms.
Colours
Section titled “Colours”Themes: light (Light), dark (Dark), hc (High contrast). Pick one with the theme attribute of <astl-player> (auto follows the system: light or dark).
| Token | Light | Dark | High contrast |
|---|---|---|---|
--astl-canvas |
#f3f4f6 |
#0f1114 |
#ffffff |
--astl-surface |
#ffffff |
#1a1d21 |
#ffffff |
--astl-surface-raised |
#ffffff |
#23272c |
#ffffff |
--astl-ink |
#16191d |
#eceef1 |
#000000 |
--astl-ink-muted |
#4f5763 |
#aab1bc |
#2b2b2b |
--astl-line |
#d3d7de |
#3a3f47 |
#000000 |
--astl-outline |
#6b7380 |
#8a929e |
#000000 |
--astl-accent |
#1d55c9 |
#8bb3ff |
#000000 |
--astl-on-accent |
#ffffff |
#0a1530 |
#ffffff |
--astl-accent-soft |
#e7eefb |
#1d2a45 |
#ffffff |
--astl-focus |
#1d4fbf |
#9fc0ff |
#000000 |
--astl-success |
#1b7337 |
#6dcf8d |
#005a1e |
--astl-success-soft |
#e5f3e9 |
#14301f |
#ffffff |
--astl-on-success |
#ffffff |
#062010 |
#ffffff |
--astl-danger |
#b3261e |
#ff8a80 |
#8f0000 |
--astl-danger-soft |
#fcebea |
#3d1715 |
#ffffff |
--astl-warning |
#8a4f00 |
#f0bd62 |
#5a3600 |
--astl-warning-soft |
#fcf1df |
#3a2a0d |
#ffffff |
--astl-selected |
#5233b8 |
#b9a6ff |
#000000 |
--astl-selected-soft |
#efebfb |
#2a2448 |
#ffffff |
--astl-palette-1 |
#066086 |
#59c7fe |
#035678 |
--astl-palette-1-soft |
#e5f3fe |
#152c3a |
#ffffff |
--astl-palette-2 |
#7d5036 |
#f9914d |
#884501 |
--astl-palette-2-soft |
#ffeee4 |
#37261c |
#ffffff |
--astl-palette-3 |
#6d377e |
#d08edc |
#663575 |
--astl-palette-3-soft |
#f8edfb |
#332635 |
#ffffff |
--astl-palette-4 |
#7c6301 |
#ffe490 |
#6b5500 |
--astl-palette-4-soft |
#f8f0e1 |
#2f2a19 |
#ffffff |
--astl-palette-5 |
#016f6f |
#10c7c8 |
#045455 |
--astl-palette-5-soft |
#def5f5 |
#0f2f2f |
#ffffff |
--astl-palette-6 |
#603211 |
#bd8c68 |
#4e2104 |
--astl-palette-6-soft |
#ffede4 |
#37271b |
#ffffff |
--astl-palette-7 |
#9a2b64 |
#e27eaa |
#9a2562 |
--astl-palette-7-soft |
#ffecf3 |
#39242d |
#ffffff |
--astl-palette-8 |
#4b4f00 |
#bdc16c |
#3d4100 |
--astl-palette-8-soft |
#f3f1e2 |
#2b2b19 |
#ffffff |
Under forced-colors: active, system colours replace them:
| Tokens | Forced colour |
|---|---|
--astl-canvas, --astl-surface, --astl-surface-raised, --astl-accent-soft, --astl-success-soft, --astl-on-success, --astl-danger-soft, --astl-warning-soft, --astl-selected-soft, --astl-palette-1-soft, --astl-palette-2-soft, --astl-palette-3-soft, --astl-palette-4-soft, --astl-palette-5-soft, --astl-palette-6-soft, --astl-palette-7-soft, --astl-palette-8-soft |
Canvas |
--astl-ink, --astl-ink-muted, --astl-success, --astl-danger, --astl-warning, --astl-palette-1, --astl-palette-2, --astl-palette-3, --astl-palette-4, --astl-palette-5, --astl-palette-6, --astl-palette-7, --astl-palette-8 |
CanvasText |
--astl-line |
GrayText |
--astl-outline |
ButtonText |
--astl-accent, --astl-focus, --astl-selected |
Highlight |
--astl-on-accent |
HighlightText |
Theme cues
Section titled “Theme cues”Non-colour values that change with the theme: high contrast marks selected items with a bar and bold text, so selection never depends on colour alone.
| Token | Light | Dark | High contrast |
|---|---|---|---|
--astl-selected-bar |
0px |
0px |
6px |
--astl-selected-weight |
normal |
normal |
700 |
Contrast
Section titled “Contrast”Text on its backgrounds: at least 4.5:1, and 7:1 in high contrast. Pairs are written without the --astl- prefix.
| Text on background | Light | Dark | High contrast |
|---|---|---|---|
ink on canvas |
16.02:1 | 16.27:1 | 21.00:1 |
ink-muted on canvas |
6.64:1 | 8.76:1 | 14.16:1 |
accent on canvas |
5.97:1 | 9.00:1 | 21.00:1 |
success on canvas |
5.37:1 | 9.87:1 | 8.46:1 |
danger on canvas |
5.94:1 | 8.28:1 | 9.69:1 |
warning on canvas |
5.96:1 | 10.95:1 | 10.70:1 |
selected on canvas |
7.56:1 | 8.97:1 | 21.00:1 |
ink on surface |
17.63:1 | 14.55:1 | 21.00:1 |
ink-muted on surface |
7.30:1 | 7.83:1 | 14.16:1 |
accent on surface |
6.57:1 | 8.05:1 | 21.00:1 |
success on surface |
5.91:1 | 8.83:1 | 8.46:1 |
danger on surface |
6.54:1 | 7.41:1 | 9.69:1 |
warning on surface |
6.56:1 | 9.79:1 | 10.70:1 |
selected on surface |
8.32:1 | 8.02:1 | 21.00:1 |
ink on surface-raised |
17.63:1 | 12.92:1 | 21.00:1 |
ink-muted on surface-raised |
7.30:1 | 6.96:1 | 14.16:1 |
accent on surface-raised |
6.57:1 | 7.15:1 | 21.00:1 |
success on surface-raised |
5.91:1 | 7.84:1 | 8.46:1 |
danger on surface-raised |
6.54:1 | 6.58:1 | 9.69:1 |
warning on surface-raised |
6.56:1 | 8.70:1 | 10.70:1 |
selected on surface-raised |
8.32:1 | 7.13:1 | 21.00:1 |
ink on accent-soft |
15.13:1 | 12.30:1 | 21.00:1 |
ink-muted on accent-soft |
6.27:1 | 6.62:1 | 14.16:1 |
ink on success-soft |
15.39:1 | 12.27:1 | 21.00:1 |
ink-muted on success-soft |
6.37:1 | 6.60:1 | 14.16:1 |
ink on danger-soft |
15.29:1 | 13.57:1 | 21.00:1 |
ink-muted on danger-soft |
6.33:1 | 7.30:1 | 14.16:1 |
ink on warning-soft |
15.78:1 | 11.91:1 | 21.00:1 |
ink-muted on warning-soft |
6.53:1 | 6.41:1 | 14.16:1 |
ink on selected-soft |
15.07:1 | 12.51:1 | 21.00:1 |
ink-muted on selected-soft |
6.24:1 | 6.73:1 | 14.16:1 |
on-accent on accent |
6.57:1 | 8.59:1 | 21.00:1 |
on-success on success |
5.91:1 | 8.97:1 | 8.46:1 |
accent on accent-soft |
5.64:1 | 6.80:1 | 21.00:1 |
success on success-soft |
5.16:1 | 7.44:1 | 8.46:1 |
danger on danger-soft |
5.67:1 | 6.91:1 | 9.69:1 |
warning on warning-soft |
5.87:1 | 8.02:1 | 10.70:1 |
selected on selected-soft |
7.11:1 | 6.90:1 | 21.00:1 |
palette-1 on canvas |
6.31:1 | 9.93:1 | 8.06:1 |
palette-1 on surface |
6.94:1 | 8.88:1 | 8.06:1 |
palette-1 on surface-raised |
6.94:1 | 7.89:1 | 8.06:1 |
ink on palette-1-soft |
15.60:1 | 12.43:1 | 21.00:1 |
ink-muted on palette-1-soft |
6.46:1 | 6.69:1 | 14.16:1 |
palette-1 on palette-1-soft |
6.14:1 | 7.59:1 | 8.06:1 |
palette-2 on canvas |
6.21:1 | 8.27:1 | 7.25:1 |
palette-2 on surface |
6.83:1 | 7.40:1 | 7.25:1 |
palette-2 on surface-raised |
6.83:1 | 6.57:1 | 7.25:1 |
ink on palette-2-soft |
15.62:1 | 12.40:1 | 21.00:1 |
ink-muted on palette-2-soft |
6.47:1 | 6.68:1 | 14.16:1 |
palette-2 on palette-2-soft |
6.05:1 | 6.31:1 | 7.25:1 |
palette-3 on canvas |
7.64:1 | 7.73:1 | 9.01:1 |
palette-3 on surface |
8.41:1 | 6.91:1 | 9.01:1 |
palette-3 on surface-raised |
8.41:1 | 6.14:1 | 9.01:1 |
ink on palette-3-soft |
15.53:1 | 12.30:1 | 21.00:1 |
ink-muted on palette-3-soft |
6.43:1 | 6.62:1 | 14.16:1 |
palette-3 on palette-3-soft |
7.41:1 | 5.84:1 | 9.01:1 |
palette-4 on canvas |
5.24:1 | 15.08:1 | 7.18:1 |
palette-4 on surface |
5.77:1 | 13.49:1 | 7.18:1 |
palette-4 on surface-raised |
5.77:1 | 11.98:1 | 7.18:1 |
ink on palette-4-soft |
15.57:1 | 12.32:1 | 21.00:1 |
ink-muted on palette-4-soft |
6.45:1 | 6.63:1 | 14.16:1 |
palette-4 on palette-4-soft |
5.09:1 | 11.43:1 | 7.18:1 |
palette-5 on canvas |
5.44:1 | 9.03:1 | 8.73:1 |
palette-5 on surface |
5.99:1 | 8.07:1 | 8.73:1 |
palette-5 on surface-raised |
5.99:1 | 7.17:1 | 8.73:1 |
ink on palette-5-soft |
15.52:1 | 12.31:1 | 21.00:1 |
ink-muted on palette-5-soft |
6.43:1 | 6.62:1 | 14.16:1 |
palette-5 on palette-5-soft |
5.27:1 | 6.83:1 | 8.73:1 |
palette-6 on canvas |
9.73:1 | 6.41:1 | 13.61:1 |
palette-6 on surface |
10.71:1 | 5.73:1 | 13.61:1 |
palette-6 on surface-raised |
10.71:1 | 5.09:1 | 13.61:1 |
ink on palette-6-soft |
15.52:1 | 12.30:1 | 21.00:1 |
ink-muted on palette-6-soft |
6.43:1 | 6.62:1 | 14.16:1 |
palette-6 on palette-6-soft |
9.42:1 | 4.85:1 | 13.61:1 |
palette-7 on canvas |
6.57:1 | 7.02:1 | 7.46:1 |
palette-7 on surface |
7.23:1 | 6.28:1 | 7.46:1 |
palette-7 on surface-raised |
7.23:1 | 5.58:1 | 7.46:1 |
ink on palette-7-soft |
15.57:1 | 12.34:1 | 21.00:1 |
ink-muted on palette-7-soft |
6.45:1 | 6.64:1 | 14.16:1 |
palette-7 on palette-7-soft |
6.39:1 | 5.33:1 | 7.46:1 |
palette-8 on canvas |
7.89:1 | 9.91:1 | 10.74:1 |
palette-8 on surface |
8.69:1 | 8.87:1 | 10.74:1 |
palette-8 on surface-raised |
8.69:1 | 7.87:1 | 10.74:1 |
ink on palette-8-soft |
15.53:1 | 12.35:1 | 21.00:1 |
ink-muted on palette-8-soft |
6.43:1 | 6.65:1 | 14.16:1 |
palette-8 on palette-8-soft |
7.65:1 | 7.53:1 | 10.74:1 |
Control borders, focus rings and verdict borders on backgrounds: at least 3:1.
| Colour on background | Light | Dark | High contrast |
|---|---|---|---|
outline on canvas |
4.35:1 | 6.02:1 | 21.00:1 |
focus on canvas |
6.53:1 | 10.32:1 | 21.00:1 |
accent on canvas |
5.97:1 | 9.00:1 | 21.00:1 |
success on canvas |
5.37:1 | 9.87:1 | 8.46:1 |
danger on canvas |
5.94:1 | 8.28:1 | 9.69:1 |
warning on canvas |
5.96:1 | 10.95:1 | 10.70:1 |
selected on canvas |
7.56:1 | 8.97:1 | 21.00:1 |
outline on surface |
4.78:1 | 5.38:1 | 21.00:1 |
focus on surface |
7.18:1 | 9.23:1 | 21.00:1 |
accent on surface |
6.57:1 | 8.05:1 | 21.00:1 |
success on surface |
5.91:1 | 8.83:1 | 8.46:1 |
danger on surface |
6.54:1 | 7.41:1 | 9.69:1 |
warning on surface |
6.56:1 | 9.79:1 | 10.70:1 |
selected on surface |
8.32:1 | 8.02:1 | 21.00:1 |
outline on surface-raised |
4.78:1 | 4.78:1 | 21.00:1 |
focus on surface-raised |
7.18:1 | 8.20:1 | 21.00:1 |
accent on surface-raised |
6.57:1 | 7.15:1 | 21.00:1 |
success on surface-raised |
5.91:1 | 7.84:1 | 8.46:1 |
danger on surface-raised |
6.54:1 | 6.58:1 | 9.69:1 |
warning on surface-raised |
6.56:1 | 8.70:1 | 10.70:1 |
selected on surface-raised |
8.32:1 | 7.13:1 | 21.00:1 |