Tokens
Surfaces and text
--bgoklch(15% 0.007 210)--paneloklch(17.7% 0.008 210)--raisedoklch(21.4% 0.010 210)--lineoklch(24% 0.011 210)--borderoklch(28% 0.012 210)--control-borderoklch(52% 0.012 210)--mutedoklch(63% 0.012 210)--softoklch(80% 0.008 210)--fgoklch(96% 0.005 210)Meaning
--greenoklch(79% 0.132 158)--upoklch(80% 0.11 230)--downoklch(73% 0.16 48)--goldoklch(86.6% 0.126 90)Titles
--godoklch(100% 0 0)--god-creamoklch(97% 0.04 93)--god-rimoklch(93.7% 0.086 92)--demioklch(48.6% 0.185 28)--demi-hioklch(62.6% 0.182 32)--demi-deepoklch(36.4% 0.149 29)--demi-darkoklch(24% 0.026 11)Rank tiers
--t-rookieoklch(82% 0.07 185)--t-apprenticeoklch(68% 0.11 50)--t-masteroklch(86% 0.15 100)--t-grandmasteroklch(76% 0.16 70)--t-ascendantoklch(70% 0.15 265)--t-championoklch(68% 0.2 22)--t-sovereignoklch(69% 0.19 305)Shape and depth
panel
raised
shadow-float
scrim
| Token | Value |
|---|---|
--r | 6px |
--r-chip | 4px |
--shadow-float | 0 8px 24px oklch(5% 0.01 210 / 0.55), 0 2px 6px oklch(5% 0.01 210 / 0.4) |
--scrim | oklch(5% 0.01 210 / 0.6) |
Type
| Token | Value |
|---|---|
--font | Saira, system-ui, sans-serif |
--display-size | 2.4rem |
--display-weight | 750 |
--display-width | 78% |
--heading-size | 1.4rem |
--heading-weight | 700 |
--heading-width | 80% |
--title-size | 1.05rem |
--title-weight | 650 |
--title-width | 85% |
--body-size | 0.9rem |
--body-weight | 400 |
--body-width | 100% |
--label-size | 0.64rem |
--label-weight | 700 |
--label-width | 75% |
--label-tracking | 0.16em |
Motion
| Token | Value |
|---|---|
--slash-duration | 0.55s |
--slash-ease | cubic-bezier(0.2, 0.8, 0.2, 1) |
--count-duration | 0.6s |
--count-ease | ease-out |
--delta-duration | 0.5s |
--delta-delay | 0.15s |
--fade-duration | 0.1s |