2025-11-13 08:38:25 +00:00
# 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.
2025-11-28 06:31:36 +00:00
| 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 | | | | |
2025-11-13 08:38:25 +00:00
## 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.
2025-11-28 06:31:36 +00:00
| 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 | |
