# Direção visual e experiência de navegação

**A proposta visual:** hospitalar sem parecer hospital; humana sem parecer perfil fitness; científica sem deixar de ser acolhedora.

:::section width:wide surface:soft space:4
## Design system

| Elemento | Escolha | Por quê |
|---|---|---|
| Fundo principal | **Creme #F9F6EF** | Conforto de leitura, tom editorial |
| Títulos | **Verde-petróleo #102E28** | Seriedade sem frieza |
| Destaques | **Terracota #BD805D** | Contraste e calor humano |
| Cards | Branco, bordas suaves | Navegação clara entre produtos |
| Títulos | Cormorant Garamond | Identidade editorial |
| Texto | DM Sans | Legibilidade em celular |
| Botões | Pílula, ação direta | CTA fácil de localizar |
:::

## Referências e aprendizados

- [Fernanda Mululo](https://fernandamululo.com.br/): organização da proposta de valor, narrativa pessoal e materiais gratuitos; a audiência é diferente, então só o método visual/comercial serve de referência.
- [Nutri na UTI](https://nutrinauti.com.br/produtos): catálogo por problema e faixa de oferta.
- [LearnWorlds](https://www.learnworlds.com/blog/market-sell/course-landing-page-with-examples/): home de descoberta distinta da página de conversão específica de um curso.
- [Circle](https://circle.so/blog/membership-site): área de membros com biblioteca, aulas e espaços de discussão.
- [Kajabi](https://www.kajabi.com/blog/how-to-sell-a-course-online-through-a-landing-page): menos distrações na página de venda.

## Hierarquia do site

:::timeline direction:vertical marker:number
### 01 — Hero
Diz quem ensina, para quem e qual transformação educacional propõe.
---
### 02 — Seu momento
Escolha por acadêmico, recém-formado, nutri atuante ou líder.
---
### 03 — Formações
Cursos, mini cursos e materiais por dificuldade.
---
### 04 — Campus
Demonstração de aula, revisão, biblioteca e casos.
---
### 05 — Trajetória da Arianne
Foto real e credenciais, após aprovação.
---
### 06 — Material de entrada
Uma oferta gratuita com cadastro informado.
:::

## Regra para fotografias

**O retrato de destaque precisa ser da própria Arianne.** As artes de exploração visual feitas com rosto gerado por IA não são retratos dela e não devem ser usadas na apresentação. O conceito publicado usa apenas imagens de contexto clínico e links ao perfil oficial até haver um retrato real em arquivo autorizado.

A escolha editorial ideal é retrato profissional real, com fundo neutro/ambiente de ensino e direito de uso. O Instagram [@_ariannecaroline](https://instagram.com/_ariannecaroline/) é a referência para selecionar o material com ela. A fotografia final permanece uma dependência explícita.

## Acessibilidade, confiança e responsividade

- CTA primário e secundário distintos.
- Informações concretas de carga horária, suporte, acesso e preço quando definidas.
- Texto com contraste, dimensões responsivas e estado de formulário claro.
- Imagens com descrições e sem pessoas inventadas.
- Não exibir avaliações e estatísticas sem autorização e fonte.
- Curso orientado ao que o aluno conseguirá aprender, com limitações clínicas explícitas.
- No smartphone, navegação em gaveta e cards em coluna única.

## Visual que deve ser mostrado na conversa com ela

[**Explorar o site-conceito real no Flows**](/@jonasporto/arianne-clinica-lab) · [Campus demonstrativo](/@jonasporto/arianne-clinica-lab/campus)