Este é o documento canônico para toda a plataforma KRON LabFlows. Qualquer tela — Login, Hub, Portal, Standalone, Landing Page — deve usar exclusivamente os tokens definidos aqui.
A marca LabFlows é o envelope institucional que abriga toda a plataforma KRON. Tudo nasce aqui.
A bússola foi escolhida como símbolo central do logotipo por representar orientação estratégica, precisão e confiança. Assim como a bússola guia viajantes em meio à incerteza, a plataforma guia laboratórios veterinários na transição para um atendimento digital inteligente e estruturado. O desenho minimalista reforça a clareza e objetividade da solução, enquanto a presença da IA confere um caráter inovador.
Cores definidas no manual da marca. O azul profundo #0B122F transmite confiança, estabilidade e tecnologia. O cinza claro #EEEDF2 cria respiro visual e modernidade.
#0B122F
#EEEDF2
A plataforma é um sistema de 3 camadas. O LabFlows é o envelope institucional; o KRON é o motor dos portais.
/* ═══════════════════════════════════════════════════════
ARQUITETURA DE CAMADAS — FLUXO VISUAL
═══════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────┐
│ LABFLOWS (Envelope Institucional) │
│ Cores: Navy #0B122F + Cloud #EEEDF2 │
│ Tipografia marca: Geomanist │
│ Tipografia UI: DM Sans + JetBrains Mono │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ CORE │ │ LOGIN │ │ HUB │ │
│ │ Backend │ │ SSO │ │ Profile │ │
│ │ API/Auth │ │ Gateway │ │ Portais │ │
│ └──────────┘ └──────────┘ └────┬─────┘ │
│ │ │
│ ┌─────────────────────────────────┴──────────────┐ │
│ │ KRON (Motor de Portais) │ │
│ │ Cada portal = data-portal="xxx" │ │
│ │ Override: --accent, --accent-soft/text/glow │ │
│ │ │ │
│ │ PRO • MASTER • CONNECT • PARTNER • LOGAN │ │
│ │ ADVISOR • AUTOMATION • HEMOCENTER • MESSAGE │ │
│ │ SMARKETING • CHECKOUT • CHATWOOT • FINANCIAL │ │
│ │ BANKING │ │
│ └────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
*/Distribuição harmônica dos 14 portais no espectro cromático 360°. Zero colisão de matiz. Ref: kron_color_system_fullcycle_proposal.html
| Portal | Cor | Hex | Matiz | Categoria | Status |
|---|---|---|---|---|---|
| HEMOCENTER | #ef4444 | 0° | Banco de Sangue | Ajuste fino | |
| BANKING | #e8593c | 12° | Rede Financeira | Mantém | |
| SMARKETING | #f97316 | 25° | Sales + Marketing | Mantém | |
| PARTNER | #f59e0b | 38° | Parceiros | Mantém | |
| CHECKOUT | #eab308 | 50° | PDV / Caixa | Muda | |
| LOGAN | #84cc16 | 85° | Logística | Mantém | |
| MESSAGE | #25d366 | 145° | Mensageria | Muda | |
| CONNECT | #14b8a6 | 174° | Clientes | Mantém | |
| FINANCIAL | #0891b2 | 193° | Financeiro | Muda | |
| CHATWOOT | #3b82f6 | 220° | Omnichannel | Ajuste fino | |
| PRO | #7c6aff | 252° | Laboratório | Mantém | |
| MASTER | #7c3aed | 263° | Super Admin | Mantém | |
| AUTOMATION | #a855f7 | 280° | Automação | Mantém | |
| ADVISOR | #e8593c | 12° | Consultoria | Mantém |
Sistema cromático completo com 5 níveis de profundidade de background, 4 níveis de texto, accent global e 8 cores semânticas.
Cada portal sobrescreve apenas as 4 variáveis de accent. Todos os outros tokens são herdados do global sem alteração.
--accent: #7c6aff
--accent-soft: rgba(124,106,255,0.12)
--accent-text: #a698ff
--accent-glow: rgba(124,106,255,0.20)
--accent: #7c3aed
--accent-soft: rgba(124,58,237,0.12)
--accent-text: #a78bfa
--accent-glow: rgba(124,58,237,0.20)
--accent: #10b981
--accent-soft: rgba(16,185,129,0.12)
--accent-text: #34d399
--accent-glow: rgba(16,185,129,0.20)
--accent: #f59e0b
--accent-soft: rgba(245,158,11,0.12)
--accent-text: #fbbf24
--accent-glow: rgba(245,158,11,0.20)
--accent: #84cc16
--accent-soft: rgba(132,204,22,0.12)
--accent-text: #a3e635
--accent-glow: rgba(132,204,22,0.20)
--accent: #e8593c
--accent-soft: rgba(232,89,60,0.12)
--accent-text: #f08060
--accent-glow: rgba(232,89,60,0.20)
--accent: #5dd4e0
--accent-soft: rgba(93,212,224,0.12)
--accent-text: #7ee4ee
--accent-glow: rgba(93,212,224,0.20)
--accent: #DC3545
--accent-soft: rgba(220,53,69,0.12)
--accent-text: #f06070
--accent-glow: rgba(220,53,69,0.20)
--accent: #25d366
--accent-soft: rgba(37,211,102,0.12)
--accent-text: #4ade80
--accent-glow: rgba(37,211,102,0.20)
Estes módulos usam o accent padrão Indigo (#7c6aff) — não precisam de data-portal.
DM Sans (primária) + JetBrains Mono (monospace). Escala de 9px a 40px com 7 pesos.
Base de 4px. Escala de sp-1 (4px) a sp-20 (80px). Padrão global adotado do Logan DS.
7 níveis de arredondamento, de 4px (micro) a full (pill).
4 elevações + 3 glows. Valores calibrados para dark mode; light mode usa opacidade reduzida.
--shadow-sm--shadow-md--shadow-lg--shadow-xl--shadow-glow-accent--shadow-glow-teal--shadow-glow-strongEasing padrão Material Design + 5 durações + 8 keyframes predefinidos. Hover para preview.
| Token | Valor | Uso |
|---|---|---|
--dur-fast | 150ms | Botões, quick interactions |
--dur-normal | 200ms | UI elements, hover states (padrão) |
--dur-medium | 250ms | Mode toggle, expandir/colapsar |
--dur-slow | 400ms | Modais, painéis laterais |
--dur-page | 500ms | Transições de página, fadeUp |
--ease: cubic-bezier(0.4, 0, 0.2, 1) /* Material Design Standard */opacity + translateY(16px→0)opacity 0→1scale(1→1.06→1)opacity 1→0.5→1rotate(0→360deg)scale(0.95→1) + opacity135+ ícones via kron-icons.js. SVG inline, stroke 1.8px, viewBox 24×24, currentColor.
assets/kron-icons.js. Usar via <i data-lucide="icon-name"></i> + chamar lucide.createIcons() após DOM ready. Nunca usar ícones de fontes (Font Awesome, Material Icons, etc).
viewBox: "0 0 24 24"
fill: none
stroke: currentColor
stroke-width: 1.8
stroke-linecap: round
stroke-linejoin: round
size padrão: 16×16px (customizável via style)Escala padronizada para evitar conflitos de empilhamento.
| Token | Valor | Uso |
|---|---|---|
--z-base | 1 | Elementos padrão |
--z-sidebar | 10 | Sidebar fixa |
--z-topbar | 20 | Topbar fixa |
--z-dropdown | 100 | Dropdowns, popovers |
--z-modal | 200 | Modais, overlays |
--z-toast | 300 | Toasts, notificações |
--z-tooltip | 400 | Tooltips (maior prioridade) |
Fundo com 10-12% da cor semântica + texto na cor pura.
/* Padrão universal: background {cor}-soft + color {cor} */
.badge { font-size: 9px; padding: 2px 8px; border-radius: var(--r-xs); font-weight: 600; }
.badge-green { background: var(--green-soft); color: var(--green); }
/* Nav badges — sidebar */
.nav-badge.live { background: var(--green-soft); color: var(--green); }
.nav-badge.count { background: var(--yellow-soft); color: var(--yellow); }
.nav-badge.pro { background: var(--orchid-soft); color: var(--orchid); }
.nav-badge.new { background: var(--blue-soft); color: var(--blue); }Background surface, border padrão, focus com ring accent de 3px.
.input-field {
padding: 10px 14px;
border-radius: var(--r-sm);
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-1);
font-family: var(--font);
font-size: var(--fs-base);
transition: all var(--dur-normal) var(--ease);
}
.input-field:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
outline: none;
}Sidebar (230px) + Main (Topbar 52px + Content). Flex, 100vh, overflow hidden.
<div class="app">
<aside class="sidebar"> ... </aside>
<main class="main">
<div class="topbar"> ... </div>
<div class="content"> ... </div>
</main>
</div>
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; }
.main { flex: 1; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); padding: 0 var(--sp-6); }
.content { flex: 1; overflow-y: auto; padding: var(--content-py) var(--content-px); }Surface background, border padrão, hover eleva com shadow-md.
Diretrizes obrigatórias para manter consistência em todas as telas.
:root completo da Seção 1. Inclua as variáveis de background, texto, bordas, accent, semânticas, tipografia, spacing, radius, sombras, layout e motion.DM Sans (300–800, italic) + JetBrains Mono (400, 500, 600). Copie a tag link da Seção 4.assets/kron-icons.js e use <i data-lucide="nome">. Stroke-width padrão: 1.8. Tamanho padrão: 16×16px.230px (var(--sidebar-w)). Connect tinha 220px e Logan tinha 260px — ambos foram padronizados para 230px.rgba(R,G,B, 0.10) para dark mode, rgba(R,G,B, 0.08) para light mode. Nunca use hex sólido como fundo de badge/tag.Como aplicar a cor do portal mantendo todo o resto do design system global.
/* ═══════════════════════════════════════════════
PADRÃO: PORTAL ACCENT OVERRIDE
Copie este bloco no <html> do portal específico
═══════════════════════════════════════════════ */
/* OPÇÃO 1: Via data-attribute (recomendado) */
<html data-theme="dark" data-portal="master">
/* OPÇÃO 2: Via CSS direto (quando data-attr não é possível) */
:root {
/* Copie TODOS os tokens globais (Seção 1) */
/* Depois sobrescreva APENAS o accent: */
--accent: #7c3aed; /* Master = Violet */
--accent-soft: rgba(124,58,237,0.12);
--accent-text: #a78bfa;
--accent-glow: rgba(124,58,237,0.20);
--accent-gradient: linear-gradient(135deg, #7c3aed, #a78bfa);
}
/* ═══════════════════════════════════════════════════════════
REFERÊNCIA RÁPIDA DE ACCENTS — 9 PORTAIS
═══════════════════════════════════════════════════════════
PORTAL ACCENT SOFT (12%) TEXT
───────── ───────── ────────────────────────── ─────────
PRO #7c6aff rgba(124,106,255,0.12) #a698ff
MASTER #7c3aed rgba(124,58,237,0.12) #a78bfa
CONNECT #10b981 rgba(16,185,129,0.12) #34d399
PARTNER #f59e0b rgba(245,158,11,0.12) #fbbf24
LOGAN #84cc16 rgba(132,204,22,0.12) #a3e635
ADVISOR #e8593c rgba(232,89,60,0.12) #f08060
AUTOMATION #5dd4e0 rgba(93,212,224,0.12) #7ee4ee
HEMOCENTER #DC3545 rgba(220,53,69,0.12) #f06070
MESSAGE #0ea5e9 rgba(14,165,233,0.12) #38bdf8
─────────────────────────────────────────────────────────────
Banking, Checkout, Financial → herdam PRO (#7c6aff)
═══════════════════════════════════════════════════════════ */Como o Design System se aplica em cada contexto da plataforma.
| Contexto | Layout | Accent | Tema | Notas |
|---|---|---|---|---|
| Login | Card centralizado | Global (Indigo) | Dark | Partículas animadas, logo com pulse |
| SSO | Split-panel (brand + form) | Navy/Teal (exceção) | Dark | Gateway de autenticação corporativa |
| Hub | Full-width, sem sidebar | Global (Indigo) | Dark/Light | Profile, workspaces, portal grid |
| Portal PRO | Sidebar + Topbar + Content | Indigo #7c6aff | Dark/Light | Referência-ouro do DS |
| Portal MASTER | Sidebar + Topbar + Content | Violet #7c3aed | Dark/Light | Super Admin LabFlows |
| Portal CONNECT | Sidebar + Topbar + Content | Emerald #10b981 | Dark/Light | Portal de integrações |
| Portal PARTNER | Sidebar + Topbar + Content | Amber #f59e0b | Dark/Light | Portal de parceiros |
| LOGAN | Sidebar + Topbar + Content | Lime #84cc16 | Dark/Light | Sistema logístico |
| Standalone | Flexível | Global (Indigo) | Dark/Light | Usar tokens globais, sem sidebar |
| ADVISOR | Sidebar + Topbar + Content | Coral #e8593c | Dark/Light | Consultoria e assessoria veterinária |
| AUTOMATION | Sidebar + Topbar + Content | Cyan #5dd4e0 | Dark/Light | Workflows, automações, arquitetura |
| HEMOCENTER | Sidebar + Topbar + Content | Crimson #DC3545 | Dark/Light | Banco de sangue veterinário |
| MESSAGE | Sidebar + Topbar + Content | Sky #0ea5e9 | Dark/Light | Central de mensageria |
| Banking | Sidebar + Topbar + Content | Indigo #7c6aff (PRO) | Dark/Light | Módulo financeiro — herda accent PRO |
| Checkout | Standalone card | Indigo #7c6aff (PRO) | Dark/Light | Checkout de pagamento — herda accent PRO |
| Landing Pages | Full-width, sem sidebar | Global ou Portal | Dark | Pode combinar múltiplas cores de portal |
Todos os 80+ design tokens com valores dark e light.
| Token | Dark | Light | Categoria |
|---|---|---|---|
--bg-deep | #06080e | #f3f4f8 | Background |
--bg-base | #0a0f1a | #ffffff | Background |
--bg-surface | #0f1525 | #f7f8fb | Background |
--bg-elevated | #141c30 | #ffffff | Background |
--bg-hover | #192640 | #eef0f6 | Background |
--text-1 | #eaecf5 | #1a1d2b | Texto |
--text-2 | #8b92a8 | #5a5f76 | Texto |
--text-3 | #4e5572 | #9a9fb5 | Texto |
--text-4 | #343a52 | #c5c9d6 | Texto |
--border | rgba(255,255,255,0.06) | rgba(0,0,0,0.07) | Borda |
--border-active | rgba(255,255,255,0.10) | rgba(0,0,0,0.12) | Borda |
--accent | #7c6aff | #6c5ce7 | Accent |
--accent-soft | rgba(124,106,255,0.12) | rgba(108,92,231,0.08) | Accent |
--accent-text | #a698ff | #5a4bd4 | Accent |
--accent-glow | rgba(124,106,255,0.20) | rgba(108,92,231,0.12) | Accent |
--teal | #2ec4b6 | #0d9488 | Semântica |
--green | #3dd68c | #16a34a | Semântica |
--yellow | #f5b731 | #ca8a04 | Semântica |
--red | #f06060 | #dc2626 | Semântica |
--blue | #58a6ff | #2563eb | Semântica |
--orchid | #c084fc | #9333ea | Semântica |
--amber | #f59e0b | #b45309 | Semântica |
--cyan | #5dd4e0 | #0891b2 | Semântica |
--orange | #f97316 | #c2410c | Semântica |
--font | DM Sans, system | Tipografia | |
--mono | JetBrains Mono | Tipografia | |
--sidebar-w | 230px | Layout | |
--topbar-h | 52px | Layout | |
--ease | cubic-bezier(0.4, 0, 0.2, 1) | Motion | |
Inconsistências encontradas nos 50+ arquivos e as padronizações aplicadas nesta v3.
| Problema | Antes (inconsistente) | Agora (padronizado) | Módulos afetados |
|---|---|---|---|
| Sidebar width variava | 220px (Connect), 260px (Logan) | 230px global (--sidebar-w) | Connect, Logan |
| bg-base inconsistente | #0a0e1a (SSO), #0a0b1a (Master) | #0a0f1a (PRO padrão) | SSO, Master |
| bg-surface inconsistente | #0f1422 (SSO), #0f1025 (Master) | #0f1525 (PRO padrão) | SSO, Master |
| text-2 inconsistente | #8b8fa8 (Master) | #8b92a8 (PRO padrão) | Master |
| bg-hover inconsistente | #1a1b40 (Master) | #192640 (PRO padrão) | Master |
| Spacing tokens só no Logan | --sp-* apenas em logan_design_system.html | --sp-1 a --sp-20 global | Todos |
| Duration tokens só no Logan | --dur-* apenas em logan_design_system.html | --dur-fast/normal/medium/slow/page global | Todos |
| Layout tokens ausentes | Hardcoded 230px, 52px nos arquivos | --sidebar-w, --topbar-h, --content-px/py | Todos |
| Z-index sem escala | z-index: 200 hardcoded | --z-base a --z-tooltip (7 níveis) | Todos |
| Partner --teal diferente | #14b8a6 (Partner) | #2ec4b6 (PRO padrão) | Partner |
| Orange/cyan ausentes | Só definidos no Logan | --orange, --cyan + soft globais | Todos |
| Font-size sem escala | font-size: 13px hardcoded | --fs-2xs a --fs-hero (14 níveis) | Todos |
Histórico de versões do Design System KRON.