1.5 KiB
1.5 KiB
🎨 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
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
- 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).