45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
# 🎨 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`).
|