Guia de Estilo
Recepção de Parlamentares Eleitos
Eleições 2026 · 21ª Legislatura

Guia de Estilo
do Sistema de Recepção

Documentação de todos os componentes, tokens de design, variações de estado e padrões de interface extraídos diretamente do código-fonte do sistema. Fontes: Poppins + Source Sans 3.

Poppins (títulos/UI) Source Sans 3 (corpo) Layout Responsivo Estados de formulário
01

Paleta Cromática

Paleta Primária

--primario #ab0000 Cor principal do sistema. Usada em títulos de login, label de campo e etc.
--primario-escuro #550101 Variação escura e de menor proeminência da cor primária
--primario-claro #7a2f2d Variação clara e de maior realce da cor primária
--primario-alternativo #7a0000 Reservado para variações de tom sobre a cor primária

Paleta Secundária

--secundario #007D94 Cor secundária do sistema. Usada em botões e títulos de seções internas
--secundario-escuro #014555 Variação escura e de menor proeminência da cor secundária
--secundario-claro #33BBD3 Variação clara e de maior realce da cor secundária
--secundario-alternativo #fff0c2 Variação da cor secundária. Usada em elementos sobre fundo primário ou secundário

Neutros e Base

--branco #FDFCF9 Background do corpo, cards, inputs - levemente quente (não puro #fff)
--preto #1A1A1A Cor base de texto, valores preenchidos em inputs (não puro #000)
--cinza-escuro #343a49 Subtextos, descrições, labels de campo, parágrafo do card. Também: background do menu lateral e hero
--cinza-medio #C8C0AB Divisores horizontais, linha após card-titulo, timeline separators
--cinza-claro #EDE8DC Áreas sutis, campos desabilitados, bordas suaves, fundo do alerta de acesso restrito

Destaques

--mark #ffe6aa Destaque em textos por meio da tag semântica <mark>
--highlight #e04242 Destaque em específicos ou críticos da interface

Cores de Estado

--edit #EDE8DC Disponível: formulários novos/em edição
--wait #727272 Indisponível: formulários bloqueados/futuros
--warn #ffdc71 Pendências: formulário com itens a corrigir
--sent / --pause #069DC0 Enviado (sent) e Em análise (pause): mesma cor (formulário submetido), ícone diferente
--success #01B659 Validado: formulário aprovado pela equipe
--error #FF8D8D Previsão de retorno para erros do sistema. Evitar usar em produção (reservado para debug, demo ou erros 500)
02

Tipografia

O sistema usa dois typefaces: Poppins (sem-serif geométrica) para títulos, labels de destaque e elementos de UI com hierarquia; e Source Sans 3 (humanista) para todo o texto de corpo, inputs, botões e parágrafos.

Hierarquia de Texto

Eleições
FamíliaPoppins
Tamanho28px
Peso500
Cor--secundario-alternativo
UsoTítulo do login, top-bar-name principal
Bem-vindo(a)
FamíliaPoppins
Tamanho26px
Peso600
Cor--primario
UsoH2 do painel de login
Dados pessoais
FamíliaPoppins
Tamanho24px
Peso600
Cor--secundario
UsoH1 de páginas internas (.cabecalho-secao)
Identificação e Nome
FamíliaPoppins
Tamanho17px
Peso600
Cor--preto
UsoH4 na timeline (timeline-info h4)
Preencha todas as informações conforme seus documentos oficiais.
FamíliaSource Sans 3
Tamanho15px
Peso400
Cor--cinza-escuro
UsoSubtítulo de login, parágrafos
Preencha todas as informações conforme seus documentos oficiais.
FamíliaSource Sans 3
Tamanho15px
Peso400
Background--mark
UsoDestaque em textos
CPF e RG
FamíliaPoppins
Tamanho12px
Peso600
Usocard-titulo
Nome de registro
FamíliaSource Sans 3
Tamanho12px
Peso600
Transformuppercase + letter-spacing .05em
UsoLabel de campo de formulário
Campos obrigatórios
Tamanho11px
Peso600
Transformuppercase + letter-spacing .05em
Usoalerta-info strong, card-titulo secundário
04

Formulários

Campos de Texto - Todos os Estados

