← Voltar
De Stijl — 1917
PUREFORM

Reduction to essentials. Only straight lines and primary colors. Universal harmony through abstraction.

MONDRIAN
VAN DOESBURG
RIETVELD
DE STIJL
1917
01 — Tipografia
HERO TEXT

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

DISPLAY TEXT

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

HEADING LEVEL 1

Bebas Neue / 2.5rem / line-height: 0.95 / letter-spacing: 2px

HEADING LEVEL 2

Bebas Neue / 2rem / line-height: 1.0 / letter-spacing: 2px

HEADING LEVEL 3

Bebas Neue / 1.5rem / line-height: 1.1 / letter-spacing: 1.5px

Body text — Source Sans 3, the functional companion to Bebas Neue's geometric boldness. Clean, readable, purposeful. No decoration. Only what is necessary.

Source Sans 3 400 / 1.125rem / line-height: 1.6

Strong body text — emphasis through weight, not ornament.

Source Sans 3 700 / 1.125rem / line-height: 1.6

Caption and secondary information — Source Sans 3 Light

Source Sans 3 300 / 0.875rem

LABEL TEXT — UPPERCASE TRACKING

Source Sans 3 700 / 0.75rem / letter-spacing: 3px / uppercase

02 — Cores
Preto #0A0A0A
Red #D62B2B
Blue #1E3A8A
Yellow #F5C800
Branco #F5F5F0
BG Primario Fundo escuro
Red 15% Estado erro
Blue 15% Estado info
Yellow 30% Estado aviso
Off-White Bg padrao

De Stijl usa exclusivamente as cores primarias: vermelho, azul, amarelo — mais preto e branco. Nenhuma mistura. Nenhuma gradacao. A cor como elemento autonomo.

03 — Espacamento
4PX — SP1
8PX — SP2
16PX — SP3
24PX — SP4
32PX — SP5
48PX — SP6
64PX — SP7
96PX — SP8
128PX — SP9
04 — Botoes

TAMANHOS

VARIANTES

05 — Cards
NOVO
ENGAJAMENTO
Transforme seguidores passivos em participantes ativos da sua comunidade.
Marketing 2024
BETA
AUTOMACAO
Respostas automaticas que parecem humanas. Escale sem perder autenticidade.
Produto 2024
URGENTE
CONVERSAO
De seguidor a cliente em 3 passos. Funil otimizado por dados reais.
Growth 2024
06 — Stats / KPIs
70%
NAO ENGAJAM
3.2x
MAIS CONVERSAO
24h
TEMPO MEDIO
98%
SATISFACAO
07 — Badges
VERMELHO AZUL AMARELO PRETO OUTLINE
NOVO BETA URGENTE DE STIJL — GEOMETRIC PURITY
08 — Formularios
Nunca compartilharemos seu email.
Email invalido. Use o formato nome@dominio.com
09 — Divisores
ESPESSO (5px)
REGULAR (3px)
SUTIL (1px)
VERMELHO
AZUL
AMARELO
10 — Grade Mondrian Interativa
COMPOSICAO A — PEQUENA
COMPOSICAO B — MEDIA
COMPOSICAO C — GRANDE
AS REGRAS DO DE STIJL
I
Apenas Angulos Retos
Nenhuma curva existe. border-radius: 0 em todo o sistema. A linha reta e o unico instrumento geometrico valido.
II
Apenas Cores Primarias
Vermelho, azul, amarelo — mais preto e branco. Nenhuma cor secundaria, nenhuma mistura, nenhum gradiente. A cor como elemento puro.
III
A Grade e o Design
Tudo assenta sobre uma grade de linhas pretas espessas. A estrutura nao e escondida — ela e o elemento visual principal.
IV
Sem Decoracao
Nenhum ornamento, nenhuma sombra, nenhuma textura. Cada elemento deve ter funcao. O suplerfluo e eliminado sem piedade.
V
Reducao ao Essencial
Mondrian chamava isso de "Neoplasticismo" — a busca pela harmonia universal atraves da abstracao maxima. Menos e a verdade.
ANTES E DEPOIS DO DE STIJL
ANTES — ART NOUVEAU
Ornamento & Curvas

Florais, volutas, arabescos.
A natureza como modelo.
A decoracao como valor.

❧ ❦ ❧
DEPOIS — DE STIJL

1917: Mondrian e van Doesburg fundam De Stijl em Leiden, Holanda. A missao: eliminar tudo que e individual e particular, alcancando o universal. A grade preta substitui a curva ornamental. A cor primaria substitui a paleta romantica.