Portal Licitacoes

logos

Logos

Assinatura principal, aplicacao negativa e direcao de marca.

A marca principal deve respirar em superficies escuras e claras. A home publica privilegia a versao horizontal para leitura rapida.

16x16

32x32

48x48

Snippet

<Image src="/images/logo-portal-licitacoes.webp" alt="Portal Licitacoes" width={180} height={52} />

colors

Colors

Paleta oficial, regra 60-30-10 e usos semanticos.

main

#F2F5F8

secondary

#0F2741

accent

#F5A623

support

#1B4FD8

Snippet

const brand = { main: "#F2F5F8", secondary: "#0F2741", accent: "#F5A623", support: "#1B4FD8" };

typography

Typography

Escala tipografica para hero, painel operacional e utilitarios.

Hero e titulos de impacto

Inter sustenta leitura longa, labels e contexto operacional sem competir com a voz de display da home.

JetBrains Mono para dados curtos, codigos e instrumentacao.

Snippet

font-display: Plus Jakarta Sans
font-body: Inter
font-mono: JetBrains Mono

grid-layout

Grid Layout

Padrao de listagem com totalizador, ordenacao e paginacao.

Exibindo 1 a 25 de 143 registros

Totalizador na primeira linha visual da grid

Ordenacao por backend

Edital

Pregao eletronico - equipamentos hospitalares

Orgao

Secretaria de Saude

Prazo

17/07/2026 09:00

Snippet

grid header -> totalizador -> tabela -> rodape com 25/50/100 registros

icons

Icons

Iconografia orientada a monitoramento, risco e decisao.

Radar

Alerta

Base

Triagem

Snippet

<Radar className="text-[color:var(--brand-support)]" />

buttons

Buttons

Acoes primarias, secundarias e discretas.

Link

Snippet

<Button variant="primary">Solicitar diagnostico</Button>

forms

Forms

Campos base para busca, cadastro e filtros operacionais.

Campo de busca com icone reservado

Snippet

<Input placeholder="Codigo / descricao / orgao" />

components

Components

Cards, badges e blocos de contexto reutilizaveis.

Aderencia alta

Card de oportunidade

Bloco reutilizavel para listagens, resumo de edital e favoritos.

Prazo critico

Badge semantica

Estados positivos, neutros e de atencao seguem a mesma base.

Ativo

Status operacional

Nao usar cores destrutivas fora de estado realmente critico.

Snippet

<Badge variant="warning">Prazo critico</Badge>

content-blocks

Content Blocks

Blocos textuais para pagina publica e telas internas.

Home publica

Radar publico para empresas que querem vender ao governo.

Cabecalho interno

Editais monitorados

Titulo funcional, descricao curta e acao primaria contextual.

Snippet

<SectionHeading eyebrow="Plataforma" title="..." description="..." />

feedback-states

Feedback States

Sucesso, erro, alerta e informacao dentro do mesmo sistema.

Alerta salvo

A regra de monitoramento foi atualizada com sucesso.

Prazo curto

O edital exige revisao ate amanha as 09:00.

Falha ao validar origem

Revise a URL ou o token configurado para a fonte publica.

Snippet

toast global fixo para sucesso, erro e validacao

navigation-patterns

Navigation Patterns

Sidebar, tabs, breadcrumb e paginacao padronizados.

Resumo

Editais

Alertas

Oportunidades

Breadcrumb global

Dashboard / Editais / Detalhe

Abertos

Prazo critico

Favoritos

Snippet

sidebar + breadcrumb global + tabs + pagination

page-templates

Page Templates

Estruturas base para home, dashboard e detalhe de registro.

Home publica

Narrativa comercial, prova operacional e CTA claro.

Dashboard operacional

Resumo, filtros, grid e modais por rota interceptada.

Detalhe de edital

Metadados, eventos, anexos e historico da oportunidade.

Snippet

home publica | dashboard operacional | detalhe de edital

motion-interactions

Motion Interactions

Animacoes pontuais para radar, destaque e transicao de foco.

Movimento com funcao

O projeto usa poucas animacoes: sweep do radar, ticker de fonte e destaque temporario apos navegacao por busca. Todas respeitam `prefers-reduced-motion`.

Snippet

radarSweep 5.5s linear infinite; prefers-reduced-motion respeitado

accessibility

Accessibility

Contraste, foco, reducao de movimento e rotulos consistentes.

Foco visivel em todos os controles interativos.

Contraste suficiente entre superficies, texto e acentos.

Labels e aria-label em campos, icones e acoes icon-only.

Animacao opcional e desativada quando o usuario pede menos movimento.

