Typography

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

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

Heading 1

Heading 2

Heading 3

Body — texto corrido com Inter 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-fe-4 text-foreground">
      <h1 className="fe-h1">Heading 1</h1>
      <h2 className="fe-h2">Heading 2</h2>
      <h3 className="fe-h3">Heading 3</h3>
      <p className="fe-body">
        Body — texto corrido com Inter e tokens de tamanho.
      </p>
      <p className="fe-label">Label — ênfase de UI</p>
      <p className="fe-caption text-muted-foreground">Caption — metadados e ajuda</p>
      <code className="fe-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: .fe-h1 .fe-h2 .fe-h3 .fe-body .fe-label .fe-caption .fe-code */