# 🎨 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`).