01
Liderança · equipes
Desenvolvimento de lideranças
- Capacitação de líderes
- Comunicação assertiva
- Delegação e engajamento
← Página inicial
GUIAIdentidade visual
Sistemavisual.
Renata de Almeida Ramos · Psicologia Clínica, Esportiva e Empresarial.
Editorial · contemporâneo · humanoSISTEMA / 01—05
01Assinatura e paleta
A marca, por inteiro.
A assinatura completa e o símbolo isolado são os arquivos oficiais do projeto; as imagens são exibidas sem alteração.
TOKENS DE COR
Marinho · areia · esmeralda · ouro
HEX convertido dos valores OKLCH em `src/styles.css`; os três dourados vêm da amostra da logo.
Azul-marinho
#06101C--ink
Hero, rodapé, texto principal
Marinho suave
#162232--ink-soft
Superfícies escuras de apoio
Areia
#F5F1E9--paper
Fundo de leitura e cards
Areia profunda
#E7E0D4--paper-deep
Seções alternadas
Esmeralda
#007D53--emerald
CTA, palavras e interação
Verde luminoso
#2FC183--emerald-glow
Destaques sobre marinho
Dourado da logo
#A88848--brand-gold
Numeração e detalhes de marca
Champanhe
#E4D09D--brand-gold-light
Microdetalhes em fundo escuro
Dourado profundo
#705522--brand-gold-deep
Texto dourado em fundo claro
Terracota
#D05320--ember
Acento quente, uso pontual
Branco puro
#FFFFFFCTA de contraste
Hover branco do CTA de e-mail
Hierarquia dourada: `--brand-gold` acompanha a marca; `--brand-gold-deep` mantém contraste em superfícies claras (6,2:1 sobre areia); `--brand-gold-light` funciona em marinho (12,6:1). O champanhe sobre esmeralda (3,4:1) fica restrito à frase de grande escala do contato. Branco puro aparece apenas no hover especial do CTA de e-mail.
02Tipografia e hierarquia
DISPLAY · 800
A performance
Big Shoulders Display
Títulos em caixa alta, peso 800 e line-height base 0.84.
CONTRASTE EDITORIAL
desenvolvimento.
Instrument Serif Italic
Palavras de destaque preservam caixa e contraste editorial.
LEITURA
Desenvolvimento humano e saúde mental.
Archivo
Texto corrido em Archivo, com tamanhos fluidos e entrelinha de leitura.
INDICADORES
+15
JetBrains Mono
Rótulos, CRP, sequência e microinformação; 0,72rem e tracking 0,18em em `eyebrow`.
- HERO
- 13,5vw · md 10,4vw
- SEÇÕES
- Escala display por coluna e breakpoint
- CORPO
- Base 16px · `leading-relaxed`
03Componentes e estados
Comandos claros, estados precisos.
Amostras abaixo reutilizam `Cta`, as superfícies e as transições aplicadas na página inicial.
Hover do e-mail: branco `#FFFFFF`, texto marinho `#071321`, círculo marinho e seta branca.
EMPRESARIAL
Cards de serviço
02
Estado ativo · scroll mobile
Consultoria e desenvolvimento organizacional
- Diagnósticos e cultura
- Organização de processos
- Acompanhamento de mudanças
03
Psicologia ocupacional
Saúde mental e riscos psicossociais
- Avaliações psicossociais
- Análise de riscos
- Promoção da saúde mental
No site, o card mais próximo do centro da viewport recebe `is-active` via IntersectionObserver em `(hover: none) and (pointer: coarse)`.
- +15
- anos de experiência
- +27 mil
- atendimentos realizados
- 3
- áreas integradas
- Guarujá
- SP · Baixada Santista
04Movimento e interação
O jogotambém se treina.
- LINES
- Máscara vertical · 1,1s · atraso padrão de 90ms por linha.
- FOTOGRAFIA
- Clip-path de baixo para cima · escala 1,18 → 1 em 2s.
- HOVER
- CTA varre o fundo em 500ms; seta sai e retorna na diagonal.
- SCROLL
- Parallax do Hero e equipe; estados centrais mobile usam IntersectionObserver.
ABORDAGEM · ESTADO DE FOCO
- 1
Escuta
- 2
Diagnóstico
- 3
Intervenção
- 4
Acompanhamento
`prefers-reduced-motion` remove as transições e animações de entrada do sistema.
05Responsividade e estrutura
Ritmo responsivo, sem perder clareza.
Container principal de até 1440px, margens de 20px no mobile e 40px em `md`; a grade cresce por breakpoints reais do Tailwind.
- sm · 640px
- Primeiro rearranjo de colunas e rótulos.
- md · 768px
- Grade de 12 colunas, paddings de 40px e navegação ainda móvel.
- lg · 1024px
- Navegação desktop e cards empresariais em três colunas.
- xl · 1280px
- Escala ampla de títulos e refinamento do grid.
NAVEGAÇÃO · COMPONENTE REAL
Renata de Almeida RamosClínica · Esportiva · Empresarial- MOBILE · marca compacta e menu editorial em tela cheia.
- DESKTOP · links inline a partir de `lg`.
- TOQUE · estados centrais por `(hover: none) and (pointer: coarse)`, independentes da largura.
- ACESSIBILIDADE · foco visível, menu com Escape e `prefers-reduced-motion`.
06Contato e rodapé
Duas rotas, um contato.
O CTA de e-mail abre a composição do Gmail; WhatsApp mantém seu destino próprio.