Instalação

Pulso v3 é a fundação visual do Orchids Crisis Manager. Nesta documentação pública, a fonte operacional é src/app/globals.css; DESIGN.md registra o contrato de release e a narrativa v3.

Modelo de consumo: os tokens CSS são o contrato estável. Componentes do produto continuam vivendo no Crisis Manager e devem consumir esses tokens por import direto ou por cópia controlada.

Pré-requisitos

Next.js 15 com App Router
React 19
Tailwind CSS v4 via @theme inline
TypeScript 5+
bun ou package manager compatível com o produto

1. Copie a fundação CSS

Use src/app/globals.css como ponto de verdade:


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import "tailwindcss";
@import "tw-animate-css";
 
@theme inline {
  --font-sans: var(--font-pulso-sans);
  --font-mono: var(--font-pulso-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-border: var(--border);
  --radius-md: var(--radius-md);
}

Não recrie tokens em tailwind.config.ts: no v3, o bridge para utilitários vem do próprio CSS.

2. Confirme os tokens de identidade v3

Estes tokens diferenciam a v3 da v2 e devem estar presentes antes de publicar uma superfície nova:

Token	Valor	Uso
`--text-display-lg`	`2.125rem` / 34px	Títulos hero e telas de maior consequência
`--text-display-lg-v2`	`1.75rem` / 28px	Alias temporário para migração
`--tracking-kicker`	`0.12em`	Kicker uppercase mono
`--rhythm-cadence-tight`	12px	Espaço intra-bloco compacto
`--rhythm-cadence-beat`	20px	Espaço entre blocos relacionados
`--rhythm-cadence-breath`	40px	Espaço entre seções
`--ai-marker-border`	`2px solid var(--primary)`	Origem de conteúdo Cris/IA
`--touch-target-critical`	48px	Ações críticas em mobile
`--motion-haptic-light`	8ms	Feedback háptico leve

3. Fontes

Pulso usa Manrope como família sans e IBM Plex Mono para dados, timestamps, código e assinatura numérica.


:root {
  --font-pulso-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-pulso-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

Numerais tabulares são default em .mono e [data-numeric]. Reverta localmente apenas quando o conteúdo for texto comum em mono.

4. Dependências úteis

A documentação usa lucide-react, Nextra, Tailwind v4 e tw-animate-css. O produto pode consumir os mesmos pacotes, mas novas dependências devem ter justificativa clara.


bun install
bun run dev

Busca local

A busca da documentação usa Pagefind. Como o Nextra 4 indexa os HTMLs exportados, o índice só existe depois de um build estático:


bun run build

Para testar a busca durante desenvolvimento, gere também a cópia servida pelo Next dev e reinicie a aplicação:


bun run search:index:dev
bun run dev

Use bun run dev:search quando quiser executar o fluxo completo em uma única etapa: build, índice de desenvolvimento e servidor local.

Checklist de publicação

Tokens copiados de src/app/globals.css, não de exemplos antigos.
Paleta light-first com dark editorial near-black.
stable / monitor / attention / high / critical usado para risco.
Conteúdo assistido pela Cris marcado com contrato visual e auditável.
Ações críticas mobile respeitam 48px de hit target.