Brandbook

Tinta de carimbo sobre papel de repartição.

Tudo o que você precisa para desenhar algo que pareça Licitum: a marca, a paleta com hex, a tipografia, os fundamentos de forma e movimento, e as regras que separam o que é sistema do que é improviso.

Os valores desta página não são transcritos à mão: eles são lidos do global.css no build. Se o código mudar, esta página muda junto.

Fonte da verdade: src/styles/global.css
Espaço de cor: Hex (sRGB)
Tema: Claro (escuro só no app)
Gerado em: 09 de out. de 2026

// Marca

O carimbo, o wordmark e o símbolo

A marca é um carimbo de repartição: moldura de borda dupla, nome em caixa alta e tagline em mono. A ideia é a de um documento que recebeu o carimbo certo. O símbolo, um "L" dentro do quadrado, anda sozinho onde o carimbo não cabe.

LICITUMdo edital ao contrato

Carimbo (lockup) O padrão: cabeçalho do site e do app. Borda externa de 1px e interna de 2px, raio 4px, nome em Archivo 800 com largura 125% e tracking 0.1em; tagline em IBM Plex Mono 500 caixa alta, a 42% do tamanho do nome e tracking 0.08em. Assim as duas linhas têm a mesma largura e ficam centralizadas na moldura.

LICITUM

Wordmark Só o nome, sem moldura. Texto vivo, não imagem. Caixa alta sempre: LICITUM na marca; Licitum no texto corrido. Nunca "LICITUM" em peso leve nem "licitum" minúsculo.

Símbolo O L no quadrado de moldura dupla. Favicon, avatar, ícone de app e qualquer lugar abaixo de 120px de largura útil. Sempre azul-tinta com traço branco, ou branco sobre azul.

Área de respiro e tamanho mínimo

LICITUMdo edital ao contrato

Respiro = altura do wordmark, medida a partir da borda externa. Nada entra nessa faixa: texto, borda, outra marca.

LICITUMdo edital ao contratocarimbo · 44px de altura

símbolo · 20px

Mínimos: carimbo a partir de 44px de altura (a tagline some abaixo disso, use o wordmark); símbolo a partir de 20px.

Versões por fundo

LICITUMdo edital ao contrato

Azul-tinta sobre branco. Padrão: site, app, documentos.

LICITUMdo edital ao contrato

Azul-claro sobre escuro. Só no tema escuro do app. O azul-claro é #8fb3f0.

LICITUMdo edital ao contrato

Branco sobre azul-marinho. Capa, faixa escura, avatar.

Só existem essas três aplicações. Não há versão em preto, nem com o símbolo numa cor e o nome em outra, nem com gradiente.

O que não fazer

✕Não distorça. Escale sempre proporcionalmente.
✕Não recolora fora do azul-tinta, do azul-claro (tema escuro do app) e do branco. Nada de verde nem amarelo na marca.
✕Não aplique sombra, relevo ou textura de carimbo "borrado".
✕Não gire o carimbo. O selo vermelho inclinado é outro elemento (ver Fundamentos).
✕Não redesenhe o wordmark em outra fonte nem em caixa baixa.
✕Não use o carimbo azul sobre fundo azul ou sobre foto.

// Cor

Papel branco, tinta azul, verde para o positivo e amarelo para destacar

A paleta é escrita em hex e consumida por variável CSS. O mesmo arquivo de tokens vale para o site, o blog e o app. O fundo é branco, como um documento. O azul é a tinta de carimbo: escuro de propósito, para lembrar repartição sem se confundir com o azul do gov.br, que é mais claro e é exclusivo de site oficial. Os cinzas puxam levemente para o azul, para ler como o mesmo papel.

A cor da marca

Azul-tinta do carimbo

#1d3c78 site e app · #8fb3f0 app, tema escuro

var(--accent)

O site é sempre claro. No tema escuro do app o acento clareia para azul-claro, senão o azul-tinta some sobre o fundo.

