Quick Start

Este guia monta uma superfície mínima alinhada ao v3: identidade por estrutura, dados numéricos em mono, risco explícito e marcação de conteúdo assistido pela Cris.

1. Use tokens, não valores soltos


export function CrisisHeader() {
  return (
    <header className="border-b bg-background px-8 py-6 text-foreground">
      <p className="font-mono text-[var(--text-micro)] uppercase tracking-[var(--tracking-kicker)] text-muted-foreground">
        Monitoramento · Crise ativa
      </p>
      <h1 className="mt-3 text-[var(--text-display-lg)] font-bold leading-tight tracking-tight">
        Operação reputacional em atenção
      </h1>
    </header>
  );
}

2. Dê prioridade visual ao estado e à consequência


export function RiskSummary() {
  return (
    <section className="grid gap-4 md:grid-cols-3" data-density="comfortable">
      <article className="rounded-md border bg-card p-6 text-card-foreground">
        <p className="font-mono text-xs uppercase tracking-[var(--tracking-kicker)] text-muted-foreground">
          Score de risco
        </p>
        <strong className="mono mt-4 block text-5xl font-bold" data-numeric>
          87
        </strong>
        <span className="mt-3 inline-flex rounded-sm border px-2 py-1 text-xs font-medium"
          style={{
            color: "var(--risk-high-text)",
            borderColor: "var(--risk-high-border)",
            background: "var(--risk-high-bg)",
          }}
        >
          high · escalada provável
        </span>
      </article>
 
      <article className="rounded-md border bg-card p-6">
        <p className="text-sm text-muted-foreground">Menções qualificadas</p>
        <strong className="mono mt-4 block text-3xl font-bold" data-numeric>
          1.482
        </strong>
        <p className="mt-2 text-sm" style={{ color: "var(--delta-warn)" }}>
          +18% nas últimas 2h
        </p>
      </article>
 
      <article className="rounded-md border bg-card p-6">
        <p className="text-sm text-muted-foreground">SLA de resposta</p>
        <strong className="mono mt-4 block text-3xl font-bold" data-numeric>
          08m
        </strong>
        <p className="mt-2 text-sm text-muted-foreground">janela crítica restante</p>
      </article>
    </section>
  );
}

3. Marque conteúdo assistido pela Cris


export function CrisBriefing() {
  return (
    <aside
      className="rounded-md bg-card p-5"
      style={{
        borderLeft: "var(--ai-marker-border)",
        background: "color-mix(in oklab, var(--primary) var(--ai-marker-bg-mix), var(--card))",
      }}
    >
      <p className="font-mono text-xs uppercase tracking-[var(--tracking-kicker)] text-muted-foreground">
        ◐ Escrito com Cris
      </p>
      <p className="mt-3 text-sm leading-relaxed">
        [Inferência] A narrativa está migrando de reclamação pontual para crítica de governança.
      </p>
    </aside>
  );
}

4. Aplique densidade por superfície


<div data-density="compact" className="grid gap-[var(--density-gap)] p-[var(--density-pad-page)]">
  {/* tabelas, filas e operações densas */}
</div>

Use compact para listas operacionais, comfortable como default e spacious para leitura ou apresentação executiva.

Próximos passos

Colors — tokens canônicos de superfície, risco e delta
Typography — Manrope, IBM Plex Mono e signature shapes
Spacing — 8pt grid, densidade e cadência v3
Release v3 — narrativa completa de α + β + γ