Design System — Docs

Documentação

Guias de implementação, convenções e boas práticas.

Ordem obrigatória de classes Tailwind

Sempre aplique nesta sequência para consistência e evitar conflitos.

1Layout — display, position, flex, grid
2Sizing — width, height, min/max
3Spacing — padding, margin
4Typography — font, text, leading, tracking
5Colors — text, bg (via CSS variable)
6Borders — border, rounded
7Shadows — shadow (via token)
8Effects — opacity, transition, cursor
9States — hover:, focus:, disabled:

Como referenciar tokens

CSS Variable direta

background-color: var(--background);

Inline style no JSX

style={{ color: "var(--foreground)" }}

Classe Tailwind nativa

className="bg-card text-foreground"

Classe Tailwind arbitrária

className="bg-[hsl(var(--muted))]"

Sistema tipográfico

Três fontes com papéis distintos. Nunca intercambiáveis.

Display / Authority

Lora

pesos

400 · 600 · 700

uso

Títulos principais · Hero sections · Nome de produtos · Impacto editorial

classe Tailwind

font-display          // via Tailwind
var(--font-display)   // via CSS
// h1, h2 → automático via globals.css

Interface / Legibilidade

Geist

pesos

400 · 500 · 600

uso

Texto corrido · Descrições · Botões · Forms · Labels · body default

classe Tailwind

font-sans             // padrão do body
var(--font-sans)      // via CSS

Intelligence / Data

JetBrains Mono

pesos

400 · 500 · 600

uso

Métricas · KPIs · Números · Dashboards · Análises técnicas · Códigos de acesso

classe Tailwind

font-mono             // via Tailwind
var(--font-mono)      // via CSS

Utilitário cn()

Sempre use cn() para merge de classes. Resolve conflitos e condicionais com segurança.

import { cn } from "@/lib/utils"

// Básico
cn("base-class", condition && "conditional-class")

// Com variantes
cn(
  "flex items-center px-4 py-2",
  variant === "primary" && "bg-foreground text-background",
  variant === "ghost"   && "bg-transparent text-muted-foreground",
  disabled             && "opacity-40 cursor-not-allowed"
)

Regra absoluta: zero hardcode

Errado

color: #1a1410;
bg: #0a0a0a;
border: 1px solid #242424;

Correto

color: var(--foreground);
bg: var(--background);
border: 1px solid var(--border);