Tokeny
Představují systematický přístup k organizaci dílčích částí designu, jako jsou barvy, typografie, stíny a další vizuální prvky. Jsou klíčovým stavebním kamenem pro vytváření konzistentního a lépe udržitelného designu, který může být rychle a efektivně implementován napříč různými částmi aplikace.
Token si lze zjednodušeně představit jako dvojici klíč-hodnota. Pokud je hodnotou skutečně hodnota, nazýváme takový token globální. Pokud je hodnotou odkaz na jiný token, nazýváme jej sémantický, jelikož již nereprezentuje hodnotu jako takovou, ale má svůj abstraktní význam.
Globální
Zpravidla se jedná o definici barvy, zaoblení rohu, velikost textu, specifikaci nastavení variabilního fontu, tloušťku rámečku, rozostření nebo offset stínu. Cokoliv. V kontextu design systému hodnoty nikdy nepoužíváme. Vždy je potřeba hodnotu navázat nejprve na globální token, se kterým se už dá dále pracovat – pojmenovat nebo referencovat.
Použití referencí nám dává pružnost budoucích verzích Spectra měnit odstíny barev. Ať už se za barvou yellow-50 z obrázku výše skrývá cokoliv, bude tato hodnota vždy aktuální a bude korespondovat s našimi rozhodnutími ohledně designu. Jak jsme již zmínili, hodnoty se přímo nepoužívají.
Sémantické
Další výhodou tvoření tokenů pomocí odkazování na jiné tokeny je například možnost úpravy barevného schématu – brandingu. Každá aplikace využívající Spectro obarvuje hlavní grafické prvky pomocí primární a sekundární barvy. Jsme schopni tak vytvořit další úroveň sémantických tokenů, která nám umožní odprosit se od nutnosti pamatovat si konkrétní barvy.
Zároveň tak můžeme velmi jednoduše dát každé aplikaci jiný look & feel. Ostrá aplikace může mít schéma modrá-zelená (dle přání nebo brand manuálu zákazníka), testovací modrá-oranžová a vývojová například zelená-modrá. Díky brand tokenům a Motivu je odlišení aplikací snadná záležitost.
Praxe
Spectro hojně využívá sémantické tokeny navázané na jiné sémantické tokeny, abychom zajistili srozumitelné názvosloví a lepší developer experience. Samotné komponenty pak ve většině případů využívají právě tyto tokeny.
Kompletní seznam
Version-------Spectro: 1.2TEAF: 24.01, 24.02
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 |