Typography
The typography system provides consistent text styling across all components using the Heading and Text components.
Font Families
| Family | Token | Usage |
|---|---|---|
| Inter | --font-family-sans | Body text, UI elements |
| JetBrains Mono | --font-family-mono | Code, technical content |
Type Scale
| Token | Size | Line Height | Usage |
|---|---|---|---|
--font-size-xs | 0.75rem (12px) | 1rem | Captions, badges |
--font-size-sm | 0.875rem (14px) | 1.25rem | Secondary text, labels |
--font-size-base | 1rem (16px) | 1.5rem | Body text |
--font-size-lg | 1.125rem (18px) | 1.75rem | Lead text |
--font-size-xl | 1.25rem (20px) | 1.75rem | H4 headings |
--font-size-2xl | 1.5rem (24px) | 2rem | H3 headings |
--font-size-3xl | 1.875rem (30px) | 2.25rem | H2 headings |
--font-size-4xl | 2.25rem (36px) | 2.5rem | H1 headings |
Font Weights
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text |
| Medium | 500 | Labels, emphasis |
| Semibold | 600 | Subheadings, buttons |
| Bold | 700 | Headings |
Components
Heading
import { Heading } from '@kikumi3n/ui';
<Heading level={1}>Page Title</Heading>
<Heading level={2}>Section Title</Heading>
<Heading level={3}>Subsection</Heading>
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level (renders <h1>–<h6>) |
Text
import { Text } from '@kikumi3n/ui';
<Text>Default body text</Text>
<Text as="span" size="sm">Small text</Text>
<Text as="p" size="lg">Lead paragraph</Text>
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'p' | 'span' | 'div' | 'label' | 'p' | HTML element |
size | 'xs' | 'sm' | 'base' | 'lg' | 'base' | Font size |
Best Practices
- Use
Headingfor all heading text — it ensures proper heading hierarchy - Use
Textfor body content — provides consistent sizing and line height - Don't skip heading levels (e.g.,
h1→h3) - Use semantic tokens (
--font-size-*) instead of hardcoded pixel values