Meta CS
System
& Brand

Manual de marca e de interface da Meta Central de Serviços, com as telas reais do CSLog, CSCare e Inventário.

Versão 1.0 · Outubro de 2026

Uma marca e uma interface para todos os sistemas

A Meta Central de Serviços opera sistemas que as pessoas usam o dia inteiro: portaria, inspeção, estoque, relatório. Este manual reúne o que faz todos eles parecerem um só produto.

Ele documenta duas camadas. A institucional, em azul #014B92 com Inter. A de produto, em azul #0467DF com Geist, usada nas telas.

Cada prancha pode ser levada para outro projeto. O DESIGN.md que acompanha o manual traz os mesmos tokens em texto.

CSLog

CSCare

Inventário

Checklists

Dashboard

Agendamentos

Aprovações

Romaneios

Portarias

Empresas

Usuários

Auditoria

Ocorrências

Ordens de serviço

Chaves

Diretoria

Marca, produto,
sistema, módulo e tela

Nível 0

Marca institucional. Logotipo, azul #014B92, Inter.

Nível 1

Símbolo. Favicon, avatar e barra lateral recolhida.

Nível 2

Linguagem de produto. Azul #0467DF, Geist, tokens.

Nível 3

Sistemas. Cada um resolve uma operação.

CSLogCSCareInventário

Nível 4

Módulos dentro do sistema.

PortariasAprovaçõesOcorrênciasChaves

Nível 5

Telas com estados de carregar, vazio e erro.

Logotipo

Quatro versões aprovadas. Positiva em fundo claro, negativa em azul ou grafite, e o símbolo para espaços pequenos.

Positiva

Negativa · #014B92

Negativa · #1C2B33

Símbolo

Tela · mínimo 80 px

Impressão · 20 mm

Favicon · 16 px

Área de proteção
e usos incorretos

M M M M

× Alterar a cor

× Distorcer

× Girar

× Fundo poluído

Meta CS

× Trocar a tipografia

× Símbolo como assinatura em tela

Cores
institucionais

Clique em um bloco para copiar o HEX. O azul Meta leva a marca, o azul profundo marca hover e fundos escuros. O resto é neutro.

Cores de
produto

Azul vivo na ação, azul da barra lateral, superfícies frias. Cores semânticas só aparecem quando há estado a comunicar.

Rampa azul · primary-50 a primary-900

Três
famílias

Inter para a marca. Geist para ler e operar. Geist Mono só para dados literais, como placa, NF, CNPJ e códigos.

Marca · Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Light 300 · Regular 400 · Medium 500 · Semibold 600 · Bold 700

Produto · Geist

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Regular 400 · Medium 500 · Semibold 600 · Bold 700

Dados · Geist Mono

ABC-1D23 · NF 000.482.117 · 12.345.678/0001-90 · MAT-000017

Regular 400 · Medium 500

Escala
dos sistemas

Classes usadas no código. Números sempre tabulares. Nada de caixa-alta espaçada, font-black ou gradiente em texto.

Título da página	Centro de Controle Operacional	text-[28px] font-semibold
Subtítulo	Visão geral das operações do complexo	text-sm text-slate-500
Título de painel	Fluxo de veículos hoje	text-base font-semibold
Métrica	R$ 1.476,00	text-metric · tabular
Rótulo de campo	Empresa responsável	text-[13px] font-medium
Corpo	Aprovar agendamento da transportadora	text-sm text-slate-700
Ajuda	Informe a placa no formato ABC-1D23	text-xs text-slate-500
Código	OCR-2026-001 · MAT-000017	font-mono text-xs

Forma e
movimento

Elevação é borda ou sombra. Espaço na escala de 4 px. Movimento rápido e discreto, sempre com a mesma curva.

8 px

Campos e botões. rounded-lg.

12 px

Cards e tabelas. rounded-xl.

sombra

Painéis grandes. 16 px com sombra leve.

foco

Foco. anel azul a 15%.

cubic-bezier(0.16, 1, 0.3, 1) · entrada 200 a 300 ms · hover 150 ms · só opacity e transform

Componentes

Amostras com os tokens reais. Antes de escrever markup novo, use o primitivo existente em @/components/ui.

Botões

Aprovar agendamentoSalvar rascunhoExportar CSVExcluir empresa

Status

DisponívelPendenteSLA vencidoEm andamentoConsumível

Faixa de indicadores

Entradas hoje37

Saídas concluídas12

Agend. pendentes14

Código	Material	Condição	Disponível
MAT-000017	Caixa de sabonete 11G	Consumível	1 un.
MAT-000021	Balança de bancada	Disponível	3 un.
MAT-000034	Câmara fria portátil	Em manutenção	0 un.

Campo com erro

CNPJ

12.345.678/0001

CNPJ incompleto. Informe os 14 dígitos.

✓

Nenhuma inspeção registradaInforme a unidade e a empresa prestadora.Iniciar inspeção

CríticoEscritório Avançado com 3 não conformidades pendentes de correção.

Dashboard

Agendamentos

Aprovações

CSLog

Portaria, agendamento e logística. Controle de acesso e logística do complexo, com perfis por empresa e trilha de auditoria.

