v0.2 — REWORK

FILHO DE VIDRACEIRO. ARTISTA NA INTERNET.

Sistema visual de um creator que vive na linha entre arte e produção de conteúdo. Grotesco, direto, anti-corporativo. Pra quem fala como gente, não como marca.

↓ Scroll
01 / MARCA

Logotipo

Wordmark em Archivo Black + bloco preto sólido. Sem ornamento, sem gradient. A identidade é o peso da tipografia.

02 / COR

Paleta

Preto/branco sólido como base. Laranja vibrante = cor da marca + CTA. Lima ácido = pop secundário, alto contraste, feature destacada.

Primary
0
50
100
200
300
400
500
700
900
Orange — cor da marca
50
100
300
500
600
700
900
Acid — pop secundário
50
100
300
500
700
900
03 / TIPOGRAFIA

Escala

Archivo Black (display, pôster, MAIÚSCULAS) + Space Grotesk (UI, body, todos os pesos). Mono de sistema pra metadados. Sem serif. Sem ornamento.

Display 5xl
--fdv-text-5xl
VIRAL
Display 4xl
--fdv-text-4xl
FILHO DE VIDRACEIRO
Display 3xl
--fdv-text-3xl
ARTISTA NA INTERNET
Display 2xl
--fdv-text-2xl
Direto da fábrica de conteúdo
Body xl
--fdv-text-xl
Lead — abre parágrafos com peso.
Body lg
--fdv-text-lg
Subhead que sustenta a leitura.
Body base
--fdv-text-base
Texto corrente do site, descrições e cards.
Body sm
--fdv-text-sm
Apoio, captions, legendas.
Mono xs
--fdv-text-xs
01 / 02 / 03 — METADADOS
04 / VOZ

Tom da marca

Como o Fi escreve, fala e responde. Funciona em legenda, vídeo e DM.

FALA COMO GENTE.
NÃO COMO MARCA.
  • → Direto. Frase curta antes da longa.
  • → Sem jargão. Nada de "alavancar", "potencializar", "delivery".
  • → Honesto. Mostra processo, não só resultado.
  • → Brasileiro. Gíria quando faz sentido. Sem forçar.
05 / COMPONENTES

Botões

Borda preta 2px + sombra hard. Ao apertar, o botão se desloca pra dentro da sombra (efeito mecânico). Cinco variantes de hierarquia.

.fdv-btn + -primary | -vibrant | -acid | -secondary | -ghost
06 / COMPONENTES

Inputs

Borda 2px sólida. Focus = sombra hard aparece (sem ring suave).

07 / COMPONENTES

Cards & badges

Três variantes de card: claro, dark, acid. Badge em mono uppercase, cara de etiqueta de zine.

Toda quarta

Vídeo no YouTube

Ensaio em vídeo, formato longo, profundidade que feed nenhum entrega.

Drop limitado

Workshop ao vivo

Encontros fechados pra quem quer destravar processo de conteúdo. Vagas em conta.

Toda sexta

Newsletter

Texto direto na caixa de entrada. Bastidor + recomendação + 1 pergunta boa.

DefaultOrangeAcidOutlineSuccessWarningError
08 / TOKENS

Espaçamento

Escala base-4. Sempre múltiplo dela em padding, gap e margin.

1
4px--fdv-space-1
2
8px--fdv-space-2
3
12px--fdv-space-3
4
16px--fdv-space-4
6
24px--fdv-space-6
8
32px--fdv-space-8
12
48px--fdv-space-12
16
64px--fdv-space-16
24
96px--fdv-space-24
09 / TOKENS

Radius

Bem reto. md = 4px. lg = 8px. Sem cantos moles — moldura de pôster.

sm
2px
md
4px
lg
8px
full
9999px
10 / TOKENS

Sombras

Hard shadow. Preto sólido, sem blur, deslocado em x e y. Estética de pôster, não de iOS.

sm
--fdv-shadow-sm
md
--fdv-shadow-md
lg
--fdv-shadow-lg