Tokeny
Tokeny sjednocují barvy, typografii, stíny a další vizuální vlastnosti napříč aplikací. Každý token je dvojice klíč–hodnota: pokud obsahuje přímou hodnotu (např. konkrétní barvu nebo velikost), jde o globální token; pokud odkazuje na jiný token a nese spíše význam než konkrétní číslo, jde o sémantický token.
Kdy použít
Section titled “Kdy použít”- Potřebujete konzistentně řídit barvy, typografii a spacing napříč aplikací.
- Chcete bezpečně měnit vzhled bez zásahů do komponent.
- Potřebujete odlišit business význam (např.
status-error) od technické hodnoty barvy.
Kdy nepoužít
Section titled “Kdy nepoužít”- Nepoužívejte přímo raw hodnoty (
#RRGGBB,12px) přímo v komponentách. - Nepřeskakujte vrstvy tokenů jen kvůli “rychlé opravě”.
Globální
Section titled “Globální”Typicky jde o barvu, radius, velikost textu, tloušťku borderu nebo stín. V komponentách nepoužívejte surové hodnoty, ale vždy globální token.
Reference dávají flexibilitu při změnách. Pokud upravíme hodnotu yellow-50, změna se propíše všude, kde se token používá.
Sémantické
Section titled “Sémantické”Sémantické tokeny řeší význam, ne konkrétní hodnotu. Díky tomu lze bez přepisování komponent promítat změny všech parametrů definovaných v seedu (brand barvy, status barvy, kontrast, neutrální povrchy, typografie i škála písma) napříč celým rozhraním.
Každá aplikace pak může mít nejen jiné barevné schéma, ale i odlišný typografický charakter a úroveň kontrastu. Díky tokenům a Motivu se tyto změny propíší konzistentně a bezpečně.
Ve Spectru se často používá více vrstev sémantických tokenů. Díky tomu mají tokeny jasné názvy a komponenty zůstávají čitelné.
Kompletní seznam
Section titled “Kompletní seznam”Version-------Spectro: 1.2TEAF: 24.01
Selected options----------------BrandPrimary: AmberSecondary: Pink
Neutral Surfaces ChromaIntensity: IIBased on: Amber
ContrastLevel: High (AA)Palette
| Token | Oklch | Hex | |
|---|---|---|---|
red-10 | .95 .04 28 | ffe5e0 | |
red-20 | .89 .1 28 | ffc2b6 | |
red-30 | .84 .1 28 | ffb2a6 | |
red-40 | .8 .14 28 | ff998a | |
red-50 | .52 .2 28 | c21919 | |
red-60 | .51 .22 28 | c50000 | |
red-70 | .54 .2 28 | c92420 | |
red-80 | .48 .14 28 | 9d352d | |
red-90 | .4 .11 28 | 782a24 | |
red-100 | .3 .07 28 | 4b1e19 | |
pink-10 | .95 .04 0 | ffe4ed | |
pink-20 | .89 .1 0 | ffbfd8 | |
pink-30 | .84 .1 0 | ffafc8 | |
pink-40 | .8 .14 0 | ff95ba | |
pink-50 | .82 .2 0 | ff84bf | |
pink-60 | .81 .22 0 | ff78bb | |
pink-70 | .54 .2 0 | c2206a | |
pink-80 | .48 .14 0 | 99335a | |
pink-90 | .4 .11 0 | 742945 | |
pink-100 | .3 .07 0 | 491d2c | |
fuchsia-10 | .95 .04 325 | fde6fe | |
fuchsia-20 | .89 .1 325 | fdc4ff | |
fuchsia-30 | .84 .1 325 | ecb4ef | |
fuchsia-40 | .8 .14 325 | eb9def | |
fuchsia-50 | .79 .18 325 | f38ef9 | |
fuchsia-60 | .78 .2 325 | f584fd | |
fuchsia-70 | .54 .2 325 | a536ad | |
fuchsia-80 | .48 .14 325 | 833c88 | |
fuchsia-90 | .4 .11 325 | 642f68 | |
fuchsia-100 | .3 .07 325 | 3f2041 | |
deeppurple-10 | .95 .04 298 | f1e9ff | |
deeppurple-20 | .89 .1 298 | e2cdff | |
deeppurple-30 | .84 .1 298 | d2bdff | |
deeppurple-40 | .8 .14 298 | c9a9ff | |
deeppurple-50 | .51 .17 298 | 7448b9 | |
deeppurple-60 | .5 .19 298 | 733fbf | |
deeppurple-70 | .54 .2 298 | 8048d1 | |
deeppurple-80 | .48 .14 298 | 6947a1 | |
deeppurple-90 | .4 .11 298 | 50377a | |
deeppurple-100 | .3 .07 298 | 32254c | |
navy-10 | .95 .04 266 | e2efff | |
navy-20 | .89 .1 266 | bcdaff | |
navy-30 | .84 .1 266 | acc9ff | |
navy-40 | .8 .14 266 | 93bbff | |
navy-50 | .45 .14 266 | 304ea2 | |
navy-60 | .4 .16 266 | 1f3c9c | |
navy-70 | .54 .2 266 | 3761e1 | |
navy-80 | .48 .14 266 | 3857ac | |
navy-90 | .4 .11 266 | 2b4382 | |
navy-100 | .3 .07 266 | 1d2c51 | |
blue-10 | .95 .04 250 | dbf1ff | |
blue-20 | .89 .1 250 | a8e0ff | |
blue-30 | .84 .1 250 | 98d0ff | |
blue-40 | .8 .14 250 | 73c3ff | |
blue-50 | .56 .18 250 | 0076d8 | |
blue-60 | .55 .2 250 | 0071df | |
blue-70 | .54 .2 250 | 006edc | |
blue-80 | .48 .14 250 | 005fa8 | |
blue-90 | .4 .11 250 | 054980 | |
blue-100 | .3 .07 250 | 0d2f4f | |
lightblue-10 | .95 .04 230 | d4f4ff | |
lightblue-20 | .89 .1 230 | 92e8ff | |
lightblue-30 | .84 .1 230 | 82d7ff | |
lightblue-40 | .8 .14 230 | 43cdff | |
lightblue-50 | .81 .17 230 | 00d3ff | |
lightblue-60 | .8 .19 230 | 00d1ff | |
lightblue-70 | .54 .2 230 | 007cca | |
lightblue-80 | .48 .14 230 | 00699c | |
lightblue-90 | .4 .11 230 | 005077 | |
lightblue-100 | .3 .07 230 | 00334a | |
aqua-10 | .95 .04 205 | d1f7fb | |
aqua-20 | .89 .1 205 | 84eefa | |
aqua-30 | .84 .1 205 | 73dee9 | |
aqua-40 | .8 .14 205 | 00d7e8 | |
aqua-50 | .77 .16 205 | 00d0e4 | |
aqua-60 | .76 .18 205 | 00cfe7 | |
aqua-70 | .54 .2 205 | 008aa5 | |
aqua-80 | .48 .14 205 | 007183 | |
aqua-90 | .4 .11 205 | 005764 | |
aqua-100 | .3 .07 205 | 00373e | |
teal-10 | .95 .04 175 | d4f8ed | |
teal-20 | .89 .1 175 | 8ff1d7 | |
teal-30 | .84 .1 175 | 7fe0c7 | |
teal-40 | .8 .14 175 | 34dbb9 | |
teal-50 | .55 .12 175 | 00876d | |
teal-60 | .54 .12 175 | 00846b | |
teal-70 | .54 .2 175 | 009068 | |
teal-80 | .48 .14 175 | 007559 | |
teal-90 | .4 .11 175 | 005a44 | |
teal-100 | .3 .07 175 | 00392c | |
green-10 | .95 .04 146 | def6df | |
green-20 | .89 .1 146 | b0edb3 | |
green-30 | .84 .1 146 | a0dca3 | |
green-40 | .8 .14 146 | 7ed686 | |
green-50 | .51 .2 146 | 008100 | |
green-60 | .5 .22 146 | 008000 | |
green-70 | .54 .2 146 | 008a01 | |
green-80 | .48 .14 146 | 0f7126 | |
green-90 | .4 .11 146 | 12561f | |
green-100 | .3 .07 146 | 123717 | |
lightgreen-10 | .95 .04 135 | e3f5da | |
lightgreen-20 | .89 .1 135 | beeaa7 | |
lightgreen-30 | .84 .1 135 | afda97 | |
lightgreen-40 | .8 .14 135 | 96d273 | |
lightgreen-50 | .84 .15 135 | 9fe079 | |
lightgreen-60 | .83 .17 135 | 95df68 | |
lightgreen-70 | .54 .2 135 | 2f8500 | |
lightgreen-80 | .48 .14 135 | 376e00 | |
lightgreen-90 | .4 .11 135 | 2b5409 | |
lightgreen-100 | .3 .07 135 | 1d350e | |
lime-10 | .95 .04 128 | e7f4d8 | |
lime-20 | .89 .1 128 | c8e8a0 | |
lime-30 | .84 .1 128 | b8d790 | |
lime-40 | .8 .14 128 | a3cf68 | |
lime-50 | .75 .14 128 | 94be58 | |
lime-60 | .74 .16 128 | 8dbd42 | |
lime-70 | .54 .2 128 | 4b8100 | |
lime-80 | .48 .14 128 | 466b00 | |
lime-90 | .4 .11 128 | 365200 | |
lime-100 | .3 .07 128 | 233407 | |
yellow-10 | .95 .04 99 | f5f0d1 | |
yellow-20 | .89 .1 99 | ebdc8e | |
yellow-30 | .84 .1 99 | dbcc7e | |
yellow-40 | .8 .14 99 | d4bf45 | |
yellow-50 | .91 .16 99 | fce253 | |
yellow-60 | .9 .18 99 | fcdf25 | |
yellow-70 | .54 .2 99 | 8d6b00 | |
yellow-80 | .48 .14 99 | 725c00 | |
yellow-90 | .4 .11 99 | 574700 | |
yellow-100 | .3 .07 99 | 372e00 | |
amber-10 | .95 .04 82 | fcedd1 | |
amber-20 | .89 .1 82 | fcd58d | |
amber-30 | .84 .1 82 | ebc57d | |
amber-40 | .8 .14 82 | eab444 | |
amber-50 | .84 .15 82 | fbc044 | |
amber-60 | .83 .17 82 | feba08 | |
amber-70 | .54 .2 82 | a65a00 | |
amber-80 | .48 .14 82 | 845200 | |
amber-90 | .4 .11 82 | 643f00 | |
amber-100 | .3 .07 82 | 3f2900 | |
orange-10 | .95 .04 62 | ffe9d4 | |
orange-20 | .89 .1 62 | ffcc96 | |
orange-30 | .84 .1 62 | fabc86 | |
orange-40 | .8 .14 62 | fda856 | |
orange-50 | .78 .14 62 | f6a14f | |
orange-60 | .77 .16 62 | fb9a32 | |
orange-70 | .54 .2 62 | bb4500 | |
orange-80 | .48 .14 62 | 934500 | |
orange-90 | .4 .11 62 | 703600 | |
orange-100 | .3 .07 62 | 462400 | |
deeporange-10 | .95 .04 45 | ffe7d9 | |
deeporange-20 | .89 .1 45 | ffc6a4 | |
deeporange-30 | .84 .1 45 | ffb694 | |
deeporange-40 | .8 .14 45 | ff9f6f | |
deeporange-50 | .59 .2 45 | d74500 | |
deeporange-60 | .58 .22 45 | db3500 | |
deeporange-70 | .54 .2 45 | c53300 | |
deeporange-80 | .48 .14 45 | 9a3c00 | |
deeporange-90 | .4 .11 45 | 762f06 | |
deeporange-100 | .3 .07 45 | 4a200c | |
brown-10 | .95 .03 50 | ffe9dd | |
brown-20 | .89 .03 50 | ecd6ca | |
brown-30 | .84 .03 50 | dcc5ba | |
brown-40 | .8 .03 50 | cfb9ad | |
brown-50 | .45 .07 50 | 744931 | |
brown-60 | .42 .07 50 | 6c4128 | |
brown-70 | .54 .03 50 | 7e6a5f | |
brown-80 | .48 .03 50 | 6c594f | |
brown-90 | .4 .03 50 | 554339 | |
brown-100 | .3 .03 50 | 3a2a20 | |
gray-10 | .95 0 0 | eeeeee | |
gray-20 | .89 0 0 | dbdbdb | |
gray-30 | .84 0 0 | cacaca | |
gray-40 | .8 0 0 | bebebe | |
gray-50 | .46 0 0 | 585858 | |
gray-60 | .45 0 0 | 555555 | |
gray-70 | .54 0 0 | 6f6f6f | |
gray-80 | .48 0 0 | 5d5d5d | |
gray-90 | .4 0 0 | 484848 | |
gray-100 | .3 0 0 | 2e2e2e | |
silver-10 | .97 0 0 | f5f5f5 | |
silver-20 | .94 0 0 | ebebeb | |
silver-30 | .91 0 0 | e1e1e1 | |
silver-40 | .88 0 0 | d7d7d7 | |
silver-50 | .78 0 0 | b7b7b7 | |
silver-60 | .75 0 0 | aeaeae | |
silver-70 | .72 0 0 | a4a4a4 | |
silver-80 | .64 0 0 | 8c8c8c | |
silver-90 | .52 0 0 | 696969 | |
silver-100 | .44 0 0 | 525252 | |
black-10 | .87 0 0 | d4d4d4 | |
black-20 | .79 0 0 | bababa | |
black-30 | .72 0 0 | a4a4a4 | |
black-40 | .65 0 0 | 8f8f8f | |
black-50 | .01 0 0 | 000000 | |
black-60 | .01 0 0 | 000000 | |
black-70 | .32 0 0 | 333333 | |
black-80 | .26 0 0 | 242424 | |
black-90 | .2 0 0 | 161616 | |
black-100 | .2 0 0 | 161616 |
Brand
| Token | Value | |
|---|---|---|
brand-primary-10 | amber-10 | |
brand-primary-20 | amber-20 | |
brand-primary-30 | amber-30 | |
brand-primary-40 | amber-40 | |
brand-primary-50 | amber-50 | |
brand-primary-60 | amber-60 | |
brand-primary-70 | amber-70 | |
brand-primary-80 | amber-80 | |
brand-primary-90 | amber-90 | |
brand-primary-100 | amber-100 | |
brand-secondary-10 | pink-10 | |
brand-secondary-20 | pink-20 | |
brand-secondary-30 | pink-30 | |
brand-secondary-40 | pink-40 | |
brand-secondary-50 | pink-50 | |
brand-secondary-60 | pink-60 | |
brand-secondary-70 | pink-70 | |
brand-secondary-80 | pink-80 | |
brand-secondary-90 | pink-90 | |
brand-secondary-100 | pink-100 |
Status
| Token | Value | |
|---|---|---|
status-error-10 | red-10 | |
status-error-20 | red-20 | |
status-error-30 | red-30 | |
status-error-40 | red-40 | |
status-error-50 | red-50 | |
status-error-60 | red-60 | |
status-error-70 | red-70 | |
status-error-80 | red-80 | |
status-error-90 | red-90 | |
status-error-100 | red-100 | |
status-warning-10 | amber-10 | |
status-warning-20 | amber-20 | |
status-warning-30 | amber-30 | |
status-warning-40 | amber-40 | |
status-warning-50 | amber-50 | |
status-warning-60 | amber-60 | |
status-warning-70 | amber-70 | |
status-warning-80 | amber-80 | |
status-warning-90 | amber-90 | |
status-warning-100 | amber-100 | |
status-success-10 | green-10 | |
status-success-20 | green-20 | |
status-success-30 | green-30 | |
status-success-40 | green-40 | |
status-success-50 | green-50 | |
status-success-60 | green-60 | |
status-success-70 | green-70 | |
status-success-80 | green-80 | |
status-success-90 | green-90 | |
status-success-100 | green-100 | |
status-information-10 | blue-10 | |
status-information-20 | blue-20 | |
status-information-30 | blue-30 | |
status-information-40 | blue-40 | |
status-information-50 | blue-50 | |
status-information-60 | blue-60 | |
status-information-70 | blue-70 | |
status-information-80 | blue-80 | |
status-information-90 | blue-90 | |
status-information-100 | blue-100 |
Rights
| Token | Value | |
|---|---|---|
rights-required-10 | yellow-10 | |
rights-required-20 | yellow-20 | |
rights-required-30 | yellow-30 | |
rights-required-40 | yellow-40 | |
rights-required-50 | yellow-50 | |
rights-required-60 | yellow-60 | |
rights-required-70 | yellow-70 | |
rights-required-80 | yellow-80 | |
rights-required-90 | yellow-90 | |
rights-required-100 | yellow-100 | |
rights-postponed-required-10 | orange-10 | |
rights-postponed-required-20 | orange-20 | |
rights-postponed-required-30 | orange-30 | |
rights-postponed-required-40 | orange-40 | |
rights-postponed-required-50 | orange-50 | |
rights-postponed-required-60 | orange-60 | |
rights-postponed-required-70 | orange-70 | |
rights-postponed-required-80 | orange-80 | |
rights-postponed-required-90 | orange-90 | |
rights-postponed-required-100 | orange-100 | |
rights-recommended-10 | aqua-10 | |
rights-recommended-20 | aqua-20 | |
rights-recommended-30 | aqua-30 | |
rights-recommended-40 | aqua-40 | |
rights-recommended-50 | aqua-50 | |
rights-recommended-60 | aqua-60 | |
rights-recommended-70 | aqua-70 | |
rights-recommended-80 | aqua-80 | |
rights-recommended-90 | aqua-90 | |
rights-recommended-100 | aqua-100 |
Neutral Surfaces
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
surface-base | .91 .01 82 e5e1da | .04 .02 82 010000 | ||
surface-base-hover | .85 .01 82 d1cdc7 | .16 0 46.4 0d0d0d | ||
surface-base-hover | .82 .01 82 c7c4bd | .21 0 46.2 181818 | ||
surface-base-disabled | .84 .01 82 cecac3 | .24 0 46.1 1f1f1f | ||
surface-base-variant | 1 0 82 ffffff | 0 0 82 000000 | ||
surface-base-variant-hover | .93 0 0 e8e8e8 | .16 0 0 0d0d0d | ||
surface-base-variant-hover | .9 0 0 dedede | .21 0 0 181818 | ||
surface-base-variant-disabled | .92 0 0 e4e4e4 | .24 0 0 1f1f1f | ||
surface-main | .98 0 82 faf8f5 | .24 .01 82 221f1a | ||
surface-main-hover | .91 0 82 e1e1e1 | .26 .01 81.8 26241f | ||
surface-main-hover | .88 0 82 d7d7d7 | .29 .01 81.5 2e2b26 | ||
surface-main-disabled | .9 0 82 dedede | .32 .01 81.3 35322d | ||
surface-main-dim | .96 .01 82 f4f1ec | .2 .02 82 1a150e | ||
surface-main-dim-hover | .9 .01 82 e1ddd7 | .23 .01 79.1 1f1c18 | ||
surface-main-dim-hover | .86 .01 82 d4d0ca | .26 .01 78.7 27241f | ||
surface-main-dim-disabled | .88 .01 82 dbd7d0 | .29 .01 78.4 2e2b26 | ||
surface-main-variant | .95 .01 82 f3eee5 | .32 .02 82 383226 | ||
surface-main-variant-hover | .89 .01 82 dedad3 | .34 .02 81.7 3d372c | ||
surface-main-variant-hover | .86 .01 82 d4d0ca | .36 .02 81.4 423c31 | ||
surface-main-variant-disabled | .87 .01 82 d7d4cd | .38 .02 81.2 484136 | ||
surface-main-bright | 1 .01 82 fffff9 | .28 .02 82 2d2820 | ||
surface-main-bright-hover | .93 .01 82 ebe7e1 | .3 .01 81.7 302d28 | ||
surface-main-bright-hover | .9 .01 82 e1ddd7 | .33 .01 81.4 383530 | ||
surface-main-bright-disabled | .92 .01 82 e8e4dd | .35 .01 81.2 3d3a35 | ||
surface-front | 1 .01 82 fffff9 | .3 .02 82 322d25 | ||
surface-front-hover | .93 .01 82 ebe7e1 | .32 .01 81.8 35322d | ||
surface-front-hover | .9 .01 82 e1ddd7 | .35 .01 81.5 3d3a35 | ||
surface-front-disabled | .92 .01 82 e8e4dd | .37 .01 81.3 423f3a | ||
surface-control | 1 .01 82 fffffa | .34 .01 82 3b3730 | ||
surface-control-hover | .93 .01 82 ebe7e1 | .36 .01 81.8 403d37 | ||
surface-control-hover | .9 .01 82 e1ddd7 | .38 .01 81.6 45423c | ||
surface-control-disabled | .92 .01 82 e8e4dd | .4 .01 81.5 4a4742 | ||
surface-control-variant | 1 .01 82 fffffa | .2 .01 82 19160f | ||
surface-control-variant-hover | .93 .01 82 ebe7e1 | .23 .01 79.7 1f1c18 | ||
surface-control-variant-hover | .9 .01 82 e1ddd7 | .26 .01 79.3 27241f | ||
surface-control-variant-disabled | .92 .01 82 e8e4dd | .29 .01 79.1 2e2b26 |
Neutral Translucent Surfaces
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
surface-base-translucent | .91 .01 82 / .8 e5e1dacc | .04 .02 82 / .8 010000cc | ||
surface-base-translucent-hover | .85 .01 82 / .82 d1cdc7d1 | .16 0 46.4 / .81 0d0d0dcf | ||
surface-base-translucent-hover | .82 .01 82 / .82 c7c4bdd1 | .21 0 46.2 / .83 181818d4 | ||
surface-base-translucent-disabled | .84 .01 82 / .82 cecac3d1 | .24 0 46.1 / .84 1f1f1fd6 | ||
surface-base-variant-translucent | 1 0 82 / .8 ffffffcc | 0 0 82 / .8 000000cc | ||
surface-base-variant-translucent-hover | .93 0 0 / .82 e8e8e8d1 | .16 0 0 / .81 0d0d0dcf | ||
surface-base-variant-translucent-hover | .9 0 0 / .82 dededed1 | .21 0 0 / .83 181818d4 | ||
surface-base-variant-translucent-disabled | .92 0 0 / .82 e4e4e4d1 | .24 0 0 / .84 1f1f1fd6 | ||
surface-main-translucent | .98 0 82 / .8 faf8f5cc | .24 .01 82 / .8 221f1acc | ||
surface-main-translucent-hover | .91 0 82 / .82 e1e1e1d1 | .26 .01 81.8 / .81 26241fcf | ||
surface-main-translucent-hover | .88 0 82 / .82 d7d7d7d1 | .29 .01 81.5 / .83 2e2b26d4 | ||
surface-main-translucent-disabled | .9 0 82 / .82 dededed1 | .32 .01 81.3 / .84 35322dd6 | ||
surface-main-dim-translucent | .96 .01 82 / .8 f4f1eccc | .2 .02 82 / .8 1a150ecc | ||
surface-main-dim-translucent-hover | .9 .01 82 / .82 e1ddd7d1 | .23 .01 79.1 / .81 1f1c18cf | ||
surface-main-dim-translucent-hover | .86 .01 82 / .82 d4d0cad1 | .26 .01 78.7 / .83 27241fd4 | ||
surface-main-dim-translucent-disabled | .88 .01 82 / .82 dbd7d0d1 | .29 .01 78.4 / .84 2e2b26d6 | ||
surface-main-variant-translucent | .95 .01 82 / .8 f3eee5cc | .32 .02 82 / .8 383226cc | ||
surface-main-variant-translucent-hover | .89 .01 82 / .82 dedad3d1 | .34 .02 81.7 / .81 3d372ccf | ||
surface-main-variant-translucent-hover | .86 .01 82 / .82 d4d0cad1 | .36 .02 81.4 / .83 423c31d4 | ||
surface-main-variant-translucent-disabled | .87 .01 82 / .82 d7d4cdd1 | .38 .02 81.2 / .84 484136d6 | ||
surface-main-bright-translucent | 1 .01 82 / .8 fffff9cc | .28 .02 82 / .8 2d2820cc | ||
surface-main-bright-translucent-hover | .93 .01 82 / .82 ebe7e1d1 | .3 .01 81.7 / .81 302d28cf | ||
surface-main-bright-translucent-hover | .9 .01 82 / .82 e1ddd7d1 | .33 .01 81.4 / .83 383530d4 | ||
surface-main-bright-translucent-disabled | .92 .01 82 / .82 e8e4ddd1 | .35 .01 81.2 / .84 3d3a35d6 | ||
surface-front-translucent | 1 .01 82 / .8 fffff9cc | .3 .02 82 / .8 322d25cc | ||
surface-front-translucent-hover | .93 .01 82 / .82 ebe7e1d1 | .32 .01 81.8 / .81 35322dcf | ||
surface-front-translucent-hover | .9 .01 82 / .82 e1ddd7d1 | .35 .01 81.5 / .83 3d3a35d4 | ||
surface-front-translucent-disabled | .92 .01 82 / .82 e8e4ddd1 | .37 .01 81.3 / .84 423f3ad6 | ||
surface-control-translucent | 1 .01 82 / .8 fffffacc | .34 .01 82 / .8 3b3730cc | ||
surface-control-translucent-hover | .93 .01 82 / .82 ebe7e1d1 | .36 .01 81.8 / .81 403d37cf | ||
surface-control-translucent-hover | .9 .01 82 / .82 e1ddd7d1 | .38 .01 81.6 / .83 45423cd4 | ||
surface-control-translucent-disabled | .92 .01 82 / .82 e8e4ddd1 | .4 .01 81.5 / .84 4a4742d6 | ||
surface-control-variant-translucent | 1 .01 82 / .8 fffffacc | .2 .01 82 / .8 19160fcc | ||
surface-control-variant-translucent-hover | .93 .01 82 / .82 ebe7e1d1 | .23 .01 79.7 / .81 1f1c18cf | ||
surface-control-variant-translucent-hover | .9 .01 82 / .82 e1ddd7d1 | .26 .01 79.3 / .83 27241fd4 | ||
surface-control-variant-translucent-disabled | .92 .01 82 / .82 e8e4ddd1 | .29 .01 79.1 / .84 2e2b26d6 |
Palette Surfaces
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
surface-red-minimal | red-10 | red-100 | ||
surface-red-minimal-hover | .91 .09 29.8 ffcbbe | .4 .11 28.3 782b23 | ||
surface-red-minimal-active | .89 .1 3.3 ffc2b3 | .45 .11 28.3 883931 | ||
text-primary-on-surface-red-minimal | .29 .11 28 550304 | .95 .03 28.3 ffe8e4 | ||
text-secondary-on-surface-red-minimal | .47 .04 28 6e514d | .71 .07 28.3 ca8f86 | ||
text-disabled-on-surface-red-minimal | .76 .03 28 c5aaa6 | .61 .07 28.3 aa736b | ||
surface-red-subtle | red-20 | red-90 | ||
surface-red-subtle-hover | .85 .14 28.8 ffa999 | .48 .14 28.5 9d352c | ||
surface-red-subtle-active | .84 .15 29.1 ffa291 | .52 .14 28.6 ab4237 | ||
text-primary-on-surface-red-subtle | .27 .12 28 520000 | .96 .02 28.5 ffece9 | ||
text-secondary-on-surface-red-subtle | .44 .07 28 73423c | .75 .09 28.5 df978d | ||
text-disabled-on-surface-red-subtle | .71 .08 28 d08f86 | .66 .09 28.5 c47d73 | ||
surface-red-moderate | red-40 | red-70 | ||
surface-red-moderate-hover | .77 .18 28.4 ff8070 | .59 .21 29.3 df3225 | ||
surface-red-moderate-active | .76 .18 28.6 ff7d6c | .62 .2 29.7 e64534 | ||
text-primary-on-surface-red-moderate | .24 .1 28 440000 | .97 .02 29.3 fff0ee | ||
text-secondary-on-surface-red-moderate | .39 .09 28 6d302a | .8 .12 29.3 ff9f90 | ||
text-disabled-on-surface-red-moderate | .64 .1 28 c1746a | .73 .1 29.3 e19084 | ||
surface-red-strong | red-60 | red-50 | ||
surface-red-strong-hover | .55 .23 3.5 d70000 | .58 .21 29.5 db2e21 | ||
surface-red-strong-active | .58 .23 31.4 e21900 | .61 .2 30 e24130 | ||
text-primary-on-surface-red-strong | .96 .02 3.5 ffefec | .97 .02 29.5 fff0ed | ||
text-secondary-on-surface-red-strong | .78 .12 3.5 fa9988 | .79 .12 29.5 ff9e8e | ||
text-disabled-on-surface-red-strong | .71 .1 3.5 d8897b | .73 .1 29.5 df8e82 | ||
surface-red-contrast | red-90 | red-20 | ||
surface-red-contrast-hover | .45 .13 28.7 903128 | .83 .15 29.2 ff9f8e | ||
surface-red-contrast-active | .48 .13 28.9 993a30 | .79 .16 29.7 ff8f7c | ||
text-primary-on-surface-red-contrast | .96 .02 28.7 feece9 | .27 .12 28 520000 | ||
text-secondary-on-surface-red-contrast | .73 .08 28.7 d8948a | .44 .07 28 73423c | ||
text-disabled-on-surface-red-contrast | .64 .08 28.7 bb796f | .71 .08 28 d08f86 | ||
surface-red-main | red-30 | red-100 | ||
surface-red-main-hover | .81 .14 28.7 ff9c8c | .4 .11 28.3 782b23 | ||
surface-red-main-active | .79 .15 29 ff9282 | .45 .11 28.3 883931 | ||
text-primary-on-surface-red-main | .25 .11 28 4a0000 | .95 .03 28.3 ffe8e4 | ||
text-secondary-on-surface-red-main | .41 .07 28 6b3b35 | .71 .07 28.3 ca8f86 | ||
text-disabled-on-surface-red-main | .67 .08 28 c2837a | .61 .07 28.3 aa736b | ||
surface-pink-minimal | pink-10 | pink-100 | ||
surface-pink-minimal-hover | .91 .09 .08 ffc9df | .4 .11 .01 742945 | ||
surface-pink-minimal-active | .89 .09 .1 ffc2d8 | .45 .11 .02 843753 | ||
text-primary-on-surface-pink-minimal | .29 .11 0 510328 | .95 .03 .01 ffe8ee | ||
text-secondary-on-surface-pink-minimal | .47 .04 0 6d5059 | .71 .07 .01 c78d9e | ||
text-disabled-on-surface-pink-minimal | .76 .03 0 c3a9b0 | .61 .07 .01 a77181 | ||
surface-pink-subtle | pink-20 | pink-90 | ||
surface-pink-subtle-hover | .85 .14 .03 ffa5ca | .48 .14 .02 99335a | ||
surface-pink-subtle-active | .84 .14 .03 ffa2c7 | .52 .14 .02 a63f66 | ||
text-primary-on-surface-pink-subtle | .27 .12 0 4e0023 | .96 .02 .02 feecf1 | ||
text-secondary-on-surface-pink-subtle | .44 .07 0 704150 | .75 .09 .02 db95aa | ||
text-disabled-on-surface-pink-subtle | .71 .08 0 cc8da0 | .66 .09 .02 c17b90 | ||
surface-pink-moderate | pink-40 | pink-70 | ||
surface-pink-moderate-hover | .77 .18 .01 ff7daf | .59 .21 .03 d72e78 | ||
surface-pink-moderate-active | .76 .18 .02 ff79ac | .62 .2 .05 de4181 | ||
text-primary-on-surface-pink-moderate | .24 .1 0 41001d | .97 .02 .03 fff0f4 | ||
text-secondary-on-surface-pink-moderate | .39 .09 0 6a2f44 | .8 .12 .03 fd9cba | ||
text-disabled-on-surface-pink-moderate | .64 .1 0 be728a | .73 .1 .03 dd8ea6 | ||
surface-pink-strong | pink-60 | pink-50 | ||
surface-pink-strong-hover | .78 .25 0 ff5cb1 | .77 .23 .01 ff64ae | ||
surface-pink-strong-active | .77 .25 0 ff58ae | .74 .23 .01 ff5aa5 | ||
text-primary-on-surface-pink-strong | .24 .11 0 43001e | .25 .11 0 45001e | ||
text-secondary-on-surface-pink-strong | .4 .12 0 772344 | .4 .12 0 782645 | ||
text-disabled-on-surface-pink-strong | .65 .1 0 c0748c | .66 .1 0 c3768e | ||
surface-pink-contrast | pink-90 | pink-20 | ||
surface-pink-contrast-hover | .45 .13 .03 8b2f52 | .83 .15 .04 ff9bc3 | ||
surface-pink-contrast-active | .48 .13 .04 95385a | .79 .16 .05 ff8bb6 | ||
text-primary-on-surface-pink-contrast | .96 .03 .03 ffe9ef | .27 .12 0 4e0023 | ||
text-secondary-on-surface-pink-contrast | .73 .08 .03 d492a6 | .44 .07 0 704150 | ||
text-disabled-on-surface-pink-contrast | .64 .08 .03 b8778b | .71 .08 0 cc8da0 | ||
surface-pink-main | pink-30 | pink-100 | ||
surface-pink-main-hover | .81 .14 .02 ff99bd | .4 .11 .01 742945 | ||
surface-pink-main-active | .79 .14 .03 ff92b7 | .45 .11 .02 843753 | ||
text-primary-on-surface-pink-main | .25 .11 0 470020 | .95 .03 .01 ffe8ee | ||
text-secondary-on-surface-pink-main | .41 .07 0 693a49 | .71 .07 .01 c78d9e | ||
text-disabled-on-surface-pink-main | .67 .08 0 bf8194 | .61 .07 .01 a77181 | ||
surface-fuchsia-minimal | fuchsia-10 | fuchsia-100 | ||
surface-fuchsia-minimal-hover | .91 .09 325 ffcdff | .4 .11 325 642f68 | ||
surface-fuchsia-minimal-active | .89 .09 326 fbc7fb | .45 .11 325 733d76 | ||
text-primary-on-surface-fuchsia-minimal | .29 .11 325 440d48 | .95 .04 325 fde7fe | ||
text-secondary-on-surface-fuchsia-minimal | .47 .04 325 655266 | .71 .07 325 b891ba | ||
text-disabled-on-surface-fuchsia-minimal | .76 .03 325 bcaabc | .61 .07 325 99749b | ||
surface-fuchsia-subtle | fuchsia-20 | fuchsia-90 | ||
surface-fuchsia-subtle-hover | .85 .14 325 fcadff | .48 .14 325 833c88 | ||
surface-fuchsia-subtle-active | .84 .15 325 fca7ff | .52 .14 325 904895 | ||
text-primary-on-surface-fuchsia-subtle | .27 .13 325 420047 | .96 .03 325 fdebfd | ||
text-secondary-on-surface-fuchsia-subtle | .44 .07 325 654466 | .75 .09 325 c999cc | ||
text-disabled-on-surface-fuchsia-subtle | .71 .08 325 bc91be | .66 .09 325 af7fb2 | ||
surface-fuchsia-moderate | fuchsia-40 | fuchsia-70 | ||
surface-fuchsia-moderate-hover | .77 .18 325 ec88f3 | .59 .21 325 b742c0 | ||
surface-fuchsia-moderate-active | .76 .18 325 e985ef | .62 .2 325 bf51c7 | ||
text-primary-on-surface-fuchsia-moderate | .24 .12 325 39003e | .97 .03 325 feeefe | ||
text-secondary-on-surface-fuchsia-moderate | .39 .09 325 5d335f | .8 .12 325 e5a2e8 | ||
text-disabled-on-surface-fuchsia-moderate | .64 .1 325 ab77ae | .73 .1 325 c993cc | ||
surface-fuchsia-strong | fuchsia-60 | fuchsia-50 | ||
surface-fuchsia-strong-hover | .76 .23 325 f672ff | .74 .21 325 ea74f2 | ||
surface-fuchsia-strong-active | .74 .23 325 ef6cf9 | .72 .22 325 e669ef | ||
text-primary-on-surface-fuchsia-strong | .23 .11 325 350039 | .24 .11 325 37003b | ||
text-secondary-on-surface-fuchsia-strong | .38 .12 325 612865 | .39 .11 325 602c63 | ||
text-disabled-on-surface-fuchsia-strong | .62 .1 325 a672a9 | .63 .1 325 a874ab | ||
surface-fuchsia-contrast | fuchsia-90 | fuchsia-20 | ||
surface-fuchsia-contrast-hover | .45 .13 325 78377c | .83 .15 325 f8a4fd | ||
surface-fuchsia-contrast-active | .48 .13 325 814085 | .79 .16 325 ed94f3 | ||
text-primary-on-surface-fuchsia-contrast | .96 .04 325 ffe8ff | .27 .13 325 420047 | ||
text-secondary-on-surface-fuchsia-contrast | .73 .08 325 c396c5 | .44 .07 325 654466 | ||
text-disabled-on-surface-fuchsia-contrast | .64 .08 325 a77ba9 | .71 .08 325 bc91be | ||
surface-fuchsia-main | fuchsia-30 | fuchsia-100 | ||
surface-fuchsia-main-hover | .81 .14 325 eea0f3 | .4 .11 325 642f68 | ||
surface-fuchsia-main-active | .79 .15 325 eb97ef | .45 .11 325 733d76 | ||
text-primary-on-surface-fuchsia-main | .25 .12 325 3c0040 | .95 .04 325 fde7fe | ||
text-secondary-on-surface-fuchsia-main | .41 .07 325 5e3d5f | .71 .07 325 b891ba | ||
text-disabled-on-surface-fuchsia-main | .67 .08 325 af85b1 | .61 .07 325 99749b | ||
surface-deeppurple-minimal | deeppurple-10 | deeppurple-100 | ||
surface-deeppurple-minimal-hover | .91 .09 301 ebd4ff | .4 .11 299 51377a | ||
surface-deeppurple-minimal-active | .89 .1 302 e7cbff | .45 .11 299 5e4589 | ||
text-primary-on-surface-deeppurple-minimal | .29 .11 298 321759 | .95 .03 299 f1ebff | ||
text-secondary-on-surface-deeppurple-minimal | .47 .04 298 5c556d | .71 .07 299 a696c8 | ||
text-disabled-on-surface-deeppurple-minimal | .76 .03 298 b3adc3 | .61 .07 299 897aa9 | ||
surface-deeppurple-subtle | deeppurple-20 | deeppurple-90 | ||
surface-deeppurple-subtle-hover | .85 .14 299 dab9ff | .48 .14 299 6a47a0 | ||
surface-deeppurple-subtle-active | .84 .15 299 d8b3ff | .52 .14 299 7553ad | ||
text-primary-on-surface-deeppurple-subtle | .27 .13 298 30095b | .96 .02 299 f3eefe | ||
text-secondary-on-surface-deeppurple-subtle | .44 .07 298 564973 | .75 .09 299 b4a0dd | ||
text-disabled-on-surface-deeppurple-subtle | .71 .08 298 a898ce | .66 .09 299 9a86c3 | ||
surface-deeppurple-moderate | deeppurple-40 | deeppurple-70 | ||
surface-deeppurple-moderate-hover | .77 .18 298 c397ff | .59 .21 299 9155e6 | ||
surface-deeppurple-moderate-active | .76 .18 299 c293ff | .62 .2 300 9b61ea | ||
text-primary-on-surface-deeppurple-moderate | .24 .13 298 2a0053 | .97 .02 299 f5f2fe | ||
text-secondary-on-surface-deeppurple-moderate | .39 .09 298 4c3a6e | .8 .12 299 c8acff | ||
text-disabled-on-surface-deeppurple-moderate | .64 .1 298 947fc1 | .73 .1 299 b19bdf | ||
surface-deeppurple-strong | deeppurple-60 | deeppurple-50 | ||
surface-deeppurple-strong-hover | .54 .21 300 8443d3 | .57 .19 299 8955d5 | ||
surface-deeppurple-strong-active | .57 .2 300 8c51d9 | .6 .18 299 9161db | ||
text-primary-on-surface-deeppurple-strong | .96 .02 300 f4f1fd | .97 .02 299 f5f2fd | ||
text-secondary-on-surface-deeppurple-strong | .77 .12 300 c1a4f7 | .79 .11 299 c4aaf9 | ||
text-disabled-on-surface-deeppurple-strong | .7 .1 300 a890d4 | .72 .1 299 ad97db | ||
surface-deeppurple-contrast | deeppurple-90 | deeppurple-20 | ||
surface-deeppurple-contrast-hover | .45 .13 299 604192 | .83 .15 299 d5b0ff | ||
surface-deeppurple-contrast-active | .48 .13 300 6a499b | .79 .16 300 cba1ff | ||
text-primary-on-surface-deeppurple-contrast | .96 .02 299 f2eefd | .27 .13 298 30095b | ||
text-secondary-on-surface-deeppurple-contrast | .73 .08 299 af9cd6 | .44 .07 298 564973 | ||
text-disabled-on-surface-deeppurple-contrast | .64 .08 299 9482b9 | .71 .08 298 a898ce | ||
surface-deeppurple-main | deeppurple-30 | deeppurple-100 | ||
surface-deeppurple-main-hover | .81 .14 299 ceacff | .4 .11 299 51377a | ||
surface-deeppurple-main-active | .79 .15 299 c8a3ff | .45 .11 299 5e4589 | ||
text-primary-on-surface-deeppurple-main | .25 .13 298 2c0356 | .95 .03 299 f1ebff | ||
text-secondary-on-surface-deeppurple-main | .41 .07 298 4f426b | .71 .07 299 a696c8 | ||
text-disabled-on-surface-deeppurple-main | .67 .08 298 9c8bc1 | .61 .07 299 897aa9 | ||
surface-navy-minimal | navy-10 | navy-100 | ||
surface-navy-minimal-hover | .91 .09 272 ccdeff | .4 .11 267 2d4382 | ||
surface-navy-minimal-active | .89 .09 274 c8d7ff | .45 .11 267 3a5192 | ||
text-primary-on-surface-navy-minimal | .29 .11 266 102360 | .95 .02 267 e9effc | ||
text-secondary-on-surface-navy-minimal | .47 .04 266 4f5970 | .71 .07 267 8c9fcf | ||
text-disabled-on-surface-navy-minimal | .76 .03 266 a8b1c6 | .61 .07 267 7082af | ||
surface-navy-subtle | navy-20 | navy-90 | ||
surface-navy-subtle-hover | .85 .14 268 a6caff | .48 .14 268 3c56ac | ||
surface-navy-subtle-active | .84 .14 269 a5c6ff | .52 .14 268 4662b9 | ||
text-primary-on-surface-navy-subtle | .27 .13 266 081a63 | .96 .02 268 ebf1ff | ||
text-secondary-on-surface-navy-subtle | .44 .07 266 3f5078 | .75 .09 268 94abe5 | ||
text-disabled-on-surface-navy-subtle | .71 .08 266 8ba1d5 | .66 .09 268 7b91cb | ||
surface-navy-moderate | navy-40 | navy-70 | ||
surface-navy-moderate-hover | .77 .18 267 81adff | .59 .21 269 4c6df8 | ||
surface-navy-moderate-active | .76 .18 267 7eaaff | .62 .2 270 5978fd | ||
text-primary-on-surface-navy-moderate | .24 .14 266 040c61 | 1 0 269 ffffff | ||
text-secondary-on-surface-navy-moderate | .39 .09 266 2f4375 | 1 0 269 ffffff | ||
text-disabled-on-surface-navy-moderate | .64 .1 266 6f8ac9 | .73 .1 269 8fa6e8 | ||
surface-navy-strong | navy-60 | navy-50 | ||
surface-navy-strong-hover | .45 .18 271 3444b7 | .52 .16 268 4260c4 | ||
surface-navy-strong-active | .48 .17 273 414fbb | .56 .16 269 4f6bd1 | ||
text-primary-on-surface-navy-strong | .96 .01 271 edf0fb | .96 .01 268 eef2fb | ||
text-secondary-on-surface-navy-strong | .73 .11 271 8fa4ec | .76 .1 268 98b1f2 | ||
text-disabled-on-surface-navy-strong | .64 .1 271 7689ca | .69 .1 268 8098d9 | ||
surface-navy-contrast | navy-90 | navy-20 | ||
surface-navy-contrast-hover | .45 .13 269 384e9d | .83 .15 269 a0c2ff | ||
surface-navy-contrast-active | .48 .13 270 4256a6 | .79 .16 270 93b3ff | ||
text-primary-on-surface-navy-contrast | .96 .02 269 ebf0ff | .27 .13 266 081a63 | ||
text-secondary-on-surface-navy-contrast | .73 .08 269 92a6dd | .44 .07 266 3f5078 | ||
text-disabled-on-surface-navy-contrast | .64 .08 269 788bc1 | .71 .08 266 8ba1d5 | ||
surface-navy-main | navy-30 | navy-100 | ||
surface-navy-main-hover | .81 .14 268 9abdff | .4 .11 267 2d4382 | ||
surface-navy-main-active | .79 .14 269 96b6ff | .45 .11 267 3a5192 | ||
text-primary-on-surface-navy-main | .25 .13 266 06155f | .95 .02 267 e9effc | ||
text-secondary-on-surface-navy-main | .41 .07 266 394a70 | .71 .07 267 8c9fcf | ||
text-disabled-on-surface-navy-main | .67 .08 266 7f95c8 | .61 .07 267 7082af | ||
surface-blue-minimal | blue-10 | blue-100 | ||
surface-blue-minimal-hover | .91 .08 256 bfe4ff | .4 .1 251 15497b | ||
surface-blue-minimal-active | .89 .09 258 b6ddff | .45 .11 251 1c5790 | ||
text-primary-on-surface-blue-minimal | .29 .1 250 002a5a | .95 .02 251 e7f0fb | ||
text-secondary-on-surface-blue-minimal | .47 .04 250 495c6f | .71 .07 251 80a4ca | ||
text-disabled-on-surface-blue-minimal | .76 .03 250 a2b3c5 | .61 .07 251 6686a9 | ||
surface-blue-subtle | blue-20 | blue-90 | ||
surface-blue-subtle-hover | .85 .14 252 87d3ff | .48 .14 252 075ea9 | ||
surface-blue-subtle-active | .84 .14 253 86cfff | .52 .14 252 1b6ab6 | ||
text-primary-on-surface-blue-subtle | .27 .09 250 00264f | .96 .02 252 e7f3ff | ||
text-secondary-on-surface-blue-subtle | .44 .07 250 325476 | .75 .09 252 83b0e3 | ||
text-disabled-on-surface-blue-subtle | .71 .08 250 7ca6d3 | .66 .09 252 6996c9 | ||
surface-blue-moderate | blue-40 | blue-70 | ||
surface-blue-moderate-hover | .77 .18 251 4db8ff | .59 .21 253 007bf4 | ||
surface-blue-moderate-active | .76 .18 251 49b5ff | .62 .2 254 0084fa | ||
text-primary-on-surface-blue-moderate | .24 .08 250 001f44 | 1 0 253 ffffff | ||
text-secondary-on-surface-blue-moderate | .39 .09 250 1a4873 | 1 0 253 ffffff | ||
text-disabled-on-surface-blue-moderate | .64 .1 250 5b90c7 | .73 .1 253 7bace6 | ||
surface-blue-strong | blue-60 | blue-50 | ||
surface-blue-strong-hover | .59 .21 253 007bf4 | .61 .19 252 0083f0 | ||
surface-blue-strong-active | .61 .2 255 0280f7 | .64 .18 253 258df5 | ||
text-primary-on-surface-blue-strong | 1 0 253 ffffff | 1 0 252 ffffff | ||
text-secondary-on-surface-blue-strong | 1 0 253 ffffff | 1 0 252 ffffff | ||
text-disabled-on-surface-blue-strong | .73 .1 253 7bace6 | .75 .1 252 7eb1eb | ||
surface-blue-contrast | blue-90 | blue-20 | ||
surface-blue-contrast-hover | .45 .13 253 0e569b | .83 .15 253 7dccff | ||
surface-blue-contrast-active | .48 .13 254 1e5ea4 | .79 .15 254 72beff | ||
text-primary-on-surface-blue-contrast | .96 .02 253 e7f2fe | .27 .09 250 00264f | ||
text-secondary-on-surface-blue-contrast | .73 .08 253 82abdc | .44 .07 250 325476 | ||
text-disabled-on-surface-blue-contrast | .64 .08 253 6890bf | .71 .08 250 7ca6d3 | ||
surface-blue-main | blue-30 | blue-100 | ||
surface-blue-main-hover | .81 .14 252 7ac6ff | .4 .1 251 15497b | ||
surface-blue-main-active | .79 .14 253 76bfff | .45 .11 251 1c5790 | ||
text-primary-on-surface-blue-main | .25 .09 250 00224b | .95 .02 251 e7f0fb | ||
text-secondary-on-surface-blue-main | .41 .07 250 2c4d6f | .71 .07 251 80a4ca | ||
text-disabled-on-surface-blue-main | .67 .08 250 709ac6 | .61 .07 251 6686a9 | ||
surface-lightblue-minimal | lightblue-10 | lightblue-100 | ||
surface-lightblue-minimal-hover | .91 .08 234 acebff | .4 .1 231 005073 | ||
surface-lightblue-minimal-active | .89 .09 235 9fe5ff | .45 .11 231 005e87 | ||
text-primary-on-surface-lightblue-minimal | .29 .07 230 002f46 | .95 .03 231 ddf3ff | ||
text-secondary-on-surface-lightblue-minimal | .47 .04 230 425e6c | .71 .07 231 73a9c4 | ||
text-disabled-on-surface-lightblue-minimal | .76 .03 230 9db5c2 | .61 .07 231 598ba3 | ||
surface-lightblue-subtle | lightblue-20 | lightblue-90 | ||
surface-lightblue-subtle-hover | .85 .14 231 5adeff | .48 .14 231 00689d | ||
surface-lightblue-subtle-active | .84 .14 232 58daff | .52 .14 231 0074aa | ||
text-primary-on-surface-lightblue-subtle | .27 .07 230 002b41 | .96 .02 231 e4f4fd | ||
text-secondary-on-surface-lightblue-subtle | .44 .07 230 215870 | .75 .09 231 6fb7da | ||
text-disabled-on-surface-lightblue-subtle | .71 .08 230 6baccb | .66 .09 231 529dc0 | ||
surface-lightblue-moderate | lightblue-40 | lightblue-70 | ||
surface-lightblue-moderate-hover | .77 .17 231 00c5ff | .59 .21 232 008be2 | ||
surface-lightblue-moderate-active | .76 .18 231 00c2ff | .62 .2 233 0094e9 | ||
text-primary-on-surface-lightblue-moderate | .24 .06 230 002437 | 1 0 232 ffffff | ||
text-secondary-on-surface-lightblue-moderate | .39 .09 230 004d6c | 1 0 232 ffffff | ||
text-disabled-on-surface-lightblue-moderate | .64 .1 230 4097bd | .73 .1 232 62b4dd | ||
surface-lightblue-strong | lightblue-60 | lightblue-50 | ||
surface-lightblue-strong-hover | .77 .22 230 00c8ff | .76 .2 231 00c3ff | ||
surface-lightblue-strong-active | .76 .22 230 00c5ff | .73 .21 231 00baff | ||
text-primary-on-surface-lightblue-strong | .24 .06 230 002335 | .24 .06 230 002437 | ||
text-secondary-on-surface-lightblue-strong | .39 .09 230 004d6d | .4 .1 230 004f73 | ||
text-disabled-on-surface-lightblue-strong | .64 .1 230 4097bd | .65 .1 230 439ac0 | ||
surface-lightblue-contrast | lightblue-90 | lightblue-20 | ||
surface-lightblue-contrast-hover | .46 .13 232 006293 | .83 .14 232 54d6ff | ||
surface-lightblue-contrast-active | .48 .13 232 006899 | .79 .15 233 35c9ff | ||
text-primary-on-surface-lightblue-contrast | .96 .02 232 e4f4fc | .27 .07 230 002b41 | ||
text-secondary-on-surface-lightblue-contrast | .74 .08 232 71b3d5 | .44 .07 230 215870 | ||
text-disabled-on-surface-lightblue-contrast | .65 .08 232 5598ba | .71 .08 230 6baccb | ||
surface-lightblue-main | lightblue-30 | lightblue-100 | ||
surface-lightblue-main-hover | .81 .14 231 4ad0ff | .4 .1 231 005073 | ||
surface-lightblue-main-active | .8 .14 232 48cdff | .45 .11 231 005e87 | ||
text-primary-on-surface-lightblue-main | .25 .06 230 002739 | .95 .03 231 ddf3ff | ||
text-secondary-on-surface-lightblue-main | .41 .07 230 1a5169 | .71 .07 231 73a9c4 | ||
text-disabled-on-surface-lightblue-main | .67 .08 230 5f9fbe | .61 .07 231 598ba3 | ||
surface-aqua-minimal | aqua-10 | aqua-100 | ||
surface-aqua-minimal-hover | .91 .08 205 a0f1fb | .4 .11 205 005764 | ||
surface-aqua-minimal-active | .89 .09 205 8fecf7 | .45 .11 205 006572 | ||
text-primary-on-surface-aqua-minimal | .29 .06 205 003239 | .95 .05 205 caf9ff | ||
text-secondary-on-surface-aqua-minimal | .47 .04 205 3e6064 | .71 .07 205 65aeb6 | ||
text-disabled-on-surface-aqua-minimal | .76 .03 205 9ab7bb | .61 .07 205 4a9098 | ||
surface-aqua-subtle | aqua-20 | aqua-90 | ||
surface-aqua-subtle-hover | .85 .14 205 27e7f9 | .48 .14 205 007183 | ||
surface-aqua-subtle-active | .84 .14 205 1ee4f6 | .52 .14 205 007e8f | ||
text-primary-on-surface-aqua-subtle | .27 .06 205 002d33 | .96 .04 205 d2fafe | ||
text-secondary-on-surface-aqua-subtle | .44 .07 205 115c63 | .75 .09 205 61bdc7 | ||
text-disabled-on-surface-aqua-subtle | .71 .08 205 60b1ba | .66 .09 205 41a3ad | ||
surface-aqua-moderate | aqua-40 | aqua-70 | ||
surface-aqua-moderate-hover | .77 .18 205 00d2ea | .59 .21 205 009bb8 | ||
surface-aqua-moderate-active | .76 .18 205 00cfe7 | .62 .2 205 00a3bf | ||
text-primary-on-surface-aqua-moderate | .24 .05 205 00262b | 1 0 205 ffffff | ||
text-secondary-on-surface-aqua-moderate | .39 .09 205 00525c | 1 0 205 ffffff | ||
text-disabled-on-surface-aqua-moderate | .64 .1 205 289da9 | .73 .1 205 4dbbc7 | ||
surface-aqua-strong | aqua-60 | aqua-50 | ||
surface-aqua-strong-hover | .74 .21 205 00cce9 | .73 .2 205 00c8e3 | ||
surface-aqua-strong-active | .73 .21 205 00c9e6 | .71 .2 205 00c1dc | ||
text-primary-on-surface-aqua-strong | .23 .04 205 002226 | .23 .05 205 002328 | ||
text-secondary-on-surface-aqua-strong | .37 .08 205 004b54 | .38 .08 205 004d55 | ||
text-disabled-on-surface-aqua-strong | .61 .1 205 15939f | .62 .1 205 1b96a1 | ||
surface-aqua-contrast | aqua-90 | aqua-20 | ||
surface-aqua-contrast-hover | .46 .13 205 006a7a | .83 .15 205 00e2f5 | ||
surface-aqua-contrast-active | .48 .13 205 007080 | .79 .16 205 00d6eb | ||
text-primary-on-surface-aqua-contrast | .96 .04 205 d2f9fe | .27 .06 205 002d33 | ||
text-secondary-on-surface-aqua-contrast | .74 .08 205 64b9c2 | .44 .07 205 115c63 | ||
text-disabled-on-surface-aqua-contrast | .65 .08 205 469ea7 | .71 .08 205 60b1ba | ||
surface-aqua-main | aqua-30 | aqua-100 | ||
surface-aqua-main-hover | .81 .14 205 00daec | .4 .11 205 005764 | ||
surface-aqua-main-active | .8 .14 205 00d7e8 | .45 .11 205 006572 | ||
text-primary-on-surface-aqua-main | .25 .05 205 00292d | .95 .05 205 caf9ff | ||
text-secondary-on-surface-aqua-main | .41 .07 205 04555d | .71 .07 205 65aeb6 | ||
text-disabled-on-surface-aqua-main | .67 .08 205 53a4ad | .61 .07 205 4a9098 | ||
surface-teal-minimal | teal-10 | teal-100 | ||
surface-teal-minimal-hover | .91 .09 175 9ff5de | .4 .11 175 005a44 | ||
surface-teal-minimal-active | .89 .1 175 8ff1d7 | .45 .11 175 006852 | ||
text-primary-on-surface-teal-minimal | .29 .07 175 003528 | .95 .07 175 bfffec | ||
text-secondary-on-surface-teal-minimal | .47 .04 175 426158 | .71 .07 175 6db09e | ||
text-disabled-on-surface-teal-minimal | .76 .03 175 9db8b0 | .61 .07 175 519181 | ||
surface-teal-subtle | teal-20 | teal-90 | ||
surface-teal-subtle-hover | .85 .14 175 4debc9 | .48 .14 175 007559 | ||
surface-teal-subtle-active | .84 .15 175 30eac5 | .52 .14 175 008164 | ||
text-primary-on-surface-teal-subtle | .27 .06 175 002f24 | .96 .06 175 c7ffef | ||
text-secondary-on-surface-teal-subtle | .44 .07 175 1e5e4f | .75 .09 175 6bbfa9 | ||
text-disabled-on-surface-teal-subtle | .71 .08 175 69b39f | .66 .09 175 4ea590 | ||
surface-teal-moderate | teal-40 | teal-70 | ||
surface-teal-moderate-hover | .77 .18 175 00d8ae | .59 .21 175 00a176 | ||
surface-teal-moderate-active | .76 .18 175 00d4ab | .62 .21 175 00ab7f | ||
text-primary-on-surface-teal-moderate | .24 .05 175 00271e | 1 0 175 ffffff | ||
text-secondary-on-surface-teal-moderate | .39 .09 175 005443 | 1 0 175 ffffff | ||
text-disabled-on-surface-teal-moderate | .64 .1 175 3aa089 | .73 .1 175 5bbda5 | ||
surface-teal-strong | teal-60 | teal-50 | ||
surface-teal-strong-hover | .58 .14 175 009476 | .6 .15 175 009c7b | ||
surface-teal-strong-active | .6 .14 175 009a7b | .63 .14 175 00a384 | ||
text-primary-on-surface-teal-strong | 1 0 175 ffffff | 1 0 175 ffffff | ||
text-secondary-on-surface-teal-strong | 1 0 175 ffffff | 1 0 175 ffffff | ||
text-disabled-on-surface-teal-strong | .73 .09 175 63baa3 | .74 .1 175 60bfa7 | ||
surface-teal-contrast | teal-90 | teal-20 | ||
surface-teal-contrast-hover | .45 .13 175 006b51 | .83 .15 175 29e6c2 | ||
surface-teal-contrast-active | .48 .13 175 007459 | .79 .16 175 00dbb5 | ||
text-primary-on-surface-teal-contrast | .96 .07 175 bfffee | .27 .06 175 002f24 | ||
text-secondary-on-surface-teal-contrast | .73 .08 175 6bb9a5 | .44 .07 175 1e5e4f | ||
text-disabled-on-surface-teal-contrast | .64 .08 175 4e9e8a | .71 .08 175 69b39f | ||
surface-teal-main | teal-30 | teal-100 | ||
surface-teal-main-hover | .81 .14 175 3adebc | .4 .11 175 005a44 | ||
surface-teal-main-active | .79 .15 175 00d9b5 | .45 .11 175 006852 | ||
text-primary-on-surface-teal-main | .25 .06 175 002b20 | .95 .07 175 bfffec | ||
text-secondary-on-surface-teal-main | .41 .07 175 155749 | .71 .07 175 6db09e | ||
text-disabled-on-surface-teal-main | .67 .08 175 5ca693 | .61 .07 175 519181 | ||
surface-green-minimal | green-10 | green-100 | ||
surface-green-minimal-hover | .91 .09 145 bcf2bd | .4 .11 146 12561f | ||
surface-green-minimal-active | .89 .1 144 b3edb1 | .45 .11 146 23652d | ||
text-primary-on-surface-green-minimal | .29 .11 146 003700 | .95 .09 146 c9ffcc | ||
text-secondary-on-surface-green-minimal | .47 .04 146 4c604c | .71 .07 146 83ad85 | ||
text-disabled-on-surface-green-minimal | .76 .03 146 a5b7a5 | .61 .07 146 678f69 | ||
surface-green-subtle | green-20 | green-90 | ||
surface-green-subtle-hover | .85 .14 146 8ee695 | .48 .14 146 0f7126 | ||
surface-green-subtle-active | .84 .15 145 88e48c | .52 .14 146 227d32 | ||
text-primary-on-surface-green-subtle | .27 .11 146 003200 | .96 .07 146 d3ffd5 | ||
text-secondary-on-surface-green-subtle | .44 .07 146 375c3a | .75 .09 146 88bc8b | ||
text-disabled-on-surface-green-subtle | .71 .08 146 82b084 | .66 .09 146 6ea271 | ||
surface-green-moderate | green-40 | green-70 | ||
surface-green-moderate-hover | .77 .18 146 5ad269 | .59 .21 145 009a08 | ||
surface-green-moderate-active | .76 .18 146 56ce66 | .62 .21 145 00a41c | ||
text-primary-on-surface-green-moderate | .24 .1 146 002a00 | 1 0 145 ffffff | ||
text-secondary-on-surface-green-moderate | .39 .09 146 215227 | 1 0 145 ffffff | ||
text-disabled-on-surface-green-moderate | .64 .1 146 639c67 | .73 .1 145 80ba81 | ||
surface-green-strong | green-60 | green-50 | ||
surface-green-strong-hover | .54 .24 145 008e00 | .57 .22 145 009500 | ||
surface-green-strong-active | .57 .23 144 009600 | .6 .21 145 009e10 | ||
text-primary-on-surface-green-strong | .96 .07 145 d7ffd7 | 1 0 145 ffffff | ||
text-secondary-on-surface-green-strong | .77 .12 145 83ca85 | 1 0 145 ffffff | ||
text-disabled-on-surface-green-strong | .7 .1 145 76af78 | .72 .1 145 7cb67e | ||
surface-green-contrast | green-90 | green-20 | ||
surface-green-contrast-hover | .45 .13 146 0f6722 | .83 .15 145 85e189 | ||
surface-green-contrast-active | .48 .13 145 207029 | .79 .16 145 72d577 | ||
text-primary-on-surface-green-contrast | .96 .08 146 cfffd1 | .27 .11 146 003200 | ||
text-secondary-on-surface-green-contrast | .73 .08 146 86b688 | .44 .07 146 375c3a | ||
text-disabled-on-surface-green-contrast | .64 .08 146 6b9b6e | .71 .08 146 82b084 | ||
surface-green-main | green-30 | green-100 | ||
surface-green-main-hover | .81 .14 146 82d989 | .4 .11 146 12561f | ||
surface-green-main-active | .79 .15 145 78d47c | .45 .11 146 23652d | ||
text-primary-on-surface-green-main | .25 .1 146 002d00 | .95 .09 146 c9ffcc | ||
text-secondary-on-surface-green-main | .41 .07 146 315534 | .71 .07 146 83ad85 | ||
text-disabled-on-surface-green-main | .67 .08 146 76a378 | .61 .07 146 678f69 | ||
surface-lightgreen-minimal | lightgreen-10 | lightgreen-100 | ||
surface-lightgreen-minimal-hover | .91 .09 131 cceeaf | .4 .11 135 2b5409 | ||
surface-lightgreen-minimal-active | .89 .1 130 c5e9a2 | .45 .11 135 39621c | ||
text-primary-on-surface-lightgreen-minimal | .29 .09 135 133300 | .95 .11 135 d0ffb6 | ||
text-secondary-on-surface-lightgreen-minimal | .47 .04 135 505f48 | .71 .07 135 8dab7c | ||
text-disabled-on-surface-lightgreen-minimal | .76 .03 135 a9b6a2 | .61 .07 135 718d61 | ||
surface-lightgreen-subtle | lightgreen-20 | lightgreen-90 | ||
surface-lightgreen-subtle-hover | .85 .14 133 a9e180 | .48 .14 134 396d00 | ||
surface-lightgreen-subtle-active | .84 .15 133 a3df76 | .52 .14 134 447913 | ||
text-primary-on-surface-lightgreen-subtle | .27 .09 135 0f2e00 | .96 .09 134 d8ffc1 | ||
text-secondary-on-surface-lightgreen-subtle | .44 .07 135 415a32 | .75 .09 134 95b980 | ||
text-disabled-on-surface-lightgreen-subtle | .71 .08 135 8dae7b | .66 .09 134 7c9f65 | ||
surface-lightgreen-moderate | lightgreen-40 | lightgreen-70 | ||
surface-lightgreen-moderate-hover | .77 .18 134 82cc49 | .59 .22 133 409500 | ||
surface-lightgreen-moderate-active | .76 .18 134 7fc945 | .62 .21 132 519d00 | ||
text-primary-on-surface-lightgreen-moderate | .24 .08 135 0b2700 | 1 0 133 ffffff | ||
text-secondary-on-surface-lightgreen-moderate | .39 .09 135 30501b | 1 0 133 ffffff | ||
text-disabled-on-surface-lightgreen-moderate | .64 .1 135 719a5b | .73 .1 133 90b775 | ||
surface-lightgreen-strong | lightgreen-60 | lightgreen-50 | ||
surface-lightgreen-strong-hover | .8 .21 134 81d933 | .79 .19 134 85d446 | ||
surface-lightgreen-strong-active | .79 .21 134 7ed62e | .76 .2 133 7cca29 | ||
text-primary-on-surface-lightgreen-strong | .25 .08 135 0e2900 | .25 .09 135 0d2a00 | ||
text-secondary-on-surface-lightgreen-strong | .41 .1 135 2f5513 | .41 .09 135 33561d | ||
text-disabled-on-surface-lightgreen-strong | .66 .1 135 78a162 | .67 .1 135 7ba464 | ||
surface-lightgreen-contrast | lightgreen-90 | lightgreen-20 | ||
surface-lightgreen-contrast-hover | .45 .14 134 316400 | .83 .15 132 a2db71 | ||
surface-lightgreen-contrast-active | .48 .13 134 3c6c0f | .79 .17 132 91d053 | ||
text-primary-on-surface-lightgreen-contrast | .96 .1 134 d5ffbb | .27 .09 135 0f2e00 | ||
text-secondary-on-surface-lightgreen-contrast | .73 .09 134 91b47b | .44 .07 135 415a32 | ||
text-disabled-on-surface-lightgreen-contrast | .64 .09 134 769960 | .71 .08 135 8dae7b | ||
surface-lightgreen-main | lightgreen-30 | lightgreen-100 | ||
surface-lightgreen-main-hover | .81 .14 133 9dd473 | .4 .11 135 2b5409 | ||
surface-lightgreen-main-active | .79 .15 133 94cf66 | .45 .11 135 39621c | ||
text-primary-on-surface-lightgreen-main | .25 .08 135 0f2a00 | .95 .11 135 d0ffb6 | ||
text-secondary-on-surface-lightgreen-main | .41 .07 135 3a532c | .71 .07 135 8dab7c | ||
text-disabled-on-surface-lightgreen-main | .67 .08 135 81a16f | .61 .07 135 718d61 | ||
surface-lime-minimal | lime-10 | lime-100 | ||
surface-lime-minimal-hover | .91 .09 122 d7eba8 | .4 .11 128 365200 | ||
surface-lime-minimal-active | .89 .1 121 d1e59a | .45 .11 128 43600e | ||
text-primary-on-surface-lime-minimal | .29 .08 128 1e3100 | .95 .11 128 dafeae | ||
text-secondary-on-surface-lime-minimal | .47 .04 128 535e46 | .71 .07 128 93a978 | ||
text-disabled-on-surface-lime-minimal | .76 .03 128 abb5a0 | .61 .07 128 778c5d | ||
surface-lime-subtle | lime-20 | lime-90 | ||
surface-lime-subtle-hover | .85 .15 126 b5df6d | .48 .14 127 486b00 | ||
surface-lime-subtle-active | .84 .15 125 b4db68 | .52 .14 127 537600 | ||
text-primary-on-surface-lime-subtle | .27 .08 128 1a2c00 | .96 .11 127 ddffae | ||
text-secondary-on-surface-lime-subtle | .44 .07 128 46592e | .75 .09 127 9db77a | ||
text-disabled-on-surface-lime-subtle | .71 .08 128 94ac76 | .66 .09 127 849d5f | ||
surface-lime-moderate | lime-40 | lime-70 | ||
surface-lime-moderate-hover | .77 .18 127 95c832 | .59 .22 127 599100 | ||
surface-lime-moderate-active | .76 .19 127 90c619 | .62 .22 126 659a00 | ||
text-primary-on-surface-lime-moderate | .24 .07 128 152500 | 1 0 127 ffffff | ||
text-secondary-on-surface-lime-moderate | .39 .09 128 384e12 | 1 0 127 ffffff | ||
text-disabled-on-surface-lime-moderate | .64 .1 128 7a9854 | .73 .1 127 98b56f | ||
surface-lime-strong | lime-60 | lime-50 | ||
surface-lime-strong-hover | .72 .2 127 82b900 | .71 .19 127 81b500 | ||
surface-lime-strong-active | .71 .2 127 7fb600 | .69 .2 126 7daf00 | ||
text-primary-on-surface-lime-strong | .22 .06 128 132000 | .23 .06 128 132100 | ||
text-secondary-on-surface-lime-strong | .36 .1 128 2e4700 | .37 .09 128 31470a | ||
text-disabled-on-surface-lime-strong | .59 .1 128 6c8945 | .6 .1 128 6f8c48 | ||
surface-lime-contrast | lime-90 | lime-20 | ||
surface-lime-contrast-hover | .45 .14 127 406200 | .83 .16 125 b0d95b | ||
surface-lime-contrast-active | .48 .13 126 4b6900 | .79 .17 124 a4cc3f | ||
text-primary-on-surface-lime-contrast | .96 .11 127 dcffad | .27 .08 128 1a2c00 | ||
text-secondary-on-surface-lime-contrast | .73 .09 127 99b375 | .44 .07 128 46592e | ||
text-disabled-on-surface-lime-contrast | .64 .09 127 7e9759 | .71 .08 128 94ac76 | ||
surface-lime-main | lime-30 | lime-100 | ||
surface-lime-main-hover | .81 .15 126 a9d25f | .4 .11 128 365200 | ||
surface-lime-main-active | .79 .15 125 a5cb57 | .45 .11 128 43600e | ||
text-primary-on-surface-lime-main | .25 .07 128 182800 | .95 .11 128 dafeae | ||
text-secondary-on-surface-lime-main | .41 .07 128 405227 | .71 .07 128 93a978 | ||
text-disabled-on-surface-lime-main | .67 .08 128 88a06a | .61 .07 128 778c5d | ||
surface-yellow-minimal | yellow-10 | yellow-100 | ||
surface-yellow-minimal-hover | .91 .1 95.6 f5e193 | .4 .1 98.2 564700 | ||
surface-yellow-minimal-active | .89 .11 95.2 f1da84 | .45 .11 98.3 665500 | ||
text-primary-on-surface-yellow-minimal | .29 .06 99 322a00 | .95 .11 98.2 fff19a | ||
text-secondary-on-surface-yellow-minimal | .47 .04 99 5f5a40 | .71 .07 98.2 aba16f | ||
text-disabled-on-surface-yellow-minimal | .76 .03 99 b6b29b | .61 .07 98.2 8d8456 | ||
surface-yellow-subtle | yellow-20 | yellow-90 | ||
surface-yellow-subtle-hover | .85 .15 98.2 e8ce49 | .48 .14 98.3 735c00 | ||
surface-yellow-subtle-active | .84 .16 98.1 e6cb34 | .52 .14 98.3 7f6800 | ||
text-primary-on-surface-yellow-subtle | .27 .06 99 2d2600 | .96 .09 98.3 fff3ab | ||
text-secondary-on-surface-yellow-subtle | .44 .07 99 5b5221 | .75 .09 98.3 bbad6a | ||
text-disabled-on-surface-yellow-subtle | .71 .08 99 aea368 | .66 .09 98.3 a1944f | ||
surface-yellow-moderate | yellow-40 | yellow-70 | ||
surface-yellow-moderate-hover | .77 .18 98.8 d2b400 | .59 .2 97.4 9f7900 | ||
surface-yellow-moderate-active | .76 .19 98.7 d1b000 | .62 .2 97.3 a98200 | ||
text-primary-on-surface-yellow-moderate | .24 .05 99 261f00 | 1 0 97.4 ffffff | ||
text-secondary-on-surface-yellow-moderate | .39 .09 99 524500 | 1 0 97.4 ffffff | ||
text-disabled-on-surface-yellow-moderate | .64 .1 99 9b8d3f | .73 .1 97.4 baa95c | ||
surface-yellow-strong | yellow-60 | yellow-50 | ||
surface-yellow-strong-hover | .86 .21 98.9 f4d000 | .84 .2 98.7 ecca00 | ||
surface-yellow-strong-active | .85 .22 98.8 f3cc00 | .81 .21 98.6 e5bf00 | ||
text-primary-on-surface-yellow-strong | .27 .06 99 2e2600 | .27 .06 99 2e2700 | ||
text-secondary-on-surface-yellow-strong | .44 .1 99 615300 | .45 .1 99 625400 | ||
text-disabled-on-surface-yellow-strong | .72 .1 99 b4a658 | .73 .1 99 b7a85b | ||
surface-yellow-contrast | yellow-90 | yellow-20 | ||
surface-yellow-contrast-hover | .45 .13 97.8 695400 | .83 .16 98 e3c72f | ||
surface-yellow-contrast-active | .48 .13 97.6 725c00 | .79 .18 97.9 dab900 | ||
text-primary-on-surface-yellow-contrast | .96 .09 97.8 fff2ab | .27 .06 99 2d2600 | ||
text-secondary-on-surface-yellow-contrast | .73 .08 97.8 b6a96a | .44 .07 99 5b5221 | ||
text-disabled-on-surface-yellow-contrast | .64 .08 97.8 9b8d4f | .71 .08 99 aea368 | ||
surface-yellow-main | yellow-30 | yellow-100 | ||
surface-yellow-main-hover | .81 .15 98.3 dac139 | .4 .1 98.2 564700 | ||
surface-yellow-main-active | .79 .16 98.2 d6ba15 | .45 .11 98.3 665500 | ||
text-primary-on-surface-yellow-main | .25 .06 99 292200 | .95 .11 98.2 fff19a | ||
text-secondary-on-surface-yellow-main | .41 .07 99 544b1a | .71 .07 98.2 aba16f | ||
text-disabled-on-surface-yellow-main | .67 .08 99 a2975c | .61 .07 98.2 8d8456 | ||
surface-amber-minimal | amber-10 | amber-100 | ||
surface-amber-minimal-hover | .91 .1 81.9 ffdb93 | .4 .1 8.2 634000 | ||
surface-amber-minimal-active | .89 .11 82.2 ffd484 | .45 .11 8.6 744d00 | ||
text-primary-on-surface-amber-minimal | .29 .06 82 392600 | .95 .05 8.2 ffeccc | ||
text-secondary-on-surface-amber-minimal | .47 .04 82 655840 | .71 .07 8.2 b79c6f | ||
text-disabled-on-surface-amber-minimal | .76 .03 82 bbb09b | .61 .07 8.2 987f56 | ||
surface-amber-subtle | amber-20 | amber-90 | ||
surface-amber-subtle-hover | .85 .15 82.6 fec348 | .48 .14 81 855100 | ||
surface-amber-subtle-active | .84 .16 82.9 fdbf32 | .52 .14 81.6 915d00 | ||
text-primary-on-surface-amber-subtle | .27 .06 82 342200 | .96 .04 81 ffefd3 | ||
text-secondary-on-surface-amber-subtle | .44 .07 82 644d20 | .75 .09 81 c9a76a | ||
text-disabled-on-surface-amber-subtle | .71 .08 82 bb9e67 | .66 .09 81 af8d4e | ||
surface-amber-moderate | amber-40 | amber-70 | ||
surface-amber-moderate-hover | .77 .18 82.3 eca600 | .59 .2 79.4 ba6700 | ||
surface-amber-moderate-active | .76 .18 82.4 e8a300 | .62 .2 79.6 c37100 | ||
text-primary-on-surface-amber-moderate | .24 .05 82 2b1c00 | 1 0 79.4 ffffff | ||
text-secondary-on-surface-amber-moderate | .39 .09 82 5d4000 | 1 0 79.4 ffffff | ||
text-disabled-on-surface-amber-moderate | .64 .1 82 aa863e | .73 .1 79.4 caa25c | ||
surface-amber-strong | amber-60 | amber-50 | ||
surface-amber-strong-hover | .8 .2 82 fcad00 | .79 .19 82.3 f6ab00 | ||
surface-amber-strong-active | .79 .21 81.9 fca800 | .76 .2 82.1 efa000 | ||
text-primary-on-surface-amber-strong | .25 .05 82 2d1e00 | .25 .06 82 2f1f00 | ||
text-secondary-on-surface-amber-strong | .41 .09 82 624300 | .41 .09 82 644400 | ||
text-disabled-on-surface-amber-strong | .66 .1 82 b28d46 | .67 .1 82 b59048 | ||
surface-amber-contrast | amber-90 | amber-20 | ||
surface-amber-contrast-hover | .45 .13 8.8 794a00 | .83 .16 83 f9bc2c | ||
surface-amber-contrast-active | .48 .13 81.2 825300 | .79 .18 83.3 f1ad00 | ||
text-primary-on-surface-amber-contrast | .96 .05 8.8 ffeecb | .27 .06 82 342200 | ||
text-secondary-on-surface-amber-contrast | .73 .08 8.8 c3a36a | .44 .07 82 644d20 | ||
text-disabled-on-surface-amber-contrast | .64 .08 8.8 a7884f | .71 .08 82 bb9e67 | ||
surface-amber-main | amber-30 | amber-100 | ||
surface-amber-main-hover | .81 .15 82.7 f0b737 | .4 .1 8.2 634000 | ||
surface-amber-main-active | .79 .16 82.9 ecaf10 | .45 .11 8.6 744d00 | ||
text-primary-on-surface-amber-main | .25 .05 82 2e1f01 | .95 .05 8.2 ffeccc | ||
text-secondary-on-surface-amber-main | .41 .07 82 5d4719 | .71 .07 8.2 b79c6f | ||
text-disabled-on-surface-amber-main | .67 .08 82 af915b | .61 .07 8.2 987f56 | ||
surface-orange-minimal | orange-10 | orange-100 | ||
surface-orange-minimal-hover | .91 .1 65.9 ffd49a | .4 .1 6.6 6d3800 | ||
surface-orange-minimal-active | .89 .11 67 ffcd8a | .45 .11 61 804400 | ||
text-primary-on-surface-orange-minimal | .29 .07 62 422000 | .95 .04 6.6 ffead6 | ||
text-secondary-on-surface-orange-minimal | .47 .04 62 6a5543 | .71 .07 6.6 c19774 | ||
text-disabled-on-surface-orange-minimal | .76 .03 62 c1ad9d | .61 .07 6.6 a07a5b | ||
surface-orange-subtle | orange-20 | orange-90 | ||
surface-orange-subtle-hover | .85 .15 64.3 ffb759 | .48 .14 62.3 934600 | ||
surface-orange-subtle-active | .84 .16 65.1 ffb248 | .52 .14 63 9f5200 | ||
text-primary-on-surface-orange-subtle | .27 .07 62 3d1c00 | .96 .03 62.3 ffeddc | ||
text-secondary-on-surface-orange-subtle | .44 .07 62 6d4827 | .75 .09 62.3 d5a071 | ||
text-disabled-on-surface-orange-subtle | .71 .08 62 c7976e | .66 .09 62.3 bb8656 | ||
surface-orange-moderate | orange-40 | orange-70 | ||
surface-orange-moderate-hover | .77 .18 63.2 ff9600 | .59 .21 6.6 d05000 | ||
surface-orange-moderate-active | .76 .19 63.6 ff9100 | .62 .21 61.6 da5b00 | ||
text-primary-on-surface-orange-moderate | .24 .06 62 331700 | 1 0 6.6 ffffff | ||
text-secondary-on-surface-orange-moderate | .39 .09 62 663902 | 1 0 6.6 ffffff | ||
text-disabled-on-surface-orange-moderate | .64 .1 62 b87e49 | .73 .1 6.6 d79a66 | ||
surface-orange-strong | orange-60 | orange-50 | ||
surface-orange-strong-hover | .75 .2 62.6 ff8a00 | .74 .19 63.7 fb8a00 | ||
surface-orange-strong-active | .74 .2 62.7 ff8700 | .71 .19 63.9 f08100 | ||
text-primary-on-surface-orange-strong | .23 .06 62 301500 | .23 .05 62 2f1701 | ||
text-secondary-on-surface-orange-strong | .38 .1 62 653300 | .38 .09 62 643600 | ||
text-disabled-on-surface-orange-strong | .62 .1 62 b07641 | .62 .1 62 b27944 | ||
surface-orange-contrast | orange-90 | orange-20 | ||
surface-orange-contrast-hover | .45 .14 62.4 893d00 | .83 .16 65.5 ffaf44 | ||
surface-orange-contrast-active | .48 .14 63.3 924600 | .79 .18 66.5 ff9f00 | ||
text-primary-on-surface-orange-contrast | .96 .03 62.4 ffecdc | .27 .07 62 3d1c00 | ||
text-secondary-on-surface-orange-contrast | .73 .09 62.4 d09c6d | .44 .07 62 6d4827 | ||
text-disabled-on-surface-orange-contrast | .64 .09 62.4 b58050 | .71 .08 62 c7976e | ||
surface-orange-main | orange-30 | orange-100 | ||
surface-orange-main-hover | .81 .15 64.2 ffaa4b | .4 .1 6.6 6d3800 | ||
surface-orange-main-active | .79 .16 65 ffa234 | .45 .11 61 804400 | ||
text-primary-on-surface-orange-main | .25 .06 62 361a00 | .95 .04 6.6 ffead6 | ||
text-secondary-on-surface-orange-main | .41 .07 62 654220 | .71 .07 6.6 c19774 | ||
text-disabled-on-surface-orange-main | .67 .08 62 ba8b62 | .61 .07 6.6 a07a5b | ||
surface-deeporange-minimal | deeporange-10 | deeporange-100 | ||
surface-deeporange-minimal-hover | .91 .09 5.3 ffd1ac | .4 .11 45.1 762f05 | ||
surface-deeporange-minimal-active | .89 .1 51.7 ffc89e | .45 .11 45.2 853e18 | ||
text-primary-on-surface-deeporange-minimal | .29 .09 45 4d1500 | .95 .03 45.1 ffeae0 | ||
text-secondary-on-surface-deeporange-minimal | .47 .04 45 6d5347 | .71 .07 45.1 c8927a | ||
text-disabled-on-surface-deeporange-minimal | .76 .03 45 c3aba1 | .61 .07 45.1 a8765f | ||
surface-deeporange-subtle | deeporange-20 | deeporange-90 | ||
surface-deeporange-subtle-hover | .85 .15 47.7 ffad73 | .48 .14 46.4 9a3d00 | ||
surface-deeporange-subtle-active | .84 .15 48.7 ffab6e | .52 .14 46.7 a7490a | ||
text-primary-on-surface-deeporange-subtle | .27 .08 45 441500 | .96 .02 46.4 feede6 | ||
text-secondary-on-surface-deeporange-subtle | .44 .07 45 714530 | .75 .09 46.4 dc9b7c | ||
text-disabled-on-surface-deeporange-subtle | .71 .08 45 cd9278 | .66 .09 46.4 c18162 | ||
surface-deeporange-moderate | deeporange-40 | deeporange-70 | ||
surface-deeporange-moderate-hover | .77 .18 46.6 ff8a41 | .59 .22 46.9 dd3b00 | ||
surface-deeporange-moderate-active | .76 .18 47.3 ff873b | .62 .21 49 e34e00 | ||
text-primary-on-surface-deeporange-moderate | .24 .07 45 391000 | .97 .02 46.9 fff1ea | ||
text-secondary-on-surface-deeporange-moderate | .39 .09 45 6b3418 | .8 .12 46.9 fda579 | ||
text-disabled-on-surface-deeporange-moderate | .64 .1 45 bf7858 | .73 .1 46.9 dd9572 | ||
surface-deeporange-strong | deeporange-60 | deeporange-50 | ||
surface-deeporange-strong-hover | .62 .24 46.6 f03a00 | .58 .23 44.9 de2d00 | ||
surface-deeporange-strong-active | .63 .23 48 ef4600 | .58 .23 44.8 de2d00 | ||
text-primary-on-surface-deeporange-strong | 1 0 46.6 ffffff | .18 .05 45 220800 | ||
text-secondary-on-surface-deeporange-strong | 1 0 46.6 ffffff | .29 .09 45 4c1800 | ||
text-disabled-on-surface-deeporange-strong | .75 .1 46.6 e49b78 | .47 .1 45 884727 | ||
surface-deeporange-contrast | deeporange-90 | deeporange-20 | ||
surface-deeporange-contrast-hover | .45 .14 46.8 903400 | .83 .16 49.3 ffa562 | ||
surface-deeporange-contrast-active | .48 .13 47.3 964104 | .79 .17 5.6 ff9648 | ||
text-primary-on-surface-deeporange-contrast | .96 .02 46.8 fdede5 | .27 .08 45 441500 | ||
text-secondary-on-surface-deeporange-contrast | .73 .09 46.8 d79778 | .44 .07 45 714530 | ||
text-disabled-on-surface-deeporange-contrast | .64 .09 46.8 bb7b5c | .71 .08 45 cd9278 | ||
surface-deeporange-main | deeporange-30 | deeporange-100 | ||
surface-deeporange-main-hover | .81 .15 47.7 ffa166 | .4 .11 45.1 762f05 | ||
surface-deeporange-main-active | .79 .15 48.7 ff9b5e | .45 .11 45.2 853e18 | ||
text-primary-on-surface-deeporange-main | .25 .08 45 3f1100 | .95 .03 45.1 ffeae0 | ||
text-secondary-on-surface-deeporange-main | .41 .07 45 6a3e2a | .71 .07 45.1 c8927a | ||
text-disabled-on-surface-deeporange-main | .67 .08 45 c0866d | .61 .07 45.1 a8765f | ||
surface-brown-minimal | brown-10 | brown-100 | ||
surface-brown-minimal-hover | .91 .06 50 ffd7be | .4 .06 50 623e29 | ||
surface-brown-minimal-active | .89 .06 50 fdd0b8 | .45 .06 50 704b36 | ||
text-primary-on-surface-brown-minimal | .29 .08 50 471b00 | .95 .02 50 feebe1 | ||
text-secondary-on-surface-brown-minimal | .47 .03 50 6a5448 | .71 .05 50 ba9885 | ||
text-disabled-on-surface-brown-minimal | .76 .02 50 beada4 | .61 .04 50 977d6f | ||
surface-brown-subtle | brown-20 | brown-90 | ||
surface-brown-subtle-hover | .85 .06 50 efc3ab | .48 .06 50 79543f | ||
surface-brown-subtle-active | .84 .06 50 ecc0a8 | .52 .06 50 855f49 | ||
text-primary-on-surface-brown-subtle | .27 .08 50 421600 | .96 .02 50 ffede3 | ||
text-secondary-on-surface-brown-subtle | .44 .03 50 624c40 | .75 .05 50 c7a491 | ||
text-disabled-on-surface-brown-subtle | .71 .02 50 af9e95 | .66 .04 50 a78c7e | ||
surface-brown-moderate | brown-40 | brown-70 | ||
surface-brown-moderate-hover | .77 .06 50 d5aa92 | .59 .06 50 9b735d | ||
surface-brown-moderate-active | .76 .06 50 d1a78f | .62 .06 50 a47c66 | ||
text-primary-on-surface-brown-moderate | .24 .07 50 381200 | 1 0 50 ffffff | ||
text-secondary-on-surface-brown-moderate | .39 .03 50 554035 | 1 0 50 ffffff | ||
text-disabled-on-surface-brown-moderate | .64 .02 50 99887f | .73 .04 50 bea293 | ||
surface-brown-strong | brown-60 | brown-50 | ||
surface-brown-strong-hover | .47 .1 5.3 864820 | .52 .09 5.2 925937 | ||
surface-brown-strong-active | .5 .1 5.3 905029 | .56 .09 5.3 9f6442 | ||
text-primary-on-surface-brown-strong | .96 .03 5.3 ffece1 | .96 .03 5.2 ffeee2 | ||
text-secondary-on-surface-brown-strong | .74 .07 5.3 cf9f84 | .76 .06 5.2 d5a78e | ||
text-disabled-on-surface-brown-strong | .66 .07 5.3 b2866d | .69 .06 5.2 b9917a | ||
surface-brown-contrast | brown-90 | brown-20 | ||
surface-brown-contrast-hover | .46 .06 50 734e39 | .83 .06 50 e8bda5 | ||
surface-brown-contrast-active | .48 .06 50 79543f | .79 .06 50 dbb099 | ||
text-primary-on-surface-brown-contrast | .96 .02 50 ffece2 | .27 .08 50 421600 | ||
text-secondary-on-surface-brown-contrast | .74 .05 50 c4a18e | .44 .03 50 624c40 | ||
text-disabled-on-surface-brown-contrast | .65 .04 50 a3887a | .71 .02 50 af9e95 | ||
surface-brown-main | brown-30 | brown-100 | ||
surface-brown-main-hover | .81 .06 50 e2b69f | .4 .06 50 623e29 | ||
surface-brown-main-active | .8 .06 50 deb39c | .45 .06 50 704b36 | ||
text-primary-on-surface-brown-main | .25 .07 50 3b1600 | .95 .02 50 feebe1 | ||
text-secondary-on-surface-brown-main | .41 .03 50 5b463a | .71 .05 50 ba9885 | ||
text-disabled-on-surface-brown-main | .67 .02 50 a39289 | .61 .04 50 977d6f | ||
surface-gray-minimal | gray-10 | gray-100 | ||
surface-gray-minimal-hover | .91 0 0 e1e1e1 | .4 0 0 484848 | ||
surface-gray-minimal-active | .89 0 0 dbdbdb | .45 0 0 555555 | ||
text-primary-on-surface-gray-minimal | .29 0 0 2a2a2a | .95 0 0 efefef | ||
text-secondary-on-surface-gray-minimal | .47 0 0 595959 | .71 0 0 a0a0a0 | ||
text-disabled-on-surface-gray-minimal | .76 0 0 b1b1b1 | .61 0 0 838383 | ||
surface-gray-subtle | gray-20 | gray-90 | ||
surface-gray-subtle-hover | .85 0 0 cecece | .48 0 0 5d5d5d | ||
surface-gray-subtle-active | .84 0 0 cacaca | .52 0 0 696969 | ||
text-primary-on-surface-gray-subtle | .27 0 0 262626 | .96 0 0 f1f1f1 | ||
text-secondary-on-surface-gray-subtle | .44 0 0 515151 | .75 0 0 acacac | ||
text-disabled-on-surface-gray-subtle | .71 0 0 a2a2a2 | .66 0 0 939393 | ||
surface-gray-moderate | gray-40 | gray-70 | ||
surface-gray-moderate-hover | .77 0 0 b4b4b4 | .59 0 0 7d7d7d | ||
surface-gray-moderate-active | .76 0 0 b1b1b1 | .62 0 0 868686 | ||
text-primary-on-surface-gray-moderate | .24 0 0 1f1f1f | 1 0 0 ffffff | ||
text-secondary-on-surface-gray-moderate | .39 0 0 454545 | 1 0 0 ffffff | ||
text-disabled-on-surface-gray-moderate | .64 0 0 8c8c8c | .73 0 0 a9a9a9 | ||
surface-gray-strong | gray-60 | gray-50 | ||
surface-gray-strong-hover | .5 0 0 636363 | .53 0 0 6c6c6c | ||
surface-gray-strong-active | .53 0 0 6c6c6c | .57 0 0 777777 | ||
text-primary-on-surface-gray-strong | .96 0 0 f2f2f2 | .96 0 0 f2f2f2 | ||
text-secondary-on-surface-gray-strong | .76 0 0 afafaf | .77 0 0 b4b4b4 | ||
text-disabled-on-surface-gray-strong | .68 0 0 979797 | .69 0 0 9d9d9d | ||
surface-gray-contrast | gray-90 | gray-20 | ||
surface-gray-contrast-hover | .46 0 0 585858 | .83 0 0 c7c7c7 | ||
surface-gray-contrast-active | .48 0 0 5d5d5d | .79 0 0 bababa | ||
text-primary-on-surface-gray-contrast | .96 0 0 f1f1f1 | .27 0 0 262626 | ||
text-secondary-on-surface-gray-contrast | .74 0 0 a9a9a9 | .44 0 0 515151 | ||
text-disabled-on-surface-gray-contrast | .65 0 0 8f8f8f | .71 0 0 a2a2a2 | ||
surface-gray-main | gray-30 | gray-100 | ||
surface-gray-main-hover | .81 0 0 c1c1c1 | .4 0 0 484848 | ||
surface-gray-main-active | .8 0 0 bebebe | .45 0 0 555555 | ||
text-primary-on-surface-gray-main | .25 0 0 222222 | .95 0 0 efefef | ||
text-secondary-on-surface-gray-main | .41 0 0 4b4b4b | .71 0 0 a0a0a0 | ||
text-disabled-on-surface-gray-main | .67 0 0 969696 | .61 0 0 838383 | ||
surface-silver-minimal | silver-10 | silver-100 | ||
surface-silver-minimal-hover | .94 0 0 ebebeb | .52 0 0 696969 | ||
surface-silver-minimal-active | .93 0 0 e8e8e8 | .57 0 0 777777 | ||
text-primary-on-surface-silver-minimal | .29 0 0 2b2b2b | .96 0 0 f2f2f2 | ||
text-secondary-on-surface-silver-minimal | .48 0 0 5c5c5c | .76 0 0 b2b2b2 | ||
text-disabled-on-surface-silver-minimal | .78 0 0 b6b6b6 | .69 0 0 9b9b9b | ||
surface-silver-subtle | silver-20 | silver-90 | ||
surface-silver-subtle-hover | .92 0 0 e4e4e4 | .59 0 0 7d7d7d | ||
surface-silver-subtle-active | .91 0 0 e1e1e1 | .63 0 0 898989 | ||
text-primary-on-surface-silver-subtle | .28 0 0 292929 | 1 0 0 ffffff | ||
text-secondary-on-surface-silver-subtle | .46 0 0 585858 | 1 0 0 ffffff | ||
text-disabled-on-surface-silver-subtle | .75 0 0 aeaeae | .73 0 0 a9a9a9 | ||
surface-silver-moderate | silver-40 | silver-70 | ||
surface-silver-moderate-hover | .86 0 0 d1d1d1 | .72 0 0 a4a4a4 | ||
surface-silver-moderate-active | .86 0 0 d1d1d1 | .72 0 0 a4a4a4 | ||
text-primary-on-surface-silver-moderate | .26 0 0 252525 | .22 0 0 1a1a1a | ||
text-secondary-on-surface-silver-moderate | .43 0 0 505050 | .35 0 0 3b3b3b | ||
text-disabled-on-surface-silver-moderate | .7 0 0 9f9f9f | .58 0 0 797979 | ||
surface-silver-strong | silver-60 | silver-50 | ||
surface-silver-strong-hover | .75 0 0 aeaeae | .77 0 0 b4b4b4 | ||
surface-silver-strong-active | .75 0 0 aeaeae | .76 0 0 b1b1b1 | ||
text-primary-on-surface-silver-strong | .23 0 0 1c1c1c | .23 0 0 1e1e1e | ||
text-secondary-on-surface-silver-strong | .37 0 0 3f3f3f | .38 0 0 434343 | ||
text-disabled-on-surface-silver-strong | .6 0 0 808080 | .62 0 0 878787 | ||
surface-silver-contrast | silver-90 | silver-20 | ||
surface-silver-contrast-hover | .56 0 0 747474 | .9 0 0 dedede | ||
surface-silver-contrast-active | .59 0 0 7d7d7d | .88 0 0 d7d7d7 | ||
text-primary-on-surface-silver-contrast | .96 0 0 f3f3f3 | .28 0 0 292929 | ||
text-secondary-on-surface-silver-contrast | .78 0 0 b9b9b9 | .46 0 0 585858 | ||
text-disabled-on-surface-silver-contrast | .71 0 0 a3a3a3 | .75 0 0 aeaeae | ||
surface-silver-main | silver-30 | silver-100 | ||
surface-silver-main-hover | .89 0 0 dbdbdb | .52 0 0 696969 | ||
surface-silver-main-active | .88 0 0 d7d7d7 | .57 0 0 777777 | ||
text-primary-on-surface-silver-main | .27 0 0 272727 | .96 0 0 f2f2f2 | ||
text-secondary-on-surface-silver-main | .45 0 0 545454 | .76 0 0 b2b2b2 | ||
text-disabled-on-surface-silver-main | .73 0 0 a7a7a7 | .69 0 0 9b9b9b | ||
surface-black-minimal | black-10 | black-100 | ||
surface-black-minimal-hover | .81 0 0 c1c1c1 | .29 0 0 2b2b2b | ||
surface-black-minimal-active | .79 0 0 bababa | .35 0 0 3a3a3a | ||
text-primary-on-surface-black-minimal | .26 0 0 242424 | .94 0 0 ececec | ||
text-secondary-on-surface-black-minimal | .43 0 0 4f4f4f | .65 0 0 909090 | ||
text-disabled-on-surface-black-minimal | .7 0 0 9d9d9d | .54 0 0 6e6e6e | ||
surface-black-subtle | black-20 | black-90 | ||
surface-black-subtle-hover | .74 0 0 ababab | .29 0 0 2b2b2b | ||
surface-black-subtle-active | .72 0 0 a4a4a4 | .35 0 0 3a3a3a | ||
text-primary-on-surface-black-subtle | .24 0 0 1e1e1e | .94 0 0 ececec | ||
text-secondary-on-surface-black-subtle | .39 0 0 444444 | .65 0 0 909090 | ||
text-disabled-on-surface-black-subtle | .63 0 0 8a8a8a | .54 0 0 6e6e6e | ||
surface-black-moderate | black-40 | black-70 | ||
surface-black-moderate-hover | .62 0 0 868686 | .39 0 0 454545 | ||
surface-black-moderate-active | .6 0 0 808080 | .43 0 0 505050 | ||
text-primary-on-surface-black-moderate | .2 0 0 151515 | .95 0 0 efefef | ||
text-secondary-on-surface-black-moderate | .32 0 0 323232 | .7 0 0 9f9f9f | ||
text-disabled-on-surface-black-moderate | .52 0 0 696969 | .6 0 0 818181 | ||
surface-black-strong | black-60 | black-50 | ||
surface-black-strong-hover | .21 0 0 181818 | .24 0 0 1f1f1f | ||
surface-black-strong-active | .25 0 0 222222 | .3 0 0 2e2e2e | ||
text-primary-on-surface-black-strong | .94 0 0 eaeaea | .94 0 0 ebebeb | ||
text-secondary-on-surface-black-strong | .61 0 0 848484 | .63 0 0 888888 | ||
text-disabled-on-surface-black-strong | .49 0 0 5f5f5f | .51 0 0 656565 | ||
surface-black-contrast | black-90 | black-20 | ||
surface-black-contrast-hover | .27 0 0 262626 | .71 0 0 a1a1a1 | ||
surface-black-contrast-active | .3 0 0 2e2e2e | .66 0 0 929292 | ||
text-primary-on-surface-black-contrast | .94 0 0 ececec | .24 0 0 1e1e1e | ||
text-secondary-on-surface-black-contrast | .64 0 0 8d8d8d | .39 0 0 444444 | ||
text-disabled-on-surface-black-contrast | .53 0 0 6a6a6a | .63 0 0 8a8a8a | ||
surface-black-main | black-30 | black-100 | ||
surface-black-main-hover | .68 0 0 989898 | .29 0 0 2b2b2b | ||
surface-black-main-active | .66 0 0 929292 | .35 0 0 3a3a3a | ||
text-primary-on-surface-black-main | .22 0 0 1a1a1a | .94 0 0 ececec | ||
text-secondary-on-surface-black-main | .35 0 0 3b3b3b | .65 0 0 909090 | ||
text-disabled-on-surface-black-main | .58 0 0 797979 | .54 0 0 6e6e6e |
Brand Surfaces
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
surface-brand-primary-minimal | surface-amber-minimal | ||
surface-brand-primary-minimal-hover | surface-amber-minimal-hover | ||
surface-brand-primary-minimal-active | surface-amber-minimal-active | ||
text-primary-on-surface-brand-primary-minimal | text-primary-on-surface-amber-minimal | ||
text-secondary-on-surface-brand-primary-minimal | text-secondary-on-surface-amber-minimal | ||
text-disabled-on-surface-brand-primary-minimal | text-disabled-on-surface-amber-minimal | ||
surface-brand-primary-subtle | surface-amber-subtle | ||
surface-brand-primary-subtle-hover | surface-amber-subtle-hover | ||
surface-brand-primary-subtle-active | surface-amber-subtle-active | ||
text-primary-on-surface-brand-primary-subtle | text-primary-on-surface-amber-subtle | ||
text-secondary-on-surface-brand-primary-subtle | text-secondary-on-surface-amber-subtle | ||
text-disabled-on-surface-brand-primary-subtle | text-disabled-on-surface-amber-subtle | ||
surface-brand-primary-moderate | surface-amber-moderate | ||
surface-brand-primary-moderate-hover | surface-amber-moderate-hover | ||
surface-brand-primary-moderate-active | surface-amber-moderate-active | ||
text-primary-on-surface-brand-primary-moderate | text-primary-on-surface-amber-moderate | ||
text-secondary-on-surface-brand-primary-moderate | text-secondary-on-surface-amber-moderate | ||
text-disabled-on-surface-brand-primary-moderate | text-disabled-on-surface-amber-moderate | ||
surface-brand-primary-strong | surface-amber-strong | ||
surface-brand-primary-strong-hover | surface-amber-strong-hover | ||
surface-brand-primary-strong-active | surface-amber-strong-active | ||
text-primary-on-surface-brand-primary-strong | text-primary-on-surface-amber-strong | ||
text-secondary-on-surface-brand-primary-strong | text-secondary-on-surface-amber-strong | ||
text-disabled-on-surface-brand-primary-strong | text-disabled-on-surface-amber-strong | ||
surface-brand-primary-contrast | surface-amber-contrast | ||
surface-brand-primary-contrast-hover | surface-amber-contrast-hover | ||
surface-brand-primary-contrast-active | surface-amber-contrast-active | ||
text-primary-on-surface-brand-primary-contrast | text-primary-on-surface-amber-contrast | ||
text-secondary-on-surface-brand-primary-contrast | text-secondary-on-surface-amber-contrast | ||
text-disabled-on-surface-brand-primary-contrast | text-disabled-on-surface-amber-contrast | ||
surface-brand-primary-main | surface-amber-main | ||
surface-brand-primary-main-hover | surface-amber-main-hover | ||
surface-brand-primary-main-active | surface-amber-main-active | ||
text-primary-on-surface-brand-primary-main | text-primary-on-surface-amber-main | ||
text-secondary-on-surface-brand-primary-main | text-secondary-on-surface-amber-main | ||
text-disabled-on-surface-brand-primary-main | text-disabled-on-surface-amber-main | ||
surface-brand-secondary-minimal | surface-pink-minimal | ||
surface-brand-secondary-minimal-hover | surface-pink-minimal-hover | ||
surface-brand-secondary-minimal-active | surface-pink-minimal-active | ||
text-primary-on-surface-brand-secondary-minimal | text-primary-on-surface-pink-minimal | ||
text-secondary-on-surface-brand-secondary-minimal | text-secondary-on-surface-pink-minimal | ||
text-disabled-on-surface-brand-secondary-minimal | text-disabled-on-surface-pink-minimal | ||
surface-brand-secondary-subtle | surface-pink-subtle | ||
surface-brand-secondary-subtle-hover | surface-pink-subtle-hover | ||
surface-brand-secondary-subtle-active | surface-pink-subtle-active | ||
text-primary-on-surface-brand-secondary-subtle | text-primary-on-surface-pink-subtle | ||
text-secondary-on-surface-brand-secondary-subtle | text-secondary-on-surface-pink-subtle | ||
text-disabled-on-surface-brand-secondary-subtle | text-disabled-on-surface-pink-subtle | ||
surface-brand-secondary-moderate | surface-pink-moderate | ||
surface-brand-secondary-moderate-hover | surface-pink-moderate-hover | ||
surface-brand-secondary-moderate-active | surface-pink-moderate-active | ||
text-primary-on-surface-brand-secondary-moderate | text-primary-on-surface-pink-moderate | ||
text-secondary-on-surface-brand-secondary-moderate | text-secondary-on-surface-pink-moderate | ||
text-disabled-on-surface-brand-secondary-moderate | text-disabled-on-surface-pink-moderate | ||
surface-brand-secondary-strong | surface-pink-strong | ||
surface-brand-secondary-strong-hover | surface-pink-strong-hover | ||
surface-brand-secondary-strong-active | surface-pink-strong-active | ||
text-primary-on-surface-brand-secondary-strong | text-primary-on-surface-pink-strong | ||
text-secondary-on-surface-brand-secondary-strong | text-secondary-on-surface-pink-strong | ||
text-disabled-on-surface-brand-secondary-strong | text-disabled-on-surface-pink-strong | ||
surface-brand-secondary-contrast | surface-pink-contrast | ||
surface-brand-secondary-contrast-hover | surface-pink-contrast-hover | ||
surface-brand-secondary-contrast-active | surface-pink-contrast-active | ||
text-primary-on-surface-brand-secondary-contrast | text-primary-on-surface-pink-contrast | ||
text-secondary-on-surface-brand-secondary-contrast | text-secondary-on-surface-pink-contrast | ||
text-disabled-on-surface-brand-secondary-contrast | text-disabled-on-surface-pink-contrast | ||
surface-brand-secondary-main | surface-pink-main | ||
surface-brand-secondary-main-hover | surface-pink-main-hover | ||
surface-brand-secondary-main-active | surface-pink-main-active | ||
text-primary-on-surface-brand-secondary-main | text-primary-on-surface-pink-main | ||
text-secondary-on-surface-brand-secondary-main | text-secondary-on-surface-pink-main | ||
text-disabled-on-surface-brand-secondary-main | text-disabled-on-surface-pink-main |
Status Surfaces
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
surface-status-error-minimal | surface-red-minimal | ||
surface-status-error-minimal-hover | surface-red-minimal-hover | ||
surface-status-error-minimal-active | surface-red-minimal-active | ||
text-primary-on-surface-status-error-minimal | text-primary-on-surface-red-minimal | ||
text-secondary-on-surface-status-error-minimal | text-secondary-on-surface-red-minimal | ||
text-disabled-on-surface-status-error-minimal | text-disabled-on-surface-red-minimal | ||
surface-status-error-subtle | surface-red-subtle | ||
surface-status-error-subtle-hover | surface-red-subtle-hover | ||
surface-status-error-subtle-active | surface-red-subtle-active | ||
text-primary-on-surface-status-error-subtle | text-primary-on-surface-red-subtle | ||
text-secondary-on-surface-status-error-subtle | text-secondary-on-surface-red-subtle | ||
text-disabled-on-surface-status-error-subtle | text-disabled-on-surface-red-subtle | ||
surface-status-error-moderate | surface-red-moderate | ||
surface-status-error-moderate-hover | surface-red-moderate-hover | ||
surface-status-error-moderate-active | surface-red-moderate-active | ||
text-primary-on-surface-status-error-moderate | text-primary-on-surface-red-moderate | ||
text-secondary-on-surface-status-error-moderate | text-secondary-on-surface-red-moderate | ||
text-disabled-on-surface-status-error-moderate | text-disabled-on-surface-red-moderate | ||
surface-status-error-strong | surface-red-strong | ||
surface-status-error-strong-hover | surface-red-strong-hover | ||
surface-status-error-strong-active | surface-red-strong-active | ||
text-primary-on-surface-status-error-strong | text-primary-on-surface-red-strong | ||
text-secondary-on-surface-status-error-strong | text-secondary-on-surface-red-strong | ||
text-disabled-on-surface-status-error-strong | text-disabled-on-surface-red-strong | ||
surface-status-error-contrast | surface-red-contrast | ||
surface-status-error-contrast-hover | surface-red-contrast-hover | ||
surface-status-error-contrast-active | surface-red-contrast-active | ||
text-primary-on-surface-status-error-contrast | text-primary-on-surface-red-contrast | ||
text-secondary-on-surface-status-error-contrast | text-secondary-on-surface-red-contrast | ||
text-disabled-on-surface-status-error-contrast | text-disabled-on-surface-red-contrast | ||
surface-status-error-main | surface-red-main | ||
surface-status-error-main-hover | surface-red-main-hover | ||
surface-status-error-main-active | surface-red-main-active | ||
text-primary-on-surface-status-error-main | text-primary-on-surface-red-main | ||
text-secondary-on-surface-status-error-main | text-secondary-on-surface-red-main | ||
text-disabled-on-surface-status-error-main | text-disabled-on-surface-red-main | ||
surface-status-warning-minimal | surface-amber-minimal | ||
surface-status-warning-minimal-hover | surface-amber-minimal-hover | ||
surface-status-warning-minimal-active | surface-amber-minimal-active | ||
text-primary-on-surface-status-warning-minimal | text-primary-on-surface-amber-minimal | ||
text-secondary-on-surface-status-warning-minimal | text-secondary-on-surface-amber-minimal | ||
text-disabled-on-surface-status-warning-minimal | text-disabled-on-surface-amber-minimal | ||
surface-status-warning-subtle | surface-amber-subtle | ||
surface-status-warning-subtle-hover | surface-amber-subtle-hover | ||
surface-status-warning-subtle-active | surface-amber-subtle-active | ||
text-primary-on-surface-status-warning-subtle | text-primary-on-surface-amber-subtle | ||
text-secondary-on-surface-status-warning-subtle | text-secondary-on-surface-amber-subtle | ||
text-disabled-on-surface-status-warning-subtle | text-disabled-on-surface-amber-subtle | ||
surface-status-warning-moderate | surface-amber-moderate | ||
surface-status-warning-moderate-hover | surface-amber-moderate-hover | ||
surface-status-warning-moderate-active | surface-amber-moderate-active | ||
text-primary-on-surface-status-warning-moderate | text-primary-on-surface-amber-moderate | ||
text-secondary-on-surface-status-warning-moderate | text-secondary-on-surface-amber-moderate | ||
text-disabled-on-surface-status-warning-moderate | text-disabled-on-surface-amber-moderate | ||
surface-status-warning-strong | surface-amber-strong | ||
surface-status-warning-strong-hover | surface-amber-strong-hover | ||
surface-status-warning-strong-active | surface-amber-strong-active | ||
text-primary-on-surface-status-warning-strong | text-primary-on-surface-amber-strong | ||
text-secondary-on-surface-status-warning-strong | text-secondary-on-surface-amber-strong | ||
text-disabled-on-surface-status-warning-strong | text-disabled-on-surface-amber-strong | ||
surface-status-warning-contrast | surface-amber-contrast | ||
surface-status-warning-contrast-hover | surface-amber-contrast-hover | ||
surface-status-warning-contrast-active | surface-amber-contrast-active | ||
text-primary-on-surface-status-warning-contrast | text-primary-on-surface-amber-contrast | ||
text-secondary-on-surface-status-warning-contrast | text-secondary-on-surface-amber-contrast | ||
text-disabled-on-surface-status-warning-contrast | text-disabled-on-surface-amber-contrast | ||
surface-status-warning-main | surface-amber-main | ||
surface-status-warning-main-hover | surface-amber-main-hover | ||
surface-status-warning-main-active | surface-amber-main-active | ||
text-primary-on-surface-status-warning-main | text-primary-on-surface-amber-main | ||
text-secondary-on-surface-status-warning-main | text-secondary-on-surface-amber-main | ||
text-disabled-on-surface-status-warning-main | text-disabled-on-surface-amber-main | ||
surface-status-success-minimal | surface-green-minimal | ||
surface-status-success-minimal-hover | surface-green-minimal-hover | ||
surface-status-success-minimal-active | surface-green-minimal-active | ||
text-primary-on-surface-status-success-minimal | text-primary-on-surface-green-minimal | ||
text-secondary-on-surface-status-success-minimal | text-secondary-on-surface-green-minimal | ||
text-disabled-on-surface-status-success-minimal | text-disabled-on-surface-green-minimal | ||
surface-status-success-subtle | surface-green-subtle | ||
surface-status-success-subtle-hover | surface-green-subtle-hover | ||
surface-status-success-subtle-active | surface-green-subtle-active | ||
text-primary-on-surface-status-success-subtle | text-primary-on-surface-green-subtle | ||
text-secondary-on-surface-status-success-subtle | text-secondary-on-surface-green-subtle | ||
text-disabled-on-surface-status-success-subtle | text-disabled-on-surface-green-subtle | ||
surface-status-success-moderate | surface-green-moderate | ||
surface-status-success-moderate-hover | surface-green-moderate-hover | ||
surface-status-success-moderate-active | surface-green-moderate-active | ||
text-primary-on-surface-status-success-moderate | text-primary-on-surface-green-moderate | ||
text-secondary-on-surface-status-success-moderate | text-secondary-on-surface-green-moderate | ||
text-disabled-on-surface-status-success-moderate | text-disabled-on-surface-green-moderate | ||
surface-status-success-strong | surface-green-strong | ||
surface-status-success-strong-hover | surface-green-strong-hover | ||
surface-status-success-strong-active | surface-green-strong-active | ||
text-primary-on-surface-status-success-strong | text-primary-on-surface-green-strong | ||
text-secondary-on-surface-status-success-strong | text-secondary-on-surface-green-strong | ||
text-disabled-on-surface-status-success-strong | text-disabled-on-surface-green-strong | ||
surface-status-success-contrast | surface-green-contrast | ||
surface-status-success-contrast-hover | surface-green-contrast-hover | ||
surface-status-success-contrast-active | surface-green-contrast-active | ||
text-primary-on-surface-status-success-contrast | text-primary-on-surface-green-contrast | ||
text-secondary-on-surface-status-success-contrast | text-secondary-on-surface-green-contrast | ||
text-disabled-on-surface-status-success-contrast | text-disabled-on-surface-green-contrast | ||
surface-status-success-main | surface-green-main | ||
surface-status-success-main-hover | surface-green-main-hover | ||
surface-status-success-main-active | surface-green-main-active | ||
text-primary-on-surface-status-success-main | text-primary-on-surface-green-main | ||
text-secondary-on-surface-status-success-main | text-secondary-on-surface-green-main | ||
text-disabled-on-surface-status-success-main | text-disabled-on-surface-green-main | ||
surface-status-information-minimal | surface-blue-minimal | ||
surface-status-information-minimal-hover | surface-blue-minimal-hover | ||
surface-status-information-minimal-active | surface-blue-minimal-active | ||
text-primary-on-surface-status-information-minimal | text-primary-on-surface-blue-minimal | ||
text-secondary-on-surface-status-information-minimal | text-secondary-on-surface-blue-minimal | ||
text-disabled-on-surface-status-information-minimal | text-disabled-on-surface-blue-minimal | ||
surface-status-information-subtle | surface-blue-subtle | ||
surface-status-information-subtle-hover | surface-blue-subtle-hover | ||
surface-status-information-subtle-active | surface-blue-subtle-active | ||
text-primary-on-surface-status-information-subtle | text-primary-on-surface-blue-subtle | ||
text-secondary-on-surface-status-information-subtle | text-secondary-on-surface-blue-subtle | ||
text-disabled-on-surface-status-information-subtle | text-disabled-on-surface-blue-subtle | ||
surface-status-information-moderate | surface-blue-moderate | ||
surface-status-information-moderate-hover | surface-blue-moderate-hover | ||
surface-status-information-moderate-active | surface-blue-moderate-active | ||
text-primary-on-surface-status-information-moderate | text-primary-on-surface-blue-moderate | ||
text-secondary-on-surface-status-information-moderate | text-secondary-on-surface-blue-moderate | ||
text-disabled-on-surface-status-information-moderate | text-disabled-on-surface-blue-moderate | ||
surface-status-information-strong | surface-blue-strong | ||
surface-status-information-strong-hover | surface-blue-strong-hover | ||
surface-status-information-strong-active | surface-blue-strong-active | ||
text-primary-on-surface-status-information-strong | text-primary-on-surface-blue-strong | ||
text-secondary-on-surface-status-information-strong | text-secondary-on-surface-blue-strong | ||
text-disabled-on-surface-status-information-strong | text-disabled-on-surface-blue-strong | ||
surface-status-information-contrast | surface-blue-contrast | ||
surface-status-information-contrast-hover | surface-blue-contrast-hover | ||
surface-status-information-contrast-active | surface-blue-contrast-active | ||
text-primary-on-surface-status-information-contrast | text-primary-on-surface-blue-contrast | ||
text-secondary-on-surface-status-information-contrast | text-secondary-on-surface-blue-contrast | ||
text-disabled-on-surface-status-information-contrast | text-disabled-on-surface-blue-contrast | ||
surface-status-information-main | surface-blue-main | ||
surface-status-information-main-hover | surface-blue-main-hover | ||
surface-status-information-main-active | surface-blue-main-active | ||
text-primary-on-surface-status-information-main | text-primary-on-surface-blue-main | ||
text-secondary-on-surface-status-information-main | text-secondary-on-surface-blue-main | ||
text-disabled-on-surface-status-information-main | text-disabled-on-surface-blue-main |
Rights Surfaces
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
surface-rights-required-minimal | surface-yellow-minimal | ||
surface-rights-required-minimal-hover | surface-yellow-minimal-hover | ||
surface-rights-required-minimal-active | surface-yellow-minimal-active | ||
text-primary-on-surface-rights-required-minimal | text-primary-on-surface-yellow-minimal | ||
text-secondary-on-surface-rights-required-minimal | text-secondary-on-surface-yellow-minimal | ||
text-disabled-on-surface-rights-required-minimal | text-disabled-on-surface-yellow-minimal | ||
surface-rights-required-subtle | surface-yellow-subtle | ||
surface-rights-required-subtle-hover | surface-yellow-subtle-hover | ||
surface-rights-required-subtle-active | surface-yellow-subtle-active | ||
text-primary-on-surface-rights-required-subtle | text-primary-on-surface-yellow-subtle | ||
text-secondary-on-surface-rights-required-subtle | text-secondary-on-surface-yellow-subtle | ||
text-disabled-on-surface-rights-required-subtle | text-disabled-on-surface-yellow-subtle | ||
surface-rights-required-moderate | surface-yellow-moderate | ||
surface-rights-required-moderate-hover | surface-yellow-moderate-hover | ||
surface-rights-required-moderate-active | surface-yellow-moderate-active | ||
text-primary-on-surface-rights-required-moderate | text-primary-on-surface-yellow-moderate | ||
text-secondary-on-surface-rights-required-moderate | text-secondary-on-surface-yellow-moderate | ||
text-disabled-on-surface-rights-required-moderate | text-disabled-on-surface-yellow-moderate | ||
surface-rights-required-strong | surface-yellow-strong | ||
surface-rights-required-strong-hover | surface-yellow-strong-hover | ||
surface-rights-required-strong-active | surface-yellow-strong-active | ||
text-primary-on-surface-rights-required-strong | text-primary-on-surface-yellow-strong | ||
text-secondary-on-surface-rights-required-strong | text-secondary-on-surface-yellow-strong | ||
text-disabled-on-surface-rights-required-strong | text-disabled-on-surface-yellow-strong | ||
surface-rights-required-contrast | surface-yellow-contrast | ||
surface-rights-required-contrast-hover | surface-yellow-contrast-hover | ||
surface-rights-required-contrast-active | surface-yellow-contrast-active | ||
text-primary-on-surface-rights-required-contrast | text-primary-on-surface-yellow-contrast | ||
text-secondary-on-surface-rights-required-contrast | text-secondary-on-surface-yellow-contrast | ||
text-disabled-on-surface-rights-required-contrast | text-disabled-on-surface-yellow-contrast | ||
surface-rights-required-main | surface-yellow-main | ||
surface-rights-required-main-hover | surface-yellow-main-hover | ||
surface-rights-required-main-active | surface-yellow-main-active | ||
text-primary-on-surface-rights-required-main | text-primary-on-surface-yellow-main | ||
text-secondary-on-surface-rights-required-main | text-secondary-on-surface-yellow-main | ||
text-disabled-on-surface-rights-required-main | text-disabled-on-surface-yellow-main | ||
surface-rights-postponed-required-minimal | surface-orange-minimal | ||
surface-rights-postponed-required-minimal-hover | surface-orange-minimal-hover | ||
surface-rights-postponed-required-minimal-active | surface-orange-minimal-active | ||
text-primary-on-surface-rights-postponed-required-minimal | text-primary-on-surface-orange-minimal | ||
text-secondary-on-surface-rights-postponed-required-minimal | text-secondary-on-surface-orange-minimal | ||
text-disabled-on-surface-rights-postponed-required-minimal | text-disabled-on-surface-orange-minimal | ||
surface-rights-postponed-required-subtle | surface-orange-subtle | ||
surface-rights-postponed-required-subtle-hover | surface-orange-subtle-hover | ||
surface-rights-postponed-required-subtle-active | surface-orange-subtle-active | ||
text-primary-on-surface-rights-postponed-required-subtle | text-primary-on-surface-orange-subtle | ||
text-secondary-on-surface-rights-postponed-required-subtle | text-secondary-on-surface-orange-subtle | ||
text-disabled-on-surface-rights-postponed-required-subtle | text-disabled-on-surface-orange-subtle | ||
surface-rights-postponed-required-moderate | surface-orange-moderate | ||
surface-rights-postponed-required-moderate-hover | surface-orange-moderate-hover | ||
surface-rights-postponed-required-moderate-active | surface-orange-moderate-active | ||
text-primary-on-surface-rights-postponed-required-moderate | text-primary-on-surface-orange-moderate | ||
text-secondary-on-surface-rights-postponed-required-moderate | text-secondary-on-surface-orange-moderate | ||
text-disabled-on-surface-rights-postponed-required-moderate | text-disabled-on-surface-orange-moderate | ||
surface-rights-postponed-required-strong | surface-orange-strong | ||
surface-rights-postponed-required-strong-hover | surface-orange-strong-hover | ||
surface-rights-postponed-required-strong-active | surface-orange-strong-active | ||
text-primary-on-surface-rights-postponed-required-strong | text-primary-on-surface-orange-strong | ||
text-secondary-on-surface-rights-postponed-required-strong | text-secondary-on-surface-orange-strong | ||
text-disabled-on-surface-rights-postponed-required-strong | text-disabled-on-surface-orange-strong | ||
surface-rights-postponed-required-contrast | surface-orange-contrast | ||
surface-rights-postponed-required-contrast-hover | surface-orange-contrast-hover | ||
surface-rights-postponed-required-contrast-active | surface-orange-contrast-active | ||
text-primary-on-surface-rights-postponed-required-contrast | text-primary-on-surface-orange-contrast | ||
text-secondary-on-surface-rights-postponed-required-contrast | text-secondary-on-surface-orange-contrast | ||
text-disabled-on-surface-rights-postponed-required-contrast | text-disabled-on-surface-orange-contrast | ||
surface-rights-postponed-required-main | surface-orange-main | ||
surface-rights-postponed-required-main-hover | surface-orange-main-hover | ||
surface-rights-postponed-required-main-active | surface-orange-main-active | ||
text-primary-on-surface-rights-postponed-required-main | text-primary-on-surface-orange-main | ||
text-secondary-on-surface-rights-postponed-required-main | text-secondary-on-surface-orange-main | ||
text-disabled-on-surface-rights-postponed-required-main | text-disabled-on-surface-orange-main | ||
surface-rights-recommended-minimal | surface-aqua-minimal | ||
surface-rights-recommended-minimal-hover | surface-aqua-minimal-hover | ||
surface-rights-recommended-minimal-active | surface-aqua-minimal-active | ||
text-primary-on-surface-rights-recommended-minimal | text-primary-on-surface-aqua-minimal | ||
text-secondary-on-surface-rights-recommended-minimal | text-secondary-on-surface-aqua-minimal | ||
text-disabled-on-surface-rights-recommended-minimal | text-disabled-on-surface-aqua-minimal | ||
surface-rights-recommended-subtle | surface-aqua-subtle | ||
surface-rights-recommended-subtle-hover | surface-aqua-subtle-hover | ||
surface-rights-recommended-subtle-active | surface-aqua-subtle-active | ||
text-primary-on-surface-rights-recommended-subtle | text-primary-on-surface-aqua-subtle | ||
text-secondary-on-surface-rights-recommended-subtle | text-secondary-on-surface-aqua-subtle | ||
text-disabled-on-surface-rights-recommended-subtle | text-disabled-on-surface-aqua-subtle | ||
surface-rights-recommended-moderate | surface-aqua-moderate | ||
surface-rights-recommended-moderate-hover | surface-aqua-moderate-hover | ||
surface-rights-recommended-moderate-active | surface-aqua-moderate-active | ||
text-primary-on-surface-rights-recommended-moderate | text-primary-on-surface-aqua-moderate | ||
text-secondary-on-surface-rights-recommended-moderate | text-secondary-on-surface-aqua-moderate | ||
text-disabled-on-surface-rights-recommended-moderate | text-disabled-on-surface-aqua-moderate | ||
surface-rights-recommended-strong | surface-aqua-strong | ||
surface-rights-recommended-strong-hover | surface-aqua-strong-hover | ||
surface-rights-recommended-strong-active | surface-aqua-strong-active | ||
text-primary-on-surface-rights-recommended-strong | text-primary-on-surface-aqua-strong | ||
text-secondary-on-surface-rights-recommended-strong | text-secondary-on-surface-aqua-strong | ||
text-disabled-on-surface-rights-recommended-strong | text-disabled-on-surface-aqua-strong | ||
surface-rights-recommended-contrast | surface-aqua-contrast | ||
surface-rights-recommended-contrast-hover | surface-aqua-contrast-hover | ||
surface-rights-recommended-contrast-active | surface-aqua-contrast-active | ||
text-primary-on-surface-rights-recommended-contrast | text-primary-on-surface-aqua-contrast | ||
text-secondary-on-surface-rights-recommended-contrast | text-secondary-on-surface-aqua-contrast | ||
text-disabled-on-surface-rights-recommended-contrast | text-disabled-on-surface-aqua-contrast | ||
surface-rights-recommended-main | surface-aqua-main | ||
surface-rights-recommended-main-hover | surface-aqua-main-hover | ||
surface-rights-recommended-main-active | surface-aqua-main-active | ||
text-primary-on-surface-rights-recommended-main | text-primary-on-surface-aqua-main | ||
text-secondary-on-surface-rights-recommended-main | text-secondary-on-surface-aqua-main | ||
text-disabled-on-surface-rights-recommended-main | text-disabled-on-surface-aqua-main |
Borders
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
border-subtle | .2 .1 82 / .1 2b0c001a | .8 .03 82 / .12 c7bca81f | ||
border-subtle-inverted | .8 .03 82 / .12 c7bca81f | .2 .1 82 / .1 2b0c001a | ||
border | .2 .1 82 / .2 2b0c0033 | .8 .03 82 / .24 c7bca83d | ||
border-inverted | .8 .03 82 / .24 c7bca83d | .2 .1 82 / .2 2b0c0033 | ||
border-strong | .2 .1 82 / .3 2b0c004d | .8 .03 82 / .32 c7bca852 | ||
border-strong-inverted | .8 .03 82 / .32 c7bca852 | .2 .1 82 / .3 2b0c004d | ||
border-contrast | .2 .1 82 / .5 2b0c0080 | .8 .03 82 / .54 c7bca88a | ||
border-contrast-inverted | .8 .03 82 / .54 c7bca88a | .2 .1 82 / .5 2b0c0080 | ||
border-shiny | 1 0 82 / .36 ffffff5c | 1 0 82 / .08 ffffff14 | ||
border-shiny-inverted | 1 0 82 / .08 ffffff14 | 1 0 82 / .36 ffffff5c | ||
border-variant | .2 .1 82 / .2 2b0c0033 | .2 .03 82 / .9 1d1506e6 | ||
border-variant-inverted | .2 .03 82 / .9 1d1506e6 | .2 .1 82 / .2 2b0c0033 |
Elevation
| Token | ☀️ | Value | ☾ | Value |
|---|---|---|---|---|
elevation-subtle | 0 1px 1px oklch(0.1 0.04 82 / 0.06), 0 1px 2px oklch(0.1 0.04 82 / 0.04) | 0 1px 1px oklch(0 0.04 82 / 0.06), 0 1px 2px oklch(0 0.04 82 / 0.04) | ||
elevation | 0 1px 2px oklch(0.1 0.04 82 / 0.1), 0 3px 5px -1px oklch(0.1 0.04 82 / 0.08) | 0 1px 2px oklch(0 0.04 82 / 0.1), 0 3px 5px -1px oklch(0 0.04 82 / 0.08) | ||
elevation-strong | 0 8px 24px oklch(0.1 0.04 82 / 0.16), 0 8px 24px -3px oklch(0.1 0.04 82 / 0.28) | 0 8px 24px oklch(0 0.04 82 / 0.16), 0 8px 24px -3px oklch(0 0.04 82 / 0.28) | ||
elevation-extreme | 0 20px 48px oklch(0.1 0.04 82 / 0.2), 0 20px 48px -5px oklch(0.1 0.04 82 / 0.32) | 0 20px 48px oklch(0 0.04 82 / 0.2), 0 20px 48px -5px oklch(0 0.04 82 / 0.32) |
Embossment
| Token | ☀️ | Value | ☾ | Value |
|---|---|---|---|---|
embossment | inset 0 2px 3px -1px oklch(0.1 0.04 82 / 0.1) | inset 0 2px 3px -1px oklch(0 0.04 82 / 0.1) |
Glow
| Token | ☀️ | Value | ☾ | Value |
|---|---|---|---|---|
glow-red | 0 4px 6px oklch(0.8 0.14 28 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 28 / 0.4) | 0 4px 6px oklch(0.54 0.2 28 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 28 / 0.6) | ||
glow-red-strong | 0 8px 24px oklch(0.8 0.14 28 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 28 / 0.56) | 0 8px 24px oklch(0.54 0.2 28 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 28 / 0.84) | ||
glow-red-up | 0 -3px 4px -1px oklch(0.8 0.14 28 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 28 / 1) | ||
glow-pink | 0 4px 6px oklch(0.8 0.14 0 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 0 / 0.4) | 0 4px 6px oklch(0.54 0.2 0 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 0 / 0.6) | ||
glow-pink-strong | 0 8px 24px oklch(0.8 0.14 0 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 0 / 0.56) | 0 8px 24px oklch(0.54 0.2 0 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 0 / 0.84) | ||
glow-pink-up | 0 -3px 4px -1px oklch(0.8 0.14 0 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 0 / 1) | ||
glow-fuchsia | 0 4px 6px oklch(0.8 0.14 325 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 325 / 0.4) | 0 4px 6px oklch(0.54 0.2 325 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 325 / 0.6) | ||
glow-fuchsia-strong | 0 8px 24px oklch(0.8 0.14 325 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 325 / 0.56) | 0 8px 24px oklch(0.54 0.2 325 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 325 / 0.84) | ||
glow-fuchsia-up | 0 -3px 4px -1px oklch(0.8 0.14 325 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 325 / 1) | ||
glow-deeppurple | 0 4px 6px oklch(0.8 0.14 298 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 298 / 0.4) | 0 4px 6px oklch(0.54 0.2 298 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 298 / 0.6) | ||
glow-deeppurple-strong | 0 8px 24px oklch(0.8 0.14 298 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 298 / 0.56) | 0 8px 24px oklch(0.54 0.2 298 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 298 / 0.84) | ||
glow-deeppurple-up | 0 -3px 4px -1px oklch(0.8 0.14 298 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 298 / 1) | ||
glow-navy | 0 4px 6px oklch(0.8 0.14 266 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 266 / 0.4) | 0 4px 6px oklch(0.54 0.2 266 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 266 / 0.6) | ||
glow-navy-strong | 0 8px 24px oklch(0.8 0.14 266 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 266 / 0.56) | 0 8px 24px oklch(0.54 0.2 266 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 266 / 0.84) | ||
glow-navy-up | 0 -3px 4px -1px oklch(0.8 0.14 266 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 266 / 1) | ||
glow-blue | 0 4px 6px oklch(0.8 0.14 250 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 250 / 0.4) | 0 4px 6px oklch(0.54 0.2 250 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 250 / 0.6) | ||
glow-blue-strong | 0 8px 24px oklch(0.8 0.14 250 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 250 / 0.56) | 0 8px 24px oklch(0.54 0.2 250 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 250 / 0.84) | ||
glow-blue-up | 0 -3px 4px -1px oklch(0.8 0.14 250 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 250 / 1) | ||
glow-lightblue | 0 4px 6px oklch(0.8 0.14 230 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 230 / 0.4) | 0 4px 6px oklch(0.54 0.2 230 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 230 / 0.6) | ||
glow-lightblue-strong | 0 8px 24px oklch(0.8 0.14 230 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 230 / 0.56) | 0 8px 24px oklch(0.54 0.2 230 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 230 / 0.84) | ||
glow-lightblue-up | 0 -3px 4px -1px oklch(0.8 0.14 230 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 230 / 1) | ||
glow-aqua | 0 4px 6px oklch(0.8 0.14 205 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 205 / 0.4) | 0 4px 6px oklch(0.54 0.2 205 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 205 / 0.6) | ||
glow-aqua-strong | 0 8px 24px oklch(0.8 0.14 205 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 205 / 0.56) | 0 8px 24px oklch(0.54 0.2 205 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 205 / 0.84) | ||
glow-aqua-up | 0 -3px 4px -1px oklch(0.8 0.14 205 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 205 / 1) | ||
glow-teal | 0 4px 6px oklch(0.8 0.14 175 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 175 / 0.4) | 0 4px 6px oklch(0.54 0.2 175 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 175 / 0.6) | ||
glow-teal-strong | 0 8px 24px oklch(0.8 0.14 175 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 175 / 0.56) | 0 8px 24px oklch(0.54 0.2 175 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 175 / 0.84) | ||
glow-teal-up | 0 -3px 4px -1px oklch(0.8 0.14 175 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 175 / 1) | ||
glow-green | 0 4px 6px oklch(0.8 0.14 146 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 146 / 0.4) | 0 4px 6px oklch(0.54 0.2 146 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 146 / 0.6) | ||
glow-green-strong | 0 8px 24px oklch(0.8 0.14 146 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 146 / 0.56) | 0 8px 24px oklch(0.54 0.2 146 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 146 / 0.84) | ||
glow-green-up | 0 -3px 4px -1px oklch(0.8 0.14 146 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 146 / 1) | ||
glow-lightgreen | 0 4px 6px oklch(0.8 0.14 135 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 135 / 0.4) | 0 4px 6px oklch(0.54 0.2 135 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 135 / 0.6) | ||
glow-lightgreen-strong | 0 8px 24px oklch(0.8 0.14 135 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 135 / 0.56) | 0 8px 24px oklch(0.54 0.2 135 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 135 / 0.84) | ||
glow-lightgreen-up | 0 -3px 4px -1px oklch(0.8 0.14 135 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 135 / 1) | ||
glow-lime | 0 4px 6px oklch(0.8 0.14 128 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 128 / 0.4) | 0 4px 6px oklch(0.54 0.2 128 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 128 / 0.6) | ||
glow-lime-strong | 0 8px 24px oklch(0.8 0.14 128 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 128 / 0.56) | 0 8px 24px oklch(0.54 0.2 128 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 128 / 0.84) | ||
glow-lime-up | 0 -3px 4px -1px oklch(0.8 0.14 128 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 128 / 1) | ||
glow-yellow | 0 4px 6px oklch(0.8 0.14 99 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 99 / 0.4) | 0 4px 6px oklch(0.54 0.2 99 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 99 / 0.6) | ||
glow-yellow-strong | 0 8px 24px oklch(0.8 0.14 99 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 99 / 0.56) | 0 8px 24px oklch(0.54 0.2 99 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 99 / 0.84) | ||
glow-yellow-up | 0 -3px 4px -1px oklch(0.8 0.14 99 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 99 / 1) | ||
glow-amber | 0 4px 6px oklch(0.8 0.14 82 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 82 / 0.4) | 0 4px 6px oklch(0.54 0.2 82 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 82 / 0.6) | ||
glow-amber-strong | 0 8px 24px oklch(0.8 0.14 82 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 82 / 0.56) | 0 8px 24px oklch(0.54 0.2 82 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 82 / 0.84) | ||
glow-amber-up | 0 -3px 4px -1px oklch(0.8 0.14 82 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 82 / 1) | ||
glow-orange | 0 4px 6px oklch(0.8 0.14 62 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 62 / 0.4) | 0 4px 6px oklch(0.54 0.2 62 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 62 / 0.6) | ||
glow-orange-strong | 0 8px 24px oklch(0.8 0.14 62 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 62 / 0.56) | 0 8px 24px oklch(0.54 0.2 62 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 62 / 0.84) | ||
glow-orange-up | 0 -3px 4px -1px oklch(0.8 0.14 62 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 62 / 1) | ||
glow-deeporange | 0 4px 6px oklch(0.8 0.14 45 / 0.24), 0 4px 6px -2px oklch(0.8 0.14 45 / 0.4) | 0 4px 6px oklch(0.54 0.2 45 / 0.36), 0 4px 6px -2px oklch(0.54 0.2 45 / 0.6) | ||
glow-deeporange-strong | 0 8px 24px oklch(0.8 0.14 45 / 0.32), 0 8px 24px -3px oklch(0.8 0.14 45 / 0.56) | 0 8px 24px oklch(0.54 0.2 45 / 0.48), 0 8px 24px -3px oklch(0.54 0.2 45 / 0.84) | ||
glow-deeporange-up | 0 -3px 4px -1px oklch(0.8 0.14 45 / 1) | 0 -3px 4px -1px oklch(0.54 0.2 45 / 1) | ||
glow-brown | 0 4px 6px oklch(0.8 0.03 50 / 0.24), 0 4px 6px -2px oklch(0.8 0.03 50 / 0.4) | 0 4px 6px oklch(0.54 0.03 50 / 0.36), 0 4px 6px -2px oklch(0.54 0.03 50 / 0.6) | ||
glow-brown-strong | 0 8px 24px oklch(0.8 0.03 50 / 0.32), 0 8px 24px -3px oklch(0.8 0.03 50 / 0.56) | 0 8px 24px oklch(0.54 0.03 50 / 0.48), 0 8px 24px -3px oklch(0.54 0.03 50 / 0.84) | ||
glow-brown-up | 0 -3px 4px -1px oklch(0.8 0.03 50 / 1) | 0 -3px 4px -1px oklch(0.54 0.03 50 / 1) | ||
glow-gray | 0 4px 6px oklch(0.8 0 0 / 0.24), 0 4px 6px -2px oklch(0.8 0 0 / 0.4) | 0 4px 6px oklch(0.54 0 0 / 0.36), 0 4px 6px -2px oklch(0.54 0 0 / 0.6) | ||
glow-gray-strong | 0 8px 24px oklch(0.8 0 0 / 0.32), 0 8px 24px -3px oklch(0.8 0 0 / 0.56) | 0 8px 24px oklch(0.54 0 0 / 0.48), 0 8px 24px -3px oklch(0.54 0 0 / 0.84) | ||
glow-gray-up | 0 -3px 4px -1px oklch(0.8 0 0 / 1) | 0 -3px 4px -1px oklch(0.54 0 0 / 1) | ||
glow-silver | 0 4px 6px oklch(0.88 0 0 / 0.24), 0 4px 6px -2px oklch(0.88 0 0 / 0.4) | 0 4px 6px oklch(0.72 0 0 / 0.36), 0 4px 6px -2px oklch(0.72 0 0 / 0.6) | ||
glow-silver-strong | 0 8px 24px oklch(0.88 0 0 / 0.32), 0 8px 24px -3px oklch(0.88 0 0 / 0.56) | 0 8px 24px oklch(0.72 0 0 / 0.48), 0 8px 24px -3px oklch(0.72 0 0 / 0.84) | ||
glow-silver-up | 0 -3px 4px -1px oklch(0.88 0 0 / 1) | 0 -3px 4px -1px oklch(0.72 0 0 / 1) | ||
glow-black | 0 4px 6px oklch(0.65 0 0 / 0.24), 0 4px 6px -2px oklch(0.65 0 0 / 0.4) | 0 4px 6px oklch(0.32 0 0 / 0.36), 0 4px 6px -2px oklch(0.32 0 0 / 0.6) | ||
glow-black-strong | 0 8px 24px oklch(0.65 0 0 / 0.32), 0 8px 24px -3px oklch(0.65 0 0 / 0.56) | 0 8px 24px oklch(0.32 0 0 / 0.48), 0 8px 24px -3px oklch(0.32 0 0 / 0.84) | ||
glow-black-up | 0 -3px 4px -1px oklch(0.65 0 0 / 1) | 0 -3px 4px -1px oklch(0.32 0 0 / 1) |
Glow Brand
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
glow-brand-primary | glow-amber | ||
glow-brand-primary-strong | glow-amber-strong | ||
glow-brand-primary-up | glow-amber-up | ||
glow-brand-secondary | glow-pink | ||
glow-brand-secondary-strong | glow-pink-strong | ||
glow-brand-secondary-up | glow-pink-up |
Glow Status
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
glow-status-error | glow-red | ||
glow-status-error-strong | glow-red-strong | ||
glow-status-error-up | glow-red-up | ||
glow-status-warning | glow-amber | ||
glow-status-warning-strong | glow-amber-strong | ||
glow-status-warning-up | glow-amber-up | ||
glow-status-success | glow-green | ||
glow-status-success-strong | glow-green-strong | ||
glow-status-success-up | glow-green-up | ||
glow-status-information | glow-blue | ||
glow-status-information-strong | glow-blue-strong | ||
glow-status-information-up | glow-blue-up |
Glow Rights
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
glow-rights-required | glow-yellow | ||
glow-rights-required-strong | glow-yellow-strong | ||
glow-rights-required-up | glow-yellow-up | ||
glow-rights-postponed-required | glow-orange | ||
glow-rights-postponed-required-strong | glow-orange-strong | ||
glow-rights-postponed-required-up | glow-orange-up | ||
glow-rights-recommended | glow-aqua | ||
glow-rights-recommended-strong | glow-aqua-strong | ||
glow-rights-recommended-up | glow-aqua-up |
Text Colors
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
text-red | .51 .22 28 c50000 | .76 .2 28 ff7465 | ||
text-red-variant | .61 .22 28 ea312b | .65 .2 28 f14f43 | ||
text-pink | .51 .22 0 be0061 | .82 .2 0 ff84bf | ||
text-pink-variant | .61 .22 0 e22e7e | .65 .2 0 e94b8a | ||
text-fuchsia | .51 .2 325 9b2ba3 | .79 .18 325 f38ef9 | ||
text-fuchsia-variant | .61 .2 325 bc4dc3 | .65 .18 325 c462ca | ||
text-deeppurple | .5 .19 298 733fbf | .75 .17 298 bc93ff | ||
text-deeppurple-variant | .6 .19 298 905fe1 | .64 .17 298 9a71e4 | ||
text-navy | .4 .16 266 1f3c9c | .74 .14 266 81a7ff | ||
text-navy-variant | .55 .16 266 456ace | .63 .14 266 6185dd | ||
text-blue | .49 .2 250 005ecb | .73 .18 250 39acff | ||
text-blue-variant | .58 .2 250 007bea | .63 .18 250 008cf0 | ||
text-lightblue | .48 .19 230 0069b2 | .81 .17 230 00d3ff | ||
text-lightblue-variant | .57 .19 230 0086d0 | .62 .17 230 0095d7 | ||
text-aqua | .47 .18 205 00728a | .77 .16 205 00d0e4 | ||
text-aqua-variant | .56 .18 205 008ea6 | .61 .16 205 009cb0 | ||
text-teal | .47 .12 175 006f57 | .72 .12 175 39bda0 | ||
text-teal-variant | .57 .12 175 008e73 | .61 .12 175 009a7f | ||
text-green | .46 .22 146 007300 | .71 .2 146 2dc04b | ||
text-green-variant | .56 .22 146 009200 | .61 .2 146 00a027 | ||
text-lightgreen | .47 .17 135 276d00 | .84 .15 135 9fe079 | ||
text-lightgreen-variant | .57 .17 135 468c00 | .64 .15 135 629f39 | ||
text-lime | .47 .16 128 406900 | .75 .14 128 94be58 | ||
text-lime-variant | .57 .16 128 5b8700 | .62 .14 128 6d952c | ||
text-yellow | .49 .18 99 7b5d00 | .91 .16 99 fce253 | ||
text-yellow-variant | .58 .18 99 967800 | .71 .16 99 bba100 | ||
text-amber | .49 .17 82 8f5000 | .84 .15 82 fbc044 | ||
text-amber-variant | .59 .17 82 ae6f00 | .64 .15 82 b98000 | ||
text-orange | .5 .16 62 a04600 | .78 .14 62 f6a14f | ||
text-orange-variant | .59 .16 62 be6100 | .64 .14 62 c77618 | ||
text-deeporange | .51 .22 45 c11000 | .75 .2 45 ff7b26 | ||
text-deeporange-variant | .6 .22 45 e23d00 | .65 .2 45 ec5a00 | ||
text-brown | .42 .07 50 6c4128 | .74 .07 50 d09e83 | ||
text-brown-variant | .57 .07 50 996b52 | .63 .07 50 ac7d63 | ||
text-gray | .45 0 0 555555 | .73 0 0 a8a8a8 | ||
text-gray-variant | .58 0 0 7a7a7a | .63 0 0 898989 | ||
text-silver | .49 0 0 606060 | .78 0 0 b7b7b7 | ||
text-silver-variant | .58 0 0 7a7a7a | .63 0 0 898989 | ||
text-black | .01 0 0 000000 | .73 0 0 a8a8a8 | ||
text-black-variant | .16 0 0 0d0d0d | .63 0 0 898989 |
Neutral Text Colors
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
text-primary | .02 0 82 000000 | .98 0 82 f8f8f8 | ||
text-primary-variant | .35 0 82 3a3a3a | .85 0 82 cecece | ||
text-secondary | .49 0 82 606060 | .73 0 82 a8a8a8 | ||
text-secondary-variant | .6 0 82 808080 | .63 0 82 898989 | ||
text-disabled | .68 0 82 989898 | .53 0 82 6c6c6c | ||
text-disabled-variant | .68 0 82 989898 | .53 0 82 6c6c6c |
Brand Text Colors
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
text-brand-primary | text-amber | ||
text-brand-primary-variant | text-amber-variant | ||
text-brand-secondary | text-pink | ||
text-brand-secondary-variant | text-pink-variant |
Status Text Colors
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
text-status-error | text-red | ||
text-status-error-variant | text-red-variant | ||
text-status-warning | text-amber | ||
text-status-warning-variant | text-amber-variant | ||
text-status-success | text-green | ||
text-status-success-variant | text-green-variant | ||
text-status-information | text-blue | ||
text-status-information-variant | text-blue-variant |
Rights Text Colors
| Token | ☀️ | ☾ | Value |
|---|---|---|---|
text-rights-required | text-yellow | ||
text-rights-required-variant | text-yellow-variant | ||
text-rights-postponed-required | text-orange | ||
text-rights-postponed-required-variant | text-orange-variant | ||
text-rights-recommended | text-aqua | ||
text-rights-recommended-variant | text-aqua-variant |
Overlays
| Token | ☀️ | Oklch, Hex | ☾ | Oklch, Hex |
|---|---|---|---|---|
overlay-subtle | .2 .1 82 / .2 2b0c0033 | .8 .03 82 / .15 c7bca826 | ||
overlay | .2 .1 82 / .4 2b0c0066 | .8 .03 82 / .3 c7bca84d | ||
overlay-strong | .2 .1 82 / .6 2b0c0099 | .8 .03 82 / .5 c7bca880 |
Spacing
| Token | Value | |
|---|---|---|
base-h | 4px | |
base | 8px | |
base-1h | 12px | |
base-2 | 16px | |
base-2h | 20px | |
base-3 | 24px | |
base-4 | 32px | |
base-5 | 40px | |
base-6 | 48px | |
base-7 | 56px | |
base-8 | 64px | |
base-9 | 72px | |
base-10 | 80px |
Radius
| Token | Value | |
|---|---|---|
radius-subtle | 4px | |
radius | 6px | |
radius-strong | 12px | |
radius-circle | 10000px |