Dashboard com fluxo de veículos e alertas
Portarias e aprovações também no celular
Visão da diretoria com indicadores

Operação
diária

Do pedido de agendamento à saída do veículo. Rótulos acima dos campos, ações com verbo e objeto.

Agendamentos

Novo agendamento

Aprovações

Romaneios · NF e chaves em Geist Mono

Portarias

Gestão e
controle

Visão da diretoria, auditoria e relatórios.

Auditoria

Relatórios

Inventário no CSLog

No celular

Abaixo de lg as tabelas viram listas empilhadas, a barra lateral vira gaveta e entra uma barra inferior com os módulos mais usados. Áreas tocáveis com 40 px ou mais.

9:41

CSCare

Limpeza e manutenção predial. Inspeções por área, ocorrências, ordens de serviço com SLA e modelos de checklist. Mesmo design system do CSLog.

Kanban: pendentes, em tratativa, aguardando validação
Áreas com hierarquia e criticidade

Do chão
à gestão

Estado vazio completo, kanban por etapa e ordens de serviço com prioridade e prazo em badges.

Ocorrências

Ordens de serviço

Inspeções · estado vazio

Áreas

Modelos de checklist

Inventário

Equipamentos, estoque e chaves. Controle por localização, com nota fiscal, entradas, saídas, devoluções e exportação em Excel.

Histórico com saldo anterior e posterior
Importação de planilha e exportações auditadas

Cada item,
cada movimento

Do cadastro à baixa. Números de movimentação em Geist Mono e valores sempre alinhados à direita.

Inventário

Entradas

Histórico

Chaves

Exportar Excel

Configurações

Central
Meta CS

O ambiente único de acesso aos sistemas da Meta Central de Serviços. O colaborador entra uma vez e encontra tudo em um só lugar.

Objetivo. Simplificar o dia a dia, reduzir o tempo procurando onde acessar cada ferramenta e reforçar a marca Meta em todos os pontos de contato digitais.

Proposta de layout, para ouvir sugestões antes do desenvolvimento.

Notebook com a tela inicial da Central Meta CS

Um só lugar para todos os sistemas

Hoje cada sistema vive no próprio endereço, com a própria entrada. A Central reúne tudo: cada sistema vira um módulo claro, com ícone e nome.

Módulos em destaque

Busca rápida e indicação de pendências em cada sistema.

Comunicados e novidades

Informação importante na mesma tela, para que ninguém perca nada.

Perfil e acesso rápido

O colaborador vê suas pendências e abre o que mais usa.

Identidade Meta

O padrão dos sistemas aplicado de ponta a ponta, como um único produto.

Entrar na
plataforma

Todos os sistemas abrem com a mesma tela: painel azul com a marca, carrossel que explica o sistema e formulário limpo ao lado. Aqui, a gravação real do MetaCSLog.

Notebook com a tela de login do MetaCSLog

Para levar
a outros
sistemas

Copie os tokens para o globals.css e o sistema nasce com a cara Meta CS. O DESIGN.md traz o guia completo.

/* globals.css · tokens de produto Meta CS */
:root {
  --primary: #0467DF;  --primary-dark: #0356B8;  --primary-light: #E8F1FD;
  --surface: #F5F7FA;  --surface-hover: #EDF0F4;
  --success: #10B981;  --warning: #F59E0B;  --destructive: #EF4444;  --info: #3B82F6;
  --sidebar-bg: #0056A4;  --sidebar-width: 260px;  --sidebar-collapsed-width: 72px;
  --font-family: Geist;  --font-mono: Geist Mono;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

Faça

Use PageHeader, Button, Badge com ponto e Table*. Registre cada rota em navigation.ts. Entregue carregando, vazio e erro.

Texto

Português do Brasil, direto. Botão com verbo e objeto. Erro diz o que houve e como resolver.

Evite

Gradientes, cards dentro de cards, faixa colorida na borda, sombras grandes e afirmar “tempo real” ou “IA” sem cálculo.

Meta CSSystem& Brand

Uma marca e uma interface para todos os sistemas

Marca, produto,sistema, módulo e tela

Nível 0

Nível 1

Nível 2

Nível 3

Nível 4

Nível 5

Logotipo

Área de proteçãoe usos incorretos

Coresinstitucionais

Cores deproduto

Trêsfamílias

Escalados sistemas

Forma emovimento

Componentes

Botões

Status

Faixa de indicadores

Campo com erro

CSLog

Operaçãodiária

Gestão econtrole

No celular

CSCare

Do chãoà gestão

Inventário

Cada item,cada movimento

CentralMeta CS

Um só lugar para todos os sistemas

Módulos em destaque

Comunicados e novidades

Perfil e acesso rápido

Identidade Meta

Entrar naplataforma

Para levara outrossistemas

Uma marca, vários sistemas,a mesma cara.

Meta CS
System
& Brand

Marca, produto,
sistema, módulo e tela

Área de proteção
e usos incorretos

Cores
institucionais

Cores de
produto

Três
famílias

Escala
dos sistemas

Forma e
movimento

Operação
diária

Gestão e
controle

Do chão
à gestão

Cada item,
cada movimento

Central
Meta CS

Entrar na
plataforma

Para levar
a outros
sistemas

Uma marca, vários sistemas,
a mesma cara.