The full prose scale re-skinned to the tokens — condensed Saira headings, Inter body, a signal blockquote rule, signal list markers, and mono inline code.

● LIVE

Telemetry Uplink

A condensed display scale tuned for dense, high-contrast consoles — every size flows from the shared tokens.

Carrier Lock

Primary uplink stable. The carrier is locked to the grid reference and every channel reports nominal. Set the gain with signal.calibrate() before arming the secondary.

“Hold the reticle on the mark and let the readout settle.”

Sequence

Acquire — sweep until the spark latches.
Arm — confirm the handshake on the secondary channel.
Transmit — open the rail and watch the delta.

Reference frame GRID-09 · last sync 00:00:42 UTC

import {  TypographyBlockquote,  TypographyH1,  TypographyH2,  TypographyH3,  TypographyInlineCode,  TypographyLead,  TypographyList,  TypographyMuted,  TypographyP,} from "@/registry/okibi/ui/typography";export default function TypographyDemo() {  return (    <div className="w-full max-w-2xl text-left">      <TypographyH1>Telemetry Uplink</TypographyH1>      <TypographyLead>        A condensed display scale tuned for dense, high-contrast consoles — every        size flows from the shared tokens.      </TypographyLead>      <TypographyH2>Carrier Lock</TypographyH2>      <TypographyP>        Primary uplink stable. The carrier is locked to the grid reference and        every channel reports nominal. Set the gain with{" "}        <TypographyInlineCode>signal.calibrate()</TypographyInlineCode> before        arming the secondary.      </TypographyP>      <TypographyBlockquote>        &ldquo;Hold the reticle on the mark and let the readout settle.&rdquo;      </TypographyBlockquote>      <TypographyH3>Sequence</TypographyH3>      <TypographyList>        <li>Acquire — sweep until the spark latches.</li>        <li>Arm — confirm the handshake on the secondary channel.</li>        <li>Transmit — open the rail and watch the delta.</li>      </TypographyList>      <TypographyMuted>        Reference frame GRID-09 · last sync 00:00:42 UTC      </TypographyMuted>    </div>  );}

npx shadcn@latest add https://okibi.cndr.dev/r/typography.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/typography.json

Copy the source from the Code tab above into components/ui/typography.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { TypographyH1, TypographyLead, TypographyP } from "@/components/ui/typography"

<TypographyH1>Operations Manual</TypographyH1>
<TypographyLead>An oversized intro paragraph under the heading.</TypographyLead>
<TypographyP>Body copy in Inter with comfortable line height.</TypographyP>

Anatomy

<article>
  <TypographyH1>Operations Manual</TypographyH1>
  <TypographyLead>An oversized intro under the heading.</TypographyLead>
  <TypographyP>
    Body copy in Inter with an inline <TypographyA href="/relay">link</TypographyA>
    and a <TypographyInlineCode>token</TypographyInlineCode> chip.
  </TypographyP>
  <TypographyBlockquote>Signal-armed pull quote.</TypographyBlockquote>
  <TypographyList>
    <li>Signal-marked bullet</li>
  </TypographyList>
</article>

Examples

h1

The page's primary heading — condensed Saira black in uppercase grid tracking. Use one per page.

● LIVE

Telemetry uplink

import { TypographyH1 } from "@/registry/okibi/ui/typography";export default function TypographyH1Demo() {  return <TypographyH1>Telemetry uplink</TypographyH1>;}

h2

Section heading with a strong underline rule. Splits a document into its major sections.

● LIVE

Carrier lock

import { TypographyH2 } from "@/registry/okibi/ui/typography";export default function TypographyH2Demo() {  return <TypographyH2>Carrier lock</TypographyH2>;}

h3

Sub-section heading, one step down from h2.

● LIVE

Channel sequence

import { TypographyH3 } from "@/registry/okibi/ui/typography";export default function TypographyH3Demo() {  return <TypographyH3>Channel sequence</TypographyH3>;}

h4

The smallest display heading, for minor groupings within a section.

● LIVE

Handshake parameters

import { TypographyH4 } from "@/registry/okibi/ui/typography";export default function TypographyH4Demo() {  return <TypographyH4>Handshake parameters</TypographyH4>;}

Paragraph

Body copy in Inter with comfortable line height. Top margin auto-applies to every paragraph after the first.

