Skip to content

Typography

DisplayMIT
View in Storybook

Heading + body + caption + code typography ramp — the type system at a glance.

bun add @otfdashkit/ui

Preview

Typography
Loading Storybook preview…

Code

import { Heading, Body, Caption, Code } from '@otfdashkit/ui'

export function Example() {
  return (
    <article className="max-w-2xl space-y-4">
      <Caption tone="accent">Getting started</Caption>
      <Heading size="xl">Design systems that ship themselves</Heading>
      <Body size="lg" tone="muted">
        OTF bundles primitives, blocks, and kits that snap together without the
        usual back-and-forth with design.
      </Body>
      <Body>
        Start with <Code>@otfdashkit/ui</Code> for web, <Code>@otfdashkit/ui-native</Code> for
        mobile, and <Code>@otfdashkit/tokens</Code> for the palette system. All MIT,
        all tree-shakeable, all AI-tool-ready.
      </Body>
    </article>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.