Por que não as cores do gov.br

Azul, verde e amarelo juntos e o azul #1351b4 são a cara dos portais oficiais. Um produto privado com essa aparência pode ser lido como site do governo, e o licitante é quem mais desconfia disso. O Licitum se aproxima pelo papel, pelo carimbo e pelo vocabulário, não fingindo ser órgão público. Verde e amarelo aparecem, mas só com função.

A regra de uma tinta só

O azul ocupa no máximo 10% de qualquer tela e é o único acento: botão primário, foco, item ativo, cenário recomendado, linha "seu lance" no histograma. Verde e vermelho existem para estado; amarelo só em destaque pequeno. Nenhum deles decora. Não há cor por plano, por página nem por campanha.

Papéis de superfície

Não desenhe com o hex: desenhe com o papel. A coluna da direita é o tema escuro, que só existe no app.

Papel	Token	Site e app	App, tema escuro	Onde usar
Fundo (papel)	`--ground`	#ffffff	#0d1220	Fundo da página. É o "papel de repartição".
Superfície	`--surface`	#ffffff	#141b2b	Card, campo, painel, carimbo.
Superfície 2	`--surface-2`	#f4f6fa	#192236	Cabeçalho de tabela, barra de janela.
Linha	`--line`	#e3e8f0	#26304a	Divisória e borda de repouso.
Linha forte	`--line-strong`	#c9d2e0	#36425f	Borda de campo e de botão fantasma.
Tinta	`--ink`	#0f1a2e	#e8edf7	Texto principal e títulos.
Tinta 2	`--ink-2`	#3c4a63	#b9c3d6	Texto secundário, descrições.
Apagado	`--muted`	#5f6b82	#8a96ad	Metadado, rótulo, legenda. Nunca em texto essencial.
Acento	`--accent`	#1d3c78	#8fb3f0	A tinta do carimbo: botão primário, foco, destaque.
Acento hover	`--accent-hover`	#152d5c	#a9c5f5	Hover do primário.
Acento suave	`--accent-soft`	#e9eef8	#1b2a47	Véu azul atrás de item ativo e do cenário recomendado.
Faixa	`--band`	#0f1f3d	#0f1f3d	Faixa azul-marinho (números do mercado). A única área escura do site.

Semânticas

Estado e explicação, nunca decoração. Cada família tem o tom cheio para texto e ícone, e o tom suave para fundo de aviso ou selo.

Destaque (amarelo)

Só em peça pequena: selo "Mais escolhido", número em faixa escura, realce de um valor. Nunca fundo de seção nem texto corrido.

--destaque: #f5c518 · #f5c518
--destaque-soft: #fff7d6 · #fff7d6

Positivo (verde)

Lance calculado, certidão válida, confirmação.

--good: #1d7a4c · #5fcb92
--good-soft: #e2f3e9 · #15301f

Atenção

Prazo curto, cota a 80%, documento vencendo.

--warn: #9a5d06 · #eaaa4b
--warn-soft: #fbf0db · #33260f

Crítico

Pendência, inabilitação, PARAR na disputa. Também o selo "homologado".

--crit: #b3261e · #f2877e
--crit-soft: #fbe7e5 · #3a1816

// Tipografia

Uma display larga, uma sans de leitura e uma mono de repartição

Archivo é a voz: geométrica, esticada até 125% no carimbo, pesada nos títulos. IBM Plex Sans faz o trabalho de ler, no site e no app. IBM Plex Mono é a máquina de escrever da repartição: kickers, números de controle, dados.

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 áçãéêõü R$ %

IBM Plex Sans

Papel: Corpo e interface
Uso: Todo o texto corrido, botões, rótulos, campos. 17px no site, 14px no app.
Pesos: 400 · 500 · 600
Token: --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif
Licença: SIL Open Font License 1.1 (Google Fonts)

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 áçãéêõü R$ %