● LIVE

Primary uplink stable. The carrier is locked to the grid reference and every channel reports nominal — standing by for the secondary handshake.

import { TypographyP } from "@/registry/okibi/ui/typography";export default function TypographyPDemo() {  return (    <TypographyP>      Primary uplink stable. The carrier is locked to the grid reference and      every channel reports nominal — standing by for the secondary handshake.    </TypographyP>  );}

Blockquote

Pulled quotation marked by a signal left rule.

● LIVE

“Hold the reticle on the mark and let the readout settle.”

import { TypographyBlockquote } from "@/registry/okibi/ui/typography";export default function TypographyBlockquoteDemo() {  return (    <TypographyBlockquote>      &ldquo;Hold the reticle on the mark and let the readout settle.&rdquo;    </TypographyBlockquote>  );}

List

Unordered list with signal-tinted markers.

● LIVE

Acquire — sweep until the spark latches.
Arm — confirm the handshake on the secondary channel.
Transmit — open the rail and watch the delta.

import { TypographyList } from "@/registry/okibi/ui/typography";export default function TypographyListDemo() {  return (    <TypographyList>      <li>Acquire — sweep until the spark latches.</li>      <li>Arm — confirm the handshake on the secondary channel.</li>      <li>Transmit — open the rail and watch the delta.</li>    </TypographyList>  );}

Inline code

A mono token on a bordered chip — for identifiers, keys, and short code spans inside prose.

● LIVE

signal.calibrate()

import { TypographyInlineCode } from "@/registry/okibi/ui/typography";export default function TypographyInlineCodeDemo() {  return <TypographyInlineCode>signal.calibrate()</TypographyInlineCode>;}

Lead

An oversized, muted intro paragraph that sits directly under a page heading.

● LIVE

A condensed display scale tuned for dense, high-contrast consoles.

import { TypographyLead } from "@/registry/okibi/ui/typography";export default function TypographyLeadDemo() {  return (    <TypographyLead>      A condensed display scale tuned for dense, high-contrast consoles.    </TypographyLead>  );}

Large

An emphasised lead-in line, heavier and larger than body copy.

● LIVE

Carrier locked to grid reference.

import { TypographyLarge } from "@/registry/okibi/ui/typography";export default function TypographyLargeDemo() {  return <TypographyLarge>Carrier locked to grid reference.</TypographyLarge>;}

Small

Fine print and metadata — labels, timestamps, captions.

● LIVE

SEC // last sync 00:00:42 UTC

import { TypographySmall } from "@/registry/okibi/ui/typography";export default function TypographySmallDemo() {  return <TypographySmall>SEC // last sync 00:00:42 UTC</TypographySmall>;}

Muted

De-emphasised secondary text for supporting detail.

● LIVE

Reference frame GRID-09 · standing by.

import { TypographyMuted } from "@/registry/okibi/ui/typography";export default function TypographyMutedDemo() {  return (    <TypographyMuted>Reference frame GRID-09 · standing by.</TypographyMuted>  );}

Accessibility

Each slot renders the matching semantic element (h1–h4, p, blockquote, ul/ol, code, a, table) — structure stays correct for screen readers.
Use the heading slots to keep a single, non-skipping outline; the visual scale does not have to match the heading level.
TypographyA carries a focus-visible 2px signal ring and a non-color underline, so links read without relying on color.
TypographyLarge renders a block div — keep it out of a p to avoid invalid nesting.
All slots forward className and ARIA props through, so you can add id, aria-*, or as-style overrides.

Guidelines

Pick the heading slot by document level, not by the size you want — restyle with className if needed.
Use TypographyA for inline prose links so focus and underline cues come standard.
Reach for TypographyOl when order matters and TypographyList for unordered sets.
Apply these only where the prose tokens aren't already inherited.

Don't

Don't nest a block TypographyLarge inside a TypographyP — it breaks paragraph nesting.
Don't skip heading levels for visual effect; adjust size with className instead.
Don't hand-roll inline link styling — TypographyA already carries the focus ring.
Don't feed very long unbroken tokens into TypographyInlineCode; it won't wrap.

Typography

Telemetry Uplink

Carrier Lock

Sequence

Telemetry uplink

Carrier lock

Channel sequence

Handshake parameters

On this page