Expan.Web · topo Ver a home ↗
Sistema de design v1.0 · julho 2026

Expan.Web

Onde a tecnologia encontra o calor.

Um sistema construído sobre o kit de marca da Expan.Web — Laranja Solar, Tinta, Space Grotesk — estendido com uma linguagem de luz e movimento própria: grão de filme, blend de diferença, cascata por palavra, transição em pixels e cursor magnético. Tudo o que segue é token, não decoração.

01 · Marca

O lockup e as regras que vêm do kit.

Estes são os arquivos oficiais, em vetor. O wordmark já vem em curvas e o símbolo carrega o gradiente diagonal 45°, com o ponto sempre em Laranja Solar. Nada aqui é redesenhado: cada peça abaixo é o SVG entregue.

Expan.Web — lockup em cor para fundo claro cor-fundo-claro · principal
Expan.Web — lockup em cor para fundo escuro cor-fundo-escuro
Expan.Web — lockup monocromático preto mono-preto · 1 cor / 100% K
Expan.Web — lockup monocromático branco mono-branco
Expan.Web — lockup empilhado empilhado · formatos quadrados
Expan.Web — símbolo em cor símbolo · perfil, favicon, adesivo
Expan.Web — símbolo monocromático preto símbolo mono-preto
Expan.Web — símbolo monocromático branco símbolo mono-branco
Área de proteção · metade da altura do símbolo nos 4 lados
Expan.Web — lockup com área de proteção
Reprodução
  • Redução mínima do símbolo: 8 mm
  • Largura mínima do lockup: 36 mm
  • Área de proteção: metade da altura do símbolo, nos 4 lados
Nunca
  • Distorcer, rotacionar ou trocar as cores
  • Usar o gradiente em 1 cor — nesse caso, mono
  • Fundo escuro frio; o fundo é papel claro quente
Arquivos
  • SVG vetorial (preferir) e PNG 4000 px transparente
  • Versão empilhada para formatos quadrados
  • Símbolo isolado para perfil, favicon e adesivo

Arquivos em uso nesta página, em brand/: lockup cor (fundo claro e escuro), lockup mono (preto e branco), lockup empilhado e símbolo nas três versões. Todos SVG, sempre com uma dimensão fixa e a outra automática — a proporção 4,026:1 do lockup e 1:1 do símbolo nunca é forçada.

02 · Cor

Calor no primeiro plano. Tinta no fundo.

As seis cores do kit são lei. O que eu acrescentei está marcado como extensão de tela: uma rampa de terra para superfícies escuras e um espectro de sinal restrito a dados e tecnologia.

Laranja Solar #EE7A2E C0 M49 Y81 K7 Assinatura, “.web”, ponto do símbolo
Cobre #C85A1E C0 M55 Y85 K22 Gradiente do símbolo, detalhes
Âmbar Queimado #8A3E14 C0 M55 Y86 K46 Extremo escuro do gradiente
Brilho Quente #FFE7C9 C0 M9 Y21 K0 Extremo claro; texto de destaque no escuro
Tinta #241A13 C0 M28 Y47 K86 Wordmark “expan”, textos no claro
Branco Luminoso #FBF7F2 C0 M2 Y4 K2 Fundo claro preferido (papel)
Gradiente do símbolo · 45° #FFE7C9 → #EE7A2E → #8A3E14

É o único gradiente da marca. Em tela pode virar brilho (raio de luz radial atrás de um elemento) mas nunca muda de ângulo nem ganha cor de fora do trio.

Extensão de tela · rampa de terra

void #0E0A07 · base #17110C · tinta #241A13 · elev #33251A · linha #4A3524

Todas puxadas para o quente da Tinta. Nenhum cinza neutro entra no sistema: cinza esfria a marca.

Extensão de tela · espectro de sinal

plasma · âmbar · lima · água · violeta

Só para dado, status e stack de tecnologia — e no máximo dois por tela. Fora daí, quem fala é o Laranja Solar.

60/100

Terra. O fundo é quase todo #0E0A07 ou #17110C.

30/100

Papel e Brilho Quente: todo o texto vive aqui.

10/100

Laranja Solar. Só onde você quer o dedo da pessoa.

Contraste

Laranja Solar sobre terra passa em texto grande e interface, não em parágrafo. Corpo de texto usa papel a 60–66%.

03 · Tipografia

Três vozes. Nenhuma sobra.

Space Grotesk SemiBold 600 · display e títulos · −0.035em

Presença digital que expande

ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789 · ÁÂÃÇÉÊÍÓÔÕÚ

Figtree Regular 400 / SemiBold 600 · corpo

Site de alta conversão, tráfego estratégico e automação de atendimento: uma estrutura completa, montada sob medida. Pra empresário que não tem tempo a perder.

Quem monta e responde sou eu, Matheus. Sem agência no meio, sem fila de tickets.

Space Mono Regular 400 · etiqueta e dado · caixa-alta, .24em

01 · Pilares de expansão

Dia 1 → Dia 2 → Dia 3 · +55 19 97179-8400 · Lindóia SP