Snippet

focus-visible, aria-label, contraste AA, reducao de movimento

design-tokens

Design Tokens

Mapa tipado da paleta, superficies e semantica.

{
  "brand": {
    "main": "#F2F5F8",
    "secondary": "#0F2741",
    "accent": "#F5A623",
    "support": "#1B4FD8"
  },
  "text": {
    "primary": "#102234",
    "secondary": "#38506A",
    "muted": "#5B7189"
  },
  "semantic": {
    "success": "#157347",
    "warning": "#C47A00",
    "error": "#C62828",
    "info": "#1B4FD8"
  },
  "surface": {
    "primary": "#F2F5F8",
    "secondary": "#EAF0F6",
    "panel": "#FFFFFF",
    "strong": "#F8FAFC"
  },
  "border": {
    "subtle": "rgba(15, 39, 65, 0.12)",
    "strong": "rgba(15, 39, 65, 0.22)"
  },
  "typography": {
    "display": "Plus Jakarta Sans",
    "body": "Inter",
    "mono": "JetBrains Mono"
  }
}

Snippet

import { designTokens } from "@/lib/design-system/tokens";

technologies

Technologies

Stack oficial refletida no pacote e na arquitetura.

Runtime

Node.js 24 LTS

Framework

Next.js 16.2 com App Router

Frontend

React 19 + TypeScript 5

Estilizacao

Tailwind CSS 4 com tokens em CSS

Componentes

Biblioteca interna compativel com shadcn/ui

Dados

MySQL 8 + Drizzle ORM

Auth

Better Auth + RBAC

Docs

Storybook 10 e specifications versionadas

Snippet

package.json e documentos oficiais precisam permanecer sincronizados

project-file-structure

Project File Structure

Arvore oficial de pastas do projeto.

project-root/
├── .storybook/
├── config/deployment/
├── docs/
├── drizzle/
├── public/
├── scripts/
├── specifications/
├── src/
│   ├── app/
│   ├── components/
│   ├── config/
│   ├── lib/
│   ├── modules/
│   ├── server/
│   ├── stories/
│   ├── styles/
│   └── tests/
├── Dockerfile
├── docker-compose.yml
├── drizzle.config.ts
├── next.config.ts
└── package.json

Snippet

project-root/
├── .storybook/
├── config/deployment/
├── docs/
├── drizzle/
├── public/
├── scripts/
├── specifications/
├── src/
│   ├── app/
│   ├── components/
│   ├── config/
│   ├── lib/
│   ├── modules/
│   ├── server/
│   ├── stories/
│   ├── styles/
│   └── tests/
├── Dockerfile
├── docker-compose.yml
├── drizzle.config.ts
├── next.config.ts
└── package.json

{ "brand": { "main": "#F2F5F8", "secondary": "#0F2741", "accent": "#F5A623", "support": "#1B4FD8" }, "text": { "primary": "#102234", "secondary": "#38506A", "muted": "#5B7189" }, "semantic": { "success": "#157347", "warning": "#C47A00", "error": "#C62828", "info": "#1B4FD8" }, "surface": { "primary": "#F2F5F8", "secondary": "#EAF0F6", "panel": "#FFFFFF", "strong": "#F8FAFC" }, "border": { "subtle": "rgba(15, 39, 65, 0.12)", "strong": "rgba(15, 39, 65, 0.22)" }, "typography": { "display": "Plus Jakarta Sans", "body": "Inter", "mono": "JetBrains Mono" } }

project-root/ ├── .storybook/ ├── config/deployment/ ├── docs/ ├── drizzle/ ├── public/ ├── scripts/ ├── specifications/ ├── src/ │ ├── app/ │ ├── components/ │ ├── config/ │ ├── lib/ │ ├── modules/ │ ├── server/ │ ├── stories/ │ ├── styles/ │ └── tests/ ├── Dockerfile ├── docker-compose.yml ├── drizzle.config.ts ├── next.config.ts └── package.json

Base visual para home publica, dashboard e fluxos operacionais.

Logos

Colors

Typography

Grid Layout

Icons

Buttons

Forms

Components

Content Blocks

Feedback States

Navigation Patterns

Page Templates

Motion Interactions

Accessibility

Design Tokens

Technologies

Project File Structure

Base visual para home publica, dashboard e fluxos operacionais.

Logos

Colors

Typography

Grid Layout

Icons

Buttons

Forms

Components

Content Blocks

Feedback States

Navigation Patterns

Page Templates

Motion Interactions

Accessibility

Design Tokens

Technologies

Project File Structure