Title
The Title system provides consistent text headings with different size variants. It helps maintain visual hierarchy and readability throughout the interface.
Base Structure
The Title system offers two primary variations: default and small. These base structures form the foundation for content headings.
Default Title
The title class creates a standard-sized heading.
This is the most common usage for primary content headers.
Default Title
Title
Default
<span class="title">Default Title</span>Small Title
Add title--small to create a more compact heading.
Useful for secondary headers or where space is limited.
Small Title
Title
Small
<span class="title title--small">Small Title</span>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 4/8/16-bit |
|---|---|---|---|
| Base | |||
--title-font-family
|
"BlockKie" | "BlockKie" | "Inter Variable", Inter |
--title-font-size
|
26px | 26px | calc(21px * var(--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
|
16px | 16px | calc(16px * var(--ui-scale)) |
--title-small-font-smoothing
|
none | none | auto |
--title-small-font-weight
|
400 | 400 | 550 |
--title-small-line-height
|
1 | 1 | 1.2 |
| Large | |||
--title-large-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--title-large-font-size
|
30px | 30px | calc(30px * var(--ui-scale)) |
--title-large-font-smoothing
|
auto | auto | auto |
--title-large-font-weight
|
425 | 425 | 425 |
--title-large-line-height
|
1.2 | 1.2 | 1.2 |
| Xlarge | |||
--title-xlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--title-xlarge-font-size
|
35px | 35px | calc(35px * var(--ui-scale)) |
--title-xlarge-font-smoothing
|
auto | auto | auto |
--title-xlarge-font-weight
|
400 | 400 | 400 |
--title-xlarge-line-height
|
1.2 | 1.2 | 1.2 |
| Xxlarge | |||
--title-xxlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--title-xxlarge-font-size
|
40px | 40px | calc(40px * var(--ui-scale)) |
--title-xxlarge-font-smoothing
|
auto | auto | auto |
--title-xxlarge-font-weight
|
375 | 375 | 375 |
--title-xxlarge-line-height
|
1.2 | 1.2 | 1.2 |