Home	Escopo	Gerência	Processo	Design	Configuração	Arquitetura	Banco de Dados

Wiki do Projeto: Plataforma de Inovação "BAH"

Esta wiki serve como guia para o Design System da plataforma BAH, garantindo consistência visual e funcional em todas as interfaces.

1. Visão Geral do Projeto

Telas Principais

• Página Inicial (Desktop):

• Página Inicial (Mobile):

2. Fundamentos do Design

A base visual e conceitual que sustenta todo o projeto.

2.1. Cores

A paleta de cores é um dos pilares da identidade visual da BAH.

• Print da Paleta de Cores no Figma:

Cores da Marca (Brand Colors)

Cor	Amostra	HEX	Token	Uso
BahPurple		#542E82	$color-brand-primary	Cor principal, usada em cabeçalhos, botões e elementos de destaque.
BahGreen		#C7D871	$color-brand-accent	Cor de destaque, usada em ícones e detalhes visuais.
BahBlue		#41EDEE	$color-brand-secondary
BahRed		#FE716F	$color-brand-tertiary

2.2. Tipografia

A fonte principal do projeto é a Mulish.

• Print da Escala Tipográfica no Figma:
  

Estilo	Fonte	Peso	Tamanho (pt)	Uso
Large Title	Mulish	Bold	34	Título principal da página de herói.
Title 1	Mulish	Bold	28	Títulos de seção principais (H1).
Title 3	Mulish	Semibold	20	Títulos de seção secundários (H2, H3).
Body	Mulish	Regular	17	Corpo de texto principal.
Callout	Mulish	Semibold	16	Botões, tags e links de navegação.

2.3. Layout e Grid

O layout utiliza um grid de 12 colunas para desktop e 4 colunas para mobile para garantir alinhamento e consistência.

• Desktop:

  • Colunas: 12
  • Margens (laterais): 60px
  • Espaçamento entre colunas (Gutter): 24px

• Mobile:

  • Colunas: 4
  • Margens (laterais): 20px
  • Espaçamento entre colunas (Gutter): 16px

2.4. Espaçamento

Utilizamos uma escala de espaçamento baseada em múltiplos de 8 para manter um ritmo vertical e horizontal consistente.

Token	Valor	Exemplo de Uso
$spacing-xs	4px	Espaço entre um ícone e seu texto.
$spacing-sm	8px	Pequeno espaço entre elementos.
$spacing-md	16px	Espaçamento padrão (ex: dentro de um card).
$spacing-lg	24px	Espaço entre inputs em um formulário.
$spacing-xl	32px	Espaço entre um título e o parágrafo abaixo.
$spacing-xxl	48px	Espaço entre seções de conteúdo.

2.5. Iconografia

O sistema utiliza ícones SF customizados no estilo "outline" (contorno).

• Print da Biblioteca de Ícones: {{image.png}}

• Biblioteca: Ícones SVG customizados.

• Tamanhos Padrão: Os ícones devem ser usados preferencialmente nos tamanhos 16px, 20px ou 24px para garantir nitidez.

• Estilo: Contorno (stroke) com espessura de 1.5px.