Typography

Hierarquia tipográfica da marca (tokens rf-*).

Conteúdo e mídiapadrão de documentação

Heading 1

Heading 2

Heading 3

Body — texto corrido com Space Grotesk e tokens de tamanho.

Label — ênfase de UI

Caption — metadados e ajuda

const accent = "token";

Código da demo

"use client";

export function Demo() {
  return (
    <div className="flex max-w-xl flex-col gap-rf-4 text-foreground">
      <h1 className="rf-h1">Heading 1</h1>
      <h2 className="rf-h2">Heading 2</h2>
      <h3 className="rf-h3">Heading 3</h3>
      <p className="rf-body">
        Body — texto corrido com Space Grotesk e tokens de tamanho.
      </p>
      <p className="rf-label">Label — ênfase de UI</p>
      <p className="rf-caption text-muted-foreground">Caption — metadados e ajuda</p>
      <code className="rf-code">const accent = &quot;token&quot;;</code>
    </div>
  );
}

Acessibilidade

Use headings semânticos h1–h3 alinhados às classes.

Importar

Composição do app — não é exportada pelo pacote.

Neste repositório:

/* classes: .rf-h1 .rf-h2 .rf-h3 .rf-body .rf-label .rf-caption .rf-code */