Editais do Brasil

Marca e design system

Um sistema só, para o site público, a área logada e os e-mails. Tudo o que está nesta página é pintado pelos tokens de app/globals.css: se a marca mudar, esta página muda junto — ou quebra, o que também serve de aviso.

A marca

Quadrado arredondado na cor primária, círculo de contorno e a estrela dourada ao centro. A estrela é o único elemento que nunca muda de cor.

Sobre papel e branco

Sobre ink-deep

Regras

  • · Tamanho mínimo: 24 px de lado.
  • · Nunca recolorir a estrela nem o quadrado.
  • · Nunca aplicar sobre foto ou fundo de baixo contraste.
  • · O nome é Editais do Brasil, por extenso. “Editais BR” só no ícone do celular, onde não cabe.

Rampa da marca

Onze valores. Trocar a marca do site inteiro é trocar estes onze — nenhum arquivo do código escreve um verde ou um teal direto.

#f0fdfa

brand-50

fundo de bloco destacado

#ccfbf1

brand-100

badge de sucesso, hover suave

#99f6e4

brand-200

borda de bloco destacado

#5eead4

brand-300

borda em fundo escuro

#2dd4bf

brand-400

texto de link em fundo escuro

#14b8a6

brand-500

ícone decorativo

#0d9488

brand-600

ícone, marcador de lista

#0f766e

brand-700

primária: botão, link, foco

#115e59

brand-800

hover do botão primário

#134e4a

brand-900

texto sobre fundo brand-50

#042f2e

brand-950

hero e rodapé escuros

Superfícies e tinta

Papel levemente quente no lugar do branco frio; linhas suaves no lugar de sombra pesada. O escuro é reservado a hero e rodapé.

#f4f5f2

paper

fundo da página

#eaede7

paper-2

faixa alternada

#e3e5e0

line

divisória sutil

#d0d4cc

line-strong

borda de campo

#14233b

ink

hero institucional

#042f2e

ink-deep

rodapé

#ffcd07

brand-star

estrela da marca

Cores de estado

Situação de concurso não usa a cor da marca: verde para tudo faria “inscrições abertas” e “previsto” parecerem a mesma coisa. Estes badges saem de lib/concursos-status.ts.

Inscrições encerradasAguardando resultadoInscrições abertasEdital publicadoAutorizadoPrevisto

Tipografia

Display — Newsreader

font-display text-3xl font-medium tracking-tight

h1 e h2 editoriais. É a serifa que dá cara de publicação pública, não de SaaS.

Concursos públicos abertos

Título de seção — Geist Sans

text-xl font-bold

h2 dentro de páginas de dados (cronograma, documentos, perguntas).

Perguntas frequentes

Corpo

text-base leading-relaxed text-slate-700

texto corrido. leading-relaxed sempre: as páginas têm parágrafo longo.

As inscrições vão até 15 de outubro de 2026, pelo site da banca CEV/UECE.

Apoio

text-sm text-slate-600

legenda, data de revisão, texto auxiliar de formulário.

Revisado em 16/09/2026. Datas sujeitas a retificação.

Rótulo

text-xs font-semibold uppercase tracking-wide text-slate-500

chapéu de campo em ficha de dados (dt de uma dl).

Taxa de inscrição

Componentes

Não há biblioteca de componentes: o site monta com utilitários. Estas são as receitas canônicas — copie daqui em vez de inventar uma variação.

Ações

PrimáriaSecundáriaLink de texto

Uma primária por tela. Rótulo diz o que acontece (“Iniciar simulado”), nunca “Enviar” ou “Clique aqui”. Link externo termina em ↗ e abre em nova aba.

Campo

Rótulo sempre visível — placeholder não é rótulo. Foco com anel da marca, nunca só a borda.

Bloco de destaque

Fundo brand-50, borda brand-200, título brand-900. É a única superfície colorida da página — duas seguidas e nenhuma destaca.

Card com acento

Passe o mouse: a linha da marca cresce no topo. Use em grade de cartões clicáveis, nunca em bloco de leitura.

pulse-dot: só para dado que atualiza sozinho

Tom de voz

O produto vende confiança em data de edital. Toda escolha de texto serve a isso.

Diga o que não se sabe.

Assim: O cronograma oficial ainda não traz a data do resultado.

Não: O resultado sai em breve.

Data sempre com origem.

Assim: Inscrições até 11/09/2026 (edital do Cebraspe, revisado em 10/09).

Não: Inscrições até 11/09.

Segunda pessoa, sem infantilizar.

Assim: Você pode pedir isenção até 20/09.

Não: Corre que dá tempo de pedir sua isenção! 🚀

Preço sem pegadinha.

Assim: 7 dias grátis, depois R$ 49 por mês. Cancele quando quiser.

Não: Experimente grátis!

Como mudar a marca

  1. 1. Troque os onze valores --color-brand-* em app/globals.css.
  2. 2. Ajuste os hex que vivem fora do CSS por serem lidos por clientes de e-mail e pelo sistema operacional: app/icon.svg, app/manifest.ts, components/brand-mark.tsx, lib/email.ts, lib/ciclo-emails-html.mjs e lib/og-template.tsx.
  3. 3. Recolora os PNG de public/icone-*.png e app/apple-icon.png.
  4. 4. Abra esta página: ela é o teste.

Voltar para a home →

Plano Pro

Um plano, tudo o que o site faz — 7 dias grátis

Alerta de concursos para quem estuda, radar de licitações para quem vende ao governo e carteira de clientes para quem quer clientes novos — na mesma assinatura. O dado continua aberto; o que o plano faz é dizer qual te interessa e quando.

  • Relatório periódico no e-mail
  • Alerta todo dia útil, em vez de semanal
  • Radar de bancas
Ver o Plano Pro →

7 dias grátis · sem conta para começar · cancele quando quiser