Design System SIMEC

Documentation - documentação

Como os desenvolvedores consomem o Design System SIMEC.

Getting started - como consumir

Escolha o caminho que combina com o seu projeto.

1. HTML5 + CSS: início rápido

O caminho principal do Design System: sem build, sem framework e sem jQuery. Baixe simec-modelo-base.html em Downloads ou copie as três linhas abaixo.

<link rel="stylesheet" href="tokens.css">   <!-- cores, fontes e espaços: var(--simec-primary) -->
<link rel="stylesheet" href="simec.css">    <!-- todos os componentes (.simec-btn, .simec-input, .simec-table...) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css"> <!-- ícones (opcional) -->

<button class="simec-btn simec-btn--primary">Salvar</button>

<script src="simec-nav.js"></script>   <!-- opcional: menu, abas (simec-tabs.js) e botões (simec-button.js) -->

Favicon e thumbnail (dentro do <head>)

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta property="og:image" content="https://SEU-DOMINIO/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://SEU-DOMINIO/og-image.png">

Cada componente também tem seu par simec-<componente>.html + .css, e a página completa está em simec-pagina-conclusao-obra.html.

2. Tokens via URL (qualquer sistema)

<link rel="stylesheet" href="https://<endereço-publicado>/tokens.css">

/* ou, em CSS */
@import "https://<endereço-publicado>/tokens.css";

.meu-botao { background: var(--simec-primary); border-color: var(--simec-primary-border); }

3. Tokens em JSON

fetch("https://<endereço-publicado>/tokens.json")
  .then((r) => r.json())
  .then((ds) => console.log(ds.grupos));

4. Ícones

Font Awesome Free 7.3.1 para os ícones do SIMEC e Lucide Icons 1.47.0 para os componentes internos. Veja a seção Iconografia em Fundamentos.

Downloads

Tudo publicado junto com este site, pronto para baixar ou chamar por URL.

Tokens

Arquivo	Para que serve	Baixar
tokens.css	Variáveis --simec-* para qualquer tela (link ou @import).	Baixar
tokens.json	Os mesmos tokens agrupados, para ferramentas e scripts.	Baixar
tokens.scss	Variáveis $simec-* para Bootstrap-sass / Sass.	Baixar
tokens.less	Variáveis @simec-* para Bootstrap 3 / Less.	Baixar
tokens.js	Objeto SIMEC_TOKENS para JavaScript, sem build.	Baixar

Menu de navegação

Arquivo	Para que serve	Baixar
simec-nav.css	Estilo do Menu de navegação. Um arquivo, sem dependências.	Baixar
simec-nav.js	Comportamento do menu em JavaScript puro (ES5), sem jQuery.	Baixar
simec-nav.html	Página de exemplo completa (só texto), pronta para abrir e copiar.	Baixar
simec-nav-icones.html	Mesma página com ícones (Font Awesome).	Baixar
simec-nav-divisoes.html	Página com ícones e divisões entre grupos de itens.	Baixar

Button - botão

Arquivo	Para que serve	Baixar
simec-button.css	Classes .simec-btn para qualquer tela. Um arquivo, sem dependências.	Baixar
simec-button.js	Botão carregando e botão alternar em JavaScript puro (ES5), opcional.	Baixar
simec-button.html	Página de exemplo com tamanhos, ícones e estados, pronta para copiar.	Baixar

HTML5 + CSS - componentes e páginas

