69 KiB
69 KiB
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 |