Diwa Design System

Typography

Diwa uses Outfit for base UI text and Instrument Sans for display headings to create a premium but readable hierarchy. The static scale runs from 11–48px, with a fluid layer powered by clamp() that adapts between the 480px and 1760px breakpoints.

Example

Live type specimens for each role in the Diwa type system. Every size is driven by a CSS custom property so it reflects the active token values.

Display

Display Large

The quick brown fox jumps over the lazy dog

Display Medium

The quick brown fox jumps over the lazy dog

Display Small

The quick brown fox jumps over the lazy dog

Heading

Heading XX Large

The quick brown fox jumps over the lazy dog

Heading X Large

The quick brown fox jumps over the lazy dog

Heading Large

The quick brown fox jumps over the lazy dog

Heading Medium

The quick brown fox jumps over the lazy dog

Heading Small

The quick brown fox jumps over the lazy dog

Text

Text X Large

The quick brown fox jumps over the lazy dog

Text Large

The quick brown fox jumps over the lazy dog

Text Medium

The quick brown fox jumps over the lazy dog

Text Small

The quick brown fox jumps over the lazy dog

Text X Small

The quick brown fox jumps over the lazy dog

Text XX Small

The quick brown fox jumps over the lazy dog

Font families

--diwa-font-family-base

The quick brown fox

Outfit, Segoe UI, Roboto fallback stack

--diwa-font-family-mono

const x = 'value';

Geist Mono, Consolas fallback

Static type scale

Scale	Token	Value	Sample
xs	--diwa-font-size-xs	11px	Aa
sm	--diwa-font-size-sm	12px	Aa
md	--diwa-font-size-md	13px	Aa
base	--diwa-font-size-base	15px	Aa
lg	--diwa-font-size-lg	17px	Aa
xl	--diwa-font-size-xl	20px	Aa
2xl	--diwa-font-size-2xl	24px	Aa
3xl	--diwa-font-size-3xl	32px	Aa
4xl	--diwa-font-size-4xl	48px	Aa

Fluid type scale

Fluid tokens use clamp(min, preferred, max) to scale continuously. They are intended for headings and display text — not body copy, which should use static tokens for consistent reading rhythm.

Token	Range	Suggested use
--diwa-font-size-fluid-sm	11–13px	Caption text, labels
--diwa-font-size-fluid-base	13–15px	Body copy
--diwa-font-size-fluid-lg	14–17px	Lead paragraph
--diwa-font-size-fluid-xl	16–20px	Subheadings
--diwa-font-size-fluid-2xl	18–24px	Section headings
--diwa-font-size-fluid-3xl	20–28px	Page headings
--diwa-font-size-fluid-4xl	24–36px	Hero / display medium
--diwa-font-size-fluid-5xl	36–60px	Hero / display large

Font weights

--diwa-font-weight-normalNormal — body copy400

--diwa-font-weight-mediumMedium — UI labels, buttons500

--diwa-font-weight-semiboldSemibold — headings600

--diwa-font-weight-boldBold — emphasis, display700

Line heights

--diwa-line-height-tight

1.1 — Display, headings

--diwa-line-height-normal

1.5 — UI labels, buttons, captions

--diwa-line-height-relaxed

1.6 — Body copy

--diwa-line-height-loose

1.8 — Long-form prose

Usage

Do

✓Use fluid tokens for headings and display text so they scale gracefully across breakpoints.
✓Use static tokens for body copy and UI labels to maintain consistent reading rhythm.
✓Match font weight to semantic role: 400 body, 500 UI labels, 600 headings, 700 display.
✓Use --diwa-font-family-mono for all code, tokens, and technical strings.

Don't

✕Don't use fluid tokens for body text — fluid scaling breaks reading rhythm.
✕Don't mix font families within a single semantic role.
✕Don't use font-weight above 700 unless a heavier token is explicitly introduced and tested.
✕Don't hard-code font sizes in px from outside the token scale.

Styles

Import JS tokens for CSS-in-JS or Framer Motion. Consume CSS custom properties directly in stylesheets.

// JS — import typography tokens
import {
  fontSizeBase, fontSizeSm, fontSizeLg, fontSizeXl,
  fontSizeFluidSm, fontSizeFluidBase, fontSizeFluidLg,
  fontWeightNormal, fontWeightMedium, fontWeightSemibold, fontWeightBold,
  lineHeightTight, lineHeightNormal, lineHeightRelaxed,
  fontFamilyBase, fontFamilyMono,
} from '@diwacopilot/components/styles';

/* ─── CSS ─────────────────────────────────────────────────────────────── */
.heading {
  font-family: var(--diwa-font-family-base);
  font-size: var(--diwa-font-size-fluid-xl);
  font-weight: var(--diwa-font-weight-semibold);
  line-height: var(--diwa-line-height-tight);
  color: var(--diwa-text-primary);
}

.body {
  font-family: var(--diwa-font-family-base);
  font-size: var(--diwa-font-size-base);
  font-weight: var(--diwa-font-weight-normal);
  line-height: var(--diwa-line-height-relaxed);
  color: var(--diwa-text-secondary);
}

.code {
  font-family: var(--diwa-font-family-mono);
  font-size: var(--diwa-font-size-sm);
  color: var(--diwa-accent);
}

@use '@diwacopilot/components/styles' as *;

.heading {
  font-family: $diwa-font-family-base;
  font-size: $diwa-font-size-fluid-xl;
  font-weight: $diwa-font-weight-semibold;
  line-height: $diwa-line-height-tight;
  color: $diwa-text-primary;
}

.body {
  font-family: $diwa-font-family-base;
  font-size: $diwa-font-size-base;
  font-weight: $diwa-font-weight-normal;
  line-height: $diwa-line-height-relaxed;
  color: $diwa-text-secondary;
}

.code {
  font-family: $diwa-font-family-mono;
  font-size: $diwa-font-size-sm;
  color: $diwa-accent;
}