Paleta Completa

Todas as cores da marca com tokens, valores e uso

Cores Primárias

Preto Profundo

#0A0A0A · rgb(10, 10, 10)

brand-black

Background primário

Vermelho Intenso

#E01020 · rgb(224, 16, 32)

brand-red

Accent principal, CTAs, energia

Branco Metálico

#F5F5F5 · rgb(245, 245, 245)

brand-white

Texto primário

Escala de Cinzas

Cinza 100

#E0E0E0

brand-gray-100

Texto secundário

Cinza 300

#A0A0A0

brand-gray-300

Borders, muted text

Cinza 500

#6B6B6B

brand-gray-500

Disabled, placeholders

Cinza 700

#2A2A2A

brand-gray-700

Cards, surfaces

Cinza 900

#141414

brand-gray-900

Elevated surfaces

Variações de Accent

Vermelho Escuro

#B00D1A · rgb(176, 13, 26)

brand-red-dark

Hover states, profundidade

Vermelho Intenso

#E01020 · rgb(224, 16, 32)

brand-red

Accent principal, CTAs, energia

Vermelho Claro

#FF2D3B · rgb(255, 45, 59)

brand-red-light

Glow, destaque, gradients

Gradientes

brand-red → brand-red-light

CTAs, destaques, energia

brand-black → brand-gray-900

Backgrounds, profundidade

brand-red-dark → brand-red

Hover transitions, depth

brand-black → brand-gray-700

Cards elevados

Opacidade — brand-red

100%

40%

20%

10%

02

Tipografia Completa

Sistema tipográfico com espécimes, pesos e escalas

Display — Rajdhani

6xl

AIRINHO JOGA

5xl

AIRINHO JOGA

4xl

FPS COM PERSONALIDADE

3xl

FPS COM PERSONALIDADE

2xl

GAMEPLAY INTENSA

xl

REAÇÃO REAL

lg

COMUNIDADE GAMER

Semibold 600

Subtítulos e seções secundárias

Bold 700

Títulos principais e display

Body — Inter

lg/400

Airinho Joga é sobre viver o jogo de verdade. Não é só gameplay.

lg/500

Airinho Joga é sobre viver o jogo de verdade. Não é só gameplay.

lg/600

Airinho Joga é sobre viver o jogo de verdade. Não é só gameplay.

base/400

É conteúdo para quem entende a adrenalina do FPS e quer sentir isso junto — ao vivo, nos cortes e em cada momento que vale replay.

sm/400

Texto secundário para legendas, metadata e informações complementares que não precisam de destaque visual.

xs/400

Texto auxiliar, timestamps, labels de formulário e micro-copy de interface.

Mono — JetBrains Mono

sm/400

337K // v1.0 // BRAND SYSTEM

sm/500

337K // v1.0 // BRAND SYSTEM

xs/400

section-01 // brand-red #E01020 // fps-competitive

xs/500

section-01 // brand-red #E01020 // fps-competitive

Tabela de Escala

Token	Tamanho	Line Height	Uso
text-6xl	60px	1	Hero display, página principal
text-5xl	48px	1	Títulos de página
text-4xl	36px	1.1	Seções principais
text-3xl	30px	1.2	Subseções
text-2xl	24px	1.3	Cards e blocos
text-xl	20px	1.4	Rótulos de seção
text-lg	18px	1.6	Body grande, intro text
text-base	16px	1.6	Body padrão
text-sm	14px	1.5	Texto secundário, captions
text-xs	12px	1.5	Meta info, labels, mono

Regras de Pareamento

Rajdhani + Inter

Títulos em Rajdhani, corpo em Inter. Combinação padrão para 90% dos casos.

Rajdhani + Mono

Títulos em Rajdhani, dados em JetBrains Mono. Para HUD, dashboards e stats.

Mono Solo

JetBrains Mono sozinha para números de seção, códigos e metadata técnica.

03

Hierarquia de Títulos

Níveis de heading do h1 ao h6 com exemplos reais

H1 — font-display font-bold text-5xl

Airinho Joga Brand System

Página de destaque, hero sections

H2 — font-display font-bold text-3xl

FPS Competitivo com Personalidade

Seções principais de página

H3 — font-display font-bold text-xl

Gameplay Intensa, Reação Real

Subseções e agrupamentos

H4 — font-display font-bold text-lg

Caos, Skill e Comunidade

Cards e blocos de conteúdo

