WinCRM Design System

O sistema visual real do projeto, auditado pagina por pagina.

Esta pagina consolida os tokens, shells, componentes e familias de experiencia ja presentes no codigo. O objetivo nao e criar uma nova linguagem, e sim tornar reutilizavel a linguagem que o produto ja pratica hoje.

Publico, simuladores, conteudo e operacaoBaseado em rotas reais do projetoTokens, padroes e receitas de pagina

Ver fundamentos Auditar rotas

Rotas auditadas

Inclui marketing, conteudo, jornadas de simulacao, login, backoffice e paginas de apoio.

Shells principais

Marketing, simuladores, conteudo e operacao com o mesmo DNA de marca.

Tokens de cor

Golds de marca, neutros, cores de suporte e feedback.

Padroes-chave

Header, CTA final, formularios grandes, grids editoriais e superfices operacionais.

Principios

Regras para manter a coerencia do produto.

Estas diretrizes organizam o que se repete nas paginas do sistema e ajudam a decidir o que reaproveitar antes de criar algo novo.

Documentar o que ja existe

O design system parte das paginas reais do projeto, sem trocar a linguagem visual consolidada no site e nos simuladores.

Uma tese forte por dobra

As paginas publicas trabalham sempre com headline forte, prova visual, CTA principal e narrativa em blocos curtos.

Mesmo DNA em marketing e operacao

A camada publica usa expressao de marca; a camada operacional simplifica para produtividade, mas reaproveita tipografia, cores e tokens base.

Conversao sempre visivel

Header com CTA, WhatsApp flutuante, bloco final amarelo e formularios grandes sao elementos recorrentes da experiencia.

Fundamentos

Paleta, tipografia, layout e superficies.

O core visual do projeto e dominado pelo contraste entre golds de marca, neutros fortes e um uso recorrente de cards grandes com sombra macia.

Brand Gold

Eixo visual principal do marketing, CTAs e destaques de resultado.

Amarelo Principal

#FDBB4A

amareloprincipal

CTA principal, badges, cards de destaque.

Amarelo Claro

#F7D25D

amareloclaro

Gradientes, fundos quentes e variacao de cards.

Gold FBV

#FFD300

custom

Campanhas especiais e secoes de alta atencao.

Gold CTA

#FDB913

custom

Hover states e CTA do shell publico.

Neutrals

Base de contraste e leitura nas paginas publicas e internas.

Neutral Dark

#191818

neutral-dark

Texto principal, fundos escuros e hero editorial.

Cinza Escuro

#222626

cinzaescuro600

Texto e botoes escuros no marketing.

Cinza 900

#3F4141

cinza900

Cor de apoio para titulos e paragrafos longos.

Offwhite

#FEFAF1

offwhite

Fundo padrao do site e das secoes quentes.

Support Colors

Cores complementares usadas em campanhas, simuladores e dashboards.

Laranja

#E39B44

laranja400

Conteudo, materiais, destaque de play e CTA secundario.

Azul Escuro

#141537

azulescuro

Cards de IA, dashboards e contraste institucional.

Verde Feedback

#00A800

custom

After states, metricas positivas e sucesso.

Vermelho Feedback

#FF5733

custom

Before states, alertas e contraste narrativo.

Tipografia

Display Hero

font-heading text-5xl lg:text-7xl font-black leading-none

Tecnologia de relacionamento que impulsiona crescimento.

Hero principal, campanhas e aberturas editoriais.

Section Heading

font-heading text-3xl lg:text-5xl font-bold leading-tight

Ative, recupere e fidelize clientes automaticamente.

Titulos de secao em paginas de produto e simuladores.

Card Title

font-heading text-2xl font-bold leading-tight

Resultados mensuraveis.

Cards de destaque, modulos de prova e blocos operacionais.

Body Copy

font-sans text-lg leading-8 font-medium

Cada compra pode virar relacionamento, recorrencia e mais previsibilidade comercial.

Texto corrido das landing pages e secoes institucionais.

Label / Badge

font-sans text-sm font-semibold uppercase tracking-[0.18em]

Especial FBV

Badges, chips, categorias e pequenos marcadores de secao.

Layout

Container XL

max-w-[1400px]

Home, blog, landing pages e shells de conteudo amplo.

Container L

max-w-[1200px]

Secoes narrativas e blocos com mais foco no texto.

Gutters

px-4 sm:px-6 lg:px-8

Padrao quase universal de respiro horizontal.

Section Rhythm

py-16 / py-20 / py-24

Espacamento vertical recorrente entre capitulos da narrativa.

Superficies

Base Radius

rounded-md / 8px

Inputs, botoes base e componentes operacionais.

Marketing Radius

rounded-2xl / rounded-3xl / 24px-32px

Cards de features, formularios e blocos de CTA.

Shadow Soft

shadow-sm / shadow-lg

Superficies internas, blog, formularios e areas operacionais.

Shadow Hero

shadow-xl / shadow-2xl

Blocos de destaque, mid-funnel e cards de campanha.

Shells

Quatro familias estruturam quase toda a experiencia.

