Tokens
The Tokens reference lists every Framework CSS variable from _variables_root.scss and display overrides in _variables_overrides.scss. Use it to understand defaults, 2-bit visual/layout behavior, high-density typography, and 4-bit-and-up scaling.
#
How To Read This Table
Each row is a CSS custom property token. Root comes from
_variables_root.scss. 2-bit,
density 2x, and
4-bit and up come from mixins in
_variables_overrides.scss.
#
Palette
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Semantic | ||||
--black
|
#000000 | - | - | - |
--color-error
|
var(--red) | - | - | - |
--color-primary
|
var(--blue) | - | - | - |
--color-success
|
var(--green) | - | - | - |
--color-warning
|
var(--orange) | - | - | - |
--white
|
#FFFFFF | - | - | - |
| Grayscale | ||||
--gray-10
|
#111111 | - | - | - |
--gray-15
|
#222222 | - | - | - |
--gray-20
|
#333333 | - | - | - |
--gray-25
|
#444444 | - | - | - |
--gray-30
|
#555555 | - | - | - |
--gray-35
|
#666666 | - | - | - |
--gray-40
|
#777777 | - | - | - |
--gray-45
|
#888888 | - | - | - |
--gray-50
|
#999999 | - | - | - |
--gray-55
|
#AAAAAA | - | - | - |
--gray-60
|
#BBBBBB | - | - | - |
--gray-65
|
#CCCCCC | - | - | - |
--gray-70
|
#DDDDDD | - | - | - |
--gray-75
|
#EEEEEE | - | - | - |
| Legacy Grayscale | ||||
--gray-1
|
#111111 | - | - | - |
--gray-2
|
#333333 | - | - | - |
--gray-3
|
#555555 | - | - | - |
--gray-4
|
#777777 | - | - | - |
--gray-5
|
#999999 | - | - | - |
--gray-6
|
#BBBBBB | - | - | - |
--gray-7
|
#DDDDDD | - | - | - |
#
Scaling
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--content-scale
|
1 | - | - | - |
--device-ui-scale
|
1 | - | - | - |
--modifier-scale
|
1 | - | - | - |
--modifier-text-scale
|
1 | - | - | - |
--text-ui-scale
|
1 | - | - | - |
--ui-scale
|
1 | - | - | - |
#
Description
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--description-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--description-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--description-font-smoothing
|
none | none | auto | - |
--description-font-weight
|
400 | 400 | 400 | - |
--description-line-height
|
1 | 1 | 1.2 | - |
| Large | ||||
--description-large-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--description-large-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--description-large-font-smoothing
|
none | none | auto | - |
--description-large-font-weight
|
400 | 400 | 700 | - |
--description-large-line-height
|
1.25 | 1.25 | 1.2 | - |
| Xlarge | ||||
--description-xlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--description-xlarge-font-size
|
calc(21px * var(--text-ui-scale)) | - | calc(21px * var(--text-ui-scale)) | - |
--description-xlarge-font-smoothing
|
auto | - | auto | - |
--description-xlarge-font-weight
|
500 | - | 500 | - |
--description-xlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxlarge | ||||
--description-xxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--description-xxlarge-font-size
|
calc(24px * var(--text-ui-scale)) | - | calc(24px * var(--text-ui-scale)) | - |
--description-xxlarge-font-smoothing
|
auto | - | auto | - |
--description-xxlarge-font-weight
|
475 | - | 475 | - |
--description-xxlarge-line-height
|
1.2 | - | 1.2 | - |
#
Other
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--font-base-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--font-base-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--font-base-font-smoothing
|
none | none | auto | - |
--font-base-line-height
|
1.25 | 1.25 | calc(22px * var(--text-ui-scale)) | - |
--font-giga-font-family
|
"Inter Variable", Inter | - | - | - |
--font-giga-font-size
|
calc(96px * var(--text-ui-scale)) | - | - | - |
--font-giga-font-smoothing
|
auto | - | - | - |
--font-giga-line-height
|
calc(108px * var(--text-ui-scale)) | - | - | - |
--font-large-font-family
|
"BlockKie" | "BlockKie" | "Inter Variable", Inter | - |
--font-large-font-size
|
calc(26px * var(--text-ui-scale)) | calc(26px * var(--text-ui-scale)) | calc(21px * var(--text-ui-scale)) | - |
--font-large-font-smoothing
|
none | none | auto | - |
--font-large-line-height
|
1 | 1 | 1.2 | - |
--font-mega-font-family
|
"Inter Variable", Inter | - | - | - |
--font-mega-font-size
|
calc(74px * var(--text-ui-scale)) | - | - | - |
--font-mega-font-smoothing
|
auto | - | - | - |
--font-mega-line-height
|
calc(86px * var(--text-ui-scale)) | - | - | - |
--font-peta-font-family
|
"Inter Variable", Inter | - | - | - |
--font-peta-font-size
|
calc(170px * var(--text-ui-scale)) | - | - | - |
--font-peta-font-smoothing
|
auto | - | - | - |
--font-peta-line-height
|
calc(180px * var(--text-ui-scale)) | - | - | - |
--font-small-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--font-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--font-small-font-smoothing
|
none | none | auto | - |
--font-small-line-height
|
1 | 1 | calc(18px * var(--text-ui-scale)) | - |
--font-tera-font-family
|
"Inter Variable", Inter | - | - | - |
--font-tera-font-size
|
calc(128px * var(--text-ui-scale)) | - | - | - |
--font-tera-font-smoothing
|
auto | - | - | - |
--font-tera-line-height
|
calc(128px * var(--text-ui-scale)) | - | - | - |
--font-xlarge-font-family
|
"Inter Variable", Inter | - | - | - |
--font-xlarge-font-size
|
calc(26px * var(--text-ui-scale)) | - | - | - |
--font-xlarge-font-smoothing
|
auto | - | - | - |
--font-xlarge-line-height
|
calc(29px * var(--text-ui-scale)) | - | - | - |
--font-xxlarge-font-family
|
"Inter Variable", Inter | - | - | - |
--font-xxlarge-font-size
|
calc(38px * var(--text-ui-scale)) | - | - | - |
--font-xxlarge-font-smoothing
|
auto | - | - | - |
--font-xxlarge-line-height
|
calc(42px * var(--text-ui-scale)) | - | - | - |
--font-xxxlarge-font-family
|
"Inter Variable", Inter | - | - | - |
--font-xxxlarge-font-size
|
calc(58px * var(--text-ui-scale)) | - | - | - |
--font-xxxlarge-font-smoothing
|
auto | - | - | - |
--font-xxxlarge-line-height
|
calc(70px * var(--text-ui-scale)) | - | - | - |
#
Layout
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--full-h
|
calc(var(--screen-h) - var(--gap) * 2) | - | - | - |
--full-w
|
calc(var(--screen-w) - var(--gap) * 2) | - | - | - |
--half_horizontal-h
|
calc((var(--screen-h) - var(--gap) * 2) / 2 - var(--gap) / 2) | - | - | - |
--half_horizontal-w
|
calc((var(--screen-w) - var(--gap) * 2)) | - | - | - |
--half_vertical-h
|
calc((var(--screen-h) - var(--gap) * 2)) | - | - | - |
--half_vertical-w
|
calc((var(--screen-w) - var(--gap) * 2) / 2 - var(--gap) / 2) | - | - | - |
--quadrant-h
|
calc((var(--screen-h) - var(--gap) * 2) / 2 - var(--gap) / 2) | - | - | - |
--quadrant-w
|
calc((var(--screen-w) - var(--gap) * 2) / 2 - var(--gap) / 2) | - | - | - |
--screen-h
|
480px | - | - | - |
--screen-h-original
|
480px | - | - | - |
--screen-w
|
800px | - | - | - |
--screen-w-original
|
800px | - | - | - |
#
Spacing
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--gap
|
10px | - | - | - |
--gap-large
|
20px | - | - | - |
--gap-medium
|
16px | - | - | - |
--gap-scale
|
1 | - | - | - |
--gap-small
|
7px | - | - | - |
--gap-xlarge
|
30px | - | - | - |
--gap-xsmall
|
5px | - | - | - |
--gap-xxlarge
|
40px | - | - | - |
--list-gap-small
|
8px | - | - | - |
#
Item
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--item-index-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--item-index-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--item-index-font-smoothing
|
none | none | auto | - |
--item-index-font-weight
|
400 | 400 | 600 | - |
--item-index-line-height
|
1 | 1 | 1 | - |
--item-meta-width
|
calc(10px * var(--ui-scale)) | calc(10px * var(--ui-scale)) | - | calc(10px * var(--ui-scale)) |
#
Label
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--label-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--label-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--label-font-smoothing
|
none | none | auto | - |
--label-font-weight
|
400 | 400 | 500 | - |
--label-line-height
|
1.25 | 1.25 | 1.25 | - |
| Small | ||||
--label-small-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--label-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--label-small-font-smoothing
|
none | none | auto | - |
--label-small-font-weight
|
400 | 400 | 500 | - |
--label-small-line-height
|
1 | 1 | 1 | - |
| Large | ||||
--label-large-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--label-large-font-size
|
calc(21px * var(--text-ui-scale)) | - | calc(21px * var(--text-ui-scale)) | - |
--label-large-font-smoothing
|
auto | - | auto | - |
--label-large-font-weight
|
500 | - | 500 | - |
--label-large-line-height
|
1.2 | - | 1.2 | - |
| Xlarge | ||||
--label-xlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--label-xlarge-font-size
|
calc(26px * var(--text-ui-scale)) | - | calc(26px * var(--text-ui-scale)) | - |
--label-xlarge-font-smoothing
|
auto | - | auto | - |
--label-xlarge-font-weight
|
475 | - | 475 | - |
--label-xlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxlarge | ||||
--label-xxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--label-xxlarge-font-size
|
calc(30px * var(--text-ui-scale)) | - | calc(30px * var(--text-ui-scale)) | - |
--label-xxlarge-font-smoothing
|
auto | - | auto | - |
--label-xxlarge-font-weight
|
450 | - | 450 | - |
--label-xxlarge-line-height
|
1.2 | - | 1.2 | - |
#
Progress
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--progress-bar-height
|
calc(24px * var(--ui-scale)) | - | - | - |
--progress-bar-height-large
|
calc(32px * var(--ui-scale)) | - | - | - |
--progress-bar-height-small
|
calc(12px * var(--ui-scale)) | - | - | - |
--progress-bar-height-xsmall
|
calc(6px * var(--ui-scale)) | - | - | - |
--progress-bar-radius
|
calc(10px * var(--ui-scale)) | - | - | - |
--progress-dot-size
|
calc(16px * var(--ui-scale)) | - | - | - |
--progress-dot-size-large
|
calc(20px * var(--ui-scale)) | - | - | - |
--progress-dot-size-small
|
calc(12px * var(--ui-scale)) | - | - | - |
--progress-dot-size-xsmall
|
calc(8px * var(--ui-scale)) | - | - | - |
#
Rich Text
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--richtext-content-max-width
|
calc(640px * var(--ui-scale)) | - | - | - |
--richtext-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--richtext-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--richtext-font-smoothing
|
none | none | auto | - |
--richtext-font-weight
|
400 | 400 | 500 | - |
--richtext-line-height
|
calc(22px * var(--text-ui-scale)) | calc(22px * var(--text-ui-scale)) | calc(22px * var(--text-ui-scale)) | - |
| Small | ||||
--richtext-small-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--richtext-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--richtext-small-font-smoothing
|
none | none | auto | - |
--richtext-small-font-weight
|
400 | 400 | 500 | - |
--richtext-small-line-height
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(18px * var(--text-ui-scale)) | - |
| Large | ||||
--richtext-large-font-family
|
"BlockKie" | "BlockKie" | "Inter Variable", Inter | - |
--richtext-large-font-size
|
calc(26px * var(--text-ui-scale)) | calc(26px * var(--text-ui-scale)) | calc(21px * var(--text-ui-scale)) | - |
--richtext-large-font-smoothing
|
none | none | auto | - |
--richtext-large-font-weight
|
400 | 400 | 500 | - |
--richtext-large-line-height
|
1 | 1 | 1.2 | - |
| Xlarge | ||||
--richtext-xlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--richtext-xlarge-font-size
|
calc(30px * var(--text-ui-scale)) | - | calc(30px * var(--text-ui-scale)) | - |
--richtext-xlarge-font-smoothing
|
auto | - | auto | - |
--richtext-xlarge-font-weight
|
425 | - | 425 | - |
--richtext-xlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxlarge | ||||
--richtext-xxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--richtext-xxlarge-font-size
|
calc(35px * var(--text-ui-scale)) | - | calc(35px * var(--text-ui-scale)) | - |
--richtext-xxlarge-font-smoothing
|
auto | - | auto | - |
--richtext-xxlarge-font-weight
|
400 | - | 400 | - |
--richtext-xxlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxxlarge | ||||
--richtext-xxxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--richtext-xxxlarge-font-size
|
calc(40px * var(--text-ui-scale)) | - | calc(40px * var(--text-ui-scale)) | - |
--richtext-xxxlarge-font-smoothing
|
auto | - | auto | - |
--richtext-xxxlarge-font-weight
|
375 | - | 375 | - |
--richtext-xxxlarge-line-height
|
1.2 | - | 1.2 | - |
#
Rounded
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--rounded
|
10px | - | - | - |
--rounded-full
|
9999px | - | - | - |
--rounded-large
|
20px | - | - | - |
--rounded-medium
|
15px | - | - | - |
--rounded-none
|
0px | - | - | - |
--rounded-small
|
7px | - | - | - |
--rounded-xlarge
|
25px | - | - | - |
--rounded-xsmall
|
5px | - | - | - |
--rounded-xxlarge
|
30px | - | - | - |
#
Table
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--table-tbody-height
|
calc(46px * var(--ui-scale)) | - | - | - |
--table-thead-height
|
calc(36px * var(--ui-scale)) | - | - | - |
| Xsmall | ||||
--table-xsmall-tbody-height
|
calc(22px * var(--ui-scale)) | - | - | - |
--table-xsmall-thead-height
|
calc(18px * var(--ui-scale)) | - | - | - |
| Small | ||||
--table-small-tbody-height
|
calc(31px * var(--ui-scale)) | - | - | - |
--table-small-thead-height
|
calc(24px * var(--ui-scale)) | - | - | - |
| Large | ||||
--table-large-tbody-height
|
calc(56px * var(--ui-scale)) | - | - | - |
--table-large-thead-height
|
calc(44px * var(--ui-scale)) | - | - | - |
| Xlarge | ||||
--table-xlarge-tbody-height
|
calc(72px * var(--ui-scale)) | - | - | - |
--table-xlarge-thead-height
|
calc(56px * var(--ui-scale)) | - | - | - |
#
Title Bar
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--title-bar-border-radius
|
calc(10px * var(--ui-scale)) | calc(10px * var(--ui-scale)) | - | calc(10px * var(--ui-scale)) |
--title-bar-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--title-bar-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--title-bar-font-smoothing
|
none | none | auto | - |
--title-bar-font-weight
|
400 | 400 | 700 | - |
--title-bar-height
|
calc(40px * var(--ui-scale)) | calc(40px * var(--ui-scale)) | - | calc(40px * var(--ui-scale)) |
--title-bar-image-height
|
calc(28px * var(--ui-scale)) | calc(28px * var(--ui-scale)) | - | calc(28px * var(--ui-scale)) |
--title-bar-line-height
|
1 | 1 | calc(22px * var(--text-ui-scale)) | - |
--title-bar-padding-top
|
calc(5px * var(--ui-scale)) | calc(5px * var(--ui-scale)) | 0px | 0px |
--title-bar-text-stroke-width
|
calc(3.5px * var(--ui-scale)) | calc(3.5px * var(--ui-scale)) | calc(2px * var(--ui-scale)) | calc(2px * var(--ui-scale)) |
| Small | ||||
--title-bar-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--title-bar-small-height
|
calc(32px * var(--ui-scale)) | calc(32px * var(--ui-scale)) | - | calc(32px * var(--ui-scale)) |
--title-bar-small-image-height
|
calc(24px * var(--ui-scale)) | calc(24px * var(--ui-scale)) | - | calc(24px * var(--ui-scale)) |
#
Title
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--title-font-family
|
"BlockKie" | "BlockKie" | "Inter Variable", Inter | - |
--title-font-size
|
calc(26px * var(--text-ui-scale)) | calc(26px * var(--text-ui-scale)) | calc(21px * var(--text-ui-scale)) | - |
--title-font-smoothing
|
none | none | auto | - |
--title-font-weight
|
400 | 400 | 400 | - |
--title-line-height
|
1 | 1 | 1.2 | - |
| Small | ||||
--title-small-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--title-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--title-small-font-smoothing
|
none | none | auto | - |
--title-small-font-weight
|
400 | 400 | 700 | - |
--title-small-line-height
|
1 | 1 | 1.2 | - |
| Large | ||||
--title-large-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--title-large-font-size
|
calc(30px * var(--text-ui-scale)) | - | calc(30px * var(--text-ui-scale)) | - |
--title-large-font-smoothing
|
auto | - | auto | - |
--title-large-font-weight
|
425 | - | 425 | - |
--title-large-line-height
|
1.2 | - | 1.2 | - |
| Xlarge | ||||
--title-xlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--title-xlarge-font-size
|
calc(35px * var(--text-ui-scale)) | - | calc(35px * var(--text-ui-scale)) | - |
--title-xlarge-font-smoothing
|
auto | - | auto | - |
--title-xlarge-font-weight
|
400 | - | 400 | - |
--title-xlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxlarge | ||||
--title-xxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--title-xxlarge-font-size
|
calc(40px * var(--text-ui-scale)) | - | calc(40px * var(--text-ui-scale)) | - |
--title-xxlarge-font-smoothing
|
auto | - | auto | - |
--title-xxlarge-font-weight
|
375 | - | 375 | - |
--title-xxlarge-line-height
|
1.2 | - | 1.2 | - |
#
Value
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--value-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--value-font-size
|
calc(38px * var(--text-ui-scale)) | - | calc(38px * var(--text-ui-scale)) | - |
--value-font-smoothing
|
auto | - | auto | - |
--value-font-weight
|
450 | - | 450 | - |
--value-line-height
|
calc(42px * var(--text-ui-scale)) | - | calc(42px * var(--text-ui-scale)) | - |
| Xxsmall | ||||
--value-xxsmall-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--value-xxsmall-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--value-xxsmall-font-smoothing
|
none | none | auto | - |
--value-xxsmall-font-weight
|
400 | 400 | 700 | - |
--value-xxsmall-line-height
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(14px * var(--text-ui-scale)) | - |
| Xsmall | ||||
--value-xsmall-font-size
|
calc(20px * var(--text-ui-scale)) | - | calc(20px * var(--text-ui-scale)) | - |
--value-xsmall-font-weight
|
600 | - | 600 | - |
--value-xsmall-line-height
|
calc(24px * var(--text-ui-scale)) | - | calc(24px * var(--text-ui-scale)) | - |
| Small | ||||
--value-small-font-size
|
calc(26px * var(--text-ui-scale)) | - | calc(26px * var(--text-ui-scale)) | - |
--value-small-font-weight
|
500 | - | 475 | - |
--value-small-line-height
|
calc(29px * var(--text-ui-scale)) | - | calc(29px * var(--text-ui-scale)) | - |
| Large | ||||
--value-large-font-size
|
calc(58px * var(--text-ui-scale)) | - | calc(58px * var(--text-ui-scale)) | - |
--value-large-font-weight
|
400 | - | 400 | - |
--value-large-line-height
|
calc(70px * var(--text-ui-scale)) | - | calc(70px * var(--text-ui-scale)) | - |
| Xlarge | ||||
--value-xlarge-font-size
|
calc(74px * var(--text-ui-scale)) | - | calc(74px * var(--text-ui-scale)) | - |
--value-xlarge-font-weight
|
375 | - | 375 | - |
--value-xlarge-line-height
|
calc(86px * var(--text-ui-scale)) | - | calc(86px * var(--text-ui-scale)) | - |
| Xxlarge | ||||
--value-xxlarge-font-size
|
calc(96px * var(--text-ui-scale)) | - | calc(96px * var(--text-ui-scale)) | - |
--value-xxlarge-font-weight
|
350 | - | 350 | - |
--value-xxlarge-line-height
|
calc(108px * var(--text-ui-scale)) | - | calc(108px * var(--text-ui-scale)) | - |
| Xxxlarge | ||||
--value-xxxlarge-font-size
|
calc(128px * var(--text-ui-scale)) | - | calc(128px * var(--text-ui-scale)) | - |
--value-xxxlarge-font-weight
|
300 | - | 300 | - |
--value-xxxlarge-line-height
|
calc(128px * var(--text-ui-scale)) | - | calc(128px * var(--text-ui-scale)) | - |
| Mega | ||||
--value-mega-font-size
|
calc(170px * var(--text-ui-scale)) | - | calc(170px * var(--text-ui-scale)) | - |
--value-mega-font-weight
|
275 | - | 275 | - |
--value-mega-line-height
|
calc(180px * var(--text-ui-scale)) | - | calc(180px * var(--text-ui-scale)) | - |
| Giga | ||||
--value-giga-font-size
|
calc(220px * var(--text-ui-scale)) | - | calc(220px * var(--text-ui-scale)) | - |
--value-giga-font-weight
|
250 | - | 250 | - |
--value-giga-line-height
|
calc(230px * var(--text-ui-scale)) | - | calc(230px * var(--text-ui-scale)) | - |
| Tera | ||||
--value-tera-font-size
|
calc(290px * var(--text-ui-scale)) | - | calc(290px * var(--text-ui-scale)) | - |
--value-tera-font-weight
|
225 | - | 225 | - |
--value-tera-line-height
|
calc(300px * var(--text-ui-scale)) | - | calc(300px * var(--text-ui-scale)) | - |
| Peta | ||||
--value-peta-font-size
|
calc(380px * var(--text-ui-scale)) | - | calc(380px * var(--text-ui-scale)) | - |
--value-peta-font-weight
|
200 | - | 200 | - |
--value-peta-line-height
|
calc(390px * var(--text-ui-scale)) | - | calc(390px * var(--text-ui-scale)) | - |
#
Related APIs
#
Reading variables from JavaScript
cssVar(name, { el }) reads any variable on this page
back from the live cascade, theme and mode overrides included. The CSS stays the source of truth; nothing is
duplicated in JavaScript. See
Paint API
Paint API
TRMNLPaint: read the exact colors and patterns CSS paints right now, from JavaScript
TRMNLPaint is the framework's JavaScript API for its paint: colors, border lines, and text styles. Ask it for any framework color and it returns what CSS would actually paint right now, with the device and the active theme already applied. Use it wherever JavaScript draws: charts, canvases, or your own rendering.
for the full paint surface.
var gap = TRMNLPaint.cssVar("--gap", { el: "my-chart" });#
Variables a theme may re-point
A theme re-points token references through the slot mixins and never sets paint values directly. The
framework-owned paint variables (--bg-*,
--text-*,
--border-*) stay untouched, and the theme linter
enforces that boundary. See
Authoring Themes
for the contract and workflow.
#
Where variables are defined
The SCSS source emits every variable on this page: root defaults from
_variables_root.scss, per-mode overrides from
_variables_overrides.scss. A custom build can
reconfigure or extend the set. See
Sass API
Sass API
The framework SCSS source: architecture, cascade layers, and what a custom stack can build from it
The Sass API is the framework's SCSS source, open since 3.2. These pages cover the build-your-own path: compiling from source, adding device profiles, and using the mixins in your own SCSS. A custom stack can also skip the build entirely and serve an official released build, which is what the TRMNL Platform always does.
for the source layout and its
public surface.