Typography

Fonts are part of the design system — they ship inside design-system/style/fonts and are declared by the stylesheet. No Google Fonts, no external requests.

Fonts & type scale

Open ↗

<div class="space-y-6 text-foreground">
  <div class="space-y-1">
    <p class="text-3xl font-semibold">The quick brown fox</p>
    <p class="text-xl">jumps over the lazy dog</p>
    <p class="text-base">Body text at the base size.</p>
    <p class="text-sm text-foreground-subtle">Small, subtle supporting text.</p>
  </div>

  <hr class="border-border" />

  <div class="grid gap-4 sm:grid-cols-3">
    <div>
      <p class="font-geist text-lg">Geist</p>
      <p class="font-geist text-foreground-subtle">Default UI sans · <span class="font-medium">font-geist</span></p>
    </div>
    <div>
      <p class="font-geist-mono text-lg">Geist Mono</p>
      <p class="font-geist-mono text-foreground-subtle">Numbers &amp; code · font-geist-mono</p>
    </div>
    <div>
      <p class="font-noto text-lg" dir="rtl">نوتو نسخ</p>
      <p class="font-noto text-foreground-subtle">Arabic script · font-noto</p>
    </div>
  </div>

  <hr class="border-border" />

  <div class="flex flex-wrap items-baseline gap-4">
    <span class="text-xs">text-xs</span>
    <span class="text-sm">text-sm</span>
    <span class="text-base">text-base</span>
    <span class="text-lg">text-lg</span>
    <span class="text-xl">text-xl</span>
    <span class="text-2xl">text-2xl</span>
    <span class="text-3xl">text-3xl</span>
  </div>
</div>

Font families

Utility	Family	Use
`font-geist`	Geist	Default UI sans (the body default)
`font-geist-mono`	Geist Mono	Numbers, code, tabular data
`font-noto`	Noto Naskh Arabic	Arabic / RTL text

Geist is the default body font — set bg-background text-foreground font-geist on <body> and you’re done. It ships with the ss01 and ss04 stylistic sets enabled.

Type scale

Use the standard Tailwind size utilities — text-xs through text-3xl and up. Pair with font-medium / font-semibold for weight. Keep body copy at text-base and use text-foreground-subtle for secondary text.