Ao revisar o projeto, surgem quatro arquiteturas claras: marketing, simulacao, conteudo e operacao. Elas variam no ritmo, mas compartilham tokens e intencao visual.

Marketing Shell

Header sticky, narrativa por blocos, CTA final amarelo e footer com newsletter.

//home/lojista/cashback/indicacao/saudade/fbv/cadastro/sobre

src/components/v2/Header.tsxsrc/components/v2/CTA.tsxsrc/components/v2/footer.tsx

Simulator Shell

Hero orientado a acao, formulario no centro do fluxo, resultado revelado em seguida e CTA final.

/simulador-de-crescimento/simulador-de-cashback/simulacao/crescimento/simulacao/cashback/simulacao/completa

src/components/simulacao/crescimentosrc/components/simulacao/cashback

Content Shell

Hero editorial, grid de conteudo ou artigo longo, prova de autoridade e CTA contextual.

/materiais/blog/blog/[slug]/bio

src/app/materiais/page.tsxsrc/app/blog/page.tsxsrc/app/blog/[slug]/page.tsxsrc/app/bio/page.tsx

Operations Shell

Sidebar, topbar compacta, cards shadcn, tabelas, filtros e graficos para produtividade.

/login/auth/dashboard/auth/users/auth/blog/auth/materials/auth/reports

src/components/auth/AuthLayoutWrapper.tsxsrc/components/ui/button.tsxsrc/components/ui/card.tsxsrc/components/ui/table.tsx

Componentes

Padroes reaproveitaveis do produto.

Abaixo esta o conjunto de superficies e interacoes que mais se repete no projeto, com exemplos visuais e referencias diretas para o codigo existente.

Marketing sample

CTA forte, mensagem curta e uma unica acao principal.

O marketing do projeto privilegia blocos de alto contraste, badge curta, headline forte e CTA destacado em gold.

Operacao sample

Leitura rapida, filtro e acao direta.

Admin

Superficie de dados

Card, badge, input e tabela formam o nucleo da area interna.

Sticky Header + CTA

Navegacao fixa, dropdown em desktop, menu colapsado no mobile e CTA sempre presente.

Usado como shell principal do site publico. O CTA leva para cadastro ou descoberta do produto.

src/components/v2/Header.tsx

CTA Block

Bloco amarelo sobreposto ao footer com texto curto, CTA escuro e reforco visual da marca.

Fecha jornadas de marketing e padroniza a ultima acao de conversao.

src/components/v2/CTA.tsx

Large Lead Form

Formulario em card branco grande, sobre fundo escuro, com beneficios na coluna lateral.

Captura leads em paginas de demonstracao, campanhas e cadastro.

src/components/v2/Cadastro/FormularioCadastro.tsx

Narrative Cards

Cards grandes, arredondados, com sombra forte e combinacao de cor de marca com texto curto.

Estruturam features, provas de valor, etapas e storytelling de produto.

src/components/v2/FeaturesSection.tsxsrc/components/v2/BeforeAfterSection.tsxsrc/components/v2/CashBack/Cards.tsx

Editorial Grid

Busca, filtros, destaque principal e cards de conteudo com imagem, tag e metadados.

Aparece nas paginas de blog e materiais para organizar consumo de conteudo.

src/app/blog/page.tsxsrc/components/blog/PostCard.tsxsrc/app/materiais/page.tsx

Operational Data Surfaces

Card shadcn, badge, filtros, tabela e chart container em composicao mais densa.

Base da experiencia interna, com prioridade para leitura rapida e acao.

src/app/login/page.tsxsrc/app/auth/dashboard/page.tsxsrc/app/auth/users/page.tsx

Inventario

Mapa de paginas e receitas de experiencia.

Cada grupo abaixo representa um conjunto de rotas com intencao e estrutura parecidas. Isso ajuda a decidir o que reaproveitar e onde um novo fluxo deve se encaixar.

Marketing Publico

Paginas de aquisicao e produto com shell padrao, narrativa por secoes e CTA de conversao.

11 rotas

Rota	Nome	Receita / composicao
`/`	Home principal	Hero split, features, sistema, before/after, logos, FAQ e CTA final.
`/home`	Home espelhada	Replica estrutural da home principal para rota dedicada.
`/home_antiga`	Home legacy	Versao anterior da narrativa do site, ainda util como referencia historica.
`/lojista`	Landing por segmento	Mesmo shell da home, com hero voltado ao lojista.
`/cashback`	Produto Cashback	Landing longa de produto com blocos narrativos, imagens e CTA final.
`/indicacao`	Produto Indicacao	Estrutura de produto com hero, estatisticas, automacao e anatomia da jornada.
`/saudade`	Produto Saudade	Hero de reativacao, contexto de mercado, psicologia, arquitetura e transformacao.
`/crm3em1`	Pagina de proposta composta	Landing de posicionamento com argumento consolidado de plataforma.
`/fbv`	Campanha FBV	Landing promocional inspirada nos criativos de feira e integrada ao shell atual.
`/cadastro`	Conversao principal	Formulario, prova social, FAQ e CTA final dentro do shell publico.
`/demonstracao`	Demonstracao	Pagina direta com CTA para teste e formulario de contato.