H5 — font-display font-bold text-base

337K Inscritos no YouTube

Rótulos e labels de destaque

H6 — font-mono text-xs uppercase tracking-wider

SEÇÃO 06 // META INFO // BRAND SYSTEM V1.0

Meta info, números de seção, categorias

04

Espaçamento e Grid

Sistema de espaçamento base-4, grid de 12 colunas e margens

Escala de Espaçamento (base: 4px)

4px

p-1

8px

p-2

12px

p-3

16px

p-4

20px

p-5

24px

p-6

32px

p-8

40px

p-10

48px

p-12

64px

p-16

80px

p-20

96px

p-24

Grid — 12 Colunas

1

2

3

4

5

6

7

8

9

10

11

12

4 cols

3

6 cols (content)

3

Especificações

Gutter

24px

gap-6

Max Width

1280px

max-w-5xl

Margens

16 / 24 / 48

px-4 / px-6 / px-12

05

Bordas, Raios e Sombras

Border radius, border styles, sombras e níveis de elevação

Border Radius

Tactical

2px · rounded-tactical

Small

4px · rounded-sm

Medium

6px · rounded-md

Large

8px · rounded-lg

Borders

Default

border-brand-gray-700/50

Hover

border-brand-red/30

Active

border-brand-red

Sombras

Flat

shadow-none

Glow Red

0 0 20px rgba(224,16,32,0.4)

Glow Red LG

0 0 40px rgba(224,16,32,0.3)

Elevação

Background

bg-brand-black

Elevated

bg-brand-gray-900

Card

bg-brand-gray-700/30

06

Tom de Voz

Personalidade verbal — como a marca fala, escreve e se comunica

Traços de Voz

informalenergéticomemeávelespontâneocompetitivoprovocativo na medida

O Que Evitar

corporativogenéricopassivofrioelitistaforçado

Soa Como

Alguém que entende o jogo de verdade, fala como jogador, reage com emoção e cria senso de urgência.

Evitar Soar Como

Marca corporativa, creator genérico, influencer distante.

Exemplos Práticos

Situação

Anunciar uma live

Certo ✓

BORA! Live ON agora — hoje é dia de Warzone ranked. Cola lá que o bagulho vai ser insano 🔴

Errado ✗

Informamos que nossa transmissão ao vivo está programada para hoje. Junte-se a nós.

Situação

Responder hater

Certo ✓

kkkk mano, vem pro 1v1 que a gente resolve isso na bala 😂

Errado ✗

Agradecemos seu feedback. Vamos considerar suas observações para melhorar nosso conteúdo.

Situação

Postar resultado de partida

Certo ✓

42 KILLS. QUARENTA E DUAS. O lobby inteiro sofreu hoje. Quem assistiu sabe. 💀🔥

Errado ✗

Conseguimos uma boa performance no jogo de hoje com 42 eliminações. Obrigado por assistir.

Situação

Agradecer sub

Certo ✓

AEEE! Mais um na família! Bem-vindo ao squad, mano. Agora tu é parte do caos. 🫡

Errado ✗

Muito obrigado por sua assinatura. Seu apoio é muito importante para o crescimento do canal.

Voz por Plataforma

YouTube

Mais elaborado, com edição e narrativa. Títulos provocativos. Thumbnails impactantes. Storytelling nas descrições.

Twitch

Mais espontâneo e reativo. Interação direta com chat. Reações genuínas. Energia constante. Sem script.

X / Twitter

Mais direto e conciso. Opiniões fortes sobre meta. Provocações rápidas. Memes e reações em tempo real.

Discord

Mais comunitário e próximo. Tom de amigo. Enquetes e decisões coletivas. Bastidores e exclusividades.

07

Fotografia e Imagem

Estilo visual para fotos, thumbnails e overlays de stream

Estilo Geral

Atmosfera

Dark, high contrast, dramatic lighting

Temperatura

Fria com acentos quentes (vermelho)

Mood

Intenso, competitivo, energético

✓ Fazer

✓

Dark backgrounds com profundidade

✓

Acentos em vermelho (iluminação, glow)

✓

Action shots e momentos de gameplay

✓

Reações expressivas e emocionais

✓

HUD overlays e elementos de UI

✓

Alto contraste entre luz e sombra

✓

Composição dramática e dinâmica

✗ Não Fazer

✗

Fundos brancos ou claros

✗

Fotos de banco de imagem genéricas

