Panorama do projeto
O projeto usa o grid responsivo de 24 colunas, tokens centralizados em css/variables.css, componentes base em css/components.css e renderização analítica por módulos em js/charts/.
Tipografia
As famílias tipográficas do projeto são declaradas em css/variables.css e aplicadas de forma consistente nas telas analíticas.
Fonte principalDM SansLeitura principal, títulos, descrições, labels e navegação do dashboard.
Fonte auxiliarDM MonoIndicadores compactos, IDs técnicos, referências de arquivos e elementos de apoio.
- Família principal:
--font-family-main com DM Sans. - Família auxiliar:
--font-family-mono com DM Mono. - Escala:
--font-size-h1 até --font-size-small para hierarquia analítica.
Paleta e contraste
A linguagem visual é toda em branco, preto e escala de cinza, sem cores proprietárias fora dos tokens do projeto.
Base escuravar(--color-black)#000000
Base claravar(--color-white)#FFFFFF
50100200300400500600700800900
- Superfícies:
--color-white e --color-gray-50. - Textos:
--color-gray-900, --color-gray-800 e --color-gray-600. - Bordas e separações:
--border-color baseado em --color-gray-200.
Grid e composição
- Grid: malha responsiva de 24 colunas com
.dashboard-grid e utilitários .col-span-*. - Canvas máximo: os wrappers do projeto respeitam até
420px de altura nas variantes maiores. - Cards: uso recorrente de
.card, .card-header, scorecards, tabelas e wrappers de chart.
Arquitetura analítica
Páginas analíticas3financeiro, auditoria e performance
Componentes refletidos40todos os blocos atualmente usados nas páginas analíticas
Módulos40cada bloco reaproveita módulo já existente em js/charts/
Dados40datasets locais em data/ espelhados na documentação
Páginas cobertas
As telas abaixo continuam sendo as fontes operacionais do mockup; a index agora centraliza a leitura do design system e do inventário analítico.
Leitura vertical em sete cards: extrato do investimento Globo, ritmo mensal, faturado vs executado, plataforma, quebra do investimento, pacing e saúde por contrato.
12 componentes documentadosfinanceiro.html
Visão macro para micro com foco em anomalias, impacto financeiro, triagem de risco e rastreabilidade.
10 componentes documentadosauditoria.html
Panorama global, TV linear, digital e granularidade diária em uma estrutura modular alinhada ao design system.
18 componentes documentadosperformance.html
Financeiro e executiva12 componentesExtrato, contratado versus entregue, ritmo, faturado, plataformas, distribuição, canal, região, campanha, conciliação, pacing e saúde por contrato.
Auditoria10 componentesKPIs, anomalias, impacto, risco por plataforma, geografia, faturamento, entregas e rastreabilidade.
Performance18 componentesPanorama de mídia, público, TV linear, digital, criativos, dispositivos e tabelas de detalhamento.
Extrato do Investimento Globo Financeiro e executiva
Contratado versus entregue Financeiro e executiva
Quebra do investimento Financeiro e executiva
Investimento por plataforma Financeiro e executiva
Investimento por canal Financeiro e executiva
Investimento por região Financeiro e executiva
Investimento por campanha/projeto Financeiro e executiva
Conciliação financeira Financeiro e executiva
Faturado vs Executado Financeiro e executiva
Monitoramento de ritmo por plataforma Financeiro e executiva
Ritmo de entrega Financeiro e executiva
Saúde por contrato Financeiro e executiva
KPIs de auditoria Auditoria
Distribuição geral de anomalias Auditoria
Impacto por volume Auditoria
Impacto por valor Auditoria
Anomalias por plataforma e risco Auditoria
Detalhamento geográfico do risco Auditoria
Retroatividade e impacto temporal Auditoria
Diário de bordo Auditoria
Alterações de entregas planejado vs executado Auditoria
Rastreabilidade de Entregas Auditoria
KPIs de performance Performance
Mix de mídia Performance
Inserções por plataforma Performance
Investimento por canal de TV Performance
Tipos de comercial Performance
Cobertura geográfica Performance
Distribuição de público estimado Performance
Concentração por faixa horária Performance
Detalhamento de Campanhas Linear Performance
Impressões por plataforma Performance
Impressões por canal Performance
Impressões por editoria Performance
Custo (CPM) versus atenção (VTR) Performance
Engajamento por formato Performance
Ranking de melhores anúncios Performance
Distribuição por dispositivo Performance
Detalhamento de Campanhas Digitais Performance
Tabela de performance Performance
Cada bloco abaixo reutiliza o mesmo container, o mesmo módulo JS e o mesmo dataset local já usados nas páginas analíticas do projeto.
PIs c/ alterações
Planejado
Executado
