Initial commit: CMS completo com gerenciamento de leads e personalização de tema

docs/design-system.md

@@ -0,0 +1,44 @@
+# 🎨 Design System - Octto Engenharia
+
+## 1. Cores
+
+A paleta de cores é baseada em tons de laranja, branco e preto, transmitindo energia, clareza e profissionalismo.
+
+| Nome | Cor | Hex (Sugestão) | Uso |
+|------|-----|----------------|-----|
+| **Primary Orange** | 🟧 | `#FF6B00` | Botões, Destaques, Links |
+| **Pure White** | ⬜ | `#FFFFFF` | Fundo, Texto em fundos escuros |
+| **Pure Black** | ⬛ | `#000000` | Texto principal, Títulos |
+| **Dark Gray** | ⬛ | `#1A1A1A` | Rodapés, Fundos secundários |
+| **Light Gray** | ⬜ | `#F5F5F5` | Fundos de seções alternadas |
+
+## 2. Tipografia
+
+A tipografia escolhida traz modernidade e robustez para a marca.
+
+### Fonte Principal
+**Nome:** Stack Sans Headline  
+**Link:** [Google Fonts - Stack Sans Headline](https://fonts.google.com/specimen/Stack+Sans+Headline)  
+**Uso:** Títulos, Cabeçalhos, Destaques.
+
+### Fonte Secundária (Sugestão para corpo de texto)
+**Nome:** Inter ou Roboto (Para melhor legibilidade em textos longos)  
+**Uso:** Parágrafos, descrições, textos de apoio.
+
+## 3. Iconografia
+
+Utilizaremos a biblioteca **Remix Icons** para manter a consistência visual.
+
+- **Biblioteca:** [Remix Icons](https://remixicon.com/)
+- **Estilo:** Line (Linha) ou Fill (Preenchido) dependendo do contexto.
+- **Instalação:** `npm install remixicon`
+
+## 4. Componentes Básicos
+
+### Botões
+- **Primário:** Fundo Laranja, Texto Branco/Preto.
+- **Secundário:** Borda Laranja, Fundo Transparente.
+
+### Cards
+- Fundo Branco com sombra suave.
+- Bordas arredondadas (ex: `rounded-lg`).