Typography
Font family, size scale, weight, line-height, and letter-spacing tokens. Override --kg-font-sans to switch the entire UI to your brand typeface in one variable.
Type scale
--kg-text-xs12px
The quick brown fox--kg-text-sm14px
The quick brown fox--kg-text-md16px
The quick brown fox--kg-text-lg18px
The quick brown fox--kg-text-xl20px
The quick brown fox--kg-text-2xl24px
The quick brown fox--kg-text-3xl30px
The quick brown fox--kg-text-4xl36px
The quick brown foxFont families
--kg-font-sansSyne · sans-serifsystem-ui, -apple-system, sans-serif
The five boxing wizards jump quickly.--kg-font-monoDM Mono · monospaceui-monospace, "Cascadia Code", "Consolas", monospace
const value = "0xff";Font weights
--kg-weight-regular400 · Regular
Karigiri Kit — Regular--kg-weight-medium500 · Medium
Karigiri Kit — Medium--kg-weight-semibold600 · Semibold
Karigiri Kit — Semibold--kg-weight-bold700 · Bold
Karigiri Kit — BoldLine height
| Token | Value | Use when |
|---|---|---|
| --kg-leading-none | 1 | Single-line display text, icon labels |
| --kg-leading-tight | 1.2 | Large headings (h1, h2) |
| --kg-leading-snug | 1.375 | UI labels, card titles, nav items |
| --kg-leading-normal | 1.6 | Body copy, descriptions |
| --kg-leading-relaxed | 1.75 | Long-form prose |
| --kg-leading-loose | 1.8 | Spaced-out body text or captions |
Letter spacing
| Token | Value | Use when |
|---|---|---|
| --kg-tracking-tighter | -0.025em | Large display headings |
| --kg-tracking-tight | -0.015em | Subheadings, hero text |
| --kg-tracking-normal | 0em | Body copy (default) |
| --kg-tracking-wide | 0.05em | Small caps, badges, chip labels |
| --kg-tracking-wider | 0.10em | Uppercase section labels, overlines |