Design system · v2 · web

Storming

Preto como chão, vermelho como assinatura, branco quente como texto. Tipografia condensada em caixa alta, números grandes e o corte diagonal de 12° em toda a marca. Os tokens vivem em /css/tokens.css e os componentes em /css/site.css.

Princípios

Como a marca decide

Um vermelho por tela

O vermelho marca o que importa: o número principal, o botão, a série nossa no gráfico. Se tudo é vermelho, nada é.

Número com fonte

Todo dado aparece grande, em Barlow Condensed, com a fonte e a data no rodapé da seção.

Movimento com propósito

Animação conta a história: letras entram, números contam, barras crescem. Nada se mexe sem motivo e tudo para com prefers-reduced-motion.

Evitar

Gradiente colorido, sombra pesada em tudo, emoji como ícone, texto vermelho pequeno sobre preto (usar --c-red-text).

Cor

Paleta

Storm red
--c-red #E1121B

Red text
--c-red-text #FF4A4F

Red deep
--c-red-deep #7A0A10

Ground
--c-ground #0B0B0C

Surface
--c-surface #17171A

Surface 2
--c-surface-2 #222226

Ink
--c-ink #F5F3F0

Muted
--c-muted #A6A6AD

Comparação
--c-ref #5C5C64

Paper
--c-paper #F5F3F0 → #EAE6DF

Paper red (texto em fundo claro)
--c-paper-red #C8101A

Tipografia

Escala fluida

--fs-hero

Storming

--fs-mega

670 mil+

--fs-h1

Título de seção

--fs-h2

Subtítulo

--fs-h3

Título de cartão

--fs-lead

Texto de abertura, até 62 caracteres por linha, em muted.

--fs-body

Texto corrido em Barlow 17px, entrelinha 1.6.

--fs-eyebrow

Eyebrow · caixa alta

Espaço e forma

Grade de 4px, cantos e corte

--s-1 · 4

--s-2 · 8

--s-4 · 16

--s-5 · 24

--s-6 · 32

--s-7 · 48

--s-8 · 64

--s-9 · 96

--s-10 · 128

--r-sm 6

--r-md 14

--r-lg 22

--r-pill --skew -12°

Movimento

Curvas e tempos

Entrada

--ease-out cubic-bezier(.16,1,.3,1) · 0,8–1,2s · sobe 40px e aparece.

Interação

--t-fast .18s / --t-base .35s · botões sobem 2px, seta anda 4px.

Rolagem

GSAP ScrollTrigger + Lenis: manifesto acende palavra por palavra, cases empilham, linhas de progresso acompanham.

Sem movimento

Com prefers-reduced-motion ou economia de dados: sem vídeo, sem animação, tudo visível.

Componentes

Peças do site

Botão principal Fantasma Ao vivoChipMarca

Card · surface

165

stat médio

Card · red

57%

destaque único da tela

Card · paper

28 mil+

em seção clara

Marquee
Jogos
Estúdios

moldura de print

Dados

Gráficos

Série nossa em vermelho, comparação em cinza, valor escrito na ponta, fonte no rodapé. Barras retas, sem grade.

Nossa série72 mil

Comparação36 mil

Problema do clienteComo resolvemos