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)
Temas: Claro e escuro
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 violeta com traço branco, ou branco sobre violeta.

Á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

Violeta sobre claro. Padrão.

LICITUMdo edital ao contrato

Lilás sobre escuro. Tema escuro do app e faixas escuras. O lilás é #a09eff.

LICITUMdo edital ao contrato

Branco sobre violeta. Capa, faixa de chamada, 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 violeta, do lilás e do branco.
✕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 violeta sobre fundo violeta ou sobre foto.

// Cor

Um violeta, neutros com viés violeta e três semânticas

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 violeta é a tinta do carimbo oficial; os cinzas não são neutros puros, carregam um pouco de violeta para ler como o mesmo papel.

A cor da marca

Violeta do carimbo

#3b39b5 claro · #a09eff escuro

var(--accent)

No tema escuro o acento sobe para lilás, senão o violeta some sobre o fundo. É a única cor que muda de matiz entre os temas.

A regra de uma tinta só

O violeta 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. Vermelho e verde existem para estado, nunca para decorar. Não há cor por plano, por página nem por campanha.

Papéis de superfície nos dois temas

Não desenhe com o hex: desenhe com o papel. Cada papel resolve para um valor no claro e outro no escuro.

Papel	Token	Claro	Escuro	Onde usar
Fundo (papel)	`--ground`	#f3f3f7	#0f0f17	Fundo da página. É o "papel de repartição".
Superfície	`--surface`	#ffffff	#171722	Card, campo, painel, carimbo.
Superfície 2	`--surface-2`	#f8f8fb	#1c1c29	Cabeçalho de tabela, barra de janela.
Linha	`--line`	#e2e2eb	#2a2a3b	Divisória e borda de repouso.
Linha forte	`--line-strong`	#c8c8d8	#3b3b52	Borda de campo e de botão fantasma.
Tinta	`--ink`	#17172b	#ececf6	Texto principal e títulos.
Tinta 2	`--ink-2`	#474761	#c0c0d4	Texto secundário, descrições.
Apagado	`--muted`	#72728c	#8e8ea8	Metadado, rótulo, legenda. Nunca em texto essencial.
Acento	`--accent`	#3b39b5	#a09eff	A tinta do carimbo: botão primário, foco, destaque.
Acento hover	`--accent-hover`	#2f2d99	#b6b4ff	Hover do primário.
Acento suave	`--accent-soft`	#ececfb	#25244a	Véu violeta atrás de item ativo e do cenário recomendado.
Faixa	`--band`	#17172b	#1a1a2b	Seção sempre escura (números do mercado, chamada final).

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.

Positivo

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, violeta. É 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 violeta: é 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 violeta 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 violeta.

Entrar na lista

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

Kicker, tag e selo

Preço para ganhar

kicker Mono, caixa alta, violeta. 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 cheia de violeta, 12px. Um por grupo.

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 violeta. 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 violeta, raro. Botão, foco e o que é recomendado. O resto é papel e tinta.
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.
✕Cinza neutro puro ao lado do violeta.
✕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, escuro	PNG 2×	Versão lilás para fundo escuro.	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.