Design System v2.0 · Built by atelier

O cockpit visual.
Codificado.

Tokens reais extraídos da LP em produção. Componentes funcionais ao vivo. Patterns absorvidos de Lumina, Flux Motion, Volta EV e Glass Green Effect — combinados na densidade do Furion.

12 seções obrigatórias · 30+ componentes ao vivo · 27 critérios falsificáveis · WCAG AA
▾ scroll · hold ` for grid · try konami
02Brand Identity

A marca em uma frase.

Furion AI é o cockpit do criador digital. Mago + Rebelde. Dark premium com calor de event horizon — buraco negro com sol pulsando dentro. Não-minimalista por preguiça; denso por utilidade.

Identidade

Furion AI

Tagline: "Um único login. Todas as IAs premium."

Arquétipo: Mago + Rebelde
Mood: Dark Premium · Event Horizon
Tom: Confiante, direto, provocativo
Pronome: "Você" sempre — nunca "tu"
Missão visual

O cockpit do criador.

Cada interface remete a um cockpit — denso de informação útil, escuro pra fazer destaque importar, com calor laranja na hora certa.

Referências: Linear (densidade), Stripe (clareza), Vercel Geist (motion), arOS (result-first), Figma (paleta dark mature).

Empresa

Bilhon

Tiago Finch (CEO, 3.5M+ seguidores) e Diego Monet (COO).

$10K+/mês em APIs de IA
Centenas de M em resultados marketing
Ferramenta interna antes de virar produto
Não-negociáveis

Anti-padrões

— Sem ChatGPT-feel (paleta azul/cinza chata)
— Sem fontes genéricas em headlines (Inter base sozinho)
— Sem mockups estáticos — tudo ao vivo
— Sem emoji em qualquer asset Furion
— Sem fold negativo ("você sofre porque…")
— Sem promessa vaga ("revolucionário")
04Color System

Pure black + Event Horizon orange
+ 2 semânticas raras.

Paleta extraída do CSS de produção: #EA551F primary · #60FF8A success (lime bright) · #5BBED9 info (cyan). Todas com 3 layers (text, border 20%, bg 5%).

Accent · Event Horizon

Primary
#EA551F · 234,85,31
--accent
Deep
#E00700 · 224,7,0
--accent-deep
Mid
#FF4800 · 255,72,0
--accent-mid
Bright
#FF3C00 · 255,60,0
--accent-bright
Amber
#FF9C08 · 255,156,8
--accent-amber

Semantic (extraídos do site)

Success · Lime
#60FF8A
--success
Info · Cyan
#5BBED9
--info
Warning
#FBBF24
--warning
Danger
#F87171
--danger

Backgrounds & surfaces

Base
#000000
--bg-base
Elevated
#050505
--bg-elevated
Glass
rgba(34,34,34,0.8)
--bg-glass
Card
rgba(255,255,255,0.04)
--bg-card

Text · 4 níveis (real)

Primary
--text · #FFFFFF
Secondary
--text-secondary · 65%
Tertiary
--text-tertiary · 45%
Quaternary
--text-quaternary · 28%

Gradients · signature

Event Horizon
Hero · radial real do site
--grad-event-horizon-mask
Orange Bar
Pricing header · linear 84.78°
--grad-orange-bar
Metallic
Headline gradient · 296°
--grad-metallic
Orange → Amber
Logo · CTAs · accent text
--grad-orange-amber
05Typography

Inter Display
+ Manrope + Mono.

Stack extraído do CSS de produção: Inter Display (variant óptico) para headlines · Manrope para body/UI · JetBrains Mono para código. Wordmark "FURION AI" usa Linear Grotesk SemiBold (Framer-only) — fallback Space Grotesk SemiBold.

Display
Aa
Inter Display · 400-900
Headlines, hero, números grandes. Variant óptico.
Body
Aa
Manrope · 400-800
Parágrafos, UI, labels, microcopy.
Mono
Aa
JetBrains Mono · 400-600
Código, tokens, meta-info, timestamps. (Cascadia Mono fallback)

Scale · 10 níveis

display-1112px / 1.0 / -0.04em / w800Hero
Display
display-284px / 1.05 / -0.035em / w800Section title
Display 2
heading-164px / 1.05 / -0.03em / w700Page title
Heading 1
heading-248px / 1.1 / -0.025em / w700Subseção
Heading 2 — Subseção
heading-328px / 1.2 / -0.02em / w700Card title
Heading 3 — Card title
body-lg18px / 1.65 / w400 · ManropeHero sub, section desc
Body large — subhead, intro de seção, descrições importantes que precisam mais peso visual sem virar headline.
body15px / 1.5 / w400 · ManropeUI, parágrafos
Body padrão — texto de UI, parágrafos, descrições de cards. O cavalo é forte e leal, e o cavaleiro é hábil e corajoso.
caption13px / 1.5 / w500 · ManropeLabels, footnotes
Caption — labels secundários, footnotes, meta-informação interna.
overline11px / w600 / 0.18em / uppercase · JetBrains MonoSection label
overline · section label
mono13px / w500 · JetBrains MonoTokens, código inline
const router = SmartRouter.route(prompt);
06Spacing & Grid

Cadência 8px
+ 37px pills.

Base 8 com microajuste de 4px. Scale extraída do site real: 11px (badge padding) · 13px (hero gap) · 24px (mais frequente) · 54px / 72px (content / section). Border radius signature: 37px (pills), 22-24px (cards), 8-15px (UI).

Scale visual

1 · 4
2 · 8
3 · 12
3p · 13
4 · 16
5 · 20
6 · 24
8 · 32
10 · 40
12 · 48
14 · 54
16 · 64
18 · 72
24 · 96

Border Radius

4px · xs
8px · sm
12px · md
22px · xl
24px · 2xl
Pill 37px
37px · 3xl (real)

Breakpoints

TokenMin WidthDeviceContainer
sm640pxMobile landscape540px
md768pxTablet portrait720px
lg1024pxTablet landscape · laptop960px
xl1280pxDesktop · default1200px
2xl1536pxWide desktop1280px
07Iconography

Lucide. 1.5px stroke. Sempre.

Icon set oficial: Lucide (lucide.dev) — fork mantido do Feather. 1.5px stroke padrão. Outline-only — nunca preencher. Sizes: 14/18/22/32px. Sem emojis em nenhum asset Furion (regra inegociável).

Sizes

14px
18px
22px
32px

Essentials sample

zap
check
x
search
plus
chevron
refresh
settings

+ ~1500 ícones em lucide.dev

08Components

30+ componentes funcionais.

Cada componente renderiza HTML+CSS+JS ao vivo neste documento. Todos usam tokens reais. Estados (default/hover/active/focus/disabled) demonstrados onde aplicável.

Buttons

5 variants × 3 sizes × 5 states. Pill 37px. Primary com green-glow signature. Accent com orange multi-shadow.

variants

Inputs · Textarea · Select

form controls

Checkbox · Radio · Switch

selection controls

Badges

5 variants
Default Beta Online Info Aviso Crítico

Alerts

Deploy concluído
Furion DS v2 publicado em ds.furion.ai. Lighthouse 96/100.
Furion Power disponível
Modelo proprietário ativo. Smart Router já está usando automaticamente em tarefas BR.
Créditos baixos
142 de 3.500 créditos restantes. Upgrade Pro = +128% de capacidade.
Smart Router timeout
Modelo não respondeu em 30s. Tentando alternativa via fallback...

Glass Cards · 3D hover + gradient border

Pattern signature do Furion. Hover ativa preserve-3d + rotateX/Y + multi-shadow glow + border gradient via mask-composite: xor.

Smart Router

A IA que escolhe a IA certa para cada tarefa. Transparência total: mostra qual modelo foi usado.

Canvas

Espaço de trabalho visual. Não é chat. Você vê o projeto inteiro tomando forma.

Boosters

50+ templates prontos. Resultado profissional em 1 clique — sem prompt, sem erro.

Pricing · 3 tiers + featured glow border

Starter
Para profissionais individuais
R$97/mês
3.500 créditos · ou R$1.164/ano
  • 11 IAs + Smart Router
  • Canvas visual completo
  • 50+ Boosters prontos
  • Comunidade VIP (90 dias)
Recomendado
Pro
Para empresas com volume
R$197/mês
8.000 créditos · ou R$2.364/ano
  • Tudo do Starter
  • Masterclass com liderança
  • Onboarding guiado
  • Fila prioritária
Agency
Para agências e times
R$497/mês
20.000 créditos · ou R$5.964/ano
  • Tudo do Pro
  • +1 seat (2 usuários)
  • Pool de créditos
  • Sessão 1:1 com COO

Tabs · Accordion

O Smart Router analisa cada pedido e aciona automaticamente o modelo mais indicado — sem que você precise escolher. Total transparência: você vê qual foi usado e por quê.

Analisa cada prompt em milissegundos e roteia para o modelo melhor — Claude pra texto, GPT pra dados, Gemini pra vídeo. Você vê qual modelo foi usado em tempo real.

Sim. Override manual disponível. Mas Smart Router em 95% dos casos faz escolha melhor que humano.

Tooltip · Kbd · Code · Progress · Skeleton · Avatar · Toast

misc
Tooltip premium Pressione ⌘ + K para abrir o Canvas Use --accent para CTAs principais
Créditos do mês2.847 / 3.500
Smart Router · processandolive
L
D
F
A
B
C
+12
Projeto salvo
Auto-save em 1.2s · 3 versões no histórico

Table · 11 IAs Furion

ProviderModeloEspecialidadeStatus
AnthropicClaude 4 SonnetTexto persuasivo, narrativaOnline
AnthropicClaude 3.7Análise de documentos longosOnline
OpenAIGPT-4oMultimodal · texto + imagemOnline
GoogleGemini 2.5 ProVídeo + contexto longoOnline
xAIGrokTempo real · tendênciasSlow
BilhonFurion PowerMercado BR · exclusivoBeta
09Motion

Movimento com propósito.
Nunca decoração.

3 easing curves padronizadas + 5 duration tokens + 6 patterns nomeados. prefers-reduced-motion respeitado em todo o DS (cursor trail oculto + transitions colapsadas).

Easing curves

--ease-out
cubic-bezier(0.16, 1, 0.3, 1)

Decel forte · entradas, hover, drawers

--ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)

Padrão · transitions gerais, accordions

--ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)

Snap playful · switches, badges, surprises

Durations

--d-instant · 100ms --d-fast · 200ms --d-normal · 300ms --d-slow · 500ms --d-slower · 800ms --d-slowest · 1200ms

Animation patterns

sun-pulse

Hero radial sun pulsa 6s ease-in-out. Scale 1→1.08 + opacity 0.85→1.

particle-rise

9 partículas sobem do bottom com staggered delays (0.1s → 4.4s).

beam-fall

3 beams verticais cinematográficos. 7s loop. Stagger 0/2.5/4.8s.

3D lift hover

Glass cards: translateY(-6px) rotateX(2deg) rotateY(-1.5deg) + multi-shadow glow + border XOR.

logo-pulse

Logo hero: drop-shadow primary→amber + scale 1→1.04 loop 5s.

badge-pulse

Dot do badge: scale + opacity 2s loop. Indicador "live" sutil.

shimmer

Progress bar com shimmer linear 2s. Estado "processando".

skeleton-shimmer

Loading skeleton com gradient shimmer 1.5s. Placeholder pré-load.

cue-bounce

Hero scroll cue: translate 0→6px loop 2.4s. Sinaliza "scrolla pra ver mais".

10Voice & Tone

Confiante. Direto.
Sem rodeio.

Voice DNA Tiago Finch — punch lines, anti-jargon, "você" sempre. Tom modula com contexto: institucional (sofisticado) · vendas (provocativo) · dashboard (técnico).

Faça
"Você" sempre (formal mas direto)
Punch lines curtas: "Ilimitado vende. Qualidade entrega."
"Outlier" para audiência avançada
Frase 1 = result-first ("R$26K em 30 dias")
Microcopy direta: "Comece agora · 7 dias grátis"
Números reais sempre que possível
Não Faça
NUNCA "tu" (mesmo PT-BR informal)
NUNCA jargão: VSL, funil, DR, PAS, BAB, AIDA
NUNCA "revolucionário", "disruptivo", "game-changer"
NUNCA fold negativo ("você sofre porque...")
NUNCA emoji em qualquer asset
NUNCA promessa vaga ("vai mudar sua vida")

Microcopy library

TokenCopyContexto
cta-primary"Começar agora — a partir de R$97/mês"Hero · final CTA · pricing
cta-secondary"Ver demonstração →"Hero · institucional
guarantee-line"7 dias para testar. Se não gostar, devolvemos tudo."Pricing · footer
tagline"Um único login. Todas as IAs premium."Hero · footer · email signature
tese-central"O Furion não é ilimitado. E você vai nos agradecer por isso."PVL fold anti-ilimitado
credit-empty"Acabaram. Compre mais ou faça upgrade."Estado vazio créditos
error-router"Modelo demorou demais. Tentando alternativa."Erro Smart Router
11Accessibility

WCAG 2.1 AA. Sem discussão.

Premium não é estética sozinha. Premium é todo mundo conseguir usar. Compromisso AA mínimo em todas as interfaces Furion.

Color Contrast

Text primary (#FFF) sobre #000 → 21:1 (AAA)
Secondary (65% white) sobre #000 → 13.6:1 (AAA)
Accent (#EA551F) sobre #000 → 4.7:1 (AA)
Success (#60FF8A) sobre #000 → 15.8:1 (AAA)
Info (#5BBED9) sobre #000 → 9.4:1 (AAA)
Danger (#F87171) sobre #000 → 6.8:1 (AAA)

Focus Management

Outline laranja 2px com offset 3px em :focus-visible (não default browser).

Keyboard Navigation

Tab · próximo · Shift+Tab · anterior
Enter · ativar botão/link
Esc · fechar modal/dropdown
↑↓ · navegar lista/menu
/ · focar busca

Reduced Motion

@media (prefers-reduced-motion: reduce) desativa animations + cursor trail. Body cursor volta ao default.

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body { cursor: auto; }
  .cursor-trail { display: none !important; }
}
12Usage

5 cenários. Correto vs Errado.

Onde os tokens, componentes e voice se aplicam — e onde traem o DS.

1. Landing Page

Faça
Hero com Event Horizon real (mask radial) · CTAs primary green-glow · grade 12-21 folds · footer institucional · pill 37px
Errado
Background azul/light · CTAs em outras cores · sem garantia visível · radius 4px em pills · gradient genérico no hero

2. Dashboard / App SaaS

Faça
Sidebar nav fixa · cards densos com glass-morphism · accent orange APENAS em CTAs/highlights · mono font para meta-info · cursor trail em desktop
Errado
Cards genéricos sem inset shadow · accent orange em todo lugar · texto justificado · spacing fora do base-8 · emoji em UI

3. Criativos Estáticos (Ads)

Faça
Logo Furion sempre presente · headline com gradient metallic OU orange-amber · CTA primary visível · margem 8% mínima · 1 ideia por criativo
Errado
Sem logo · texto sobre imagem sem overlay · 4+ fontes diferentes · CTAs sem urgência · 3+ mensagens competindo

4. Email Marketing

Faça
Background dark fallback escuro · botão accent inline · max-width 600px · texto plain backup · imagem hospedada CDN
Errado
Background light puro · CSS custom properties (sem suporte client) · animations · webfonts (não-suportadas em Outlook)

5. Apresentação / Slides

Faça
Slides 16:9 · 1 ideia por slide · numerais grandes em accent · text-primary para messaging · max 3 bullets
Errado
Bullets > 3 · texto < 18px · stock photos genéricas · pie charts coloridos arbitrariamente
∞Tokens

Machine-readable. Plug & play.

Todos os tokens em 4 formatos: CSS variables (este arquivo) · JSON (`packages/design-tokens/tokens.json`) · Tailwind preset (`tailwind.config.js`) · Figma variables (export coming).

CSS Variables

View source desta página. Todos os tokens em :root dentro de @layer tokens.

JSON

Disponível em packages/design-tokens/tokens.json no monorepo.

Tailwind Preset

Import como preset em tailwind.config.js: presets: [furionPreset].

★Easter Eggs

Detalhes que ninguém pediu.
Mas todo mundo nota.

Premium é o que você não vê — até notar e sorrir. 7 easter eggs ativos.

1 · Cursor trail · 18 segmentos

Snake-physics: head chases mouse, segmentos seguem em cadeia com decay. Mexe o mouse pra ver. Desativado em mobile e em prefers-reduced-motion.

2 · Grid overlay · hold `

Segura ` (acento grave) e o overlay de grid 8px aparece em laranja sutil. Solta e some.

3 · Konami code

↑ ↑ ↓ ↓ ← → ← → B A ativa o modo "rebel" — toda paleta inverte por 5s.

4 · Scroll progress

Barra fina laranja no topo cresce conforme scrolla. Gradient amber → primary → deep com glow.

5 · Logo glow breath

Logo do hero pulsa entre primary e amber em loop 5s + scale sutil. Hipnótico mas discreto.

6 · Particles + beams hero

9 partículas sobem com staggered delays + 3 beams cinematográficos verticais. Volta ao topo da página pra ver.

7 · Console branding

Abre o DevTools console (F12) e veja a mensagem ASCII ART do Furion + dica do konami code.