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'); }

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