✗

Imagens genéricas de "gamer"

✗

Baixo contraste ou imagens lavadas

✗

Excesso de cores fora da paleta

✗

Composição estática e sem energia

✗

Filtros que descaracterizam a marca

Estilo de Thumbnail

Regras

• Rajdhani Bold uppercase para texto
• Rosto/reação visível e expressiva
• Alto contraste obrigatório
• Acento vermelho em destaque
• Máximo 5 palavras no título

42 KILLS INSANO

WARZONE

Estilo de Overlay

Regras

• Painéis semi-transparentes escuros
• Acentos em vermelho para indicadores
• Metadata em JetBrains Mono
• Não obstruir a gameplay
• Borders finos com brand-gray-700

LIVE 02:34:17

AIRINHO JOGA 337K // WARZONE RANKED

08

Uso de Cores

Regras de aplicação de cor — hierarquia, contraste e proibições

Hierarquia de Background

Primário

bg-brand-black #0A0A0A

Elevado

bg-brand-gray-900 #141414

Card

bg-brand-gray-700/30

Hierarquia de Texto

Texto primário — alta legibilidade

text-brand-white

Texto secundário — conteúdo de suporte

text-brand-gray-100

Texto muted — informação terciária

text-brand-gray-300

Texto disabled — inativo, placeholder

text-brand-gray-500

Quando Usar Vermelho

CTAs e botões

Accent highlights

Estados ativos

Indicador LIVE

Ações destrutivas

Nunca Fazer

✗

Vermelho sobre vermelho

bg-red + text-red = ilegível

✗

Texto vermelho em fundo escuro sem contraste

text-sm em #E01020 sobre #0A0A0A

✗

Fundos brancos ou claros

bg-white em qualquer contexto

✗

Cores fora da paleta

Azul, verde, roxo como accent

Contraste

White on Black 19.2:1 PASS

Gray-100 on Black 16.3:1 PASS

Gray-300 on Black 8.5:1 PASS

Gray-500 on Black 4.1:1 PASS

Red on Black 3.9:1 FAIL

White on Gray-900 16.7:1 PASS

* Vermelho sobre fundo escuro falha AA para texto pequeno. Use apenas em elementos grandes (botões, badges) ou com glow.

09

Iconografia

Estilo, tamanhos e cores dos ícones do sistema

Estilo

Traço

Stroke-based, 2px

Caps

Rounded caps

Grid

24x24 viewBox

Tamanhos

16px (inline)

20px (default)

24px (medium)

32px (large)

48px (hero)

Estados de Cor

Default

text-brand-gray-300

Active / Accent

text-brand-red

On Dark

text-brand-white

Exemplos do Set

gamepad

trophy

flame

users

search

target

play

globe

gamepad em todos os tamanhos

16

20

24

32

48

10

Componentes Base

Referência rápida dos padrões de UI fundamentais

Botões

Primary

bg-brand-red

Secondary

bg-brand-gray-700

Ghost

bg-transparent

Destructive

bg-amber-600

Cards

Default

Card com fundo sólido, sem borda visível.

bg-brand-gray-900

Outlined

Card com borda sutil para definição visual.

+ border-brand-gray-700/50

Elevated

Card com glow vermelho para destaque.

+ glow-red shadow

Badges

LIVE NEW PRO warzone fps ranked

Input

bg-brand-gray-700 · border-brand-gray-700/50 · focus:border-brand-red

Link

Cola na live Ver canal

text-brand-red · hover:underline

11

Padrões de Layout

Estruturas de página, seção, grid e navegação

Page Header

6.0

Título da Página

Subtítulo descritivo sobre o conteúdo da página

12 seções · Airinho Joga Brand System

Padrão: número + título + subtítulo + meta

Section

01

Título da Seção

Subtítulo descritivo

Conteúdo da seção

Padrão: border-top + número + título + slot

Card Grid Responsivo

1

2

3

4

5

6

7

8

2-col mobile · 3-col tablet · 4-col desktop

Especificações de Layout

Propriedade	Valor	Token
Content max-width	1280px	max-w-5xl
Sidebar width	256px	w-64
Padding mobile	16px	px-4
Padding tablet	24px	sm:px-6
Padding desktop	48px	lg:px-12
Navigation	Sidebar 256px / Drawer	lg:ml-64

12

Checklist de Consistência

Verificação rápida para garantir que tudo está on-brand