IBM Plex Mono

Papel: Kicker e dado
Uso: Kickers em caixa alta, tagline do carimbo, número de controle do PNCP, URL, metadado.
Pesos: 400 · 500
Token: --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace
Licença: SIL Open Font License 1.1 (Google Fonts)

Escala

Saiba o lance que vence antes de a sessão começar.

DisplayArchivo · 780 · 106% de largura · clamp(38px, 5vw, 62px) · lh 1.08 · tracking -0.015emHeadline do topo. Uma por página.

Seu preço nasce do que o governo já pagou.

Título de seçãoArchivo · 750 · 105% · clamp(30px, 4.4vw, 48px)H2 de seção no site; título de página no app (26px).

Lance na hora certa

Título de cardArchivo · 700 · 18–24pxCard, aba, plano, pergunta do FAQ.

O portal já cobre lances automaticamente até o mínimo que você definir. O Licitum calcula esse mínimo.

CorpoIBM Plex Sans · 400 · 17px (site) · 14px (app) · lh 1.6Texto padrão. No app o corpo é 14px: a tela é densa de propósito.

Começar com o Disputa

RótuloIBM Plex Sans · 600 · 15–16pxBotão, rótulo de campo, cabeçalho de tabela.

PREÇO PARA GANHAR

KickerIBM Plex Mono · 500 · 12px · tracking 0.14em · caixa altaAbre cada seção e cada bloco. É o "carimbo pequeno" do sistema.

R$ 4.059,26

DadoArchivo · 750 · tabular-numsValor, preço, nota. Sempre com dígitos tabulares para alinhar em coluna.

99345620000199-1-000088/2026

MonoIBM Plex Mono · 400 · 12–13pxNúmero de controle do PNCP, URL, código.

Regras que não se negociam

Archivo nunca em texto corrido

Ela é título e número. Um parágrafo em Archivo cansa em três linhas. Corpo é sempre Plex Sans.

Kicker antes de tudo

Cada seção e cada bloco de destaque abre com um kicker em mono, caixa alta, azul. É o que faz a página ler como documento oficial e não como panfleto.

Número alinha

Todo valor em dinheiro, nota ou data usa tabular-nums, para colunas e contagens não dançarem.

// Fundamentos

Forma, espaço, profundidade e movimento

A hierarquia vem de espaçamento, escala de texto e fio de borda, nessa ordem, antes de sombra. Superfície é plana por padrão; a sombra entra só no que flutua ou no que a cena do produto destaca.

Raio

4px--r-smChip, selo pequeno

8px--rBotão, campo, cartão de passo

10px--r-mdChip do copiloto

14px--r-lgCard, janela de cena, bloco de resposta

99px--r-pillTag, toggle, selo "mais escolhido"

Espaçamento

Grade de 4px. Card respira 24 a 30px por dentro; seção respira de 64 a 120px, com clamp.

4px--s1

8px--s2

12px--s3

16px--s4

24px--s5

32px--s6

48px--s7

Elevação

--shadow

Cartão de passo ativo, chip do copiloto, dropdown. O sussurro.

--shadow-lg

Janela de cena, card de plano em destaque, formulário de fundadores. Tem um fio de azul: é a única sombra colorida.

sem sombra

Tudo o mais. Card em repouso tem borda --line, não sombra.

Os dois sinais de repartição

Selo vermelho inclinado. Moldura dupla em --crit, 8° de rotação, caixa alta. É um "carimbo de aprovação" sobre a cena do produto. Um por página, nunca sobre texto.

Papel pautado. Linhas horizontais de --line a cada 32px, esmaecidas para baixo, com um brilho azul no canto. Só no fundo do topo da página; nunca atrás de texto corrido.

Movimento

O movimento explica o produto: a cena do precificador calcula, a sala de disputa roda a sessão, as abas avançam. Toda animação pausa fora da tela, para com prefers-reduced-motion, e o conteúdo está sempre visível por padrão.

