Especificação técnica completa — sistema de design, esquemas de dados, rotas de API, autenticação e integrações.
A paleta foi construída para transmitir sofisticação e confiança. O dourado sobre fundo escuro cria o contraste premium que posiciona a marca no segmento de saúde de alto cuidado — a mesma linguagem visual usada por clínicas de referência e consultórios premium.
O dourado é a cor central da identidade. Cada variação — do sólido ao 12% de opacidade — tem um propósito específico para manter consistência em botões, bordas, badges e efeitos visuais.
#C9A84C--goldA cor principal. Botões de ação, títulos destacados, ícones, labels de seção. O primeiro elemento que o visitante nota.
#E8D48B--gold-lightEstado hover de botões e links. Versão mais clara que confirma visualmente que o elemento é clicável.
#0A0A0A--bgCor do texto sobre botões dourados. O contraste escuro sobre gold garante legibilidade nos CTAs.
rgba(201,168,76,0.12)--gold-dimGold a 12% — fundo de badges, tags e highlight boxes. Destaque suave sem competir com o texto.
rgba(201,168,76,0.25)--gold-glowGold a 25% — box-shadow em hover de botões. Cria a sensação de "luz" premium e acolhedora do consultório.
rgba(201,168,76,0.18)--gold-borderGold a 18% — bordas de cards, inputs e dividers. Sutil no estado normal para não criar ruído visual.
rgba(201,168,76,0.35)--gold-border-hGold a 35% — bordas em hover, focus e active. O brilho extra confirma que o elemento é interativo.
Quatro camadas de escuro que criam profundidade visual. Cada nível é ligeiramente mais claro, permitindo que cards e elementos "flutuem" sobre o fundo sem usar sombras pesadas.
#0A0A0A--bgO fundo base de todas as páginas. Quase preto, mas com calor suficiente para não parecer frio.
#101010--bg-cardFundo de todos os cards, caixas de conteúdo e o menu mobile. Um nível acima do fundo para criar separação visual.
#141414--bg-elFundo de elementos interativos em hover — quando o usuário interage com um card, este nível aparece para dar feedback visual.
#1A1A1A--bg-surfO nível mais elevado. Usado em dropdowns e tooltips — elementos que "flutuam" sobre todo o resto.
Seis tons de texto organizados por hierarquia visual. O dourado destaca elementos de navegação e acentos; os tons neutros guiam o olhar do visitante do título ao conteúdo de suporte.
#C9A84C--goldCor de texto para labels de seção (01 — QUEM SOMOS), acentos em títulos com <em>, nome da nutricionista no header, links em hover e ícones.
#E8D48B--gold-lightTexto dourado em estado hover — links de navegação, itens de menu e botões quando o usuário interage.
#F0EDE6--textTodos os títulos, nomes e informações que o visitante precisa ver primeiro. Tom quente e acolhedor em fundo escuro.
#C8C3B8--text-sParágrafos e texto de suporte. Visível o suficiente para leitura confortável, mas não compete com os títulos.
#8A8578--text-mDescrições curtas, placeholders de formulários e metadata. Guia o olhar sem dominar a página.
#5A5549--text-dInformação terciária — timestamps, notas legais e rodapé. Presente mas discreta.
Cores reservadas para comunicar estados ao usuário — sucesso de um envio de formulário, um aviso importante ou informação de suporte. Nunca usadas para decoração.
#6FCF97--greenConfirmação de ações bem-sucedidas — formulário enviado, agendamento confirmado, item incluído no plano.
rgba(111,207,151,0.1)--green-dimFundo suave para badges de sucesso. Usado na tabela de serviços para indicar itens incluídos.
#E87461--red-softAlertas que requerem atenção — erros de formulário, avisos de prazo, pontos fracos na análise.
#7B9EFF--blueInformação neutra que merece destaque — badges "should have", links de referência, área técnica nas features.
rgba(100,140,255,0.1)--blue-dimFundo suave para badges informativos. Usado nos tags de prioridade "should" e versão "v2".
Três famílias tipográficas, cada uma com um papel claro. A combinação de uma serifada clássica para impacto, uma sans-serif moderna para legibilidade e uma monoespaciada para precisão técnica cria a linguagem visual premium do projeto.
--serifGoogle FontsUma serifada com personalidade acolhedora e sofisticada. As curvas e o contraste dos traços transmitem autoridade e cuidado — ideal para uma nutricionista clínica. O visitante sente "confiança" antes de ler uma palavra.
Todos os títulos de seção, o headline do hero, nomes das especialidades e cabeçalhos do blog.
Georgia, serif--sansGoogle FontsUma sans-serif geométrica e limpa que garante legibilidade máxima em qualquer tamanho de tela. O peso Light (300) cria parágrafos elegantes; o Semi-Bold (600) dá firmeza aos títulos de cards e botões.
Todo o corpo de texto, descrições de cards, botões, navegação, formulários e labels. É a fonte que o visitante mais lê.
system-ui, sans-serif--monoGoogle FontsUma monoespaciada desenhada para legibilidade em tamanhos pequenos. Usada em contextos técnicos e de navegação — transmite precisão e atenção ao detalhe sem ser intimidante.
Labels de seção (01 — ESPECIALIDADES), tags de conteúdo, badges de prioridade, versões (v1/v2), preços e o menu de navegação.
monospaceCada peso tipográfico tem uma função na hierarquia visual. A regra é simples: quanto mais importante a informação, mais pesado o weight. Isso garante que o visitante sabe exatamente onde olhar primeiro.
O peso principal para parágrafos longos. Fino o suficiente para ser elegante em fundo escuro, mas com legibilidade total em qualquer dispositivo.
O peso "neutro". Usado nos títulos serifados que devem ser elegantes sem gritar, e no texto base quando Light seria demasiado sutil.
Cria ênfase suave — os links de navegação e labels de seção usam este peso para se destacarem do corpo de texto sem serem "bold".
O peso de "ação". Todos os títulos de cards, botões e sub-headings usam Semi-Bold para indicar que são pontos de entrada para o conteúdo.
Reservado para informação de alto impacto — o nome da nutricionista, valores de consulta e percentagens de resultado. Usado com parcimônia para manter o seu poder.
Uma escala de 11 níveis que cobre desde o título do hero até o menor tag de especialidade. Cada nível tem tamanho, peso, fonte e espaçamento definidos para que qualquer elemento adicionado ao site encaixe naturalmente na hierarquia visual.
<h1 (hero)>clamp(2.4rem, 5.5vw, 4.5rem)Linha1.15Fonte--serifPeso400A primeira coisa que o visitante vê. Responsivo — 4.5rem no desktop, 2.4rem no mobile. Apenas 1 por página.
<h2 (section)>clamp(1.8rem, 3.5vw, 2.6rem)Linha1.25Fonte--serifPeso400Título de cada seção principal — "Especialidades", "Sobre", "Agendamento". Marca a entrada de um novo bloco de conteúdo.
<h3 (card group)>1.5remLinha1.3Fonte--serifPeso400Sub-título dentro de uma seção — cabeçalho de especialidade, nome de material, posicionamento proposto.
<h3 (timeline)>1.2remLinha1.4Fonte--serifPeso400Títulos de fases do timeline, especialidades e pilares. Suficientemente grande para ser um ponto de parada visual.
<h4 (card)>0.95remLinha1.5Fonte--sansPeso600Título de cada card individual — especialidades, materiais, features. O visitante lê estes títulos para decidir o que explorar.
<h3 (sub)>1remLinha1.5Fonte--sansPeso600Introduz um sub-bloco dentro de uma seção — "Processo de Atendimento", "Materiais Gratuitos", "Especialidades Selecionadas".
<p>0.95remLinha1.7Fonte--sansPeso300Parágrafos descritivos nas seções. Line-height generoso (1.7) para conforto de leitura em fundo escuro.
<p (card)>0.84remLinha1.7Fonte--sansPeso300Texto dentro de cards — descrições de especialidades, detalhes de materiais, texto de features.
<span>0.78remLinha1.6Fonte--sansPeso300Informação de contexto — tipos de material, metadata de suporte, notas de rodapé.
<div/span>0.62remLinha1Fonte--monoPeso500O "numerador" de cada seção. Sempre em maiúsculas, com letter-spacing largo. Define a cadência da página.
<span>0.6remLinha1Fonte--monoPeso500Os menores elementos de texto. Badges de especialidade, prioridades MoSCoW e versões. Sempre dentro de pills ou com background.
2xs4px0.25remInline gaps, badge paddingxs8px0.5remComponent internal gapssm12px0.75remInput padding, small gapsmd16px1remCard padding, standard gaplg24px1.5remSection padding (mobile)xl32px2remSection padding (desktop), spacers2xl48px3remContent block margins3xl64px4remSection vertical (mobile)4xl96px6remSection vertical (desktop)“A consulta transformou minha relação com a alimentação”
Ana C. — Goiânia, GO
Pacientes Atendidos
Anos de Experiência
CRN e especializações comprovadas
Especialidades
Materiais
Agendamento
Sobre
FAQ
Contato
Utilizamos cookies para melhorar sua experiência e analisar o tráfego do site, conforme a LGPD.
Material Symbols Outlined via Google Fonts
18 páginas com rotas, fontes de dados e componentes
Estrutura hierárquica de todas as rotas do projeto
7 jornadas de usuário — do primeiro contato à conversão
118 funcionalidades por versão, prioridade e área
Protótipos low-fi interativos com links para cada detalhe de página
Eventos GA4, meta tags, Open Graph e funil de conversão
Sem banco de dados tradicional — Sanity CMS para todo o conteúdo, Stripe para compras de materiais. Os esquemas abaixo refletem os tipos de documento do Sanity e os objetos do Stripe.
_idstringSanity document IDtitlestringNOT NULLslugslugUNIQUEareastringemagrecimento, saude-mulher, esportiva, gestantesdescricaorichTextbeneficiosstring[][]imagemimageCloudinary via SanityfeaturedbooleanDEFAULT falsetagsstring[][]_createdAtdatetimeauto_idstringSanity document IDtitlestringNOT NULLslugslugUNIQUEcategoriastringemagrecimento, gestantes, esportiva, saude-mulher, receitas, dicasresumotextcorporichTextimagemDestaqueimageCloudinary via Sanityseoobject{ metaTitle, metaDescription }publishedAtdatetime_idstringSanity document IDtitlestringNOT NULLslugslugUNIQUEcoverImageimageCloudinary via SanitydescricaorichTextpreconumberBRL — 0 para gratuitoarquivoUrlstringCloudinary secure URLcategoriastringebook, guia, planilhadisponivelbooleanDEFAULT true_idstringSanity document IDnomestringNome ou primeiro nome da pacienteespecialidadestringEspecialidade atendidadepoimentotextNOT NULLfotoimageCloudinary via Sanity — opcionalconsentimentobooleanDEFAULT false — LGPDavaliacaonumber1 a 5 estrelas_idstringSanity document IDperguntastringNOT NULLrespostarichTextNOT NULLcategoriastringagendamento, pagamento, atendimento, lgpdordemnumberOrdenação manual_idstringSanity document IDnomestringNOT NULLemailstringNOT NULLcelularstringtipoConsultastringTipo de atendimento solicitadomensagemtextstatusstringnova, em-analise, confirmada, cancelada_createdAtdatetimeauto_idstringSingleton documentnomeSitestringdescricaoSitetextemailContatostringwhatsappstringNúmero com DDI (+55)redesSociaisobject{ instagram, facebook, tiktok }enderecotextGoiânia, GO, BrasilidstringStripe PaymentIntent IDcustomer_emailstringNOT NULLamountintegerEm centavos (BRL)currencystringDEFAULT "brl"statusstringsucceeded, pending, failedmetadataobject{ material_id, material_title, ... }createdtimestampStripe timestampNext.js App Router — validação via Zod, respostas JSON.
/api/agendamentoSolicitação de consulta — salva no Sanity e envia e-mail de confirmação à paciente e notificação à nutricionista
{ nome, email, celular?, tipoConsulta, mensagem }/api/leadsCaptura de e-mail para material gratuito — valida consentimento LGPD, adiciona à lista e dispara envio do PDF via Resend
{ nome, email, materialId, consentimento }/api/contatoFormulário de contato simples — envia notificação por e-mail à nutricionista
{ nome, email, mensagem }/api/checkoutCria Stripe Checkout Session para compra de material digital — retorna URL de redirecionamento
{ items: [{ materialId, title, preco, quantity }], customerEmail }/api/webhooks/stripeWebhook Stripe — processa payment_intent.succeeded e envia link de download por e-mail
Stripe payload (signature verificada)/api/webhooks/sanityWebhook Sanity — aciona revalidação ISR ao publicar conteúdo
Sanity payload (secret verificado)Visitante navega pelo site sem necessidade de cadastro ou login
Paciente preenche formulário de agendamento → POST /api/agendamento salva solicitação no Sanity
E-mail enviado automaticamente via Resend com confirmação de recebimento e próximos passos
Paciente preenche e-mail → POST /api/leads valida consentimento e dispara o PDF por e-mail
Paciente seleciona e-book → POST /api/checkout cria Stripe Checkout Session
Navegador redirecionado para checkout hospedado pelo Stripe com dados de compra pré-preenchidos
Stripe envia payment_intent.succeeded para /api/webhooks/stripe — link de download enviado por e-mail
Fluxo de dados entre Stripe, Sanity e o site.
POST /api/agendamento → salva no Sanity → Resend envia e-mail de confirmação à paciente e notificação à nutricionista
POST /api/leads → valida consentimento LGPD → Resend envia PDF e e-mail de boas-vindas
Stripe payment_intent.succeeded → POST /api/webhooks/stripe → Resend envia link de download por e-mail ao comprador
Webhook Sanity → POST /api/webhooks/sanity → aciona revalidação ISR das páginas /especialidades, /materiais e /blog
POST /api/contato → Resend notifica a nutricionista com os dados do visitante