Arquivo	Para que serve	Baixar
simec-icone.png	Ícone do SIMEC (512px, fundo transparente), usado no cabeçalho.	Baixar
favicon.ico	Favicon do SIMEC (16, 32, 48 e 64px).	Baixar
favicon.png	Favicon em PNG (512px).	Baixar
apple-touch-icon.png	Ícone para iPhone/iPad (180px).	Baixar
og-image.png	Thumbnail de compartilhamento (1200x630): WhatsApp, Teams, redes sociais.	Baixar
simec-modelo-base.html	Ponto de partida: página em branco com tokens, componentes e ícones já ligados.	Baixar
simec.css	Pacote com o CSS de todos os componentes (um só arquivo).	Baixar
simec-pagina-conclusao-obra-unico.html	Mesma página em arquivo único (CSS e JS dentro do HTML): baixe e abra, sem mais nada.	Baixar
simec-pagina-conclusao-obra.html	Página completa: ambiente, cabeçalho, menu, migalhas, comunicado, quadro, abas, tabela e rodapé.	Baixar
simec-typography.css	Estilo da Tipografia: .simec-h1, .simec-text, .simec-prose.	Baixar
simec-tipografia.html	Typography: escala, textos corridos e listas.	Baixar
simec-input.html	Text input: tamanhos, validação, desabilitado e textarea.	Baixar
simec-input.css	Estilo do Text input.	Baixar
simec-choice.html	Radio and checkbox.	Baixar
simec-choice.css	Estilo de Radio and checkbox.	Baixar
simec-tabs.html	Tabs - abas (com simec-tabs.js).	Baixar
simec-tabs.css	Estilo das Tabs.	Baixar
simec-tabs.js	Comportamento das Tabs em JavaScript puro (ES5).	Baixar
simec-table.html	Tables: padrão, listrada, condensada e campo/valor.	Baixar
simec-table.css	Estilo das Tables.	Baixar
simec-alert.html	Alerts: sucesso, informação, aviso, perigo e faixa SIMEC.	Baixar
simec-alert.css	Estilo dos Alerts e do comunicado.	Baixar
simec-badge.html	Badges - rótulos.	Baixar
simec-badge.css	Estilo dos Badges.	Baixar
simec-status.html	Status bar e Status icons.	Baixar
simec-status.css	Estilo da barra e dos ícones de situação.	Baixar
simec-modal.html	Modal com <dialog> nativo (600px e 900px).	Baixar
simec-modal.css	Estilo do Modal.	Baixar
simec-page.css	Estilo dos templates: ambiente, cabeçalho, migalhas, cartão, quadro e rodapé.	Baixar
simec-ambiente.html	Environment bar - barra de ambiente.	Baixar
simec-cabecalho.html	Header - cabeçalho SIMEC.	Baixar
simec-migalhas.html	Breadcrumbs - migalhas.	Baixar
simec-comunicado.html	Alerta com título (comunicado) e botão Fechar aviso.	Baixar
simec-quadro.html	Project summary - quadro da obra.	Baixar
simec-rodape.html	Footer - rodapé.	Baixar

Os arquivos são gerados por npm run sync:tokens a partir de src/tokens.css e src/ds; testes garantem que estão em dia.

Systemic issues - ruídos sistêmicos

Da “Análise de Usabilidade do Módulo Obras 2.0 SIMEC” (Projeto 24330, FNDE e UNOPS, set/2026): o que o Design System já resolve e o que falta. 21 pontos: 6 resolvidos no DS, 5 parciais, 2 diretrizes, 6 planejados e 2 fora do DS.

No DS
Já existe token, componente ou modelo que resolve.
Parcial
Existe, mas falta ajustar um ponto (descrito na linha).
Diretriz
Regra de uso documentada; vale para qualquer tela.
Planejado
Entra no backlog do Design System.
Fora do DS
Depende de conteúdo, regra de negócio ou arquitetura do módulo.

1 · CSS e hierarquia

Tema	Ruído identificado	Como o Design System trata	Status
Botões	Rótulos diferentes para a mesma função (“Gerar Excel”, “Gerar Planilha”, “Exportar”), ordem e posição variáveis, mesma cor para ações opostas.	7 estilos por significado (primário, sucesso, perigo…) e um rótulo por função. A regra de posição e ordem dos botões ainda será definida. Ver	Parcial
Modais e pop-ups	Estilos diferentes e dois controles para fechar (ícone X e botão “Fechar”).	Modal padrão de 600 e 900 px. Falta aplicar ao componente a regra de um único controle de fechar. Ver	Parcial
Balão “Dúvidas?”	Abre sozinho a cada carregamento e cobre o menu do canto superior.	Tooltip que aparece só por ação do usuário (passar o mouse ou focar). Componente a criar.	Planejado
Hyperlinks	Estilos diferentes, azul usado também em texto que não clica, textos como “clique aqui”.	Azul só para o que é clicável. O texto do link descreve a ação (“Baixar modelo do Termo”). Ver	Diretriz
Ícones	Estilos antigos e variados; ícones clicáveis sem rótulo, só com hover.	Biblioteca definida (Font Awesome e Lucide). O Menu de navegação rotula todos os itens. Os ícones do cabeçalho ainda estão sem rótulo. Ver	Parcial
Densidade e respiro	Linhas de contorno demais, células com 2–4 px de padding, pouco espaço entre seções.	Células com 8 px ou mais, cartões de seção com respiro e altura de linha 1,5 para textos descritivos. Ver	No DS
Banner vermelho dominante	Faixa vermelha viva no meio da tela que não pode ser fechada.	Alerta em tom suave, com título, texto que indica a ação e botão de fechar. Ver	No DS
Cabeçalho empilhado	Mais da metade da primeira tela fica ocupada por blocos fixos antes do conteúdo.	Card compacto e expansível para a ficha da obra e a situação. A criar.	Planejado
Paleta de cores	Cores sem significado fixo: o mesmo status em verde e em azul, azul em tudo.	Paleta semântica: azul para ação, verde para sucesso, amarelo ou laranja para pendência, vermelho para erro e cinza para neutros. Ver	No DS
Tipografia	Tamanhos e pesos sem hierarquia, negrito em quase todos os rótulos.	Escala definida em Fundamentos. O rótulo de tabela segue o negrito do Figma aprovado; vale revisar com o time. Ver	Parcial
Menus verticais	Estilos e ícones diferentes entre os menus.	Um único Menu de navegação, em desktop e mobile, com ou sem ícones. Ver	No DS
Alertas	Ora discretos, ora dominantes; nem sempre dizem o que fazer.	Um componente de alerta por significado. O texto diz o problema e o próximo passo. Ver	No DS
Formulários	Campo obrigatório pouco visível, sem tooltip de apoio, busca com campos demais.	Indicador de obrigatório junto ao rótulo, tooltip “?” nos campos e modelo de busca simples e avançada. A criar.	Planejado