Papel
Tamanho
Altura
Família
Display XL
clamp 56–190
0.84
Grotesk 600
Display L
clamp 32–66
0.96
Grotesk 600
Título M
24
1.18
Grotesk 600
Corpo L
19
1.6
Figtree 400
Corpo
17
1.62
Figtree 400
Apoio
14
1.55
Figtree 400
Etiqueta
11
1.0
Mono 400 · .24em
04 · Luz

Aqui não tem sombra. Tem luz acesa.

Num fundo de terra, sombra não existe — o que separa um plano do outro é emissão. Quatro degraus de brilho, uma borda de luz e um véu de grão.

glow-sm

Campo em repouso, chip, tag.

glow-md

Card em hover, botão primário.

glow-lg

Elemento em foco, modal, popover.

glow-xl

Um por tela. O CTA que decide.

Borda de luz

Todo painel elevado ganha inset 0 1px 0 rgba(255,231,201,.14) — a aresta de cima pega a luz, como metal.

Bloom radial

Um raio de luz atrás do conteúdo, com blur(14px) e respiro de 9s.

Grão de filme

Canvas fixo, 10 quadros pré-assados, 25 fps, densidade 0.7, opacidade 0.06, mix-blend-mode: screen. Desliga sozinho abaixo de 768 px.

05 · Movimento

Catorze técnicas, com número em cima.

Cada demonstração abaixo é interativa e roda com os valores reais do token — duração, ease e stagger. Aperte tudo.

Token
Valor
dur-instant
240ms — troca de estado, hover
dur-fast
280ms — pixel cobrindo, cursor
dur-base
560ms — item de menu, fade
dur-slow
820ms — reveal, cortina abrindo
dur-cinema
1200ms — abertura, scramble
ease-out
cubic-bezier(.33,1,.68,1) · power3.out
ease-in
power2.in — só para saída
ease-inout
power1.inOut — cortina
stagger-tight
34ms por palavra
stagger-base
50ms por item de lista
stagger-loose
125ms por bloco irmão
stagger-line
250ms por linha de título
grid-pixel
9 × 17, do centro, 22ms
01 · Fade in / out560ms
02 · Slide in / out820ms
↑ TOPO DIREITA → ← ESQUERDA BASE ↓
03 · Cascata por palavra34ms/palavra

Sua presença, expandida.

04 · Lettering em corespectro

gradiente varrendo

05 · Scramble1200ms

automação · tráfego · marca

06 · Transição em pixels9×17 · 22ms
página seguinte
07 · Cortina450 / 650ms
scaleX na origem
08 · Onda bezierscrub · curva .7

Preenche conforme a rolagem: canvas com bezierCurveTo em 0.25/0.75 e quickTo de 300ms.

09 · Blend de diferençadifference
EXPANSÃO

Só sobre foto, vídeo ou base neutra: o texto se inverte sozinho e dispensa scrim. Sobre o laranja da marca, não — a inversão do laranja é azul, e azul não existe aqui.

10 · Cursor magnéticolerp /6
Passe o mouse aqui: o ponto abre num halo 4×,
anel de Brilho Quente com miolo translúcido.

Interpolação de 1/6 por quadro. No papel claro o estado ampliado escurece em multiply; no escuro ele vira anel, porque disco cheio apagaria o texto por baixo.

11 · Reveal na rolagem125ms · irmãos

IntersectionObserver a 20%, translateY(28px) + opacidade, atraso de 125ms × índice, uma vez só.

12 · Flutuação paralaxescrub 1.5

Velocidade por elemento — em página inteira, 0.10 a 0.26 da altura da janela; dentro de um painel, amplitude em px. Rotação de ±2° a ±22°, scrub de 1.5s de inércia.

13 · Marquise infinita44s linear
sites·automação·tráfego·marca· sites·automação·tráfego·marca·

Conteúdo duplicado e translate3d(-50%), com máscara nas duas pontas para não cortar palavra.

14 · Rastro de luz24 pontos · lerp .34
mexa o mouse aqui

Vinte e quatro segmentos, cada ponto perseguindo o anterior a 34% por quadro. A espessura afina da cabeça para a cauda e cai a 30% quando há link sob o dedo.

06 · Componentes

As peças, com todos os estados.

Botões
Etiquetas e chips de tecnologia
Solar Brilho Contorno No ar WhatsApp API Meta Ads Urgente
Campos
Cards
01

Presença & Autoridade

Identidade e site sob medida que fazem a sua marca parecer a maior do mercado.

IdentidadeSite
Card de case

Slot de imagem

Arraste um print aqui e ele fica salvo. É onde entram os seus projetos.

Depoimento

Espaço reservado para a fala do cliente, na íntegra e sem edição.

Nome · Negócio
Cidade
Número
3dias

Do briefing à entrega dos arquivos no seu nome.

Acordeão · FAQ

Aqui não tem tabela. O orçamento é montado depois da conversa de diagnóstico, em cima do que o seu negócio precisa resolver. Não é o serviço mais barato da região, porque não é uma página avulsa: é a estrutura inteira, entregue em 3 dias e no seu nome.

Não. O primeiro layout da sua marca e do seu site é montado antes de qualquer contrato e sem custo. O risco é meu, não seu.

Trilha de etapas
Dia 1

Layout já montado e conversa de diagnóstico.

Dia 2

Ajuste do que saiu da conversa, aprovação e no ar.

Dia 3

Entrega de todos os arquivos, sem nada preso comigo.