Foundations
Design tokens — cores, tipografia, espaçamento, bordas, sombras e breakpoints
Cores
Paleta completa com tokens, valores e uso
Preto Profundo
brand-black
HEX
#0A0A0A
RGB
10, 10, 10
Uso
Background primário
Vermelho Intenso
brand-red
HEX
#E01020
RGB
224, 16, 32
Uso
Accent principal, CTAs, energia
Vermelho Escuro
brand-red-dark
HEX
#B00D1A
RGB
176, 13, 26
Uso
Hover states, profundidade
Vermelho Claro
brand-red-light
HEX
#FF2D3B
RGB
255, 45, 59
Uso
Glow, destaque, gradients
Branco Metálico
brand-white
HEX
#F5F5F5
RGB
245, 245, 245
Uso
Texto primário
Cinza 100
brand-gray-100
HEX
#E0E0E0
RGB
224, 224, 224
Uso
Texto secundário
Cinza 300
brand-gray-300
HEX
#A0A0A0
RGB
160, 160, 160
Uso
Borders, muted text
Cinza 500
brand-gray-500
HEX
#6B6B6B
RGB
107, 107, 107
Uso
Disabled, placeholders
Cinza 700
brand-gray-700
HEX
#2A2A2A
RGB
42, 42, 42
Uso
Cards, surfaces
Cinza 900
brand-gray-900
HEX
#141414
RGB
20, 20, 20
Uso
Elevated surfaces
Tipografia
Escala tipográfica, pesos e espécimes
Escala Tipográfica
Airinho Joga
Airinho Joga
Gameplay Intensa
Reação Real
Comunidade Gamer
FPS Competitivo
Conteúdo que une skill real com entretenimento
Conteúdo que une skill real com entretenimento autêntico para gamers
Texto secundário e legendas para elementos de interface e metadata
Texto auxiliar, timestamps, números de seção e labels de formulário
Pesos — Rajdhani
Semibold 600 — Títulos secundários e subtítulos
Bold 700 — Títulos principais e display
Pesos — Inter
Regular 400 — Corpo de texto e parágrafos
Medium 500 — Ênfase em UI e labels
Semibold 600 — Destaques e navegação
Pesos — JetBrains Mono
Regular 400 — Código, metadata e números
Medium 500 — Elementos HUD e destaques técnicos
Espaçamento
Grade de 4px base
Border Radius
Raios de borda para interface tática
Tactical
2px
Small
4px
Medium
6px
Large
8px
Sombras
Níveis de elevação
Subtle
0 1px 3px rgba(0,0,0,0.3)
Cards e superfícies planas
Default
0 4px 12px rgba(0,0,0,0.4)
Dropdowns e modais
Glow Red
0 0 20px rgba(224,16,32,0.3)
CTAs, estados ativos, destaque
Breakpoints
Pontos de quebra responsivos
| Token | Largura | Dispositivo | Uso |
|---|---|---|---|
| sm | 640px | Mobile landscape | Layout single-column expandido |
| md | 768px | Tablet | Sidebar colapsável, grid 2-col |
| lg | 1024px | Desktop | Sidebar fixa, grid completo |
| xl | 1280px | Desktop grande | Conteúdo expandido |
| 2xl | 1536px | Ultrawide | Max-width, margens generosas |