Theme

Typography

Typography system with 10-step scale (0-9), font weights, and formatting components. Kookie UI uses custom typography values that differ from Radix Themes.View source →

Typography system with 10-step scale (0-9), font weights, and formatting components. The typography infrastructure (scale system, token structure) is from Radix Themes, but Kookie UI uses custom typography values that differ from Radix Themes.

For complete typography documentation and advanced customization, visit the Radix Themes Typography documentation. Note that Kookie UI's typography values are customized and may not match Radix Themes exactly.

Installation

shell

npm install @kushagradhawan/kookie-ui

Usage

Use Text and Heading components to render titles and body copy. These components share size and weight props for consistent typography.

tsx

import { Text, Heading } from '@kushagradhawan/kookie-ui';
 
<Heading size="4">Page Title</Heading>
<Text size="3">Body text content</Text>

Type Scale

10-step size scale (0-9) with corresponding font size, line height, and letter spacing values:

css

/* Type scale tokens */
var(--font-size-0)  /* 10px - Extra small text */
var(--font-size-1)  /* 12px - Small text */
var(--font-size-2)  /* 14px - Body text */
var(--font-size-3)  /* 16px - Standard text */
var(--font-size-4)  /* 18px - Large text */
var(--font-size-5)  /* 20px - Heading text */
var(--font-size-6)  /* 24px - Large heading */
var(--font-size-7)  /* 28px - Display text */
var(--font-size-8)  /* 35px - Hero text */
var(--font-size-9)  /* 60px - Massive text */

Size Scale

Size 0

Extra small text for fine print and micro labels.

tsx

<Text size="0">Extra small text for fine print</Text>

Size 1

Small text for captions and labels.

tsx

<Text size="1">Small text for captions</Text>

Size 2

Body text for secondary content.

tsx

<Text size="2">Body text for secondary content</Text>

Size 3

Standard text for main content.

tsx

<Text size="3">Standard text for main content</Text>

Size 4

Large text for important content.

tsx

<Text size="4">Large text for important content</Text>

Size 5

Heading text for section titles.

tsx

<Heading size="5">Heading text for section titles</Heading>

Size 6

Large heading for page titles.

tsx

<Heading size="6">Large heading for page titles</Heading>

Size 7

Display text for hero sections.

tsx

<Heading size="7">Display text for hero sections</Heading>

Size 8

Hero text for main headlines.

tsx

<Heading size="8">Hero text for main headlines</Heading>

Size 9

Massive text for impact headlines.

tsx

<Heading size="9">Massive text for impact headlines</Heading>

Font Weight

Use weight prop to control text emphasis and hierarchy:

tsx

<Text weight="light">Light text</Text>
<Text weight="regular">Regular text</Text>
<Text weight="medium">Medium text</Text>
<Text weight="bold">Bold text</Text>

Available weights: thin, extralight, light, regular, medium, semibold, bold, extrabold.

Formatting Components

Compose formatting components to add emphasis and structure:

tsx

<Text>
  The <Em>most</Em> important thing to remember is,{' '}
  <Strong>stay positive</Strong>.
</Text>

tsx

<Text>
  Use <Code>inline code</Code> for technical terms.
</Text>

Font Family

Kookie UI preserves the Radix typography tokens. Components read from these tokens, and their shape matches the structure described in the Radix Themes documentation.

css

/* Radix typography tokens (used by components) */
var(--default-font-family)  /* Base text font stack */
var(--code-font-family)     /* Monospace font stack for <Code> */
var(--heading-font-family)  /* Heading font stack for <Heading> */
var(--strong-font-family)   /* Font stack for <Strong> */
var(--em-font-family)       /* Font stack for <Em> */
var(--quote-font-family)    /* Font stack for <Quote> */

Font Customization

Kookie UI makes font customization simple and flexible. Switch between font families instantly using theme props or customize with your own fonts.

Theme Font Family

tsx

/* Sans-serif fonts (default) */
<Theme fontFamily="sans"><Text>This uses Inter font</Text></Theme>
 
/* Monospace fonts */
<Theme fontFamily="mono"><Text>This uses JetBrains Mono font</Text></Theme>
 
/* Serif fonts */
<Theme fontFamily="serif"><Text>This uses Playfair Display font</Text></Theme>

Custom Fonts

Kookie UI uses two layers of font variables. Designers can stay at the Kookie layer, while developers who already know Radix can work directly with the Radix tokens. You can override either layer; the most common entry point is the Kookie design tokens.

Layer	Tokens	Use when…
Radix typography	`--default-font-family`, `--heading-font-family`, `--code-font-family`, `--strong-font-family`, `--em-font-family`, `--quote-font-family`	You want to follow the Radix Themes docs exactly or fine‑tune individual roles.
Kookie design tokens	`--font-sans`, `--font-mono`, `--font-serif`	You want a single place to swap the main sans/mono/serif families for the whole theme.

css

/* Import your preferred fonts (example) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 
/* Option 1 – Radix-compatible overrides (fine‑grained) */
.radix-themes {
  --default-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --heading-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --code-font-family: 'Fira Code', 'Consolas', monospace;
}
 
/* Option 2 – Kookie design tokens (recommended entry point) */
:root {
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;
  --font-serif: 'Georgia', 'Times New Roman', serif;
}

Theme Override Variables

These are the main Kookie design tokens you override to customize fonts globally. They are wired into the Radix typography tokens shown above, so changing them updates the fonts used by components.

Variable	Default Value
`--font-sans`	`var(--font-inter)`
`--font-mono`	`var(--font-jetbrains-mono)`
`--font-serif`	`var(--font-playfair-display)`

Base Font Stacks

These are the actual font stacks used by the theme override variables. Override these only if you want to change Kookie's base fonts.

Variable	Font Stack
`--font-inter`	`'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
`--font-jetbrains-mono`	`'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace`
`--font-playfair-display`	`'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif`

Credits

The typography infrastructure (10-step scale system and token structure) is from Radix Themes by WorkOS. However, Kookie UI uses custom typography values that have been modified from the original Radix Themes values. The typography system structure and approach credit goes to Radix Themes, while the specific typography values are custom to Kookie UI.

Typography

Installation

Usage

Type Scale

Size Scale

Size 0

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6

Size 7

Size 8

Size 9

Font Weight

Formatting Components

Font Family

Font Customization

Theme Font Family

Custom Fonts

Theme Override Variables

Base Font Stacks

Credits

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background