// Design System — referência visual completa do Ezza CRM // Acesso: Ctrl+Shift+D em qualquer tela do app const { useState: useDSState } = React; /* ── helper: seção com título ─────────────────────────────── */ function DSSection({ title, children }) { return (
{title}
{children}
); } /* ── helper: item de token ────────────────────────────────── */ function DSToken({ label, value, preview }) { return (
{preview}
{label}
{value}
); } /* ── Swatch de cor ────────────────────────────────────────── */ function Swatch({ color, label, variable }) { return (
{label}
{variable &&
{variable}
}
{color}
); } /* ── Ícone com label ──────────────────────────────────────── */ function DSIcon({ name, icon }) { const [copied, setCopied] = useDSState(false); const copy = () => { navigator.clipboard?.writeText(`{ICN.${name}}`); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (
{icon}
{copied ? '✓' : name}
); } /* ── Toast demo ───────────────────────────────────────────── */ function DSToastDemo() { const toast = useToast(); return (
); } /* ── Switch demo ──────────────────────────────────────────── */ function DSSwitch() { const [on, setOn] = useDSState(false); return (
setOn(v => !v)}>
); } /* ════════════════════════════════════════════════════════════ TELA PRINCIPAL ══════════════════════════════════════════════════════════════ */ function DesignSystem({ onBack }) { const [activeTab, setActiveTab] = useDSState('fundacao'); const TABS = [ { id: 'fundacao', label: 'Fundação' }, { id: 'tipografia', label: 'Tipografia' }, { id: 'botoes', label: 'Botões' }, { id: 'inputs', label: 'Inputs' }, { id: 'cards', label: 'Cards' }, { id: 'componentes', label: 'Componentes' }, { id: 'icones', label: 'Ícones' }, ]; return ( <> {/* ── Header ── */}
Design System Ezza CRM
Tokens, componentes e padrões de interface · v1.0
{ICN.bolt2} Referência de handoff
{/* ── Tabs ── */}
{TABS.map(t => ( ))}
{/* ══════════ FUNDAÇÃO ══════════ */} {activeTab === 'fundacao' && (
} /> } /> } /> } />
} /> } />
Azul Amarelo Rosa Mint Lavanda
{'Texto'}
)} {/* ══════════ TIPOGRAFIA ══════════ */} {activeTab === 'tipografia' && (
{[ { w: 800, size: 32, label: 'Display / Hero' }, { w: 700, size: 22, label: 'Título de tela' }, { w: 700, size: 18, label: 'Subtítulo' }, { w: 600, size: 15, label: 'Card title' }, { w: 600, size: 13.5, label: 'Corpo padrão' }, { w: 500, size: 12, label: 'Secundário' }, { w: 400, size: 11, label: 'Caption / hint' }, ].map(({ w, size, label }) => (
20 ? '-0.02em' : 0 }}> Ezza CRM — Plataforma de Vendas
{label} · {size}px · {w}
))}
Pipeline de Vendas
{'fontFamily: var(--font-display) · italic · usado em títulos de tela'}
{'{{nome}} · R$ 12.800,00 · +55 (11) 99512-6603'}
{'fontFamily: var(--font-mono) · usado em: telefones, valores, código, tags de variável'}
IDENTIDADE DO AGENTE
COMPORTAMENTO
{'className="field-lbl" → 10.5px · uppercase · letter-spacing 0.08em · weight 700 · ink-muted'}
)} {/* ══════════ BOTÕES ══════════ */} {activeTab === 'botoes' && (
{'btn-primary · btn-ghost'}
{'btn-primary btn-sm · btn-ghost btn-sm'}
{'btn-ganhou · btn-perdeu'}
{'btn-danger'}
{'mini-btn · 32×32px · usado em drawers e cards'}
)} {/* ══════════ INPUTS ══════════ */} {activeTab === 'inputs' && (