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 | Density 2x | 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 | 700 | — |
--title-small-line-height
|
1 | 1 | 1.2 | — |
| Large | ||||
--title-large-font-family
|
"Inter Variable", Inter | — | "Inter Variable", Inter | — |
--title-large-font-size
|
30px | — | calc(30px * var(--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
|
35px | — | calc(35px * var(--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
|
40px | — | calc(40px * var(--ui-scale)) | — |
--title-xxlarge-font-smoothing
|
auto | — | auto | — |
--title-xxlarge-font-weight
|
375 | — | 375 | — |
--title-xxlarge-line-height
|
1.2 | — | 1.2 | — |