Simuladores e Jornadas de Resultado

Fluxos orientados a dado, lead e visualizacao pratica de ganho financeiro.

7 rotas

Rota	Nome	Receita / composicao
`/simulador-de-crescimento`	Simulador de crescimento	Hero, formulario, resultados dinamicos e CTA final.
`/simulador-de-cashback`	Simulador de cashback	Hero, explicacao, formulario, resultado progressivo e CTA.
`/simulacao/crescimento`	Resultado crescimento	Pagina de saida da simulacao com foco em consolidacao do resultado.
`/simulacao/cashback`	Resultado cashback	Desdobramento de simulacao com reforco de valor do cashback.
`/simulacao/completa`	Resultado completo	Resumo final de simulacao com argumentos de fechamento.
`/obrigado`	Agradecimento	Confirma etapa concluida e prepara a proxima interacao comercial.
`/sucesso`	Sucesso	Tela utilitaria de retorno positivo apos acao ou captura.

Conteudo e Institucional

Paginas de autoridade, conteudo e presenca de marca fora do funil direto.

5 rotas

Rota	Nome	Receita / composicao
`/materiais`	Central de materiais	Hero editorial, grid de videos e CTA para falar com especialista.
`/blog`	Blog	Hero escuro, busca, filtro, destaque principal e grade de posts.
`/blog/[slug]`	Artigo	Template editorial com hero do artigo, conteudo, relacionados e footer.
`/sobre`	Sobre	Narrativa institucional com blocos editoriais e CTA do shell publico.
`/bio`	Link in bio	Mini-shell de campanha com avatar, links e redes sociais.

Operacao e Backoffice

Camada autenticada do sistema com sidebar, cards, tabelas, formularios e graficos.

22 rotas

Rota	Nome	Receita / composicao
`/login`	Autenticacao	Tela de entrada com card central, logo, inputs e CTA unico.
`/auth/dashboard`	Dashboard	Cards de metricas, graficos, listas recentes e atalhos de operacao.
`/auth/users`	Usuarios	Busca, tabela, badges de papel e acoes primarias de cadastro/edicao.
`/auth/users/new`	Novo usuario	Formulario operacional em shell autenticado.
`/auth/users/[id]/edit`	Editar usuario	Formulario operacional para manutencao de conta.
`/auth/blog`	Gestao de blog	Inventario, filtros e manutencao de conteudo publicado.
`/auth/blog/new`	Novo post	Formulario editorial com composicao rica.
`/auth/blog/[id]/edit`	Editar post	Edicao de conteudo e configuracoes editoriais.
`/auth/materials`	Gestao de materiais	Tabela/lista de materiais com acoes de manutencao.
`/auth/materials/new`	Novo material	Cadastro de material em shell autenticado.
`/auth/materials/[id]/edit`	Editar material	Edicao de material com os mesmos tokens da area interna.
`/auth/newsletters`	Newsletters	Consulta e gestao da base capturada no site.
`/auth/pageviews`	Pageviews	Leitura operacional de trafego e performance.
`/auth/clickwhats`	Cliques WhatsApp	Relatorio objetivo de interacoes com CTA de WhatsApp.
`/auth/contatos`	Contatos	Base de leads e capturas do site.
`/auth/reports`	Relatorios	Visoes consolidadas para acompanhamento interno.
`/auth/imagens-do-site`	Imagens do site	Gestao de ativos visuais e suporte ao marketing.
`/auth/uploads`	Uploads	Area de manutencao de arquivos enviados.
`/auth/simuladorcashbacks`	Leads simulador cashback	Inventario de dados coletados pelo simulador de cashback.
`/auth/simuladorcrescimentos`	Leads simulador crescimento	Inventario de dados coletados pelo simulador de crescimento.
`/auth/bio`	Configuracao da bio	Gestao de links, redes e dados do shell de link in bio.
`/auth/unauthorized`	Nao autorizado	Tela de permissao negada dentro da camada autenticada.

Compliance e Apoio

Rotas de suporte juridico e transparencia institucional.

3 rotas

Rota	Nome	Receita / composicao
`/politica`	Politica	Pagina legal e informativa.
`/politica-privacidade`	Politica de privacidade	Pagina legal com foco em tratamento de dados.
`/termos-de-uso`	Termos de uso	Pagina legal de adesao e regras de utilizacao.

Proximo uso

Sempre comece por um shell existente antes de desenhar do zero.

Se a nova pagina for de venda, use o marketing shell. Se for orientada a calculo, use os simuladores. Se for conteudo, use o shell editorial. Se for operacao interna, use sidebar, cards, tabela e filtros do backoffice.

Checklist de consistencia

1. Defina a familia da rota antes do layout.

2. Reaproveite as cores gold + neutros como base.

3. Use Archivo para headlines e Work Sans no corpo.

4. Escolha um CTA principal por secao.

5. Prefira cards arredondados e sombras suaves no marketing.

6. Prefira shadcn cards, tabelas e filtros no backoffice.