@vibe-labs/design-typography

Typography tokens and utility classes for the Vibe Design System.

Usage

@import "@vibe-labs/design-typography";

Contents

Tokens (typography.css)

CSS custom properties defined in @layer vibe.tokens:

Font Families

Token	Default
--font-sans	System UI stack
--font-mono	Monospace stack
--font-display	--font-sans

Text Colors

Token	Default
--text-primary	--color-neutral-0
--text-secondary	--color-neutral-200
--text-inverse	--color-neutral-900
--text-muted	--color-neutral-400
--text-disabled	--color-neutral-500

Font Sizes (with paired line heights)

Token	Size	Line height
--text-xs	0.75rem	1rem
--text-sm	0.875rem	1.25rem
--text-base	1rem	1.5rem
--text-md	1.125rem	1.625rem
--text-lg	1.25rem	1.75rem
--text-xl	1.5rem	2rem
--text-display-sm	1.875rem	2.25rem
--text-display-md	2.25rem	2.5rem
--text-display-lg	3rem	3.25rem
--text-display-xl	3.75rem	4rem
--text-hero	4.5rem	4.75rem
--text-hero-lg	6rem	6.25rem
--text-hero-xl	7.5rem	7.75rem

Standalone Leading

--leading-none (1) · --leading-tight (1.15) · --leading-snug (1.3) · --leading-normal (1.5) · --leading-relaxed (1.625) · --leading-loose (2)

Font Weights

--font-light (300) · --font-normal (400) · --font-medium (500) · --font-semibold (600) · --font-bold (700) · --font-black (900)

Letter Spacing

--tracking-tighter (-0.05em) · --tracking-tight (-0.025em) · --tracking-normal (0) · --tracking-wide (0.025em) · --tracking-wider (0.05em) · --tracking-widest (0.1em)

Generated Utilities

All classes generated into @layer vibe.utilities.

Sizes (sizes.g.css)

.text-{size} — sets both font-size and paired line-height (xs, sm, base, md, lg, xl, display-sm, display-md, display-lg, display-xl, hero, hero-lg, hero-xl)

Weights (weights.g.css)

.font-{weight} — light, normal, medium, semibold, bold, black

Tracking (tracking.g.css)

.tracking-{name} — tighter, tight, normal, wide, wider, widest

Leading (leading.g.css)

.leading-{name} — none, tight, snug, normal, relaxed, loose

Families (families.g.css)

.font-sans · .font-mono · .font-display

Alignment (align.g.css)

.text-left · .text-center · .text-right · .text-justify

Decoration & Transform (decoration.g.css)

• Decoration: .underline · .overline · .line-through · .no-underline
• Transform: .uppercase · .lowercase · .capitalize · .normal-case

Overflow & Wrapping (overflow.g.css)

• .truncate — single-line ellipsis
• .text-wrap · .text-nowrap
• .text-balance · .text-pretty — with @supports fallbacks
• .line-clamp-1 … .line-clamp-4 — multi-line truncation

Dist Structure

File	Description
index.css	Barrel — imports all files below
typography.css	Token definitions
sizes.g.css	Font size + line height utilities
weights.g.css	Font weight utilities
tracking.g.css	Letter spacing utilities
leading.g.css	Line height utilities
families.g.css	Font family utilities
align.g.css	Text alignment utilities
decoration.g.css	Decoration & transform utilities
overflow.g.css	Truncation & wrapping utilities

Dependencies

Requires --color-neutral-* tokens from @vibe-labs/design-colors for text color tokens.

Build

npm run build