185 lines
6.0 KiB
Markdown
185 lines
6.0 KiB
Markdown
# 04 — Design System
|
||
|
||
## Conceito Visual
|
||
|
||
**"Control Room"** — Um dashboard de administração que transmite profissionalismo e controlo. Inspirado em interfaces de broadcasting desportivo e software de gestão profissional. Dark theme como padrão (ambiente de trabalho, ecrãs durante os jogos).
|
||
|
||
**Palavras-chave:** Preciso. Funcional. Desportivo. Autoritativo.
|
||
|
||
---
|
||
|
||
## Paleta de Cores
|
||
|
||
```css
|
||
:root {
|
||
/* Backgrounds */
|
||
--bg-base: #0a0e1a; /* Azul noite — fundo principal */
|
||
--bg-surface: #111827; /* Cards e painéis */
|
||
--bg-elevated: #1a2235; /* Elementos elevados */
|
||
--bg-overlay: #243047; /* Hover states, dropdowns */
|
||
|
||
/* Brand */
|
||
--brand-primary: #22c55e; /* Verde campo — ação principal */
|
||
--brand-accent: #3b82f6; /* Azul — informação, links */
|
||
--brand-danger: #ef4444; /* Vermelho — perigo, cartões vermelhos */
|
||
--brand-warning: #f59e0b; /* Amarelo — cartões amarelos */
|
||
|
||
/* Texto */
|
||
--text-primary: #f9fafb; /* Texto principal */
|
||
--text-secondary: #9ca3af; /* Texto secundário */
|
||
--text-muted: #4b5563; /* Texto inativo */
|
||
|
||
/* Bordas */
|
||
--border: #1e2d45; /* Bordas subtis */
|
||
--border-active: #22c55e; /* Borda ativa */
|
||
|
||
/* Estados */
|
||
--live-pulse: #ef4444; /* Indicador LIVE */
|
||
--success: #22c55e;
|
||
--error: #ef4444;
|
||
--warning: #f59e0b;
|
||
--info: #3b82f6;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Tipografia
|
||
|
||
```css
|
||
/* Display / Headings — Força e presença */
|
||
--font-display: 'Bebas Neue', 'Impact', sans-serif;
|
||
|
||
/* Interface / Corpo — Legibilidade técnica */
|
||
--font-body: 'IBM Plex Sans', 'Menlo', monospace-adjacent, sans-serif;
|
||
|
||
/* Dados / Números — Clareza em scoreboards */
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||
```
|
||
|
||
**Escala tipográfica:**
|
||
```
|
||
xs: 11px — Labels, metadados
|
||
sm: 13px — Texto secundário
|
||
base: 15px — Corpo de texto
|
||
lg: 17px — Subtítulos
|
||
xl: 20px — Títulos de secção
|
||
2xl: 24px — Títulos de página
|
||
3xl: 32px — Scores (Bebas Neue)
|
||
4xl: 48px — Score principal live
|
||
```
|
||
|
||
---
|
||
|
||
## Componentes Base
|
||
|
||
### Scoreboard (Live)
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ● LIVE 75' │
|
||
│ │
|
||
│ FC Porto 2 — 1 SLB │
|
||
│ (crest) [grande] (crest)│
|
||
│ │
|
||
│ [−] [+] [−] [+] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
- Números do score em Bebas Neue 64px
|
||
- Indicador LIVE com pulse animation (vermelho)
|
||
- Botões +/- grandes (acessíveis em tablet)
|
||
|
||
### Game Card
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ Jornada 15 • Sáb 15 Mar • 20:30 │
|
||
│ │
|
||
│ FC Porto — Benfica │
|
||
│ │
|
||
│ [Iniciar Jogo] [Editar] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### Status Badges
|
||
- `AGENDADO` — cinza
|
||
- `A DECORRER` — verde com pulse
|
||
- `INTERVALO` — amarelo
|
||
- `TERMINADO` — azul
|
||
- `ADIADO` — laranja
|
||
|
||
### Sidebar
|
||
```
|
||
┌─────────┐
|
||
│ ⚽ ADM │
|
||
├─────────┤
|
||
│ Dashboard│
|
||
│ Jogos │ ← item ativo tem barra verde à esquerda
|
||
│ Clubes │
|
||
│ Jogadores│
|
||
│ Classif. │
|
||
│ Artilh. │
|
||
├─────────┤
|
||
│ Settings │
|
||
│ Logout │
|
||
└─────────┘
|
||
```
|
||
Largura: 240px desktop, colapsável para 60px (ícones apenas)
|
||
|
||
---
|
||
|
||
## Layout
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ HEADER (64px) │
|
||
│ [☰ Logo] Jornada atual: 15/34 [● LIVE: Porto-B] │
|
||
├───────────┬──────────────────────────────────────────┤
|
||
│ │ │
|
||
│ SIDEBAR │ CONTENT AREA │
|
||
│ (240px) │ (flex 1) │
|
||
│ │ │
|
||
│ │ │
|
||
│ │ │
|
||
└───────────┴──────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Animações e Microinterações
|
||
|
||
| Elemento | Animação | Duração |
|
||
|---|---|---|
|
||
| Indicador LIVE | Pulse (scale + opacity) | 1.5s infinite |
|
||
| Score update | Flash verde → normal | 600ms |
|
||
| Sidebar item hover | Translate X 4px | 150ms |
|
||
| Card hover | BoxShadow + Y -2px | 200ms |
|
||
| Toast notifications | Slide in from right | 300ms |
|
||
| Página load | Fade in staggered | 400ms |
|
||
| Botão click | Scale 0.96 | 100ms |
|
||
|
||
---
|
||
|
||
## Responsividade
|
||
|
||
| Breakpoint | Layout |
|
||
|---|---|
|
||
| `< 768px` (mobile) | Sidebar escondida (drawer), conteúdo full-width |
|
||
| `768px-1024px` (tablet) | Sidebar colapsada (ícones), otimizado para live scoring |
|
||
| `> 1024px` (desktop) | Layout completo |
|
||
|
||
**Nota:** O Live Score Editor deve ser especialmente otimizado para tablet — é o mais provável de ser usado durante os jogos.
|
||
|
||
---
|
||
|
||
## Ícones
|
||
|
||
Usar **Lucide React** exclusivamente. Ícones principais:
|
||
- `Trophy` — classificação
|
||
- `Users` — clubes
|
||
- `User` — jogadores
|
||
- `Calendar` — jornadas
|
||
- `BarChart` — estatísticas
|
||
- `Zap` — live/em tempo real
|
||
- `Plus` / `Minus` — adicionar/remover golos
|
||
- `Flag` — cartões
|
||
- `Clock` — tempo de jogo
|