Noite, luz
O sistema do site da NEXYO: fundamentos, componentes e padrões. Os valores saem dos arquivos do projeto no build, e os componentes são os mesmos da home.
Um cata-vento e um nome.
O símbolo é o Cata-vento Fino 85%. O nome é Nexyo com o x cheio e os cantos retos, e o Hub vem em contorno da Hando: a Hando nunca entra como fonte no site. Tudo é desenhado inline em currentColor, então a marca segue a cor do texto no claro e no escuro.
A assinatura principal: rodapé, capa, apresentação.
Onde a largura aperta ou o Hub já está dito por perto.
Formato quadrado: avatar, selo, crachá.
Aço, gelo e osso sobre azul claro. Vai em fundo claro (luz, bruma).
Vidro com brilho gelo sobre azul fundo. Vai em fundo escuro (abismo, noite).
O símbolo em vidro, em loop lento de câmera. A versão clara mora em fundo claro e a escura em fundo escuro, nunca trocadas. Os três módulos e os vãos entre eles não se deformam.
Favicon, ícone do app e a navegação recolhida.
Metade da altura do símbolo em volta de toda a assinatura. Nada entra nessa faixa.
- Horizontal com Hub
- 24px
- Horizontal sem Hub
- 20px
- Empilhada
- 48px
- Símbolo
- 16px
Altura na tela. Abaixo disso o Hub e as pás do cata-vento empapam.
Claro no meio, escuro nas pontas.
Dois tons claros que se alternam no meio da página e um escuro azul que abre e fecha. No claro o texto é noite, aço e ardósia; no escuro, osso, névoa e fumaça. Destaque no máximo 2 toques por tela, sempre na versão do lado em que está. Cada pilar tem a sua cor: Marca ametista, Presença pinho, Conexão laranja.
- luz
- #F7F7F4
Fundo claro quente. Alterna com a bruma.
- bruma
- #EBF0F2
Fundo claro frio. Nunca duas faixas seguidas no mesmo tom.
- noite
- #0A111C
Título e texto principal no claro.
- aco
- #1E3247
Texto forte de apoio no claro.
- ardosia
- #4A5868
Texto secundário no claro: resumo, nota, legenda.
- ametista-escura
- #5E56A0
Destaque pequeno no claro: número, foco, uma palavra.
- pinho-escuro
- #4C7563
Segundo destaque no claro, com a mesma regra.
- laranja-escuro
- #9C5730
Terceiro destaque no claro: o pilar Conexão em texto pequeno.
- noite
- 17,6 : 1
- aco
- 12,2 : 1
- ardosia
- 6,8 : 1
- ametista-escura
- 5,9 : 1
- pinho-escuro
- 4,9 : 1
- laranja-escuro
- 5,1 : 1
- fumaca
- 4,1 : 1
- noite
- 16,5 : 1
- aco
- 11,4 : 1
- ardosia
- 6,3 : 1
- ametista-escura
- 5,5 : 1
- pinho-escuro
- 4,5 : 1
- laranja-escuro
- 4,8 : 1
- fumaca
- 3,8 : 1
Fumaça sobre o claro fica abaixo de 4,5 para 1: só entra em texto de 18px para cima. Linha no claro é noite com alfa, 8% para divisória e 14% para borda de controle.
- abismo
- #04060A
Fundo escuro de base. Azul quase preto, nunca preto puro.
- noite
- #0A111C
Superfície: ilha escura, card elevado.
- petroleo
- #12202F
Superfície mais alta e fundo de ícone.
- aco
- #1E3247
Borda e divisória no escuro.
- osso
- #F1F2EF
Texto principal no escuro.
- nevoa
- #A5B0BD
Texto de apoio no escuro.
- fumaca
- #6E7A89
Metadado no escuro. No claro só a partir de 18px.
- gelo
- #D6E2E8
Gradiente metálico do título e o vidro.
- ametista
- #8E86C4
Destaque no escuro: luz, foco, número ou uma palavra.
- pinho
- #6F9A86
Segundo destaque no escuro. Cor do pilar Presença.
- laranja
- #F0A066
Terceiro destaque no escuro. Cor do pilar Conexão (Marca = ametista).
- laranja-luz
- #3A2418
Fundo de selo laranja no escuro.
- osso sobre abismo
- 18,0 : 1
- nevoa sobre abismo
- 9,2 : 1
- fumaca sobre abismo
- 4,6 : 1
- ametista sobre abismo
- 6,1 : 1
- pinho sobre abismo
- 6,4 : 1
- laranja sobre abismo
- 9,6 : 1
O escuro é sempre azul noite. Branco puro só como texto sobre o escuro.
O corte é seco. O brilho de fundo fica na mesma família dos dois lados: 20% no claro, 28% no escuro.
Erro e situação carregam ícone e palavra. Destaque não vira cor de estado.
Geist, e nove degraus.
Duas famílias, as duas servidas pelo projeto. Tamanho cru no className reprova no gate: a hierarquia sai da escala, não de um número escolhido na hora.
- text-display
- 40px
- text-subhead
- 34px
- text-pullquote
- 28px
- text-post-title
- 26px
- text-body
- 18px
- text-eyebrow
- 12px
Cinco degraus encolhem no telefone. O text-field fica em 16px porque o Safari do iPhone dá zoom ao focar um campo menor.
- título
- text-wrap: balance
- texto corrido
- text-wrap: pretty
- famílias
- Geist 400 e 500, Geist Mono 400
Medida em pixel, nunca em ch: o ch do CSS é a largura do algarismo zero, 45% maior que a letra média.
Medidas com nome.
Cada medida tem um trabalho, e todas moram em app/tokens.css. Seção respira 96px no desktop e 64px no telefone; dentro dela, 40px entre blocos.
- container
- 1600px · Largura máxima do conteúdo.
- gutter
- 40px · Respiro lateral em desktop. No telefone, 24px.
- cell-gap
- 9px · O vão entre peças de uma pilha.
- nav-h
- 46px · Altura da navegação.
- medida-nota
- 448px · Medida do texto de 14px: cerca de 70 caracteres.
- medida-manchete
- 720px · Medida do título de 48px: cerca de 40 caracteres.
- medida-corpo
- 760px · Medida do texto de corpo de 24px, a coluna de texto do padrão de 2 colunas.
O raio vem do tipo, não do tamanho.
Sete degraus medidos na humanacademy.ai. Um card pequeno e um card largo têm o mesmo canto; seção não tem canto nenhum. Imagem não tem raio próprio: quem corta é o card.
- 2xs
- 4px
Peça interna de um card com respiro: ícone, poço de imagem.
- xs
- 8px
Peça interna pequena: tile de interface, miniatura.
- sm
- 12px
Campo de formulário e dica.
- md
- 16px
Peça interna grande de um painel.
- lg
- 20px
Todo card, de qualquer tamanho.
- xl
- 28px
Painel, modal, linha de FAQ e ilha escura.
- full
- 9999px
Todo botão, chip e pílula.
Raio interno = max(raio externo menos o respiro, 4). Vale para a peça que mora dentro de um card ou painel (ícone, poço de imagem, tile). Um card dentro de uma ilha continua card: lg. Exceção: card de mídia (imagem/3D/vídeo) aninhado usa raio próprio lg 20, mesmo quando a conta daria 2xs: um raio de 4px quebra numa peça grande. Marque com data-raio="midia".
Duas curvas, quatro durações.
Easing e duração saem de lib/motion.ts. Com movimento reduzido tudo cai para quase zero, e a peça continua legível e no mesmo lugar.
- 200ms
- 0.3s · hover, foco, troca de cor
- 360ms
- 0.36s · menu, troca de estado
- 600ms
- 0.6s · navegação encolhendo
- 700ms
- 0.7s · entrada de seção
A entrada de seção é o Reveal: opacidade de 0 a 1 e 12px de subida, com margem de -10%, uma vez só. Escalona por atraso de 80ms, nunca por duração diferente.
Renderizado fora, servido como vídeo.
As peças 3D nascem no Blender e chegam ao site como vídeo mudo em loop, com pôster. O único WebGL é a órbita do hero, carregada só no cliente e com pôster quando não há WebGL ou o movimento está reduzido.
- formato
- mp4 (H.264) e webm; mov HEVC com alfa para o Safari
- proporção
- 3:2 nos pilares, a moldura tem a mesma
- reprodução
- mudo, loop, inline, play só no cliente
- movimento reduzido
- parado no pôster
- material
- vidro e metal na paleta, sem cor fora dela
- arquivo ausente
- decidido no build: sem vídeo, só o pôster
Dois, e sempre pílula.
Sólido para a ação principal, contorno para a secundária. Um sólido por tela. O rótulo diz o que acontece ao clicar. Raio full em todo botão, de qualquer tamanho. Toda variante leva a seta, que é a única parte que se mexe.
No hover a seta sai pela direita e outra entra pela esquerda (300ms), sem glow e sem sombra. O sólido inverte em 200ms e as letras embaralham. O contorno muda só as letras e a seta. Com movimento reduzido, a seta não anda. Foco: contorno de 1px em fg, afastado 4px, igual em todo o sistema.
- altura
- 40px (seta de 28px com 5px de respiro)
- respiro lateral
- 20px à esquerda, 5px à direita da seta
- seta
- círculo de 28px, borda na cor do texto, flecha de 12px
- raio
- full
- texto
- text-button, peso 500
Um campo, e o erro sem cor.
Uma linha de classes para todo formulário do site. Campo de uma linha é pílula; a área de texto usa o raio sm. Erro se marca por borda cheia, ícone e palavra.
Marcar, escolher, ligar.
Os três usam o controle nativo escondido com sr-only: foco, toque, tecla de espaço e leitor de tela continuam sendo os do navegador, e só a aparência é nossa.
Chip e situação.
Chip é pílula, como o botão. Selecionado é inversão. Situação é ícone mais palavra, nunca uma bolinha colorida.
Um card, um canto.
Linha cheia de 1px e raio lg, sempre, do card do rodapé ao card do método. Imagem dentro dele não tem raio próprio: o card corta. Ativo inverte.
132 ícones, um traço só.
Grade de 24 e traço 1,5. Contorno, preenchido para o glifo que só existe como massa, e o ponto de ênfase onde o traço não faz pingo.
Os pilares em vidro.
A moldura do pilar é um card na proporção do render; o vídeo encosta na borda sem raio próprio. Nenhum objeto 3D é letra: a Marca é um carimbo de vidro.
Marca
- Branding
- Identidade visual
- Copywriting
Presença
- Design e desenvolvimento
- Agentes de IA
- Social media
- Vídeo
Vidro que deixa a luz passar.
O material dos botões, chips, cards e do formulário. Desfoque de 24px com saturação de 170%, tinta translúcida (8% no escuro, 55% no claro), aresta de 1px clara em cima e escura embaixo, reflexo de cima para baixo e sombra macia. No hover o reflexo segue o mouse, sem glow. Desfoque vivo só em peça pequena; container grande usa o vidro estático. Sem suporte ou com transparência reduzida, a tinta fica opaca.
- vidro
- backdrop-filter: blur(24px) saturate(170%) · botão, chip, card pequeno
- vidro-estatico
- sem backdrop-filter · formulário, FAQ, card de seção
- --vidro-tinta
- rgb(255 255 255 / .08) no escuro · / .55 no claro
- --vidro-aresta-topo / -base
- inset 1px: branco .18 em cima, preto .35 embaixo
- --vx / --vy
- posição do reflexo no hover (VidroLuz.tsx, 1 listener delegado)
- fallback
- @supports not backdrop-filter e prefers-reduced-transparency: --vidro-opaco
Duas colunas, alinhadas pelo topo.
O eyebrow fica em cima das duas colunas. O título ocupa a esquerda e o texto a direita, os dois começando na mesma linha. O texto respeita a medida de corpo, 760px, e o título quebra para acompanhar a altura dele.
- entre seções
- 144px no desktop, 96px no telefone
- eyebrow e colunas
- 24px
- coluna de texto
- 760px (medida-corpo)
- telefone
- uma coluna, título em cima do texto
O escuro abre e fecha, o claro conta.
O meio da página é claro, alternando luz e bruma, com corte seco entre faixas. No máximo uma ilha escura para cada duas faixas claras, e uma faixa escura inteira para a oferta. O gate ritmo-de-secoes confere a home a cada commit.
- 01 · Heroescuro
- 02 · Origemluz
- 03 · Marcabruma
- 04 · Presençaluz
- 05 · Conexãobruma
- 06 · Provaluz
- 07 · Ofertaescuro
- 08 · Método, com ilhabruma
- 09 · Quem somos, FAQ, conviteescuro
- claro seguido
- nunca o mesmo tom duas vezes
- ilha escura
- raio xl, recuada das bordas, 1 a cada 2 faixas claras
- corte
- seco, sem degradê
- brilho
- mesma família: 20% no claro, 28% no escuro
- navegação
- troca de tinta com a faixa embaixo
As palavras também são o design.
pt-BR direto, sem jargão, sem travessão e sem exclamação. O número vem antes do adjetivo. Duas destas regras têm gate e reprovam o commit.
| Regra | Em vez de | Escreva |
|---|---|---|
| Travessão | Uma coisa — e outra | Uma coisa, e outra |
| Promessa | O melhor retorno garantido | O que a entrega inclui, por escrito |
| Jargão | Ativação 360 de awareness | Sua marca no palco, no crachá e no estande |
O que não é negociável.
Foco visível, alvo grande, controle nativo, contraste medido nos dois lados e movimento que se desliga de verdade.
Contorno de 1px em fg, afastado 4px, declarado uma vez na folha global.
44px de altura em tudo que se clica com o dedo.
Marcar, escolher e ligar usam o input do navegador escondido com sr-only.
Texto de leitura acima de 4,5 para 1 no claro e no escuro. Fumaça no claro só a partir de 18px.
Animação e transição caem para 0,01ms; vídeo 3D fica no pôster.
Erro e situação carregam ícone e palavra.
O que defende tudo isto.
O sistema se sustenta por gate, não por disciplina. Cada regra que podia ser furada em silêncio virou um programa que reprova o commit, e cada gate nasce com uma mutação que prova que ele fica vermelho.
| Gate | O que reprova |
|---|---|
| sem-travessao | Travessão em texto que uma pessoa lê. |
| lista-de-gates | Gate que existe no package.json e não roda. |
| check | eslint, tsc e os testes. |
| build | O build estático, com as duas páginas no lugar. |
| sem-hype | Promessa sem base na copy. |
| paleta-nexyo | Cor fora da paleta clara e escura: hex, rgb, hsl, oklch, nome de cor ou classe de cor de fábrica do Tailwind. |
| escala-tipografica | Tamanho de fonte cru fora da escala. |
| links-vivos | Link morto na documentação. |
| peso-do-bundle | Biblioteca pesada no JS inicial de uma rota. |
| raio-na-escala | Raio fora da escala 4, 8, 12, 16, 20, 28 e full, classe de raio de fábrica do Tailwind e contorno sem classe de raio. |
| composicao-largura | Medida de leitura errada para o tamanho do texto e margem lateral fora do token. |
| sem-particulas | O efeito de pontos do hero antigo voltando para a home. |
| ritmo-de-secoes | Duas faixas claras seguidas no mesmo tom, página que não abre e fecha no escuro, ilha demais e tom claro sem os tokens de texto do claro. |
| sem-letra-3d | Sem descrição nesta página. |
| textos-patrocinio | Sem descrição nesta página. |
| transicao-suave | Sem descrição nesta página. |
Esta página lê app/tokens.css, app/globals.css, lib/motion.ts e scripts/gates.txt no build, e os componentes vêm de components/ds. Entre o que está escrito e o que o código faz, o código vence.