Design System

Referência rápida dos tokens do Client Desk. Use sempre as classes semânticas abaixo — nunca cores fixas como text-white ou bg-[#4c5fea]. Todos os tokens vivem em src/styles.css.

Marca — variações de contraste

Use variant conforme a superfície. contrast é o padrão e adapta-se ao tema claro/escuro.

solid — fundo claro

contrast — adapta ao tema

soft — fundo escuro/foto

plain — sem container

CLIENT DESKCRM · Gestão de Clientes

tone="auto" sobre superfície clara

CLIENT DESKCRM · Gestão de Clientes

tone="light" sobre superfície escura

Cores semânticas

Trocam automaticamente entre tema claro e escuro. Prefixos válidos: bg-, text-, border-, ring-.

background

fundo da página

foreground

texto principal

card

superfície de cards

primary

ação principal (indigo)

primary-hover

secondary

muted

fundos neutros

muted-foreground

texto auxiliar

accent

destaque suave

border

destructive

erro / exclusão

success

sucesso

warning

atenção

sidebar

navegação lateral

Escala de marca

Valores fixos da identidade GM / Client Desk — não mudam entre temas. Use em superfícies escuras (sidebar, hero, auth).

brand-950

brand-900

brand-850

brand-800

brand-750

brand-700

brand-field

inputs em superfície escura

brand-line

bordas escuras

brand-line-strong

brand-sky

azul da marca

brand-sky-soft

brand-indigo

brand-muted

brand-label

brand-faint

Tipografia

Display: Plus Jakarta Sans (--font-display) para títulos. Texto: Inter (--font-sans). h1–h4 já usam display automaticamente.

Título hero — 36px/800

font-display text-3xl sm:text-4xl font-extrabold tracking-tight

Título de página — 24px/800

font-display text-2xl font-extrabold

Título de card — 16px/600

text-base font-semibold

Corpo — 14px, cor foreground

text-sm

Auxiliar — 12px, muted-foreground

text-xs text-muted-foreground

Eyebrow / label

text-[10px] font-bold uppercase tracking-[0.16em]

Espaçamento e layout

Utilitários próprios definidos em src/styles.css.

page-container

max-w 80rem, centralizado, padding 1rem (1.5rem ≥sm)

section-stack

flex coluna com gap 1.5rem entre seções

auth-shell

gradiente radial navy das telas de acesso

space-y-8

espaço entre blocos maiores de uma página

gap-3 / gap-6

grids de cards (compacto / confortável)

p-4 sm:p-6

padding interno padrão de cards e seções

Raios e elevação

--radius = 0.75rem. Cards usam rounded-xl/2xl; hero usa rounded-3xl.

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

sem sombra — listas e tabelas

shadow-sm — cards padrão

glow navy — hero e destaques

Componentes

Variantes shadcn já alinhadas aos tokens.

Padrão

Secundário

Outline

Erro

Sucesso

Atenção

Superfície escura

Padrão de hero/sidebar: gradiente brand-850 → brand-900, textos em white/70 e detalhes em brand-sky-soft.

Regras de uso

Nunca escreva cores fixas (text-white, bg-[#...]) fora de superfícies de marca.
Novos tokens entram em src/styles.css (@theme), nunca inline.
Páginas internas: page-container + section-stack.
Toda ação precisa de feedback: estado de carregamento, toast de sucesso e mensagem de erro.
Valide em 375px, 768px e 1440px antes de concluir uma tela.

Desenvolvido por GM Tecnologia