Design System

Cards

IMPORTANTE: Cards não possuem bordas no sistema. Use apenas background e border-radius.

Errado:

<div class="bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 p-4">

Correto:

<div class="bg-white dark:bg-neutral-800 rounded-lg p-4">

---

Padrões de Cores

Elemento	Light Mode	Dark Mode
Card background	bg-white	dark:bg-neutral-800
Text primary	text-neutral-800	dark:text-neutral-100
Text secondary	text-neutral-500	dark:text-neutral-400
Icon accent	text-primary-600	dark:text-primary-400

---

Paleta Paper (variante creme)

Base canônica: #F5EFDE. Todos os tons creme (light) e escuros quentes (paper black) derivam dessa cor via src/theme/paper-palette.ts.

Token	Uso	Origem
paper.base / 500	Cor de referência da marca	#F5EFDE
paper.body	Canvas / fundo da página	darken(base, 2%)
paper.surface	Cards, inputs, modais	lighten(base, 5%)
paper.border	Bordas e divisores leves	darken(base, 10%)
paperDark.900	Canvas no dark paper	Mesmo matiz, L≈7%
paperDark.800	Superfícies no dark paper	Mesmo matiz, L≈12%

O remapeamento automático de classes Tailwind no tema paper é feito por tools/postcss-paper-variant.cjs e tools/postcss-paper-black-variant.cjs, ambos alimentados por tools/paper-palette.cjs (espelho CJS da paleta TS).

---

Componentes Naive UI

• UI Library principal: Naive UI (v2.37.3)
• Customizações de estilo em arquivos SCSS modulares
• Usar prefixo n- para componentes: <n-button>, <n-input>, etc.

---

OnboardingTimeline (componente global)

Stepper horizontal usado nos fluxos de onboarding (usuário e empresa). Localização: src/components/global/OnboardingTimeline/.

<onboarding-timeline :steps="steps" :active-step-id="activeStepId" />

Props:

Prop	Tipo	Descrição
steps	Array<{ id: string; title: string; icon: Component }>	Lista ordenada de steps com ícone e título já traduzido
activeStepId	string	id do step atualmente ativo

Visual: cada step mostra um ícone numa caixa quadrada com borda; setas conectoras entre steps; label (pílula) abaixo do ícone. Estados:

• default (cinza): step ainda não atingido
• active (primary com ring): step atual
• completed (primary preenchido + check): step concluído

Ícones inline disponíveis no mesmo arquivo (@/components/global/OnboardingTimeline):

• UserRoundIcon, MapPinIcon, FileCheckIcon (user-onboarding)
• BuildingIcon, MapPinHouseIcon, ShieldCheckIcon (company-onboarding)

Para adicionar um novo ícone, criar uma função via buildIcon(name, paths) em icons.ts: sem dependências externas.