PSI360 — Design System Completo

Design System Completo · Versão 1.0

PSI360

Psicologia · Autoridade · Visão Total

Design System

02 — Paleta de Cores

Violeta profundo
& Ouro vivo

Cada cor carrega intenção precisa. Violeta ancora credibilidade e profundidade emocional. Ouro comunica conquista, visibilidade e retorno.

Tinta #0C0518 Fundo master
Abissal #130824 Fundo primário
Noturno #1E0A38 Fundo sec.
Violeta #3A1572 Destaque
Ametista #6035A8 Acento violet.
Lavanda #9B72D0 Texto suave
Névoa #C8B4E8 Subtítulos
Ouro #C9962A Acento primário
Ouro Quente #DFB040 Hover / CTA
Ouro Claro #ECC96A Tipog. destaque
Ouro Pálido #F5E4A8 Títulos claros
Fantasma #FAF0D0 Tint / glow
Creme #F8F4EC Fundo claro
Branco #FDFAF5 Texto claro

03 — Tipografia

Dois tipos.
Uma voz única.

Cormorant para display — expressivo, elegante, humano. Cinzel para labels e hierarquia — preciso, clássico, autoritário. DM Sans para corpo longo.

Display & Editorial — Cormorant

Visão
integral
"A mente que se expande jamais
retorna ao tamanho anterior."
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
D1 PSI360
D2 Psicologia
H1 Expanda sua prática
Body Texto de apoio e parágrafos
Caption *Vagas limitadas · Inscreva-se

Label & UI — Cinzel · DM Sans

PSI360
PSICOLOGIA · FUTURO
DM Sans para textos funcionais, legendas técnicas e descrições longas. Mantém legibilidade mesmo em tamanhos menores.
Label XL EVENTO 2025
Label M Vagas limitadas
Label S Section 01 · Logotipo
Body Descrição de conteúdo
Micro Meta · tags · datas

04 — Componentes UI

Sistema de elementos

Botões, inputs, chips e cards — cada elemento construído com a mesma linguagem visual: elegância, contraste, movimento.

Botões

Input

Tags & Chips

Palestrante Participante VIP Presencial Online

Palestra · 14h00

Psicologia & Prosperidade Financeira

Como estruturar sua prática clínica para gerar renda consistente e expandir sua visibilidade no mercado.

Dra. Marina Figueiredo

Workshop · 16h30

Posicionamento de Autoridade

Estratégias para construir reputação sólida e ser reconhecida como referência em sua área de atuação.

Prof. Ricardo Alves

Mentoria · 19h00

Visão 360° da sua Carreira

Sessão de mentoria coletiva para mapear oportunidades de crescimento e definir seu próximo passo estratégico.

Mesa redonda

05 — Sistema de Movimento

Animação com propósito

Dois princípios de movimento: a órbita contínua do símbolo — viva, elegante, nunca apressada — e as linhas shimmer que comunicam energia e fluxo.

Órbita · 18s · linear · infinite

O símbolo vive. Nunca para.

Shimmer · 3s · linear · infinite

Cascade reveal · stagger 0.2s

Ease-out cubic · translateY(−2px)

06 — Aplicações

A marca no mundo

Banner, crachá, redes sociais, e-mail — a identidade mantém coesão e elegância em cada ponto de contato.

Crachá de participante

A
Ana Carolina
Mendes
Psicóloga Clínica
CRP 06/12345-X
Participante
M
Profa. Marina
Figueiredo
Palestrante
CRP 08/45678-Y
Palestrante
R
Rafael
Souza
Organização
Staff · Credenciamento
Staff

Redes Sociais

E-mail Marketing

07 — Padrões & Texturas

Elementos de atmosfera

Fundos e texturas que complementam as peças sem competir com o conteúdo.

Grade Orbital
Linhas Diagonais
Matriz de Pontos

08 — Diretrizes de Uso

Use assim.
Evite assim.

Regras para preservar a integridade e força da identidade em cada aplicação.

Correto · Use assim
✓Use o logotipo sobre fundo violeta profundo (#0C0518, #130824, #1E0A38) ou sobre creme (#F8F4EC)
✓Mantenha a animação orbital ativa em contextos digitais — ela é parte essencial da identidade
✓Use Cormorant para displays, títulos, citações e qualquer texto de impacto emocional
✓Reserve o dourado como cor de acento: bordas, pontos de destaque, gradientes no símbolo e CTAs primários
✓Utilize espaço negativo generoso — a elegância da marca vive no respiro entre os elementos
✓Em versão impressa sem cor, use o símbolo Ψ em dourado sobre fundo escuro ou violeta sobre creme
✓Misture Cinzel (labels, hierarquia) com Cormorant (display) — eles se complementam perfeitamente
Incorreto · Evite assim
✗Nunca distorça, rotacione fixamente ou redimensione o símbolo Ψ de forma desproporcional
✗Não use rosa, pêssego, laranja vibrante, verde ou qualquer cor fora da paleta definida
✗Evite branco puro (#FFFFFF) como fundo — sempre prefira o creme (#F8F4EC) para manter calor
✗Não substitua as fontes por Arial, Roboto, Inter ou qualquer sans-serif genérica
✗Não aplique o logotipo dourado sobre fundos claros sem usar a versão adaptada em violeta
✗Não use o dourado como cor de fundo dominante — ele é acento, não base
✗Evite layouts completamente simétricos — a assimetria elegante é parte do DNA da marca
PSI360
Psicologia · Autoridade · Visão Total
Design System Completo · Versão 1.0
Paleta: Violeta Profundo + Ouro Vivo
Tipografia: Cormorant · Cinzel · DM Sans
Símbolo: Ψ Orbital · Movimento 360°