Vayu UI's typography system built on the Typography component — semantic font families, size scales, and color variants for consistent, accessible text.

Overview

The Typography component encapsulates Vayu UI's type system — three font families, a semantic size scale, and color variants — into a single, accessible API. Instead of manually applying Tailwind classes, use Typography subcomponents to get consistent, readable text.

npx vayu-ui add typography

Font Families

Vayu UI uses three font families, each with a specific purpose:

Tier	Font	Tailwind Class	Usage
Primary	Oswald	`font-primary`	Headings, labels, navigation
Secondary	Mulish	`font-secondary`	Body text, descriptions, captions
Tertiary	Geist Mono	`font-tertiary`	Code, technical values, keyboard shortcuts

The Typography component selects the right font automatically — headings use font-primary, paragraphs use font-secondary. Override with the font prop when needed.

Primary font (Oswald) — headings and labels

Secondary font (Mulish) — body text and descriptions

Geist Mono — code and technical values

<Typography.P font="primary">Oswald for headings</Typography.P>
<Typography.P font="secondary">Mulish for body text</Typography.P>
<Typography.Code>npm install vayu-ui</Typography.Code>

Headings

Typography provides six heading levels (H1–H6), each with predefined sizes and weights that maintain visual hierarchy.

Size Scale

Component	Size	Weight
`Typography.H1`	`text-4xl` / `sm:text-5xl` / `lg:text-6xl`	`font-bold`
`Typography.H2`	`text-3xl` / `sm:text-4xl` / `lg:text-5xl`	`font-extrabold`
`Typography.H3`	`text-2xl` / `sm:text-3xl` / `lg:text-4xl`	`font-semibold`
`Typography.H4`	`text-xl` / `sm:text-2xl` / `lg:text-3xl`	`font-semibold`
`Typography.H5`	`text-lg` / `sm:text-xl` / `lg:text-2xl`	`font-semibold`
`Typography.H6`	`text-base` / `sm:text-lg` / `lg:text-xl`	`font-semibold`

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<Typography.H1>Heading 1 — Page Title</Typography.H1>
<Typography.H2>Heading 2 — Section Title</Typography.H2>
<Typography.H3>Heading 3 — Subsection</Typography.H3>
<Typography.H4>Heading 4 — Component</Typography.H4>
<Typography.H5>Heading 5 — Subcomponent</Typography.H5>
<Typography.H6>Heading 6 — Minor Heading</Typography.H6>

Paragraphs

Typography.P renders body text with relaxed line height, using the secondary font by default.

This is a paragraph. It uses the secondary font (Mulish) with a relaxed line height for optimal readability. The typography system ensures consistent spacing and sizing across your application.

This is a secondary paragraph with less emphasis.

This paragraph will be truncated with an ellipsis when it overflows its container, useful for single-line content in cards or lists.

<Typography.P>Default paragraph with relaxed line height.</Typography.P>
<Typography.P variant="secondary">Secondary paragraph for less emphasis.</Typography.P>
<Typography.P ellipsis>Long text truncated with ellipsis.</Typography.P>

Color Variants

All Typography components support semantic color variants through the variant prop:

Variant	Usage	Token
`primary`	Default text	`canvas-content`
`secondary`	Muted/deemphasized	`muted-content`
`tertiary`	Subtle text	`surface-content`
`error`	Error/validation	`destructive`
`warning`	Warning/caution	`warning`
`info`	Informational	`info`
`success`	Success/confirmation	`success`
`gradient`	Brand gradient	brand gradient

Error text variant

Success text variant

Warning text variant

Info text variant

Gradient Heading

<Typography.P variant="error">Error text</Typography.P>
<Typography.P variant="success">Success text</Typography.P>
<Typography.P variant="warning">Warning text</Typography.P>
<Typography.P variant="info">Info text</Typography.P>

<Typography.H3 variant="gradient">Gradient Heading</Typography.H3>

Labels

Typography.Label associates text with form controls using the htmlFor prop.

Email Address

Password

<Typography.Label htmlFor="email">Email Address</Typography.Label>
<Typography.Label htmlFor="password">Password</Typography.Label>

Code

Typography.Code renders inline code with syntax language hints and accessible labels.

Install with: npm install vayu-ui

TypeScript example: const x: string = "hello"

<Typography.Code>npm install vayu-ui</Typography.Code>
<Typography.Code codeLang="typescript">const x: string = "hello"</Typography.Code>

Links

Typography.Link uses Next.js <Link> for internal paths and standard <a> for external URLs. External links automatically add rel="noopener noreferrer" and accessible announcements.

Internal Link

External Link

<Typography.Link href="/components">Internal Link</Typography.Link>
<Typography.Link href="https://example.com" target="_blank">
  External Link
</Typography.Link>

Call to Action

Typography.CTA renders prominent text for calls to action.

Get Started with Vayu UI

<Typography.CTA className="text-brand">Call to Action</Typography.CTA>

Font Loading

Vayu UI expects these fonts to be loaded. Add them to your project's font configuration:

Using Next.js Font Optimization

// app/layout.tsx
import { Oswald, Mulish, Geist_Mono } from 'next/font/google';

const oswald = Oswald({
  subsets: ['latin'],
  variable: '--font-primary',
});

const mulish = Mulish({
  subsets: ['latin'],
  variable: '--font-secondary',
});

const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-tertiary',
});

export default function RootLayout({ children }) {
  return (
    <html className={`${oswald.variable} ${mulish.variable} ${geistMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Using CSS @font-face

/* In your global CSS */
@font-face {
  font-family: 'Oswald';
  src: url('/fonts/Oswald.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/fonts/Mulish.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Typography