2 · Fluxo e navegação

Tema	Ruído identificado	Como o Design System trata	Status
Abas horizontais	A aba ativa parece mais fraca que as inativas e as abas parecem links comuns.	Variante em pílula: ativa em azul sólido, inativas neutras. A criar no componente Abas. Ver	Planejado
Caminho de navegação	Aparece na página inicial e some nas páginas depois do ID da obra.	Componente Migalhas para usar em todas as páginas após o ID da obra. Ver	No DS
Menus duplicados e links quebrados	Opções repetidas, rótulos genéricos e páginas com erro ou inativas.	Depende do conteúdo e da arquitetura do módulo. No DS, o menu mantém os mesmos destinos e a mesma ordem no desktop e no mobile.	Fora do DS
Cabeçalho e rodapé	Só a barra secundária fica fixa; o rodapé traz Tx., Revisão e usuários on-line.	O rodapé do modelo aprovado já não mostra dados técnicos. Fixar cabeçalho e rodapé ao rolar ainda será feito. Ver	Parcial
Parágrafo contextual	As páginas não explicam o que o usuário vai encontrar nelas.	Bloco com parágrafo curto abaixo do título e botão “Ajuda nesta etapa”. A criar.	Planejado

3 · Ajuda e assistência técnica

Tema	Ruído identificado	Como o Design System trata	Status
Central de Ajuda	Ajuda espalhada, botão “?” sem função, manual inexistente e vídeos inativos.	Modelo de página de Ajuda e botão “Ajuda” com rótulo visível. A criar.	Planejado
Mensagens de erro	Erro mostrado antes da busca, ou sem causa nem caminho de solução.	Mostrar só depois do erro, dizer a causa e o que fazer. Ex.: “Não foi possível carregar a lista de obras. Verifique sua conexão ou tente de novo em alguns minutos.”	Diretriz
Sessão, páginas e dados do sistema	Timer que reinicia a cada página, páginas em branco e erros 404.	Correção no módulo, fora do Design System.	Fora do DS

Repository structure - estrutura do repositório

src/
  tokens.css                 fonte única dos tokens (--simec-*)
  components/
    ui/                      componentes base no padrão Bootstrap 3 do SIMEC
    simec/                   componentes do SIMEC: cabeçalho, menu, barra de ambiente,
                             quadro da obra, rodapé, ícone de situação
    shell/                   moldura desta vitrine (menu lateral, busca)
  routes/                    páginas desta vitrine e telas de exemplo
public/
  tokens.css                 cópia pública (consumo por URL)
  tokens.json                tokens em JSON (consumo por URL)
scripts/
  build-tokens.mjs           gera public/tokens.css e public/tokens.json

Versions - versões

v1.0.0 — versão inicial
- Tokens do SIMEC com base no Bootstrap 3 (valores do Figma).
- Componentes: botão, campo, rádio, checkbox, abas, tabela, alertas, modal, rótulos.
- Componentes de página: cabeçalho, menu, barra de ambiente, quadro da obra, rodapé.
- Ícones: Font Awesome 7.3.1 e Lucide 1.47.0.
- Tokens em CSS, JSON, SCSS, LESS e JS para consumo por URL.
- Menu de navegação (desktop e mobile, com e sem ícones) em CSS e JS puros.
- Alerta com título e fechável, Migalhas e modelo de tela aprovado.
- Mapa dos ruídos sistêmicos da análise de usabilidade do Obras 2.0.

Contributing - como contribuir

Fluxo para incluir ou alterar uma peça do Design System.

Desenhe ou ajuste a peça no Figma “Sistema SIMEC Obras”.
Se houver cor, medida ou fonte nova, inclua o token em src/tokens.css indicando a origem ([figma] ou [bs3]).
Rode npm run sync:tokens para atualizar public/tokens.css e public/tokens.json.
Crie ou ajuste o componente em src/components usando só tokens, sem valores soltos.
Documente o componente na página Componentes, com exemplo e código.
Rode npm test e npm run lint antes de enviar.