Filosofia

MGConnect é um sistema de telemetria veicular operado por frotistas, mecânicos e analistas. A interface precisa entregar muita informação rapidamente, sem distrair. O design é industrial, não consumer; operacional, não decorativo; e privilegia densidade informacional sobre espaço em branco generoso.

Princípios

Leitura rápida — números monoespaçados, hierarquia tipográfica enxuta, sem decoração entre dado e olho.
Baixa distração — animações curtas (≤250ms), cores fortes só para sinal, não para decoração.
Alta densidade — minicards de 95×~60px cabem 3-12 por linha; grid é o padrão sobre lista vertical.
Estado sempre visível — online/offline/loading nunca ambíguo; tempos sempre presentes; OTA com etapa numerada.
Dark é primário — operadores passam horas na tela; light existe para sol direto.
Mobile preserva densidade — não simplificamos no celular; mantemos minicards, viramos modal em bottom-sheet.

Regras

Decisões fechadas. Não negociar caso-a-caso — alinhe aqui antes.

✓

Todo card usa raio --mgc-radius-xl (16px). Minicards usam --mgc-radius-md (8px). Modais usam --mgc-radius-2xl (18px). Nenhum valor entre estes.

✓

Toda ação destrutiva usa --mgc-danger (#e74c3c): deletar, abortar OTA, reset hard, desativar veículo. Não confundir com erro de display (que é alert, não button).

✕

Vermelho nunca é cor decorativa. Usuário associa vermelho a "fui clicar e algo ruim aconteceu". Use --mgc-info ou --mgc-warning para destacar sem alarmar.

✓

Todo hover usa --mgc-trans-fast (120ms). Exceção: cards que levantam (transform translateY) usam --mgc-trans-slow (250ms) porque elasticidade pede mais tempo.

✓

Todo modal usa overlay --mgc-overlay (rgba 0.55 / 0.68 dark) com backdrop-filter: blur(2px). Mobile vira bottom-sheet automaticamente abaixo de 600px.

✓

Toda fonte mono (números, IDs, timestamps) usa .mgc-mono. Habilita tabular-nums — colunas de números alinham sozinhas.

✕

Nunca hard-code cor literal (#fff, #1e293b). Use sempre var(--mgc-…). Hard-code quebra dark mode.

✕

Texto secundário não usa itálico, cinza-claro, nem fonte < 11px. Operadores leem em movimento; texto que parece "menos importante" vira invisível. Padrão Albert View: bold ≥0.9em, cor herdada.

✓

Dark mode é ativado por <body class="dark-mode">. Compatível com Albert View atual. Todos os componentes herdam via variáveis — nenhuma classe precisa de override manual.

✓

Foco de teclado é sempre visível (outline 2px --mgc-info). Não remover. Acessibilidade não é opcional.

Como usar

Em qualquer página MGConnect, adicione apenas o link CSS e marque o body.

Setup mínimo

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel="stylesheet" href="https://designsystem.mgconnect.online/mgconnect.css"> </head> <body class="mgc-app dark-mode"> <header class="mgc-header">…</header> <main class="mgc-main">…</main> </body> </html>

Toggle dark/light em JS

document.getElementById('btn').onclick = () => { document.body.classList.toggle('dark-mode'); localStorage.setItem('mgc-theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light'); }; // On load: if (localStorage.getItem('mgc-theme') === 'dark') { document.body.classList.add('dark-mode'); }

Logo & Ícone

Ativos de marca MGConnect em PNG com fundo transparente. Servidos centralmente pelo design system — referencie sempre por URL. Atualizar o arquivo aqui propaga para todas as UIs (View, Portal, Server, Service, Admin, Config Tool).

Logo (ícone + texto)

Usado no header via .mgc-header .mgc-logo. Já contém o texto "MGConnect" — não acompanhe de rótulo separado (.mgc-brand fica oculto).

fundo claro

fundo escuro

https://designsystem.mgconnect.online/assets/logo.png

Ícone (favicon / app icon)

Versão só-símbolo, transparente. Favicon da aba do navegador e ícone de app (apple-touch).

Regras de uso

✓

Referencie por URL do design system. O ativo é central — trocar o arquivo aqui atualiza o favicon e o logo de todas as UIs de uma vez.

✓

O logo já inclui o texto. No header, deixe só o <img class="mgc-logo">; o .mgc-brand é ocultado pelo CSS do DS.

✕

Não copie o PNG para o repositório de cada UI. Cópias locais divergem e quebram a propagação central.

✕

Não aplique o ícone sobre fundo vermelho saturado. O símbolo é vermelho (#c1121f) — em fundo vermelho perde contraste.

Emojis

Emoji é sinal semântico, não decoração. Cada significado tem um emoji padrão — não troque por sinônimos visuais. Use o glifo listado aqui; mantenha o seletor de cor (U+FE0F) nos que renderizam mono por padrão (⚠️, ☀️, ⚙️…).

Estado & sinalização

✓confirmar / aplicar
U+2713

✅sucesso / concluído
U+2705

✕fechar / cancelar
U+2715

❌erro / falha
U+274C

⚠️aviso / atenção
U+26A0

🛑parar / abortar
U+1F6D1

⏳aguardando / processando
U+23F3

Pontos de status (cor)

Bolinhas de estado — espelham as cores semânticas dos tokens de status.

🟢online / OK
U+1F7E2

🔴offline / crítico
U+1F534

🟡atenção
U+1F7E1

🔵info / OTA
U+1F535

⚪neutro / sem dado
U+26AA

Navegação & direção

→fluxo / próximo
U+2192

←anterior
U+2190

↑ordenar ↑
U+2191

↓ordenar ↓
U+2193

🔁repetir / loop
U+1F501

🔄atualizar / sincronizar
U+1F504

↩️voltar / desfazer
U+21A9

☰menu
U+2630

Ações & ferramentas

⚙️configurações / admin
U+2699

🔧manutenção / ajuste
U+1F527

🛠️ferramentas / setup
U+1F6E0

🔍buscar
U+1F50D

✏️editar
U+270F

🗑️excluir
U+1F5D1

🧹limpar
U+1F9F9

💾salvar
U+1F4BE

📥receber / importar
U+1F4E5

➕adicionar
U+2795

🔑credencial / chave
U+1F511

🔒bloqueado / seguro
U+1F512

Telemetria & veículo

🚛veículo / frota
U+1F69B

⛽combustível
U+26FD

🌡️temperatura
U+1F321

💨velocidade
U+1F4A8

🛣️rota / trajeto
U+1F6E3

🧭direção / bússola
U+1F9ED

🗺️mapa
U+1F5FA

📍localização
U+1F4CD

📡sinal / comunicação
U+1F4E1

⏱️tempo / duração
U+23F1

🔋bateria / tensão
U+1F50B

Análise, saúde & gamificação

📈tendência / subida
U+1F4C8

📉queda
U+1F4C9

📊métricas / dashboard
U+1F4CA

🫀saúde mecânica
U+1FAC0

🩺diagnóstico
U+1FA7A

🧠preditivo / IA
U+1F9E0

🏅medalha
U+1F3C5

🏆troféu / ranking
U+1F3C6

⭐destaque
U+2B50

🔥streak / em alta
U+1F525

🌿economia / eco
U+1F33F

Tema, conta & conteúdo

🌙tema escuro
U+1F319

☀️tema claro
U+2600

🎨design system / tema
U+1F3A8

🔔notificações
U+1F514

📋lista / relatório
U+1F4CB

📄documento
U+1F4C4

📁pasta / grupo
U+1F4C1

🏢empresa / sigla
U+1F3E2

👤usuário / conta
U+1F464

Regras de uso

✓

Um significado, um emoji. Reuse o glifo desta lista; não introduza sinônimos (ex.: não use 🔎 onde o padrão é 🔍, nem ✔/✗ onde é ✓/✕).

✓

Pareie cor e emoji. Pontos de status seguem os tokens semânticos — 🟢 online, 🔴 crítico, 🟡 atenção, 🔵 info.

✕

Emoji não é enfeite. Se não codifica estado, ação ou domínio, não entra. Texto que "parece" mais bonito com emoji geralmente fica mais ruidoso.

✕

Não empilhe emojis (🔥🚀✨) para dar ênfase. Um por rótulo, no máximo.

Ícones (SVG)

Ícones SVG inline usados nos controles das UIs (sobretudo no Albert View). Desenhados em viewBox próprio, herdam a cor do contexto via fill="currentColor" ou stroke="currentColor" — então funcionam em header escuro e em botão claro sem ajuste.

Conjunto

Inicial
home · volta à grade

Mapa
pin de localização

Condução
volante

Diagnóstico
sinal vital · cor fixa #0ea5e9

Gamificação
troféu

Detalhar / buscar
lupa

Motorista
pessoa / conta

Símbolos tipográficos

Glifos Unicode (não-emoji) usados como ícone de botão em toolbars de análise — herdam a fonte e a cor do texto.

Σagrega tudo (modo Σ)
U+03A3

∿curva de tendência
U+223F

⇄comparação / alternar
U+21C4

∂derivada (dX/dt)
U+2202

Como usar

✓

Use currentColor (em fill ou stroke) para o ícone herdar a cor do botão/header. Evita uma cópia por tema.

✓

Sempre com title — o tooltip é o rótulo acessível do ícone (ex.: "Inicial", "Mapa").

✕

Não fixe cor literal salvo intenção semântica (ex.: o ícone de Diagnóstico usa #0ea5e9 de propósito como "sinal vital").

✕

Símbolos de marca não entram aqui. O ícone "Meu Agente" (Einstein) é uma marca específica do View (<use href="#einsteinSymbol">), não um ícone de UI reutilizável.

Cores

Tokens semânticos, nunca literais. Cada cor tem um papel definido.

Superfícies

Texto

Status semântico

Bordas e sombras

Tipografia

Sans para texto, mono para dados. Escala compacta — 6 tamanhos.

Famílias

Segoe UI / Roboto / Arial — texto, labels, títulos.

ui-monospace 12345.67 km/h — números, IDs, timestamps.

Escala

3xl · 28px · títulos de página

2xl · 22px · seções

xl · 18px · subseções, ícones grandes

lg · 15px · h3, números em destaque

md · 13px · texto corrido, labels

base · 12px · UI padrão (botões, toolbar)

sm · 11px · meta, footer, label

xs · 10px · minicard, pill (não use para texto principal)

Espaçamento

Escala 4px. Tudo é múltiplo. Nada de ad-hoc.

Raios

7 valores. Cada componente tem o seu — fixo.

xs · 3px

sm · 6px

md · 8px

lg · 12px

xl · 16px

2xl · 18px

pill · 999px

Sombras

4 níveis. Adapta automaticamente para dark mode.

shadow-sm

shadow-md (card)

shadow-lg (hover)

shadow-modal

Transições

3 velocidades. Padrão é fast (120ms).

--mgc-trans-fast: 120ms — hover, mudança de cor, toggle. Padrão.

--mgc-trans-base: 200ms — barras de progresso, painéis abrindo.

--mgc-trans-slow: 250ms — transform elástico (cards levantando).

Demo (passe o mouse)

Slow (250ms)
levanta no hover

Botões

Default → ação reversível. Primary → ação principal. Danger → destrutivo.

Variantes

Tamanhos

Icon button

Status badges & Pills

Sinalização visual de estado. Cor sempre semântica.

Status badge (120×38px, dentro de card)

Online

2s atrás

Offline

3h12m

Atenção

tensão baixa

OTA

etapa 2/4

Estacionado

15min

Carregando

Pills (tag minúscula em listas)

NEUTRO OK ERRO AVISO NOVO

Cards

Container padrão. Radius 16px (xl), padding 16px, shadow-md.

PRZ · IVC4026

OK

Volvo VM 270 · 2019

Online

12s

82 km/h

GRT · JCU5A70

SENSOR

Scania R450 · 2021

Atenção

arref. 102°C

0 km/h

PZT · XAF1100

ERRO

Iveco Daily · 2018

Offline

3h12m

—

Minicards

Densidade máxima — 95px de largura. 9-12 por linha em desktop, 3 em mobile.

Grids

.mgc-grid padrão é responsivo (auto-fill minmax 240px). Para mini, use .mgc-grid--mini.

Padrão

Card A

Card B

Card C

Alerts

Mensagens contextuais. Diferente de status — fala da operação, não do veículo.

✓

OTA finalizado

Firmware k2_v1.4.2 instalado em 12 dispositivos.

ⓘ

Sincronização em andamento

Ingestor processando lote de 1.247 eventos.

⚠

Veículo sem heartbeat

GRT · JCU5A70 não comunica há 18 minutos.

✕

Falha de transporte k2

HTTP_BODY_SHA_MISMATCH em 3 sessões consecutivas. Investigar.

Tabelas

Densas, monoespaçadas, sticky-header. Hover de linha sinaliza interatividade.

Sigla	Placa	Status	Vel	RPM	Último sinal
PRZ	IVC4026	OK	82	1840	12s
GRT	JCU5A70	ATENÇÃO	0	760	8s
PZT	XAF1100	OFFLINE	—	—	3h12m
VND	VEC8821	OTA	0	820	2s

Timeline

Eventos discretos em ordem temporal. Cor do marcador codifica natureza.

2026-05-22 14:32:08

OTA-3 confirmado pelo device

2026-05-22 14:31:45

Payload k2 entregue (16.4 KB)

2026-05-22 14:31:12

Retry #1 — HTTP timeout

2026-05-22 14:30:01

Sessão k2 aberta

Barra OTA

Progresso + etapa numerada. Cor da barra sinaliza estado global.

k2_v1.4.2 → PRZ · IVC4026 68%

OTA-0

OTA-1

OTA-2

OTA-3

OTA-4

k1_v3.2 → GRT · JCU5A70 100%

k2_v1.4.2 → VND · VEC8821 42%

OTA-0

OTA-1

OTA-2

OTA-3

OTA-4

Modal

Overlay 0.55, blur 2px, content radius 18px. Mobile vira bottom-sheet.

Tooltips

Conteúdo informativo on-hover, fora do fluxo da página.

Passe o mouse no card abaixo para ver o tooltip.

PRZ · IVC4026

Hover para tooltip

Loaders

Spinner, dots, pulse, toast. Cada um sinaliza um tipo de espera.

spinner — operação rápida

dots — aguardando dado

pulse-dot — live indicator

Forms

Inputs, selects, textareas e checkboxes. Densidade compacta, foco com glow azul.

Estados

numSerie

10 chars, alfanumérico

Sigla

Placa

Modificado — pendente de salvar

Modelo

Campo obrigatório

Template

Observação

Remover pasta do filesystem (backup automático)

Inline (linha de filtro)

Sigla

Placa

Fieldsets

Agrupa campos relacionados com legenda. Substitui o div+h2 para formulários longos.

🚛 Nova Identidade

Sigla

Placa

Marca

Modelo

Modal — small / dialog

Para confirmações e fluxos curtos. Diferente do modal full-screen padrão.

Action list

Lista de operações tipadas. Cor codifica o tipo — backup, move, create, db, update, conflict.

Criar backup

~/albert/agent/_backup/PRZ_IVC4026_20260522_1432.tgz
Mover pasta

~/albert/agent/OLD/IVC4026 → ~/albert/agent/PRZ/IVC4026
Criar estrutura

~/albert/agent/PRZ/IVC4026/{T,al,TWiFi,hWiFi,segmentos,contr}/
Atualizar contr.txt

Campos [7]=14LBE, [8]=PRZ, [9]=IVC4026, [10]=Volvo, [11]=VM 270
Upsert no banco

INSERT INTO veiculos(numserie, sigla, placa, marca, modelo) VALUES(…) ON CONFLICT(numserie) DO UPDATE …
CMD11 será enviado

Dispositivo atualiza contr.txt no próximo ping (~30s)
Conflito — placa já existe

IVC4026 atualmente vinculada a numSerie=09ABC. Use "Forçar" para rebinding.

Editable cell

Para tabelas com edição inline. Clique = vira input. Salvamento explícito (botão "Aplicar" na linha).

Sigla	Placa	Marca	Modelo	Chip
PRZ	IVC4026	Volvo	VM 270	8932011234
GRT	JCU5A70	Scania	R450	8932011567

Estados: idle · dirty · saving

State box

Resultado de busca/consulta. Diferente de alert — representa um estado do dado, não um aviso de UI.

Encontrado: DB FS
numSerie=14LBE · sigla=LBG · placa=XAF1100

Não encontrado — numSerie 99ZZZ não existe no banco nem no filesystem. Será criado como novo.

Erro — conexão com banco perdida durante a consulta. Tentar novamente.

Two-column layout

Form à esquerda (400px), preview/resultado à direita (flex). Colapsa abaixo de 800px.

Formulário

Sigla

Placa

Resultado

Criar pasta

~/albert/agent/PRZ/IVC4026/
Inserir veículo