Design System v1.0 Light Mode

Sistema visual do Instituto Porta da Mente

Tokens, tipografia e componentes para uma escola de hipnoterapia clínica aplicada — séria, ética, técnica. Anti-espetáculo: sem misticismo, sem promessa milagrosa, sem hipnose-de-palco.

Autoridade clínica Sobriedade científica WCAG AA Mobile-first CSS puro

Paleta

Cores primitivas e semânticas

Brand Navy · escala

--brand-50
#EEF1F9
--brand-100
#DCE2F2
--brand-200
#B7C3E5
--brand-400
#5466AE
--brand-600
#1A337E
--brand-700
#102774 ★
--brand-800
#0C1E5C
--brand-950
#050C2C

★ Cor-base do briefing — usada como CTA e acento.

Ink · azul-petróleo

--ink-50
#F4F6F8
--ink-100
#E5E9EE
--ink-300
#94A1B2
--ink-400
#5E6E84
--ink-500
#3F5067
--ink-700
#243448 ★
--ink-800
#1A2738
--ink-950
#0A111B

★ Cor-base do briefing — texto primário no light, surface base no dark.

Linen · neutros claros

--linen-50
#FFFFFF
--linen-100
#FAFAFA ★
--linen-200
#F4F4F5
--linen-300
#E8E9EB
--linen-400
#D4D6DA

Sand (alternativa cálida)

--sand-50
#FBF9F4
--sand-100
#F5F1E8

★ Cor-base do briefing — bg light. Sand é variação cálida sutil para evitar esterilidade clínica.

Estados semânticos · primitivos

Calibrados em harmonia com o navy — verde-musgo, âmbar-mel, vermelho-tijolo, azul-aço — não as cores saturadas padrão.

--moss-500
#4F7C42
--amber-500
#B07410
--brick-500
#B33B2D
--steel-500
#2D5984
--gold-500
#B8893E (uso restrito)

Tokens semânticos light

--bg-base
#FAFAFA
--bg-surface
#FFFFFF
--text-primary
#243448
--text-secondary
72%
--text-muted
52%
--accent-base
#102774
--accent-hover
#1A337E
--border-accent
32%

Tema por seção — exemplo inline

Light (padrão)

Herda :root. Background #FAFAFA, texto petróleo.

Dark (por seção)

Aplicado data-theme="dark". Background petróleo, texto off-white.

<section data-theme="dark"> — nenhum CSS extra necessário.

Tipografia

Fraunces & Inter

Fraunces · Heading

Aa Bb Cc

Serif moderna, contraste óptico variável. Transmite livro técnico, tradição clínica — sem teatro.

font-family: 'Fraunces', Georgia, serif;

Inter · Body

Aa Bb Cc

Sans humanista, máxima legibilidade em pt-BR. Neutralidade clínica e UI eficiente.

font-family: 'Inter', system-ui, sans-serif;

Escala display (heading) · Fraunces

--text-display-xl · clamp(2.75rem, 7.5vw, 5.5rem) · 700
Hipnose clínica aplicada
--text-display-lg · clamp(2.25rem, 5.8vw, 4.25rem) · 600
Para terapeutas que querem resultado de verdade
--text-display-md · clamp(1.875rem, 4.6vw, 3rem) · 600
A formação que entrega segurança clínica
--text-display-sm · clamp(1.625rem, 3.6vw, 2.25rem) · 600
Programas e formações

Escala de conteúdo · Inter

3xl / 30px

Título de seção

1.875rem · 600
2xl / 24px

Título de card

1.5rem · 600
xl / 20px
Subtítulo
1.25rem · 600
lg / 18px

Lead paragraph — primeiro parágrafo de uma seção

1.125rem · 500
base / 16px

Corpo de texto padrão. Usado em descrições, depoimentos e parágrafos de conteúdo institucional.

1rem · 400 · lh 1.7
sm / 14px
Labels, captions e texto auxiliar
0.875rem · 400
xs / 12px
Metadados · timestamps · notas legais · CRP
0.75rem · 400
Uppercase
Eyebrow · Categoria · Label de seção
0.7rem · 600 · +10%
Mono
data-theme="dark"
JetBrains Mono

Pull quote (citação editorial)

Hipnose clínica aplicada, sem promessas mágicas — para terapeutas que querem resultado de verdade.

Fraunces · italic · 600 · com border-left navy. Uso pontual em depoimentos longos e manifestos.

Sistema

Espaços, raios e sombras

Grid base 4px

--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px

Section spacing (clamp)

