Typography

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	400 · 530
JetBrains Mono	monospace	Code snippets, technical content, file paths	Regular · Bold

Optical weights

Inter uses variable font instances tuned for optical balance — the semibold tier 600 maps to 530, while 400 renders at its nominal 400. The .font-* Tailwind classes apply these values automatically.

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 · 530	font-heading-hero
heading-section	The quick brown fox	24px · 530	font-heading-section
heading-default	The quick brown fox	20px · 530	font-heading-default
heading-subsection	The quick brown fox	18px · 530	font-heading-subsection
heading-base	The quick brown fox	16px · 530	font-heading-base
heading-small	The quick brown fox	14px · 530	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 · 400	font-body-normal
body-strong	The quick brown fox jumps over the lazy dog.	14px · 530	font-body-strong
body-light(deprecated)	The quick brown fox jumps over the lazy dog.	14px · 310	font-body-light
body-code	npm install @harnessio/ui	12px · mono	font-body-code
body-single-line-normal	For UI components	14px · 400 · 1×	font-body-single-line-normal
body-single-line-strong	For UI components	14px · 530 · 1×	font-body-single-line-strong

Captions

Captions are used for labels and metadata.

Variant	Preview	Specs	Tailwind Class
caption-normal	Label text for UI elements	12px · 400	font-caption-normal
caption-strong	Label text for UI elements	12px · 530	font-caption-strong
caption-light (deprecated)	Label text for UI elements	12px · 310	font-caption-light
caption-code	v2.4.1-beta	12px · mono	font-caption-code
caption-single-line-normal	For compact UI	12px · 400 · 1×	font-caption-single-line-normal

Micro

Variant	Preview	Specs	Tailwind Class
micro-normal	Labels, signatures, technical info	11px · 530	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), placeholder, Labels, secondary info	text-cn-2
foreground-3	The quick brown fox	Disabled text	text-cn-3
foreground-4	The quick brown fox	To be Deprecated, use foreground-3	text-cn-4

Upcoming change — target Oct '26

foreground-4 will be merged into foreground-3 and is slated for deprecation. Prefer foreground-3 (text-cn-3) for new work instead of foreground-4 (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-10	28px
text-cn-size-1	10.25px	text-cn-size-7	18px	text-cn-size-11	36px
text-cn-size-2	11.5px	text-cn-size-8	20px	text-cn-size-12	48px
text-cn-size-3	12px	text-cn-size-9	24px	text-cn-size-15	96px
text-cn-size-5	14px

Line Height Scale

Line heights follow a flat 4px grid. For typography, prefer the composite .font-* styles above (or the Text component) — the font shorthand already pairs line-height with font-size, keeping size and leading in their intended relationship.

When you do need to set line-height on its own, use the token-backed leading-cn-* utility (leading-cn-8 … leading-cn-40) rather than Tailwind’s stock leading-* classes or hard-coded pixel values. The stock classes are unitless multipliers that drift off the 4px grid (e.g. leading-tight on 12px = 15px); leading-cn-* always lands on-grid and tracks the ramp from a single source of truth.

For the occasional layout case — e.g. sizing a placeholder box to a line of text — reference the token directly as an arbitrary value rather than hard-coding a pixel height, so it stays in sync with the type: h-[var(--cn-line-height-20)].

Utility Class	CSS Variable	Value	Pixels
leading-cn-8	—cn-line-height-8	0.5rem	8px
leading-cn-12	—cn-line-height-12	0.75rem	12px
leading-cn-16	—cn-line-height-16	1rem	16px
leading-cn-20	—cn-line-height-20	1.25rem	20px
leading-cn-24	—cn-line-height-24	1.5rem	24px
leading-cn-28	—cn-line-height-28	1.75rem	28px
leading-cn-32	—cn-line-height-32	2rem	32px
leading-cn-36	—cn-line-height-36	2.25rem	36px
leading-cn-40	—cn-line-height-40	2.5rem	40px

Letter Spacing

Class	Value	Usage	Preview
tracking-cn-tight	-0.02em	Headings	The quick brown fox
tracking-cn-normal	0em	Default body text	The quick brown fox
tracking-cn-wide	0.025em	Improved readability	The quick brown fox

Font Weight

Weight tokens are named buckets. The bucket name is the conventional CSS weight number (400, 600, 700), but its value is the optically-tuned variable-font instance that actually renders — which is why the bucket name and the rendered weight don’t always match (e.g. the 600 bucket renders 530). Reach for these via .font-* classes or <Text>, not raw weights.

Family	Bucket (token)	Optical value	Reads as	Example
Inter	400	400	Regular	The quick brown fox jumps over the lazy dog.
Inter	600	530	Semibold	The quick brown fox jumps over the lazy dog.
JetBrains Mono	400	400	Regular	The quick brown fox jumps over the lazy dog.
JetBrains Mono	700	700	Bold	The quick brown fox jumps over the lazy dog.

Usage

import { Text } from '@harnessio/ui/components'

// Variants
<Text variant="heading-hero">Hero</Text>
<Text variant="body-normal">Body text</Text>
<Text variant="caption-normal">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>

API Reference

Best Practice

Always use predefined text variants instead of custom font styles to ensure consistency across the application.