# Design Tokens for Website

This document outlines the design tokens defined in the `Tokens.xlsx` file, including global tokens (base values) and web system tokens (specific to Tailwind CSS integration). The tokens are organized into two sections corresponding to the Excel sheets: `Global tokens` and `Web sys tokens`.

## Global Tokens

The `Global tokens` sheet defines foundational design tokens, including colors, transparency, angles, typography, ratios, radii, borders, spacing, and breakpoints. These serve as the base values referenced by other tokens.

| Type        | Token                          | Value                                  | 移动端约定值 | 有调整会标黄 | 新增会标蓝 | 可不录入的文字会变红 |
|-------------|--------------------------------|----------------------------------------|--------------|--------------|------------|----------------------|
| color       | glo.color.orange.0             | #FFECDE                               |              |              |            |                      |
|             | glo.color.orange.10            | #FFD7B8                               |              |              |            |                      |
|             | glo.color.orange.20            | #FFBF8F                               |              |              |            |                      |
|             | glo.color.orange.30            | #FFA264                               |              |              |            |                      |
|             | glo.color.orange.40            | #FD8239                               |              |              |            |                      |
|             | glo.color.orange.50            | #F25E0F                               |              |              |            |                      |
|             | glo.color.orange.60            | #D04500                               |              |              |            |                      |
|             | glo.color.orange.70            | #A83400                               |              |              |            |                      |
|             | glo.color.orange.80            | #7B2300                               |              |              |            |                      |
|             | glo.color.orange.90            | #4D1400                               |              |              |            |                      |
|             | glo.color.yellow.0             | #FFF8DE                               |              |              |            |                      |
|             | glo.color.yellow.10            | #FFEFB3                               |              |              |            |                      |
|             | glo.color.yellow.20            | #FFE386                               |              |              |            |                      |
|             | glo.color.yellow.30            | #FCD258                               |              |              |            |                      |
|             | glo.color.yellow.40            | #F3BC2A                               |              |              |            |                      |
|             | glo.color.yellow.50            | #E6A100                               |              |              |            |                      |
|             | glo.color.yellow.60            | #C78800                               |              |              |            |                      |
|             | glo.color.yellow.70            | #A26B00                               |              |              |            |                      |
|             | glo.color.yellow.80            | #784D00                               |              |              |            |                      |
|             | glo.color.yellow.90            | #4D2F00                               |              |              |            |                      |
|             | glo.color.grass.0              | #F8FFDE                               |              |              |            |                      |
|             | glo.color.grass.10             | #EDFCB8                               |              |              |            |                      |
|             | glo.color.grass.20             | #E0F68F                               |              |              |            |                      |
|             | glo.color.grass.30             | #CFED67                               |              |              |            |                      |
|             | glo.color.grass.40             | #BAE041                               |              |              |            |                      |
|             | glo.color.grass.50             | #A0CD1E                               |              |              |            |                      |
|             | glo.color.grass.60             | #82B500                               |              |              |            |                      |
|             | glo.color.grass.70             | #689600                               |              |              |            |                      |
|             | glo.color.grass.80             | #4B7200                               |              |              |            |                      |
|             | glo.color.grass.90             | #304D00                               |              |              |            |                      |
|             | glo.color.green.0              | #DEFFE7                               |              |              |            |                      |
|             | glo.color.green.10             | #B9FCCD                               |              |              |            |                      |
|             | glo.color.green.20             | #94F7B1                               |              |              |            |                      |
|             | glo.color.green.30             | #6FEE96                               |              |              |            |                      |
|             | glo.color.green.40             | #4AE27B                               |              |              |            |                      |
|             | glo.color.green.50             | #28D061                               |              |              |            |                      |
|             | glo.color.green.60             | #0BB84A                               |              |              |            |                      |
|             | glo.color.green.70             | #00983C                               |              |              |            |                      |
|             | glo.color.green.80             | #007331                               |              |              |            |                      |
|             | glo.color.green.90             | #004D22                               |              |              |            |                      |
|             | glo.color.mint.0               | #DEFFF8                               |              |              |            |                      |
|             | glo.color.mint.10              | #B6FBED                               |              |              |            |                      |
|             | glo.color.mint.20              | #8DF3E2                               |              |              |            |                      |
|             | glo.color.mint.30              | #65E9D5                               |              |              |            |                      |
|             | glo.color.mint.40              | #3FDAC4                               |              |              |            |                      |
|             | glo.color.mint.50              | #1DC7B0                               |              |              |            |                      |
|             | glo.color.mint.60              | #00AD96                               |              |              |            |                      |
|             | glo.color.mint.70              | #009182                               |              |              |            |                      |
|             | glo.color.mint.80              | #006F67                               |              |              |            |                      |
|             | glo.color.mint.90              | #004D49                               |              |              |            |                      |
|             | glo.color.sky.0                | #DEECFF                               |              |              |            |                      |
|             | glo.color.sky.10               | #B5D2FD                               |              |              |            |                      |
|             | glo.color.sky.20               | #8CB5F9                               |              |              |            |                      |
|             | glo.color.sky.30               | #6296F2                               |              |              |            |                      |
|             | glo.color.sky.40               | #3A76E6                               |              |              |            |                      |
|             | glo.color.sky.50               | #1E58D2                               |              |              |            |                      |
|             | glo.color.sky.60               | #063BB8                               |              |              |            |                      |
|             | glo.color.sky.70               | #002A98                               |              |              |            |                      |
|             | glo.color.sky.80               | #001E73                               |              |              |            |                      |
|             | glo.color.sky.90               | #00134D                               |              |              |            |                      |
|             | glo.color.blue.0               | #DEE0FF                               |              |              |            |                      |
|             | glo.color.blue.10              | #BCBEFF                               |              |              |            |                      |
|             | glo.color.blue.20              | #9797FF                               |              |              |            |                      |
|             | glo.color.blue.30              | #7370FF                               |              |              |            |                      |
|             | glo.color.blue.40              | #4E48FF                               |              |              |            |                      |
|             | glo.color.blue.50              | #3126E6                               |              |              |            |                      |
|             | glo.color.blue.60              | #180AC7                               |              |              |            |                      |
|             | glo.color.blue.70              | #0F00A2                               |              |              |            |                      |
|             | glo.color.blue.80              | #0D0078                               |              |              |            |                      |
|             | glo.color.blue.90              | #09004D                               |              |              |            |                      |
|             | glo.color.violet.0             | #E4DEFF                               |              |              |            |                      |
|             | glo.color.violet.10            | #C7B7FD                               |              |              |            |                      |
|             | glo.color.violet.20            | #AA90F9                               |              |              |            |                      |
|             | glo.color.violet.30            | #8D68F2                               |              |              |            |                      |
|             | glo.color.violet.40            | #7B47FF                               |              |              |            |                      |
|             | glo.color.violet.50            | #5923D2                               |              |              |            |                      |
|             | glo.color.violet.60            | #4309B8                               |              |              |            |                      |
|             | glo.color.violet.70            | #340098                               |              |              |            |                      |
|             | glo.color.violet.80            | #290073                               |              |              |            |                      |
|             | glo.color.violet.90            | #1C004D                               |              |              |            |                      |
|             | glo.color.purple.0             | #FBDEFF                               |              |              |            |                      |
|             | glo.color.purple.10            | #F2B7FD                               |              |              |            |                      |
|             | glo.color.purple.20            | #E690F9                               |              |              |            |                      |
|             | glo.color.purple.30            | #D668F2                               |              |              |            |                      |
|             | glo.color.purple.40            | #C241E6                               |              |              |            |                      |
|             | glo.color.purple.50            | #A823D2                               |              |              |            |                      |
|             | glo.color.purple.60            | #8A09B8                               |              |              |            |                      |
|             | glo.color.purple.70            | #6E0098                               |              |              |            |                      |
|             | glo.color.purple.80            | #520073                               |              |              |            |                      |
|             | glo.color.purple.90            | #36004D                               |              |              |            |                      |
|             | glo.color.magenta.0            | #FBDEFF                               |              |              |            |                      |
|             | glo.color.magenta.10           | #FDB6D3                               |              |              |            |                      |
|             | glo.color.magenta.20           | #F98DBC                               |              |              |            |                      |
|             | glo.color.magenta.30           | #F264A4                               |              |              |            |                      |
|             | glo.color.magenta.40           | #E63C8B                               |              |              |            |                      |
|             | glo.color.magenta.50           | #D21F77                               |              |              |            |                      |
|             | glo.color.magenta.60           | #B80761                               |              |              |            |                      |
|             | glo.color.magenta.70           | #980050                               |              |              |            |                      |
|             | glo.color.magenta.80           | #73003E                               |              |              |            |                      |
|             | glo.color.magenta.90           | #4D002A                               |              |              |            |                      |
|             | glo.color.red.0                | #FFDEDE                               |              |              |            |                      |
|             | glo.color.red.10               | #FFBCBC                               |              |              |            |                      |
|             | glo.color.red.20               | #FF9696                               |              |              |            |                      |
|             | glo.color.red.30               | #F97372                               |              |              |            |                      |
|             | glo.color.red.40               | #EF4E4D                               |              |              |            |                      |
|             | glo.color.red.50               | #E12A2A                               |              |              |            |                      |
|             | glo.color.red.60               | #C2110E                               |              |              |            |                      |
|             | glo.color.red.70               | #A00700                               |              |              |            |                      |
|             | glo.color.red.80               | #770800                               |              |              |            |                      |
|             | glo.color.red.90               | #4D0600                               |              |              |            |                      |
|             | glo.color.grey.0               | #E8E4EB                               |              |              |            |                      |
|             | glo.color.grey.10              | #D4D0D8                               |              |              |            |                      |
|             | glo.color.grey.20              | #AAA3B1                               |              |              |            |                      |
|             | glo.color.grey.30              | #958E9E                               |              |              |            |                      |
|             | glo.color.grey.40              | #847D8B                               |              |              |            |                      |
|             | glo.color.grey.50              | #706A78                               |              |              |            |                      |
|             | glo.color.grey.60              | #5C5565                               |              |              |            |                      |
|             | glo.color.grey.70              | #484151                               |              |              |            |                      |
|             | glo.color.grey.80              | #352E3E                               |              |              |            |                      |
|             | glo.color.grey.90              | #282233                               |              |              |            |                      |
|             | glo.color.grey.100             | #211A2B                               |              |              |            |                      |
|             | glo.color.white                | #FFFFFF                               |              |              |            |                      |
|             | glo.color.black                | #000000                               |              |              |            |                      |
| Transparent | glo.transparent.t0             | 0                                     |              |              |            |                      |
|             | glo.transparent.t2             | 0.02                                  |              |              |            |                      |
|             | glo.transparent.t4             | 0.04                                  |              |              |            |                      |
|             | glo.transparent.t6             | 0.06                                  |              |              |            |                      |
|             | glo.transparent.t8             | 0.08                                  |              |              |            |                      |
|             | glo.transparent.t12            | 0.12                                  |              |              |            |                      |
|             | glo.transparent.t15            | 0.15                                  |              |              |            |                      |
|             | glo.transparent.t20            | 0.2                                   |              |              |            |                      |
|             | glo.transparent.t25            | 0.25                                  |              |              |            |                      |
|             | glo.transparent.t30            | 0.3                                   |              |              |            |                      |
|             | glo.transparent.t45            | 0.45                                  |              |              |            |                      |
|             | glo.transparent.t65            | 0.65                                  |              |              |            |                      |
|             | glo.transparent.t85            | 0.85                                  |              |              |            |                      |
| Degree      | glo.deg.ltr                    | to Right                              |              |              |            |                      |
|             | glo.deg.ttb                    | to Bottom                             |              |              |            |                      |
|             | glo.deg.lttrb                  | to Bottom Right                       |              |              |            |                      |
| Typeface    | glo.font.family.sys            | Poppins                               |              |              |            |                      |
|             | glo.font.family.numDisplay     | DIN Alternate                         |              |              |            |                      |
|             | glo.font.family.num            | Poppins                               |              |              |            |                      |
|             | glo.font.family.display        | Oleo Script Swash Caps                |              |              |            |                      |
|             | glo.font.style.italic          | Italic                                |              |              |            |                      |
|             | glo.font.size.64               | 64                                    |              |              |            |                      |
|             | glo.font.size.48               | 48                                    |              |              |            |                      |
|             | glo.font.size.36               | 36                                    |              |              |            |                      |
|             | glo.font.size.24               | 24                                    |              |              |            |                      |
|             | glo.font.size.20               | 20                                    |              |              |            |                      |
|             | glo.font.size.18               | 18                                    |              |              |            |                      |
|             | glo.font.size.16               | 16                                    |              |              |            |                      |
|             | glo.font.size.14               | 14                                    |              |              |            |                      |
|             | glo.font.size.12               | 12                                    |              |              |            |                      |
|             | glo.font.weight.regular        | 400                                   |              |              |            |                      |
|             | glo.font.weight.medium         | 500                                   |              |              |            |                      |
|             | glo.font.weight.semibold       | 600                                   |              |              |            |                      |
|             | glo.font.weight.bold           | 700                                   |              |              |            |                      |
|             | glo.font.lineheight.size64     | 80px                                  |              |              |            |                      |
|             | glo.font.lineheight.size48     | 56px                                  |              |              |            |                      |
|             | glo.font.lineheight.size36     | 48px                                  |              |              |            |                      |
|             | glo.font.lineheight.size24     | 28px                                  |              |              |            |                      |
|             | glo.font.lineheight.size20     | 24px                                  |              |              |            |                      |
|             | glo.font.lineheight.size18     | 24px                                  |              |              |            |                      |
|             | glo.font.lineheight.size16     | 24px                                  |              |              |            |                      |
|             | glo.font.lineheight.size14     | 20px                                  |              |              |            |                      |
|             | glo.font.lineheight.size12     | 20px                                  |              |              |            |                      |
|             | glo.font.lineheight.size0      | 1                                     |              |              |            |                      |
| radio       | glo.radio.1.1                  | 1:1                                   |              |              |            |                      |
|             | glo.radio.4.3                  | 4:3                                   |              |              |            |                      |
|             | glo.radio.3.2                  | 3:2                                   |              |              |            |                      |
|             | glo.radio.2.1                  | 2:1                                   |              |              |            |                      |
|             | glo.radio.16.9                 | 16:9                                  |              |              |            |                      |
| radius      | glo.radius.4                   | 4                                     |              |              |            |                      |
|             | glo.radius.8                   | 8                                     |              |              |            |                      |
|             | glo.radius.12                  | 12                                    |              |              |            |                      |
|             | glo.radius.16                  | 16                                    |              |              |            |                      |
|             | glo.radius.24                  | 24                                    |              |              |            |                      |
|             | glo.radius.round               | 0.5                                   |              |              |            |                      |
| border      | glo.border.1                   | 1px                                   |              |              |            |                      |
|             | glo.border.2                   | 2px                                   |              |              |            |                      |
|             | glo.border.4                   | 4px                                   |              |              |            |                      |
| space       | glo.spacing.4                  | 4px                                   |              |              |            |                      |
|             | glo.spacing.8                  | 8px                                   |              |              |            |                      |
|             | glo.spacing.12                 | 12px                                  |              |              |            |                      |
|             | glo.spacing.16                 | 16px                                  |              |              |            |                      |
|             | glo.spacing.24                 | 24px                                  |              |              |            |                      |
|             | glo.spacing.32                 | 32px                                  |              |              |            |                      |
|             | glo.spacing.48                 | 48px                                  |              |              |            |                      |
|             | glo.spacing.64                 | 64px                                  |              |              |            |                      |
|             | glo.spacing.80                 | 80px                                  |              |              |            |                      |
|             | glo.spacing.128                | 128px                                 |              |              |            |                      |
| breackpoint | breackpoint.xs                 | <768px                                |              |              |            |                      |
|             | breackpoint.s                  | ≥768px                                |              |              |            |                      |
|             | breackpoint.m                  | ≥1024px                               |              |              |            |                      |
|             | breackpoint.l                  | ≥1280px                               |              |              |            |                      |
|             | breackpoint.xl                 | ≥1536                                 |              |              |            |                      |

