farpa.ai — Brand Guide

Logotipo

Wordmark + Símbolo geométrico inspirado em fragmentos cortantes

farpa.ai

Fundo escuro — principal

farpa.ai

Fundo claro — Ivory

farpa.ai

Tema Midnight

Símbolo — uso standalone

Paleta de cores

Tokens primários — uso em todos os temas via CSS variables

Farpa Green

--accent · #00ff88

Corte Cyan

--accent-2 · #00e5ff

Purple

--accent-3 · #b57aff

Gold

--accent-gold · #ffd764

Urgente Red

--accent-danger · #ff3b3b

Warn Amber

--accent-warn · #ffb800

Void

--bg-base · #0a0a0a

Graphite

--bg-layer2 · #1e1e1e

      Gradiente principal: linear-gradient(90deg, #00ff88, #00e5ff)

      Gradiente Pro: linear-gradient(135deg, #ffd764, #ffb800)

      Neon glow: 0 0 32px rgba(0,255,136,0.18)

Tipografia

Space Grotesk (display/body) + DM Mono (labels/código)

Display / Hero — Space Grotesk 900 · clamp(48px, 7vw, 88px)

A notícia que importa.

Heading H1 — Space Grotesk 900 · 36–52px

Biblioteca de IA Generativa

Heading H2 — Space Grotesk 900 · 24–32px

Fundamentos de Machine Learning

Body — Space Grotesk 400 · 15–17px · line-height 1.65–1.8

O farpa.ai monitora centenas de fontes, extrai os fragmentos que realmente cortam e entrega insights acionáveis antes que o mercado perceba. Curadoria com inteligência artificial para quem não tem tempo de perder.

Mono / Label — DM Mono 400–500 · 9–12px · letter-spacing 1.5–3px

CURADORIA · AO VIVO · 1.200+ FONTES

Código — DM Mono · 13px

--accent: #00ff88; /* primary brand color */

Temas

3 temas persistidos em localStorage('farpa_theme')

VOID · DEFAULT

Foco · Escuro

Fundo preto profundo. Texto quase branco. Acento verde neon. Para sessões de leitura intensa e ambientes com pouca luz.

IVORY · LIGHT

Leitura · Claro

Tons de marfim. Acento verde sóbrio. Ideal para uso diurno e contextos editoriais. Máximo conforto de leitura.

MIDNIGHT · BLUE

Tech · Azul

Azul profundo. Acento azul-elétrico. Estética de dashboard de trading. Senso de urgência e tecnologia.

Componentes

Botões, badges, inputs e cards reutilizáveis

Botões

Badges e Tags

ao vivo novo urgente exclusivo pro ⭐ pro

Input

Espaçamento

Grid de 4px — sistema de espaçamento consistente

4px — --space-xs · gaps mínimos, bordas internas

8px — --space-sm · gap entre ícone e texto, dot badges

12px — --space-md · padding de cards menores

16px — --space-lg · gap entre elementos de lista

24px — --space-xl · padding interno de cards

32px — --space-2xl · padding de página mobile

48px — --space-3xl · seções e gaps de layout

80px — --space-4xl · padding de seção hero

Border Radius

Cantos padronizados para consistência visual

--r-xs
4px

--r-sm
6px

--r-md
10px

--r-lg
14px

--r-xl
20px

--r-pill
999px

Do & Don't

Princípios de uso da identidade visual

✓ Faça

Use sempre o Void (escuro) ou Ivory (claro) como fundo base
Aplique o verde #00ff88 apenas em elementos de destaque
Mantenha hierarquia tipográfica: Space Grotesk para títulos, DM Mono para labels
Use CSS variables — nunca hardcode os valores de cor
Respeite o espaçamento mínimo de 32px nas laterais em mobile
Sempre inclua estados de hover e foco nos componentes interativos

✗ Não faça

Não use o logotipo sobre fundos que não sejam void, ivory ou midnight
Não distorça o símbolo geométrico — mantenha proporções originais
Não use gradientes além dos definidos no design system
Não misture fontes de terceiros — somente Space Grotesk e DM Mono
Não use vermelho (#ff3b3b) fora de contextos de urgência ou erro
Não remova a sombra de glow dos elementos com acento neon

Design Tokens

Referência completa de variáveis CSS usadas no sistema

Token	Valor	Uso
--accent	#00ff88	Cor primária da marca — botões, destaques
--accent-2	#00e5ff	Cyan — tags "corte", elementos secundários
--accent-3	#b57aff	Purple — Pro, análises, glossário
--accent-gold	#ffd764	Dourado — plano Pro, badges premium
--accent-danger	#ff3b3b	Vermelho — urgente, erros, alertas
--accent-warn	#ffb800	Âmbar — avisos, módulos avançados
--bg-base	#0a0a0a	Fundo principal (Void)
--bg-layer1	#141414	Sidebar background
--bg-layer2	#1e1e1e	Cards e superfícies elevadas
--text-1	#f0f0ef	Texto primário — headings e labels
--text-2	rgba(240,240,239,.88)	Texto body — parágrafos
--text-3	rgba(240,240,239,.68)	Texto secundário — meta info
--text-4	rgba(240,240,239,.44)	Texto hint — placeholders
--border-lo	rgba(255,255,255,.08)	Bordas sutis — separadores
--border-md	rgba(255,255,255,.14)	Bordas de cards e inputs
--border-hi	rgba(255,255,255,.26)	Bordas em hover/focus
--font-head	'Space Grotesk'	Display e body text
--font-mono	'DM Mono'	Labels, code, meta info

farpa.ai Brand Guide