Color
One restrained accent, cool-grey surfaces and status ramps with identical lightness steps.
Every text colour on every surface layer, in both themes, computed at build time from the token values. fg.primary and fg.numeric meet 7:1 (AAA); fg.secondary and fg.muted meet 4.5:1 (AA). fg.disabled is omitted because disabled text is exempt from WCAG 1.4.3, and fg.inverse sits on surface.inverse only. Hover steps sit between two layers and are covered by them.
Light theme
| Foreground | surface.canvas | surface.layer-1 | surface.layer-2 | surface.layer-3 | surface.overlay |
|---|---|---|---|---|---|
| fg.primary | 18.84:1 AAA | 19.67:1 AAA | 18.84:1 AAA | 17.77:1 AAA | 19.67:1 AAA |
| fg.secondary | 9.58:1 AAA | 10.00:1 AAA | 9.58:1 AAA | 9.04:1 AAA | 10.00:1 AAA |
| fg.muted | 6.25:1 AA | 6.53:1 AA | 6.25:1 AA | 5.90:1 AA | 6.53:1 AA |
| fg.placeholder | 5.05:1 AA | 5.27:1 AA | 5.05:1 AA | 4.76:1 AA | 5.27:1 AA |
| fg.numeric | 19.59:1 AAA | 20.45:1 AAA | 19.59:1 AAA | 18.48:1 AAA | 20.45:1 AAA |
| fg.link | 7.41:1 AAA | 7.74:1 AAA | 7.41:1 AAA | 6.99:1 AA | 7.74:1 AAA |
| fg.link-hover | 9.89:1 AAA | 10.32:1 AAA | 9.89:1 AAA | 9.33:1 AAA | 10.32:1 AAA |
Dark theme
| Foreground | surface.canvas | surface.layer-1 | surface.layer-2 | surface.layer-3 | surface.overlay |
|---|---|---|---|---|---|
| fg.primary | 19.59:1 AAA | 18.84:1 AAA | 16.96:1 AAA | 15.31:1 AAA | 16.96:1 AAA |
| fg.secondary | 13.81:1 AAA | 13.28:1 AAA | 11.96:1 AAA | 10.79:1 AAA | 11.96:1 AAA |
| fg.muted | 6.58:1 AA | 6.33:1 AA | 5.70:1 AA | 5.14:1 AA | 5.70:1 AA |
| fg.placeholder | 6.58:1 AA | 6.33:1 AA | 5.70:1 AA | 5.14:1 AA | 5.70:1 AA |
| fg.numeric | 20.45:1 AAA | 19.67:1 AAA | 17.71:1 AAA | 15.99:1 AAA | 17.71:1 AAA |
| fg.link | 10.52:1 AAA | 10.11:1 AAA | 9.11:1 AAA | 8.22:1 AAA | 9.11:1 AAA |
| fg.link-hover | 14.23:1 AAA | 13.68:1 AAA | 12.32:1 AAA | 11.12:1 AAA | 12.32:1 AAA |