Design System
Design System
Não é um guia de estilo em PDF. É o código-fonte da marca: os tokens, os componentes e as regras extraídos do site institucional que já está no ar, organizados para um trabalho específico, construir landing pages que nascem certas, sem redesenhar nada.
Cada cor, peso de fonte e sombra aqui dentro foi lido do site que já roda. O pacote não propõe uma marca nova, ele torna a atual reproduzível por qualquer pessoa (ou por uma IA) sem consultar ninguém.
Fonte primária: o repositório Emotize/emotize-site, site estático em HTML e CSS puro empacotado por Vite. Tokens e classes saíram do site.css; os assets vieram do public/. O repo emotize-design-system entrou como leitura de apoio e confirmou a paleta.
Foco declarado em landing page de marketing: LP de produto, LP de captação de lead e LP de campanha ou oferta. Não é um kit de app nem um sistema de produto, é o arsenal de quem escreve página para vender e captar.
FinalidadeTraz um SKILL.md na raiz: o pacote se instala como skill e o agente vira designer da marca, entregando HTML estático para revisar ou código de produção. Também funciona na mão, é CSS puro com componentes React opcionais.
RH e lideranças na pauta B2B de NR-1 e COPSOQ · pessoa física em app e assinatura · parceiros, clubes de benefício, operadoras e healthtechs. Tudo em português do Brasil, sempre.
Gilroy é licenciada, fica restrita a projetos da marca. JetBrains Mono vem do Google Fonts, não do pacote. A LP parceria-clube roda uma paleta local mais quente que ainda não foi tokenizada. E duas páginas grandes do site, a home e a de business, não foram lidas por inteiro no levantamento.
Seis marcas dividem a mesma navegação e o mesmo rodapé. Toda página nova precisa saber em qual delas está falando, porque isso muda o acento e o público.
App de rotina, registro emocional e suporte no dia a dia.
Pessoa física
Conteúdos e jornadas de autocuidado.
Pessoa física
IA companheira para conversas e suporte emocional.
Pessoa física
Saúde emocional para empresas, com conformidade NR-1.
B2B · RH
Experiências e vivências presenciais.
B2B e B2C
Hub de tecnologia, dados e produtos digitais. É a única superfície que pode usar o violeta.
ParceirosNavy no texto, no botão primário e nas bandas escuras. Cyan no acento e no destaque. Neutros são navy dessaturado, nunca cinza puro. No máximo duas cores de fundo por página.
Cada componente vem com um .d.ts descrevendo as props e um .prompt.md dizendo quando usar, com exemplo. É o que permite montar página sem abrir o Figma.
As peças atômicas que todo bloco reaproveita.
Os blocos de página. É aqui que a LP é montada.
O header do site tem menu. O da LP de campanha não tem, de propósito, para reduzir saída.
Captação de lead pronta, com telefone brasileiro e bandeira própria.
A assinatura visual é uma receita fixa de três camadas. Está em base/atmosphere.css e entra como primeiro filho do body.
Malha de 40 a 42 pixels em navy a 4 ou 5 por cento, com máscara radial que dissolve nas bordas. Em banda escura, o mesmo grid vai a 10 por cento de branco.
Um halo cyan radial de 800 pixels, blur de 80 e pulso lento de 8 segundos. Fica preso no canto superior esquerdo da viewport.
Um ou dois borrões coloridos em blur, flutuando em 12 segundos. Cyan a 35 por cento, navy a 18 por cento de opacidade.
Vocabulário fechado: fade-up de 20 pixels na entrada, float lento em blobs e mascote, ping no ponto do eyebrow, brilho que atravessa o botão no hover, seta que balança no CTA. Sem bounce, sem spring, sem parallax. E prefers-reduced-motion desliga tudo, isso já está no CSS e deve continuar.
Header fixo em branco 70 por cento com blur 16, que passa a 96 ao rolar. Cards glass só sobre o fundo ambiente. Tiles sobre banda escura em branco 4 por cento. Nunca blur sobre fundo chapado.
Não são imagens. São as páginas rodando com os componentes reais do pacote, do jeito que uma LP nova vai sair.
Recriação da página emotize.tech e da LP de captação. Header com menu, hero, processo em quatro etapas, prova e formulário de lead.
Abrir
Hero com preço âncora riscado, telas do app, oferta, FAQ e barra de CTA fixa só no mobile. Header sem menu, de propósito.
Abrir
O ponto de partida oficial: hero, capacidades, processo, prova social, oferta, FAQ e CTA final. Copia, troca o texto e está pronto.
AbrirMetade do que faz uma página parecer Emotize está no texto. O pacote fecha isso em regras verificáveis.
Iconify com o set Solar, via CDN. Sufixo -linear em seta e caret, -bold em ênfase e check, -bold-duotone nos chips de card. Social vem do set mdi e só no rodapé. Ícone de produto é imagem .webp, não glifo.
Mascote-cérebro 3D em render quente, telas reais do app em bezel escuro, pessoas em tom neutro-frio. Borda sempre dissolvida em máscara de degradê, nunca recortada. Logo de parceiro a 82 por cento de opacidade e 15 de dessaturação, colorido no hover. Nada de banco de imagem genérico, nada de grão, nada de preto e branco.