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

: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

/* 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

6.0 KiB Raw Permalink Blame History Unescape Escape