criação do website
This commit is contained in:
184
docs/04-design-system.md
Normal file
184
docs/04-design-system.md
Normal file
@@ -0,0 +1,184 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user