Design.md

+| [Home](home) | [Escopo](escopo) | [Gerência](Gerência) | [Processo](processo) | [Design](design) | [Configuração](configuração) | [Arquitetura](arquitetura) | [Banco de Dados](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):**
+  ![Group_2292](uploads/ccd96165e0d589f78449c171a77cc149/Group_2292.png)
+
+- **Página Inicial (Mobile):** \
+  ![Captura_de_Tela_2025-09-30_às_14.33.55](uploads/f28d9f238e23fbe2b7ff1d53442913e9/Captura_de_Tela_2025-09-30_às_14.33.55.png)
+
+## 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:**
+  ![image](uploads/c84418838846c33030977492cf7bdc4b/image.png)
+
+#### Cores da Marca (Brand Colors)
+
+| Cor | Amostra | HEX | Token | Uso |
+| :--- | :--- | :--- | :--- | :--- |
+| **BahPurple** | ![#542E82](https://placehold.co/15x15/542E82/542E82.png) | `#542E82` | `$color-brand-primary` | Cor principal, usada em cabeçalhos, botões e elementos de destaque. |
+| **BahGreen** | ![#C7D871](https://placehold.co/15x15/C7D871/C7D871.png) | `#C7D871` | `$color-brand-accent` | Cor de destaque, usada em ícones e detalhes visuais. |
+| **BahBlue** | ![#41EDEE](https://placehold.co/15x15/41EDEE/41EDEE.png) | `#41EDEE` | `$color-brand-secondary` | |
+| **BahRed** | ![#FE716F](https://placehold.co/15x15/FE716F/FE716F.png) | `#FE716F` | `$color-brand-tertiary` | |
+
+### 2.2. Tipografia
+
+A fonte principal do projeto é a **Mulish**.
+
+- **Print da Escala Tipográfica no Figma:**\
+  ![image](uploads/7a8f1dda00d177191d905e67f0c0403c/image.png)
+
+| 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.