Design system UseDeploy

El frontend tiene un solo design system — referido internamente como UseDeploy. Es una paleta de minimalismo refinado descendiente de las marketing surfaces de Vercel y la estética del estudio UseDeploy: base negro puro, foreground blanco papel, hairlines white-on-white en alfa baja, un glow violeta ambient como única firma cromática, y esmeralda reservado para status dots.

No es un tema claro disfrazado de oscuro. Es dark-first. La clase .dark existe sólo para que el futuro theme-switcher (#147) pueda enviarse sin romper surfaces — hoy tanto :root como .dark resuelven a la misma paleta.

Dónde vive

• Tokens — apps/client/app/globals.css. Variables OKLCH en :root, mapeadas a Tailwind vía @theme inline { --color-*: var(--*) }.
• Primitives — apps/client/components/brand/. BrandMark, VersionChip, GridGlowBackground, NoiseOverlay, MonoLabel, AuthCard, BrandCard. Re-exportados desde @/components/brand.
• Fonts — Geist Sans + Geist Mono, cargadas una sola vez en apps/client/app/layout.tsx y expuestas como --font-geist-sans / --font-geist-mono para toda la app.
• Utilities custom — apps/client/app/globals.css @layer utilities. label-mono, shadow-soft, shadow-soft-lg, card-premium, card-lift.

Por qué está centralizado

Antes de la migración tracked en Tasky #145–#151, el codebase corría dos temas en paralelo:

• El dashboard usaba una paleta light "Brubank Ocean".
• Landing y auth usaban un tema dark bg-black hand-coded derivado de Vercel.

Tres definiciones de wrapper duplicadas, tres paletas drifteando. Teníamos páginas cuyo bg-white card on bg-white card on bg-black hero se veía claramente roto porque ninguna surface compartía tokens.

El fix fue la regla que ahora vive en CLAUDE.md: nunca declares literales bg-black / text-white / oklch(...) hardcodeados en componentes. Usá tokens semánticos (bg-background, text-foreground, border-border, bg-card, text-muted-foreground, text-accent) y los primitives de brand.

Las cuatro reglas

1. Usá tokens semánticos, nunca colores raw. La tabla completa está en la página de tokens.
2. No re-cargues Geist por componente con next/font/google — el root layout es dueño de eso.
3. No incrustes el wordmark UseDeploy, el background grid+glow, ni el version chip. Importá desde @/components/brand.
4. Las páginas de auth envuelven el contenido en <AuthCard>. El (auth)/layout.tsx es dueño del chrome de la página; las páginas son dueñas sólo de su form.

Do / don't

// DON'T — colores hardcodeados, drifting fuera del 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 del wordmark; va a divergir.
<span className="font-semibold tracking-tight">UseDeploy</span>

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

Ver conventions para la lista completa.