Token	Valor	Quando
`--dur-fast`	150ms	Hover, foco, troca de cor.
`--dur`	350ms	Entrada de cartão, troca de aba, cenário que aparece.
`--dur-slow`	700ms	Revelação ao rolar.
`--ease`	cubic-bezier(0.2, 0.7, 0.2, 1)	Curva única de saída.

// Componentes

Os primitivos, do jeito que saem no código

Não são capturas de tela: são as classes reais do site renderizadas aqui.

Botões

Abrir a demonstração

primary Uma por tela. A ação que a página existe para provocar. Tem o halo azul.

Entrar na lista

ghost Ação paralela de menor peso. Borda --line-strong, vira azul no hover.

Kicker, tag e selo

Preço para ganhar

kicker Mono, caixa alta, azul. Abre seções e blocos.

Escada da abertura ao piso

tag Pílula com borda forte, 14px. Lista de capacidades.

Mais escolhido

selo Pílula amarela com texto escuro, 12px. Um por grupo: é o único uso de amarelo em fundo.

Janela de cena

app.licitum.com.br

Conteúdo da cena ou captura do app

shot Moldura de janela com barra e endereço. Toda imagem ou simulação do produto vive dentro dela; nunca uma captura solta.

Card e resposta curta

Lance na hora certa

Você cobre quando a conta fecha.

Com a escada de lances pronta antes da sessão.

card Superfície, borda --line, raio --r-lg, sem sombra em repouso.

resposta curta Borda e véu azul. No blog, é o bloco que os motores de resposta citam.

// Regras

O que faz uma tela parecer Licitum

Kicker em mono abrindo cada bloco. É o primeiro sinal de repartição.
Um azul, raro. Botão, foco e o que é recomendado. O resto é papel branco e tinta.
Amarelo como marca-texto. Um selo ou um número por tela, no máximo.
Números em Archivo, tabulares, grandes. O produto é sobre preço; o preço é o herói visual.
Moldura dupla. No carimbo, no símbolo, no selo. Uma borda só é qualquer site.
Cena viva em vez de captura. Se dá para simular o produto em HTML, simule.
Afirmação, não negação. A copy promete e mostra o mecanismo; não lista o que evita.

✕Gradientes, brilhos e vidro. O papel é fosco.
✕Ícones coloridos ou ilustração "de startup". Ícones são de traço, na cor do texto.
✕Sombra em card parado.
✕Verde, amarelo e azul juntos em faixa ou fundo: vira bandeira e parece site oficial.
✕O azul do gov.br (#1351b4) e o cabeçalho no padrão dos portais do governo.
✕Archivo em parágrafo; Plex Mono em título.
✕Emoji na interface e em título. Em texto de blog, só quando o assunto pede.
✕Depoimentos, logos ou números de clientes inventados.

// Downloads

Arquivos e fontes

Os SVGs usam as fontes do Google Fonts por @import: abrem corretos no navegador e no Figma com as fontes instaladas. Para documentos sem fonte, use os PNGs.

Arquivo	Formato	Uso
Carimbo (lockup)	SVG	O padrão. Símbolo de borda dupla com wordmark e tagline.	Baixar
Carimbo em PNG, claro	PNG 2×	Para apresentações e documentos.	Baixar
Carimbo em PNG, sobre azul	PNG 2×	Versão branca para fundo azul-marinho.	Baixar
Wordmark	SVG	Só o nome, sem a moldura.	Baixar
Símbolo	SVG	O "L" no quadrado. Favicon, avatar, ícone de app.	Baixar
Símbolo 1024	PNG	Lojas de app e avatares grandes.	Baixar
Tokens	CSS	As variáveis desta página, prontas para colar.	Baixar

Fontes: Archivo · IBM Plex Sans · IBM Plex Mono, todas sob SIL Open Font License.