Value
The Value system provides consistent text styling for displaying numerical and textual values, with various size options and support for tabular numbers. It ensures readability and visual hierarchy across different contexts.
Size Variants
The Value system offers eight size variants, from XXSmall to XXXLarge, allowing for flexible typography scaling across different use cases. Each size is carefully crafted for optimal readability and visual balance.
XXSmall
The value--xxsmall class creates the smallest text size,
ideal for compact displays and supporting information.
Value
XXSmall
<span class="value value--xxsmall">Example</span>
<span class="value value--xxsmall value--tnums">48,206.62</span>XSmall
The value--xsmall class provides a size slightly larger than XXSmall,
suitable for secondary information and compact interfaces.
Value
XSmall
<span class="value value--xsmall">Example</span>
<span class="value value--xsmall value--tnums">48,206.62</span>Small
The value--small class creates a size suitable
for general body text and regular content.
Value
Small
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>Default Size
The base value class without size modifiers
provides the standard display size.
Value
Default
<span class="value">Example</span>
<span class="value value--tnums">48,206.62</span>Large
The value--large class creates emphasized text,
suitable for important information and headings.
Value
Large
<span class="value value--large">Example</span>
<span class="value value--large value--tnums">48,206.62</span>XLarge
The value--xlarge class provides prominent display
text, ideal for section headers and key metrics.
Value
XLarge
<span class="value value--xlarge">Example</span>
<span class="value value--xlarge value--tnums">48,206.62</span>XXLarge
The value--xxlarge class creates very large display
text, perfect for major headings and hero sections.
Value
XXLarge
<span class="value value--xxlarge">Example</span>
<span class="value value--xxlarge value--tnums">48,206.62</span>XXXLarge
The value--xxxlarge class provides the largest
text size, designed for maximum impact in hero sections and key displays.
Value
XXXLarge
<span class="value value--xxxlarge">Example</span>
<span class="value value--xxxlarge value--tnums">48,206.62</span>Numerical Display
For numerical values, the Value system includes special formatting options to ensure clear and consistent display of numbers, particularly in financial or data-heavy contexts.
Tabular Numbers
Add the value--tnums modifier to enable
tabular numbers, ensuring consistent width for better alignment in tables and lists.
Value
Tabular Numbers
<span class="value value--large">Regular: 48,206.62</span>
<span class="value value--large value--tnums">Tabular: 48,206.62</span>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 4/8/16-bit |
|---|---|---|---|
| Base | |||
--value-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--value-font-size
|
38px | 38px | calc(38px * var(--ui-scale)) |
--value-font-smoothing
|
auto | auto | auto |
--value-font-weight
|
450 | 450 | 450 |
--value-line-height
|
42px | 42px | calc(42px * var(--ui-scale)) |
| Xxsmall | |||
--value-xxsmall-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter |
--value-xxsmall-font-size
|
16px | 16px | calc(16px * var(--ui-scale)) |
--value-xxsmall-font-smoothing
|
none | none | auto |
--value-xxsmall-font-weight
|
400 | 400 | 650 |
--value-xxsmall-line-height
|
16px | 16px | calc(14px * var(--ui-scale)) |
| Xsmall | |||
--value-xsmall-font-size
|
20px | 20px | calc(20px * var(--ui-scale)) |
--value-xsmall-font-weight
|
600 | 600 | 600 |
--value-xsmall-line-height
|
24px | 24px | calc(24px * var(--ui-scale)) |
| Small | |||
--value-small-font-size
|
26px | 26px | calc(26px * var(--ui-scale)) |
--value-small-font-weight
|
500 | 500 | 475 |
--value-small-line-height
|
29px | 29px | calc(29px * var(--ui-scale)) |
| Large | |||
--value-large-font-size
|
58px | 58px | calc(58px * var(--ui-scale)) |
--value-large-font-weight
|
400 | 400 | 400 |
--value-large-line-height
|
70px | 70px | calc(70px * var(--ui-scale)) |
| Xlarge | |||
--value-xlarge-font-size
|
74px | 74px | calc(74px * var(--ui-scale)) |
--value-xlarge-font-weight
|
375 | 375 | 375 |
--value-xlarge-line-height
|
86px | 86px | calc(86px * var(--ui-scale)) |
| Xxlarge | |||
--value-xxlarge-font-size
|
96px | 96px | calc(96px * var(--ui-scale)) |
--value-xxlarge-font-weight
|
350 | 350 | 350 |
--value-xxlarge-line-height
|
108px | 108px | calc(108px * var(--ui-scale)) |
| Xxxlarge | |||
--value-xxxlarge-font-size
|
128px | 128px | calc(128px * var(--ui-scale)) |
--value-xxxlarge-font-weight
|
300 | 300 | 300 |
--value-xxxlarge-line-height
|
128px | 128px | calc(128px * var(--ui-scale)) |
| Mega | |||
--value-mega-font-size
|
170px | 170px | calc(170px * var(--ui-scale)) |
--value-mega-font-weight
|
275 | 275 | 275 |
--value-mega-line-height
|
180px | 180px | calc(180px * var(--ui-scale)) |
| Giga | |||
--value-giga-font-size
|
220px | 220px | calc(220px * var(--ui-scale)) |
--value-giga-font-weight
|
250 | 250 | 250 |
--value-giga-line-height
|
230px | 230px | calc(230px * var(--ui-scale)) |
| Tera | |||
--value-tera-font-size
|
290px | 290px | calc(290px * var(--ui-scale)) |
--value-tera-font-weight
|
225 | 225 | 225 |
--value-tera-line-height
|
300px | 300px | calc(300px * var(--ui-scale)) |
| Peta | |||
--value-peta-font-size
|
380px | 380px | calc(380px * var(--ui-scale)) |
--value-peta-font-weight
|
200 | 200 | 200 |
--value-peta-line-height
|
390px | 390px | calc(390px * var(--ui-scale)) |