--section-xs32→48px
--section-sm48→72px
--section-md64→96px
--section-lg80→128px
--section-xl96→160px

Raios de borda

Mais discretos que o template padrão — institucional evita formas excessivamente arredondadas.

sm 4px
md 6px
lg 10px
xl 14px
2xl 18px
full

Sombras (single-layer)

--shadow-sm — botões raised, navbar
--shadow-md — cards em hover, dropdowns
--shadow-lg — modais, popovers
--shadow-card — cards padrão (com border interna)

Iconografia · Lucide Icons

Biblioteca padrão. Open-source, tree-shakeable, traços lineares e consistentes — combinam com o tom institucional. Sempre via currentColor.

Banidos: espirais hipnóticas, mandalas, olhos místicos, pêndulos, cristais, "cérebro com raios". Ver identidade-visual.md.

Componentes

Botões, badges, cards, alerts & FAQ

Botões · variantes e tamanhos

Ler artigo completo

Tamanhos

Com ícone

Badges & tags

Default Acento Inscrições abertas Últimas vagas Encerrado Ao vivo

Em copy institucional, "últimas vagas" só deve aparecer quando for fato verificável — não como gatilho artificial.

Didática validada

Material desenvolvido ao longo de 10 anos e testado com mais de 12 mil alunos brasileiros — clareza acima de jargão.

"Trouxe segurança técnica e ética para minha prática. Sigo aplicando no consultório semanalmente."

CP
Camila Pereira
Psicóloga · CRP 06/123456
Alunos formados
12.400+

Terapeutas, psicólogos e profissionais de saúde mental impactados pelas formações desde 2016.

Alerts (4 variantes)

Inscrição confirmada
Você receberá os dados de acesso em até 5 minutos no e-mail cadastrado.
Próxima turma em 60 dias
A formação completa abre apenas 2 turmas por ano. Entre na lista de espera para ser avisado.
Inscrições encerradas
As vagas para esta turma foram preenchidas. Cadastre-se para a próxima.
Aula extra disponível
Material complementar gratuito sobre indução por relaxamento progressivo.

FAQ Accordion · <details>/<summary> (CSS puro, zero JS)

É necessário ser psicólogo para fazer a formação?
Não. A formação é aberta a profissionais de saúde mental e terapeutas com formação prévia. Cada caso é avaliado individualmente para garantir aderência ética ao programa.
Existe certificação ao final da formação?
Sim. Ao concluir a carga horária e os trabalhos práticos, você recebe certificado emitido pelo Instituto Porta da Mente.
O conteúdo é aplicável no consultório imediatamente?
Sim. A didática é orientada a casos clínicos reais — você sai com protocolos prontos para aplicar com seus pacientes desde a primeira semana.
E se eu não me adaptar à formação?
Você tem 15 dias de garantia incondicional após o início. Se entender que não é o caminho, basta solicitar o reembolso integral, sem perguntas.

Formulários

Inputs & campos

Estados de campo

Será exibido no certificado

Verifique o formato do e-mail.

Lead form completo

Como você nos encontrou?

Seus dados estão seguros · Sem spam · CRP/CRM verificados

Composição

Seções montadas

Formação profissional · 10º ano

Hipnose clínica aplicada, sem promessas mágicas — para terapeutas que querem resultado de verdade.

Formação completa para psicólogos, psicoterapeutas e terapeutas que desejam aplicar hipnose ética e tecnicamente embasada em consultório, com didática validada por mais de 12 mil profissionais.

Certificado pelo Instituto
15 dias de garantia
Suporte direto com o autor

Diferenciais

Por que a abordagem do Instituto funciona

Professor que atua clinicamente

Renan Moura atende como hipnoterapeuta clínico — você aprende com quem aplica no campo de batalha, não apenas na teoria.

Ética antes de tudo

Sem promessas irresponsáveis, sem charlatanismo. Formação alinhada às boas práticas da psicologia e da saúde mental.

Didática validada

10 anos refinando a forma de ensinar. Mais de 12 mil alunos formados. Linguagem clara, objetiva, sem jargão desnecessário.

Técnica aplicada vence espetáculo. Didática clara é obrigação, não diferencial. Resultado clínico real acima de marketing vazio.
— Filosofia do Instituto Porta da Mente
Próxima turma · julho/2026

Pronto para levar segurança clínica ao seu consultório?

Inscrições abertas até esgotarem as vagas. Material entregue em até 24h após confirmação do pagamento.

Garantia incondicional de 15 dias