@vibe-labs/design-typography

Typography tokens and utility classes for the Vibe Design System — font families, sizes, weights, tracking, leading, alignment, decoration, and overflow utilities.

Installation

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

Tokens

All tokens 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)

Utilities / Generated Classes

All classes generated into @layer vibe.utilities.

Sizes (sizes.g.css)

.text-{size} — sets both font-size and paired line-height

Sizes: 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

---

Usage Guide

Provides font size, weight, tracking, leading, family, alignment, and overflow utilities for consistent text styling across the Vibe Design System.

Import

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

Common Patterns

1. Body text with readable line height

<p class="text-base leading-relaxed">
  Body copy reads best at base size with relaxed leading.
</p>

2. Display heading with tight tracking

<h1 class="text-display-lg font-bold tracking-tight">
  Landing Page Headline
</h1>

3. Metadata and labels

<span class="text-xs font-medium uppercase tracking-wider text-muted">
  Category Label
</span>

4. Truncate long strings in constrained containers

<div class="truncate" style="max-width: 200px;">
  A very long filename or URL that must not overflow its container
</div>

5. Multi-line clamping for card descriptions

<p class="line-clamp-3 text-sm leading-normal">
  This description will show exactly three lines of text and then trail off
  with an ellipsis, regardless of the actual content length.
</p>

6. Switch font families for code blocks

<pre class="font-mono text-sm">
  <code>const x = useToken('--text-base');</code>
</pre>

7. Balance headlines to avoid awkward orphans

<h2 class="text-display-md font-semibold text-balance">
  A Nicely Balanced Two-Line Headline
</h2>

Token Reference

Token	Value	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-hero	4.5rem	4.75rem