## Web System Tokens

The `Web sys tokens` sheet defines tokens specifically for web use, including colors, typography, shadows, radii, and borders. These are intended for integration with Tailwind CSS, particularly for color definitions in dark and light themes.

| Type            |               | Token                                    | Value@Dark Theme(Default)                                                                 | Value on White                              |
|-----------------|---------------|------------------------------------------|-------------------------------------------------------------------------------------------|---------------------------------------------|
| color           | primary       | color.primary.normal                     | $glo.color.magenta.50                                                                     |                                             |
|                 |               | color.primary.hover                      | $glo.color.magenta.40                                                                     |                                             |
|                 |               | color.primary.press                      | $glo.color.magenta.60                                                                     |                                             |
|                 |               | color.primary.disabled                   | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.primary.variant.normal             | $glo.color.magenta.40                                                                     |                                             |
|                 |               | color.primary.variant.hover              | $glo.color.magenta.30                                                                     |                                             |
|                 |               | color.primary.variant.press              | $glo.color.magenta.50                                                                     |                                             |
|                 |               | color.primary.variant.disabled           | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.primary.gradient.normal            | linear-gradient($glo.deg.ltr,$glo.color.magenta.30,$glo.color.purple.40)                  |                                             |
|                 |               | color.primary.gradient.hover             | linear-gradient($glo.deg.ltr,$glo.color.magenta.20,$glo.color.purple.30)                  |                                             |
|                 |               | color.primary.gradient.press             | linear-gradient($glo.deg.ltr,$glo.color.magenta.40,$glo.color.purple.50)                  |                                             |
|                 |               | color.primary.gradient.disabled          | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.primary.onpic.normal               | $glo.color.violet.40                                                                      | $glo.transparent.t85                        |
|                 |               | color.primary.onpic.hover                | $glo.color.violet.30                                                                      | $glo.transparent.t85                        |
|                 |               | color.primary.onpic.press                | $glo.color.violet.50                                                                      | $glo.transparent.t85                        |
|                 | Important     | color.important.normal                   | $glo.color.red.50                                                                         |                                             |
|                 |               | color.important.hover                    | $glo.color.red.40                                                                         |                                             |
|                 |               | color.important.press                    | $glo.color.red.60                                                                         |                                             |
|                 |               | color.important.disabled                 | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.important.variant.normal           | $glo.color.red.40                                                                         |                                             |
|                 |               | color.important.variant.hover            | $glo.color.red.30                                                                         |                                             |
|                 |               | color.important.variant.press            | $glo.color.red.50                                                                         |                                             |
|                 |               | color.important.variant.disabled         | $glo.color.blue.10                                                                        | $glo.transparent.t25                        |
|                 |               | color.important.gradient.normal          | sha                                                                                       |                                             |
|                 |               | color.important.gradient.hover           | linear-gradient($glo.deg.ltr,$glo.color.orange.40,$glo.color.red.40)                      |                                             |
|                 |               | color.important.gradient.press           | linear-gradient($glo.deg.ltr,$glo.color.orange.60,$glo.color.red.60)                      |                                             |
|                 |               | color.important.gradient.disabled        | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.important.onpic.normal             | $glo.color.red.50                                                                         | $glo.transparent.t85                        |
|                 | positive      | color.positive.normal                    | $glo.color.mint.60                                                                        |                                             |
|                 |               | color.positive.hover                     | $glo.color.mint.50                                                                        |                                             |
|                 |               | color.positive.press                     | $glo.color.mint.70                                                                        |                                             |
|                 |               | color.positive.disabled                  | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.positive.variant.normal            | $glo.color.mint.40                                                                        |                                             |
|                 |               | color.positive.variant.hover             | $glo.color.mint.30                                                                        |                                             |
|                 |               | color.positive.variant.press             | $glo.color.mint.50                                                                        |                                             |
|                 |               | color.positive.variant.disabled          | $glo.color.blue.10                                                                        | $glo.transparent.t25                        |
|                 |               | color.positive.gradient.normal           | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.60)                      |                                             |
|                 |               | color.positive.gradient.hover            | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.50)                      |                                             |
|                 |               | color.positive.gradient.press            |                                                                                           |                                             |
|                 |               | color.positive.gradient.disabled         | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.positive.onpic.normal              | $glo.color.mint.60                                                                        | $glo.transparent.t85                        |
|                 | warning       | color.warning.normal                     | $glo.color.orange.50                                                                      |                                             |
|                 |               | color.warning.hover                      | $glo.color.orange.40                                                                      |                                             |
|                 |               | color.warning.press                      | $glo.color.orange.60                                                                      |                                             |
|                 |               | color.warning.disabled                   | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.warning.variant.normal             | $glo.color.orange.40                                                                      |                                             |
|                 |               | color.warning.variant.hover              | $glo.color.orange.30                                                                      |                                             |
|                 |               | color.warning.variant.press              | $glo.color.orange.50                                                                      |                                             |
|                 |               | color.warning.variant.disabled           | $glo.color.blue.10                                                                        | $glo.transparent.t25                        |
|                 |               | color.warning.gradient.normal            | linear-gradient($glo.deg.ltr,$glo.color.yellow.40,$glo.color.orange.50)                    |                                             |
|                 |               | color.warning.gradient.hover             | linear-gradient($glo.deg.ltr,$glo.color.yellow.30,$glo.color.orange40)                    |                                             |
|                 |               | color.warning.gradient.press             | linear-gradient($glo.deg.ltr,$glo.color.yellow.50,$glo.color.orange.60)                   |                                             |
|                 |               | color.warning.gradient.disabled          | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.warning.onpic.normal               | $glo.color.orange.50                                                                      | $glo.transparent.t85                        |
|                 | emphasis      | color.emphasis.normal                    | $glo.color.blue.40                                                                        |                                             |
|                 |               | color.emphasis.hover                     | $glo.color.blue.30                                                                        |                                             |
|                 |               | color.emphasis.press                     | $glo.color.blue.50                                                                        |                                             |
|                 |               | color.emphasis.disabled                  | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.emphasis.variant.normal            | $glo.color.blue.30                                                                        |                                             |
|                 |               | color.emphasis.variant.hover             | $glo.color.blue.20                                                                        |                                             |
|                 |               | color.emphasis.variant.press             | $glo.color.blue.40                                                                        |                                             |
|                 |               | color.emphasis.variant.disabled          | $glo.color.blue.10                                                                        | $glo.transparent.t25                        |
|                 |               | color.emphasis.gradient.normal           | linear-gradient($glo.deg.ltr,$glo.color.sky.30,$glo.color.blue.40)                        |                                             |
|                 |               | color.emphasis.gradient.hover            | linear-gradient($glo.deg.ltr,$glo.color.sky.20,$glo.color.blue.30)                        |                                             |
|                 |               | color.emphasis.gradient.press            | linear-gradient($glo.deg.ltr,$glo.color.sky.40,$glo.color.blue.50)                        |                                             |
|                 |               | color.emphasis.gradient.disabled         | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.emphasis.onpic.normal              | $glo.color.blue.40                                                                        | $glo.transparent.t85                        |
|                 | Background    | color.background.default                 | $glo.color.grey.100                                                                       |                                             |
|                 |               | color.background.specialmap              | $glo.color.grey.100                                                                       |                                             |
|                 |               | color.background.district                | $glo.color.black                                                                          | $glo.transparent.t30                        |
|                 | Surface       | color.surface.base.normal                | $glo.color.grey.80                                                                        |                                             |
|                 |               | color.surface.base.hover                 | $glo.color.grey.70                                                                        |                                             |
|                 |               | color.surface.base.press                 | $glo.color.grey.90                                                                        |                                             |
|                 |               | color.surface.base.disabled              | $glo.color.grey.90                                                                        |                                             |
|                 |               | color.surface.base.specialmap.normal     | $glo.color.grey.80                                                                        |                                             |
|                 |               | color.surface.base.specialmap.hover      | $glo.color.grey.70                                                                        |                                             |
|                 |               | color.surface.base.specialmap.press      | $glo.color.grey.90                                                                        | $glo.transparent.t30                        |
|                 |               | color.surface.base.specialmap.disabled   | $glo.color.white                                                                          | $glo.transparent.t8                         |
|                 |               | color.surface.float.normal               | $glo.color.grey.70                                                                        |                                             |
|                 |               | color.surface.float.hover                | $glo.color.grey.60                                                                        |                                             |
|                 |               | color.surface.float.press                | $glo.color.grey.80                                                                        |                                             |
|                 |               | color.surface.float.disabled             | $glo.color.grey.80                                                                        |                                             |
|                 |               | color.surface.top.normal                 | $glo.color.black                                                                          | $glo.transparent.t65                        |
|                 |               | color.surface.top.hover                  | $glo.color.black                                                                          | $glo.transparent.t45                        |
|                 |               | color.surface.top.press                  | $glo.color.black                                                                          | $glo.transparent.t85                        |
|                 |               | color.surface.top.disabled               | $glo.color.black                                                                          | $glo.transparent.t30                        |
|                 |               | color.surface.district.normal            | $glo.color.purple.0                                                                       | $glo.transparent.t4                         |
|                 |               | color.surface.district.hover             | $glo.color.purple.0                                                                       | $glo.transparent.t12                        |
|                 |               | color.surface.district.press             | $glo.color.black                                                                          | $glo.transparent.t25                        |
|                 |               | color.surface.district.disabled          | $glo.color.black                                                                          | $glo.transparent.t25                        |
|                 |               | color.surface.nest.normal                | $glo.color.purple.0                                                                       | $glo.transparent.t8                         |
|                 |               | color.surface.nest.hover                 | $glo.color.purple.0                                                                       | $glo.transparent.t12                        |
|                 |               | color.surface.nest.press                 | $glo.color.purple.0                                                                       | $glo.transparent.t4                         |
|                 |               | color.surface.nest.disabled              | $glo.color.purple.0                                                                       | $glo.transparent.t4                         |
|                 |               | color.surface.element.normal             | $color.surface.nest.normal                                                                |                                             |
|                 |               | color.surface.element.hover              | $color.surface.nest.hover                                                                 |                                             |
|                 |               | color.surface.element.press              | $color.surface.nest.press                                                                 |                                             |
|                 |               | color.surface.element.disabled           | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.surface.element.dark.normal        | $glo.color.black                                                                          | $glo.transparent.t65                        |
|                 |               | color.surface.element.dark.hover         | $glo.color.black                                                                          | $glo.transparent.t45                        |
|                 |               | color.surface.element.dark.press         | $glo.color.black                                                                          | $glo.transparent.t85                        |
|                 |               | color.surface.element.dark.disabled      | $glo.color.black                                                                          | $glo.transparent.t45                        |
|                 |               | color.surface.element.light.normal       | $glo.color.white                                                                          | $glo.transparent.t15                        |
|                 |               | color.surface.element.light.hover        | $glo.color.white                                                                          | $glo.transparent.t25                        |
|                 |               | color.surface.element.light.press        | $glo.color.white                                                                          | $glo.transparent.t8                         |
|                 |               | color.surface.element.light.disabled     | $glo.color.white                                                                          | $glo.transparent.t8                         |
|                 |               | color.surface.white.normal               | $glo.color.white                                                                          |                                             |
|                 |               | color.surface.white.hover                | $glo.color.white                                                                          | $glo.transparent.t85                        |
|                 |               | color.surface.white.press                | $glo.color.white                                                                          | $glo.transparent.t65                        |
|                 |               | color.surface.white.disabled             | $glo.color.white                                                                          | $glo.transparent.t45                        |
|                 |               | color.surface.black.normal               | $glo.color.black                                                                          |                                             |
|                 | Outline       | color.outline.normal                     | $glo.color.purple.0                                                                       | $glo.transparent.t20                        |
|                 |               | color.outline.hover                      | $glo.color.purple.0                                                                       | $glo.transparent.t30                        |
|                 |               | color.outline.press                      | $glo.color.purple.0                                                                       | $glo.transparent.t8                         |
|                 |               | color.outline.disabled                   | $color.surface.element.disabled                                                           |                                             |
|                 | Overlay       | color.overlay.primary                    | $glo.color.violet.30                                                                      | $glo.transparent.t30                        |
|                 |               | color.overlay.gradient                   | linear-gradient($glo.deg.ttb,$glo.color.black $glo.transparent.t0,$glo.color.black $glo.transparent.t100) |                                             |
|                 |               | color.overlay.dark                       | $glo.color.black                                                                          | $glo.transparent.t65                        |
|                 |               | color.overlay.background                 | linear-gradient($glo.deg.ttb,$color.background.default $glo.transparent.t0,$color.background.default $glo.transparent.t100) |                                             |
|                 |               | color.overlay.base                       | linear-gradient($glo.deg.ttb,$color.surface.base.normal $glo.transparent.t100,$color.surface.base.normal $glo.transparent.t0) |                                             |
|                 | Context       | color.context.subscribe.normal           | linear-gradient($glo.deg.ltr,$glo.color.purple.50,$glo.color.violet.50)                   |                                             |
|                 |               | color.context.subscribe.hover            | linear-gradient($glo.deg.ltr,$glo.color.purple.30,$glo.color.violet.30)                   |                                             |
|                 |               | color.context.subscribe.press            | linear-gradient($glo.deg.ltr,$glo.color.purple.70,$glo.color.violet.70)                   |                                             |
|                 |               | color.context.subscribe.disabled         | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.context.legends.normal             | linear-gradient($glo.deg.ltr,$glo.color.yellow.20,$glo.color.yellow.60)                   |                                             |
|                 |               | color.context.legends.hover              | linear-gradient($glo.deg.ltr,$glo.color.yellow.10,$glo.color.yellow.40)                   |                                             |
|                 |               | color.context.legends.press              | linear-gradient($glo.deg.ltr,$glo.color.yellow.60,$glo.color.yellow.90)                   |                                             |
|                 |               | color.context.legends.disabled           | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.context.legends.variant.normal     | $glo.color.yellow.20                                                                      |                                             |
|                 |               | color.context.legends.variant.hover      | $glo.color.yellow.10                                                                      |                                             |
|                 |               | color.context.legends.variant.press      | $glo.color.yellow.40                                                                      |                                             |
|                 |               | color.context.legends.variant.disabled   | $color.surface.nest.disabled                                                              |                                             |
|                 |               | color.context.vip.normal                 | linear-gradient($glo.deg.ltr,$glo.color.sky.20 0%,$glo.color.violet.40 60%,$glo.color.purple.30 100%) |                                             |
|                 |               | color.context.recharge.normal            | linear-gradient($glo.deg.ltr, $glo.color.yellow.0, $glo.color.yellow.70)                  |                                             |
|                 | Text&icon     | color.txt.primary.normal                 | $glo.color.white                                                                          |                                             |
|                 |               | color.txt.primary.hover                  | $glo.color.magenta.30                                                                     |                                             |
|                 |               | color.txt.primary.press                  | $glo.color.magenta.40                                                                     |                                             |
|                 |               | color.txt.primary.disabled               | $color.txt.disabled                                                                       |                                             |
|                 |               | color.txt.primary.specialmap.normal      | $glo.color.white                                                                          |                                             |
|                 |               | color.txt.primary.specialmap.hover       | $glo.color.white                                                                          | $glo.transparent.t85                        |
|                 |               | color.txt.primary.specialmap.press       | $glo.color.white                                                                          | $glo.transparent.t65                        |
|                 |               | color.txt.primary.specialmap.disable     | $glo.color.white                                                                          | $glo.transparent.t45                        |
|                 |               | color.txt.secondary.normal               | $glo.color.grey.30                                                                        |                                             |
|                 |               | color.txt.secondary.hover                | $glo.color.magenta.30                                                                     |                                             |
|                 |               | color.txt.secondary.press                | $glo.color.magenta.40                                                                     |                                             |
|                 |               | color.txt.secondary.disabled             | $color.txt.disabled                                                                       |                                             |
|                 |               | color.txt.tertiary.normal                | $glo.color.grey.40                                                                        |                                             |
|                 |               | color.txt.tertiary.hover                 | $glo.color.grey.30                                                                        |                                             |
|                 |               | color.txt.tertiary                       | $glo.color.grey.50                                                                        |                                             |
|                 |               | color.txt.tertiary.disabled              | $color.txt.disabled                                                                       |                                             |
|                 |               | color.txt.grass                          | $glo.color.grass.40                                                                       |                                             |
|                 |               | color.txt.disabled                       | $glo.color.grey.50                                                                        |                                             |
| Typography      | display       | txt.display.l                            | $glo.font.family.display,$glo.font.size.64,$glo.font.weight.regular,$glo.font.lineheight.size64 |                                             |
|                 |               | txt.display.m                            | $glo.font.family.display,$glo.font.size.48,$glo.font.weight.regular,$glo.font.lineheight.size48 |                                             |
|                 |               | txt.display.s                            | $glo.font.family.display,$glo.font.size.24,$glo.font.weight.regular,$glo.font.lineheight.size24 |                                             |
|                 | headline      | txt.headline.l                           | $glo.font.family.sys,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48 |                                             |
|                 |               | txt.headline.m                           | $glo.font.family.sys,$glo.font.size.36,$glo.font.weight.bold,$glo.font.lineheight.size36 |                                             |
|                 | title         | txt.title.l                              | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.semibold,$glo.font.lineheight.size24 |                                             |
|                 |               | txt.title.m                              | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.semibold,$glo.font.lineheight.size20 |                                             |
|                 |               | txt.title.s                              | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16 |                                             |
|                 | body          | txt.bodySemibold.l                       | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16 |                                             |
|                 |               | txt.bodySemibold.m                       | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.semibold,$glo.font.lineheight.size14 |                                             |
|                 |               | txt.bodySemibold.s                       | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.semibold,$glo.font.lineheight.size12 |                                             |
|                 |               | txt.body.l                               | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16 |                                             |
|                 |               | txt.body.m                               | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.regular,$glo.font.lineheight.size14 |                                             |
|                 |               | txt.body.s                               | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12 |                                             |
|                 |               | txt.bodyItalic.l                         | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16,$glo.font.style.italic |                                             |
|                 | label         | txt.label.l                              | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.medium,$glo.font.lineheight.size16 |                                             |
|                 |               | txt.label.m                              | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14 |                                             |
|                 |               | txt.label.s                              | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.medium,$glo.font.lineheight.size12 |                                             |
|                 | number        | txt.numDisplay.xl                        | $glo.font.family.numDisplay,$glo.font.size.64,$glo.font.weight.bold,$glo.font.lineheight.size64 |                                             |
|                 |               | txt.numDisplay.l                         | $glo.font.family.numDisplay,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48 |                                             |
|                 |               | txt.numMonotype.xl                       | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.bold,$glo.font.lineheight.size24 |                                             |
|                 |               | txt.numMonotype.l                        | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.bold,$glo.font.lineheight.size20 |                                             |
|                 |               | txt.numMonotype.m                        | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.bold,$glo.font.lineheight.size16 |                                             |
|                 |               | txt.numMonotype.s                        | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14 |                                             |
|                 |               | txt.numMonotype.xs                       | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12 |                                             |
| visual style    | shadow        | shadow.s                                 | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,4,渐变色,ShadowOpacity,便宜,半径                |                                             |
|                 |               | shadow.m                                 | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,8                                         |                                             |
|                 |               | shadow.l                                 | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,16                                        |                                             |
|                 | radius        | radius.xs                                | $glo.radius.4                                                                             |                                             |
|                 |               | radius.s                                 | $glo.radius.8                                                                             |                                             |
|                 |               | radius.m                                 | $glo.radius.12                                                                            |                                             |
|                 |               | radius.l                                 | $glo.radius.16                                                                            |                                             |
|                 |               | radius.xl                                | $glo.radius.24                                                                            |                                             |
|                 |               | radius.round                             | $glo.radius.round                                                                         |                                             |
|                 |               | radius.pill                              | $glo.radius.round                                                                         |                                             |
|                 | border        | border.divider                           | $glo.border.1                                                                             |                                             |
|                 |               | border.s                                 | $glo.border.1                                                                             |                                             |
|                 |               | border.m                                 | $glo.border.2                                                                             |                                             |
|                 |               | border.l                                 | $glo.border.4                                                                             |                                             |
