Design system UseDeploy

O frontend tem um único design system — referido internamente como UseDeploy. É uma paleta de minimalismo refinado descendente das marketing surfaces da Vercel e da estética do studio UseDeploy: base preto puro, foreground branco papel, hairlines white-on-white em alpha baixa, um glow violeta ambient como única assinatura cromática, e esmeralda reservado para status dots.

Não é um tema claro disfarçado de escuro. É dark-first. A classe .dark existe apenas para que o futuro theme-switcher (#147) possa ser entregue sem quebrar surfaces — hoje tanto :root quanto .dark resolvem para a mesma paleta.

Onde vive

• Tokens — apps/client/app/globals.css. Variáveis OKLCH em :root, mapeadas no Tailwind via @theme inline { --color-*: var(--*) }.
• Primitives — apps/client/components/brand/. BrandMark, VersionChip, GridGlowBackground, NoiseOverlay, MonoLabel, AuthCard, BrandCard. Re-exportados de @/components/brand.
• Fonts — Geist Sans + Geist Mono, carregadas uma única vez em apps/client/app/layout.tsx e expostas como --font-geist-sans / --font-geist-mono para toda a app.
• Utilities custom — apps/client/app/globals.css @layer utilities. label-mono, shadow-soft, shadow-soft-lg, card-premium, card-lift.

Por que está centralizado

Antes da migração tracked em Tasky #145–#151, o codebase rodava dois temas lado a lado:

• O dashboard usava uma paleta light "Brubank Ocean".
• Landing e auth usavam um tema dark bg-black hand-coded derivado da Vercel.

Três definições de wrapper duplicadas, três paletas em drift. Tínhamos páginas cujo bg-white card on bg-white card on bg-black hero parecia claramente quebrado porque nenhuma surface compartilhava tokens.

A correção foi a regra que agora vive em CLAUDE.md: nunca declare literais bg-black / text-white / oklch(...) hardcoded em componentes. Use tokens semânticos (bg-background, text-foreground, border-border, bg-card, text-muted-foreground, text-accent) e os primitives de brand.

As quatro regras

1. Use tokens semânticos, nunca cores raw. A tabela completa está na página de tokens.
2. Não recarregue Geist por componente com next/font/google — o root layout é dono disso.
3. Não embuta o wordmark UseDeploy, o background grid+glow, nem o version chip. Importe de @/components/brand.
4. Páginas de auth envolvem o conteúdo em <AuthCard>. O (auth)/layout.tsx é dono do chrome da página; páginas são donas apenas do seu form.

Do / don't

// DON'T — cores hardcoded, drifta para fora do tema.
<div className="bg-black text-white border border-white/10">

// DO — token-driven, dark/light future-proof.
<div className="bg-background text-foreground border border-border">

// DON'T — re-roll do wordmark; vai divergir.
<span className="font-semibold tracking-tight">UseDeploy</span>

// DO — importa o primitive canônico.
import { BrandMark } from '@/components/brand';
<BrandMark />

Veja conventions para a lista completa.