Typography
Consistency in typography helps users navigate content with ease. Always use hierarchy to guide attention and improve readability.
Our typography system is built around a set of predefined text styles that provide consistent visual hierarchy and readability across the application. The Text component is the primary way to implement these typographic styles.
Font Families
The design system uses two typefaces with optically adjusted weights for Inter:
Family | Fallback | Usage | Weights |
|---|---|---|---|
| Inter | system-ui, sans-serif | All UI text — headings, body, captions, micro | 310 · 360 · 440 · 550 |
| JetBrains Mono | monospace | Code snippets, technical content, file paths | Light · Regular · Medium |
Type Scale Reference
Each text style maps to a composite Tailwind utility class (.font-*) that applies font-size, font-weight, line-height, and letter-spacing in one declaration. The corresponding CSS custom property follows the pattern --cn-{variant} (e.g. --cn-heading-hero, --cn-body-normal). Use the Text component for React, or the Tailwind class / CSS variable directly when needed.
Headings
Headings establish the information hierarchy and provide structure to content.
Variant | Preview | Specs | Tailwind Class |
|---|---|---|---|
heading-hero | The quick brown fox | 28px · 440 | font-heading-hero |
heading-section | The quick brown fox | 24px · 360 | font-heading-section |
heading-subsection | The quick brown fox | 18px · 360 | font-heading-subsection |
heading-base | The quick brown fox | 16px · 360 | font-heading-base |
heading-small | The quick brown fox | 14px · 440 | font-heading-small |
Body
Body text is used for the main content.
Variant | Preview | Specs | Tailwind Class |
|---|---|---|---|
body-normal | The quick brown fox jumps over the lazy dog. | 14px · 360 | font-body-normal |
body-strong | The quick brown fox jumps over the lazy dog. | 14px · 440 | font-body-strong |
body-light | The quick brown fox jumps over the lazy dog. | 14px · 310 | font-body-light |
body-code | npm install @harnessio/ui | 13px · mono | font-body-code |
body-single-line-normal | For UI components | 14px · 360 · 1× | font-body-single-line-normal |
body-single-line-strong | For UI components | 14px · 440 · 1× | font-body-single-line-strong |
body-single-line-light | For UI components | 14px · 310 · 1× | font-body-single-line-light |
body-single-line-code | const x = 42 | 13px · mono · 1× | font-body-single-line-code |
Captions
Captions are used for labels and metadata.
Variant | Preview | Specs | Tailwind Class |
|---|---|---|---|
caption-normal | Label text for UI elements | 13px · 360 | font-caption-normal |
caption-strong | Label text for UI elements | 13px · 440 | font-caption-strong |
caption-light | Label text for UI elements | 13px · 310 | font-caption-light |
caption-code | v2.4.1-beta | 12.6px · mono | font-caption-code |
caption-single-line-normal | For compact UI | 13px · 360 · 1× | font-caption-single-line-normal |
caption-single-line-strong | For compact UI | 13px · 440 · 1× | font-caption-single-line-strong |
caption-single-line-light | For compact UI | 13px · 310 · 1× | font-caption-single-line-light |
caption-single-line-code | v2.4.1 | 12.6px · mono · 1× | font-caption-single-line-code |
Micro
Variant | Preview | Specs | Tailwind Class |
|---|---|---|---|
micro-normal | Labels, signatures, technical info | 11.5px · 440 | font-micro-normal |
Text Colors
Text colors help establish visual hierarchy and convey meaning.
Hierarchy
Color | Preview | Usage | Tailwind Class |
|---|---|---|---|
foreground-1 | The quick brown fox | Headings, primary content | text-cn-1 |
foreground-2 | The quick brown fox | Body text (default) | text-cn-2 |
foreground-3 | The quick brown fox | Labels, secondary info | text-cn-3 |
foreground-4 | The quick brown fox | Placeholders, disabled | text-cn-4 |
Semantic
Color | Preview | Usage | Tailwind Class |
|---|---|---|---|
success | Success | Positive feedback, completion states | text-cn-success |
warning | Warning | Caution messages, attention needed | text-cn-warning |
danger | Error | Errors, destructive actions | text-cn-danger |
merged | Merged | Git merged state | text-cn-merged |
brand | Brand | Brand accent, links | text-cn-brand |
Text Alignment
Control horizontal text alignment.
Text Wrapping
Control how text wraps within containers.
Truncation & Line Clamp
Limit text display with truncation or line clamping.
Primitive Tokens
Font Size Scale
Individual font size tokens are available via text-cn-size-{n} classes. These set only font-size — for complete text styles, prefer the composite .font-* classes above.
| Class | Size | Class | Size | Class | Size |
|---|---|---|---|---|---|
text-cn-size-0 | 8.8px | text-cn-size-6 | 16px | text-cn-size-12 | 48px |
text-cn-size-1 | 10.25px | text-cn-size-7 | 18px | text-cn-size-13 | 60px |
text-cn-size-2 | 11.5px | text-cn-size-8 | 20px | text-cn-size-14 | 72px |
text-cn-size-3 | 12.6px | text-cn-size-9 | 24px | text-cn-size-15 | 96px |
text-cn-size-4 | 13px | text-cn-size-10 | 28px | text-cn-size-16 | 128px |
text-cn-size-5 | 14px | text-cn-size-11 | 36px |
Letter Spacing
| Class | Value | Usage |
|---|---|---|
tracking-cn-tighter | -0.05em | Very tight, display text |
tracking-cn-tight | -0.02em | Headings |
tracking-cn-normal | 0em | Default body text |
tracking-cn-wide | 0.025em | Improved readability |
tracking-cn-wider | 0.05em | Spaced text |
tracking-cn-widest | 0.1em | All caps text |
Usage
import { Text } from '@harnessio/ui/components'
// Variants<Text variant="heading-hero">Hero</Text><Text variant="body-normal">Body text</Text><Text variant="caption-light">Caption</Text>
// Colors<Text color="foreground-1">Primary</Text><Text color="success">Success</Text><Text color="danger">Error</Text>
// Truncation<Text truncate>Long text...</Text><Text lineClamp={2}>Multi-line...</Text>
// Alignment & Wrapping<Text align="center">Centered</Text><Text wrap="balance">Balanced</Text>
// Custom element<Text as="h1" variant="heading-hero">Page Title</Text>