← Voltar

KINETIC BRUTALISM DESIGN SYSTEM — RAW. AGGRESSIVE. MAXIMUM IMPACT.

70%
DOS NOVOS
SEGUIDORES
NAO
ENGAJAM

Chega de ignorar seus seguidores. Transforme passivos em ativos agora.

NOVO!
01 — Tipografia
HERO TEXT

Lexend Mega 900 / clamp(3rem, 10vw, 6rem) / line-height: 0.85 / letter-spacing: -4px / uppercase

DISPLAY TEXT

Lexend Mega 700 / clamp(2rem, 6vw, 4rem) / line-height: 0.9 / letter-spacing: -3px / uppercase

HEADING LEVEL 1

Lexend Mega 700 / 2.5rem / line-height: 0.95 / letter-spacing: -2px / uppercase

HEADING LEVEL 2

Lexend Mega 700 / 2rem / line-height: 1.0 / letter-spacing: -1.5px / uppercase

HEADING LEVEL 3

Lexend Mega 400 / 1.5rem / line-height: 1.1 / letter-spacing: -0.5px / uppercase

Body text — clean, readable, and functional. Public Sans serves the content without competing with the bold headlines above. Designed for legibility at all sizes, with comfortable line spacing and weight options from 400 to 800.

Public Sans 400 / 1.125rem / line-height: 1.6

Caption text for secondary information, metadata, and helper notes. Informative and unobtrusive.

Public Sans 500 / 0.875rem / color: #555

LABEL TEXT — UPPERCASE ALLCAPS

Public Sans 800 / 0.75rem / letter-spacing: 3px / uppercase

02 — Cores
Background
#FFFFFF
Primary Text
#0A0A0A
Acid Yellow
#DFE104
Electric Orange
#FF3D00
Muted FG
#555555
Border Subtle
#E5E5E5

SOMBRAS OFFSET (SEM BLUR)

4px 4px 0 #0A0A0A
8px 8px 0 #0A0A0A
4px 4px 0 #DFE104
8px 8px 0 #DFE104
4px 4px 0 #FF3D00
03 — Espacamento
--space-1: 4px
--space-2: 8px
--space-3: 16px
--space-4: 24px
--space-5: 32px
--space-6: 48px
--space-7: 64px
--space-8: 96px
--space-9: 128px
04 — Botoes

VARIANTES

TAMANHOS

SOMBRA AMARELA NO HOVER (teste)

FULL WIDTH

05 — Cards
NOVO
ENGAJAMENTO
Transforme seguidores passivos em participantes ativos da sua comunidade digital.
Marketing • 2025
BETA
AUTOMACAO
Respostas automaticas que parecem humanas. Escale sem perder autenticidade e voz.
Produto • 2025
URGENTE
CONVERSAO
De seguidor a cliente em 3 passos. Funil otimizado por dados reais de mercado.
Growth • 2025
06 — Stats / KPIs
70%
NAO ENGAJAM
3.2x
MAIS CONVERSAO
24h
TEMPO MEDIO
98%
SATISFACAO
07 — Badges
DEFAULT ACID YELLOW ELECTRIC RED OUTLINE
PEQUENO MEDIO GRANDE
08 — Formularios

Nunca compartilharemos seu email com terceiros.

Email invalido. Use o formato nome@dominio.com

09 — Divisores

THICK (4px) — PADRAO

ACCENT YELLOW (4px)

REGULAR (3px)

DASHED (3px)

SUBTLE (1px)

KINETIC BRUTALISM RAW DESIGN BOLD IMPACT ACID YELLOW NO BORDERS MAXIMUM NOISE OFFSET SHADOWS SHARP CORNERS KINETIC BRUTALISM RAW DESIGN BOLD IMPACT ACID YELLOW NO BORDERS MAXIMUM NOISE OFFSET SHADOWS SHARP CORNERS
10 — Padroes Brutais

STICKERS (ROTATED BADGES)

Elementos rotacionados com borda grossa e sombra offset. Hover remove a rotacao.

★ NOVO
PRODUTO!
URGENTE
AGIR JA
<3
BRUTAL

MARQUEE STRIP (CSS PURO)

Faixa animada de texto repetido usando apenas CSS animation. Zero JavaScript. Borda superior e inferior de 3px com fundo acid yellow.

DEMO MARQUEE CSS ANIMATION DEMO MARQUEE CSS ANIMATION

ANNOUNCEMENT BAR (FULL WIDTH)

Barra de largura total com fundo acid yellow e texto bold uppercase. Usada no topo da pagina para comunicados urgentes.

NOVIDADE: VERSAO 3.0 DISPONIVEL AGORA — DOWNLOAD GRATUITO

LIFT EFFECT (HOVER)

Passe o mouse sobre o card. Sombra muda de preto para amarelo e o elemento "sobe" 4px via transform.

HOVER AQUI
Sombra preta (4px 4px 0) vira sombra amarela (8px 8px 0). Elemento move -4px -4px via CSS transform.
transition: 150ms ease

BOTAO COM LIFT (HOVER)

Todos os botoes tem sombra offset de 4px que dobra para 8px no hover, com translate(-4px, -4px) para dar efeito de elevacao.