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