Design System

Guia de estilos e componentes para o projeto Política Brasil.

1. Tipografia

Headings (Fraunces)

Heading H1

Heading H2

Heading H3

Heading H4

Body & UI (Inter)

Texto de destaque (XL)

Este é o corpo de texto padrão. Usamos a fonte Inter para garantir máxima legibilidade em dispositivos móveis e desktop, atendendo ao nosso princípio Mobile First.

Texto de legenda ou apoio (Small)

2. Cores

Primary

Navy #1a3a5f

Branding, botões principais e elementos de autoridade.

Secondary

Red #b31b1b

Alertas, destaques editoriais e estados de interação.

Ink

Nanquim #1a1a1a

Cor padrão para textos e títulos. Simula tinta metálica.

⚠️ Não usar sobre fundos escuros (utilizar Creme ou Branco).

Link/Nav

Royal #003366

Exclusivo para hiperlinks e elementos clicáveis.

Tags

Moss #1b3022

Categorias, carimbos institucionais e metadados.

Background

Parchment #f4f1ea

Fundo de página. Simula papel jornal envelhecido.

Neutral Dark

Slate 900

Surface

Slate 50

3. Componentes Editoriais

Estilos de Borda

.retro-border

Borda sólida com sombra "block" deslocada. Base do nosso design neo-rêtro.

.double-border-b

Borda dupla clássica. Utilizada em cabeçalhos e divisores editoriais.

Botões de Ação

Cards de Conteúdo

Pilar de Segurança

Zero Trust Policy

Cada requisição é validada como se viesse de uma rede pública. Segurança militar com estética de arquivo.

Etiquetas de Categoria

Congresso Supremo Economia

Inputs

4. Ícones (Lucide)

landmark
shield
zap
smartphone
bar-chart
menu
search
user