Default
Focus
Erro
Campo obrigatório
Desabilitado
Padding10px 13px
Borda default1.5px solid #DDD8CF · border-radius 7px
Focusborder --primario-claro + box-shadow 0 0 0 3px rgba(64,145,108,.08)
Erroborder-color --error + bg --secundario-alternativo (#fff0c2)

Select / Dropdown

SetaSVG inline via background-image, position right 12px center
Padding-right32px para não sobrepor a seta

Radio e Checkbox Estilizados (Bordered)

Os controles de radio e checkbox usam um wrapper .radio-opcao / .checkbox-opcao com borda, criando uma "pill" clicável em vez de usar o input puro.
Borda default1.5px solid #DDD8CF · border-radius 7px
Hoverborder-color --primario-claro
Accent-color--primario (tanto radio quanto checkbox)

Textarea

Resizevertical · min-height 80px · line-height 1.5

Upload de Arquivo (input[type=file])

O botão do file input é estilizado via ::file-selector-button com as mesmas regras dos botões gerais. Não há componente de drag-and-drop - é um input nativo.
Foto legível, colorida, frente e verso. Formatos: jpg, pdf, png. Máx. 15 MB
::file-selector-buttonpadding 3px 8px · font-size 10px · border-radius 3px · bg --secundario
Hoverbg --primario

Card de Seção de Formulário

Cada agrupamento lógico de campos está em um .card. O título usa .card-titulo com linha divisória estendida via ::after flex.
Identificação e Nome
Cardbg --branco · border 1px --cinza-claro · border-radius 12px · padding 1.75rem
card-titulo12px Poppins 600 uppercase --primario + linha ::after
Grids.grid-2, .grid-3, .grid-4 + .span-2, .span-3, .span-4

Barra de Ações (Rodapé do Formulário)

.barra-acoes é position: sticky; bottom: 0 e sempre visível durante o scroll do formulário.
Situação do formulário:
btn-action-savebg none · border 1.5px --cinza-claro · color --cinza-escuro · hover: border+color --primario
btn-action-sendbg --primario · color --branco · hover: bg --primario-claro · disabled: opacity .3
05

Sistema de Status

O componente .status-dot combina ícone SVG (via CSS mask-image) com texto. O ícone vem de arquivos icons/*.svg usando -webkit-mask-image. A variante .large é usada na barra de ações; a variante normal é usada no submenu.

Todos os Estados - Tamanho Normal

editbg --edit · color --cinza-escuro · "Disponível"
waitbg --wait (#727272) · color --branco · "Indisponível"
sentbg --sent (#069DC0) · color --branco · "Enviado"
errorbg --error (#FF8D8D) · color --preto · "Erro"
pausebg --pause (#069DC0) · color --branco · "Em análise"
warnbg --warn (#ffdc71) · color --preto · "Pendências"
successbg --success (#01B659) · color --branco · "Validado"

Tamanho Large (barra de ações)

Tamanhoheight 30px · padding 3px 16px 3px 13px · gap 6px · font-size 15px · ícone 20×20

Badges Gerais

Primario (Padrão) Primario (Alternativo) Secundário (Padrão) Secundário (Alternativo) Destaque Escuro
Baseinline-block · font-size 11px · padding 2px 8px · border-radius 4px · font-weight 500
primariobg --primario · color --branco
primario-altbg #f8ece8 · color --primario
secundariobg --secundario · color --branco
secundario-altbg --cinza-claro · color --secundario
highlightbg --highlight · color --branco
darkbg #151b29 · color --branco
06

Feedback e Alertas do Sistema

O sistema usa um único componente .alerta-info com variação de estado via classe .error. Não há variantes de warning ou success separadas - o alerta de info genérico serve para avisos, e o .error serve para validações reprovadas.

Alerta Informativo (padrão)

Campos obrigatórios Os campos marcados com * são de preenchimento obrigatório para prosseguir.
Enviar foto legível, colorida, da frente e do verso do RG.
Formatos aceitos: jpg, pdf ou png. Tamanho máximo: 15mb
Backgroundrgba(27,67,50,.06)
Border1px solid rgba(27,67,50,.15) + border-left 3px solid --primario-claro
Border-radius0 8px 8px 0 (esquerda reta por causa do border-left)
strongcolor --secundario · 12px uppercase letter-spacing .05em · display block

Alerta de Erro

Corrija os erros abaixo O campo nome de registro é obrigatório.
Diferençaborder-color: --error (#FF8D8D) + background: --secundario-alternativo (#fff0c2)
ExibiçãoVisível apenas no estado de erro (JS toggle .d-none → remove). Também aciona .error nos inputs
07

Layouts de Página

Tela de Login

Layout flex de duas colunas: esquerda (55%) com fundo --primario-escuro e informações contextuais; direita (45%) com fundo --branco e formulário de acesso. Em mobile: empilhadas.
Esquerda55% · bg --primario-escuro · flex column justify-center
Direita45% · bg --branco · flex center
Form max-width380px · margin-left 10% margin-right auto
info-cardbg rgba(255,255,255,.08) · border-radius 10px · padding 1rem 1.25rem

Layout de Página Interna (Formulário)

Páginas internas usam #tela-interna com fundo #f3f3f2. O conteúdo é dividido em: header sticky + .conteudo (flex row) = .submenu lateral + .conteudo-miolo. O miolo tem max-width 960px.
Eleições 2026 ALMG João Oliveira
Fase 1
Dados pessoais
Contatos
Vida profissional
Dados pessoais
Preencha todas as informações conforme seus documentos oficiais.
Identificação e Nome
Situação:
Fundo geral#f3f3f2 (ligeiramente diferente de --branco)
conteudo-miolo-wrapmax-width 960px · margin 0 auto · padding 2rem 2.5rem
08

Componentes Adicionais

Hero

Legislatura 2025–2029

Bem-vindo, João Oliveira.

Veja os formulários disponíveis ou previstos para a 21ª Legislatura. Acompanhe os prazos de cada fase.

Background--cinza-escuro (#343a49)
hero-tagbg --secundario · border-radius 20px · 12px font-weight 500 uppercase
h1Poppins 30px 600 --branco
hero-sub15px 300 rgba(247,243,236,.65)

Timeline (Etapas)

1
5 a 30/10/26

Entrega de dados cadastrais - Fase 1

Envio de informações e documentos com dados pessoais, contatos e endereços, vida profissional.

2
17/10 a 21/11/26

Recepção presencial e entrevista

Recebimento individual com a direção da ALMG, fotos oficiais e cadastramento biométrico.

3
19/12/26

Diplomação oficial pelo TRE

Realizada pelo Tribunal Regional Eleitoral de Minas Gerais.

timeline-num32×32px · border-radius 50% · bg --cinza-medio · font 13px 600
Item correntePode receber bg diferente / timeline-num com cor de destaque
Separadorborder-bottom 1px solid #D1CFCA (exceto último item)
AccordionItems com onclick="toggleAccordion" têm seta ::before e timeline-info-desc oculto até .active

Cards de Contato (contato-grid)

Telefone

(31) 2108-7200

Seg–Sex, das 9 às 18h

WhatsApp

(31) 99791-3812

E-mail

recepcao.parlamentar@almg.gov.br Resposta em até 1 dia útil
Background--secundario-escuro (#014555)
Grid3 colunas · gap .8rem · em mobile: 1 coluna
Variante .miniflex-direction row · bg --cinza-escuro · h4/small hidden

Acordion

Agendamento da Recepção Presencial
Cada parlamentar será recebido individualmente, em data e horário previamente agendados entre 17/10 a 21/11/26, de segunda a sexta-feira, das 9 às 14h30.
Certificação Digital e Biometria
Criação de senhas, entrega de tokens e instalação do aplicativo Silegis no celular pessoal.
Border1.5px solid #DDD8CF · border-radius 9px
Trigger ativobg rgba(237,232,220,.5)
SetaPseudo-elemento border rotacionado · color --secundario
Content13px --cinza-escuro · line-height 1.7 · border-top 1px --cinza-claro

Botões - Variantes e Estados

.btn defaultbg --secundario (#007D94) · color --branco · font-weight 600 · border-radius 8px
.btn hoverbg --primario (#ab0000)
.btn:activetransform: scale(.99)
Disabledopacity .3 · cursor not-allowed