Uma assinatura.
Todos os produtos.
Fundação visual e comportamental para os SaaS da LZR — do Green Copilot ao Snap CRM. Verde esmeralda, cinza-névoa e âmbar, em tipografia Jakarta sobre superfícies calmas. Desenhada para quem passa horas diante da tela, sem perder a identidade que faz o usuário dizer "isso é LZR".
19 seções · 4 áreas
Numeração linear, sem duplicatas. Cada seção referenciada por número estável — use-o em code reviews e discussões.
O que mudou desde v1.4
Refundação silenciosa. Mesma alma, arquitetura mais limpa.
- Numeração linear — acabaram os "29 Internacionalização" após seção 30
- Versão única v2.0 — sem mais v1.3 referenciado em meio a v1.4
- Matriz cross-product — Green tem accent verde, Snap tem azul clínico, cada um com seu token explícito
- Tokens "fantasma" —
--grad-hero,--shadow-accente--text-placeholderagora definidos - Text-3 no day mode — movido de #8AA0A0 (3:1) para #6B7E72 (AA em 15px+)
- Superfícies para uso prolongado — sage off-white #F4F7F4, sem branco puro; reduz fadiga visual em sessões longas
- Trilha Desk/Note/Tablet-first substitui "Web first" — é onde o usuário de licitação de fato vive
- JetBrains Mono substitui DM Mono — ligaduras, melhor legibilidade em dados numéricos densos
- Text-placeholder como token dedicado — AA por padrão
- Catálogo de componentes unificado por trilha de experiência
Cores
Derivadas do lagarto: verde esmeralda para ação, prata-sage para neutros, âmbar para momentos premium. O night mode "Floresta Noturna" mantém subtom verde em todas as superfícies — não é inversão de cinza.
Lizard Green · primária
Sage · neutros com subtom verde
Amber Lizard · accent secundário
Badges Premium · Novo · Beta, CTAs de upgrade, highlights em dashboards financeiros, destaque de ações IA.
Nunca: como cor de erro, warning, background de página ou para sinalizar estado negativo.
A combinação verde + âmbar é a assinatura da LZR — contraste frio-quente que diferencia de todo SaaS corporativo azul/cinza.
Semânticos
Data Visualization · 8 cores, ordem obrigatória
Ordem não-negociável: sempre dv-1 → dv-2 → dv-3… O vermelho (dv-6) nunca inicia uma série — usuários lêem como erro. Em gráficos com >8 séries, dobre os tons (dv-1 escuro + dv-1 claro) ao invés de inventar cor nova.
Tipografia
Plus Jakarta Sans é UI. Syne é marca. JetBrains Mono é dado. Caveat é a exceção autorizada — post-its e anotações no Green Copilot.
Escala
Espaçamento · escala 4pt
Só use esses valores. Combinações arbitrárias (7px, 13px, 21px) são proibidas — quebram o ritmo visual.
Radius · 4px é regra
Arredondado demais = casual. Em B2B jurídico-financeiro, precisão visual importa. Use 4px em 90% dos casos. Reserve 8/12px para modais e cards grandes; full só para pills e badges.
Motion · funcional, nunca decorativo
Em produtos para uso profissional prolongado, motion precisa ser rápido e discreto. Máximo 3 animações simultâneas por viewport. Sempre com fallback para prefers-reduced-motion.
Curvas de easing
transform e opacity — rodam na GPU, não causam reflow. Nunca animar width, height, margin.opacity 0→1 + translateY 12px→0. Use em cards, listas, modais. Stagger: índice × 40ms, máximo 5 itens.Sombras
No day mode, sombras neutras escuras. No dark (Floresta Noturna), sombras mais opacas com hairline branco sutil — cinza frio é proibido no dark.
Acessibilidade
WCAG AA é piso, não teto. Contraste de texto funcional mínimo 4.5:1. Focus ring visível. Touch targets 44×44 em telas touch.
Verde é a cor primária e a mais afetada por deuteranopia. Toda indicação de estado precisa de reforço:
- Cor + ícone + texto em todo badge, alert, toast, status
- Em gráficos, diferenciar também por forma (■ ▲ ●) e padrão (hachurado, pontilhado)
- Proibido: "clique no botão verde" em docs ou tooltips — referenciar por label
- Testar em Chrome DevTools → Rendering → Emulate vision deficiencies
Botões
Formulários
Alertas & Badges
Tabelas
Padrão default. Para uso intensivo (licitação, listagem de editais), usar variante compact.
Logo & Marca
O lagarto 3D metálico com verde esmeralda é a identidade — precisão percebida, não futurismo performado.
Tom de voz
Clareza e precisão acima de tudo. Especialmente em contextos jurídicos, financeiros e de prazo crítico.
Produtos · mesmo DNA, personalidade própria
Cada produto herda a fundação (tipografia, radius, motion, componentes) e sobrescreve apenas superfície + accent via [data-product="..."].
- Mesma tipografia: Jakarta (UI), JetBrains (mono), Syne (marca) — sem exceções.
- Mesmos radius: 4px é a regra. Rounded demais = casual demais para SaaS B2B.
- Mesmos componentes: botões, modais, tabelas, alerts são idênticos entre produtos. Só muda
--accent. - Docs color-agnostic: diga "botão primário", nunca "botão verde". O verde pode ser azul em outro produto.
- Trilha UX consistente: Green e Snap são Desktop / Notebook / Tablet-first — é onde o usuário vive.
Tokens & Export
Três formatos de export para cobrir todos os cenários.
CSS Variables · tokens.css
/* Light (padrão) */ :root, [data-theme="light"] { /* Superfícies — sage off-white, nunca branco puro */ --bg: #F4F7F4; --surface: #FFFFFF; --elevated: #FBFDFB; --border: #D8E2DB; /* Texto — graphite morno, AA+ garantido */ --text-1: #13201A; --text-2: #425249; --text-3: #6B7E72; --text-placeholder: #5A6E62; /* Accent — Lizard Green */ --accent: #2E8B57; --accent-hi: #227A4C; --accent-lo: #48A56E; } /* Dark — Floresta Noturna */ [data-theme="dark"] { --bg: #0A1410; --surface: #0F1C16; --text-1: #D6EADC; /* ... */ }
Tailwind · tailwind.config.ts
export default { darkMode: ['selector', '[data-theme="night"]'], theme: { extend: { colors: { bg: 'var(--bg)', surface: 'var(--surface)', border: 'var(--border)', accent: 'var(--accent)', }, fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'], display: ['Syne', 'sans-serif'], }, borderRadius: { DEFAULT: '4px' }, } } }
AI Setup · anti-alucinação
Quando Claude, Cursor ou Copilot forem usar este DS para criar um projeto LZR, devem seguir esta checklist antes de escrever qualquer componente.
Checklist obrigatório
var()var(--token) ou classe Tailwind mapeada/* ❌ ERRADO */ background: #F4F7F4; color: #13201A; border-radius: 4px; /* ✅ CORRETO */ background: var(--bg); color: var(--text-1); border-radius: var(--r-sm);
Trilhas de experiência
A LZR trabalha com duas trilhas: Desktop/Note/Tablet-first (Green Copilot, Snap CRM — onde o usuário passa horas) e Responsive (futuros apps que precisam funcionar bem em qualquer tela).
Onde o usuário vive
Produtos: Green Copilot · Snap Aligner CRM · futuros SaaS B2B.
- Desktop como tela primária (1280–1920px)
- Sidebar + topbar + content area · grid 12 colunas
- Tabelas densas com ordenação, filtros inline, expansão
- Adapta para notebook (1024–1280px) sem perda de funcionalidade
- Tablet (768–1024px) usa sidebar colapsável, tabelas com scroll horizontal
- Mobile é "visualização de leitura" — não fluxo principal
- Hover states essenciais · touch é "convidado"
Adaptável sem compromisso
Produtos: apps com público mais amplo.
- Layouts fluidos desde o início
- Nenhuma funcionalidade depende exclusivamente de hover
- Bento Grid 12 → 6 → 2 colunas
- Touch targets ≥44px em todos os elementos interativos
- Testes em 5 breakpoints: 1440 · 1024 · 768 · 480 · 375
Versionamento
MAJOR em breaking change de paleta, radius ou tipografia. MINOR em novo componente. PATCH em correções.