Contextos
Guia consolidado de aplicação da marca. Contextos por canal, identidade visual, linguagem, padrões de design e componentes de produto em um único lugar.
Aplicação por canal
Regras de aplicação da marca por plataforma e canal. Cada ponto de contato tem diretrizes específicas de logo, paleta, tom e formatação.
A plataforma principal de alcance. Grid visualmente coerente, identidade reconhecível e credencial médica sempre presente.
Regras
3x3 visualmente coerente, alternar cores e tipos
Carousel educacional, single post, citação
Template com logo watermark + safe zone
Lower third com nome e CRM em cortes curtos
"Dra. Anna Clara Costa | CRM 101942 | Dermatologista"
Sempre
- ✓Manter coerência visual no grid 3x3
- ✓Alternar entre carousel, single e citação
- ✓Incluir CRM no lower third de reels
- ✓Usar safe zone nos stories (margens internas)
- ✓Aplicar logo watermark discreto nos stories
Nunca
- ✗Quebrar a coerência visual do grid
- ✗Publicar reels sem identificação médica
- ✗Usar filtros que alterem tons de pele
- ✗Ignorar safe zone nos stories
- ✗Publicar sem formato definido (carousel/single/citação)
YouTube
Conteúdo longo com identidade visual forte. Thumbnails padronizadas, lower thirds consistentes e templates de descrição.
Regras
Fundo cream ou dark, Cormorant Garamond título, face da doutora
Nome + credencial + gold line separator
3-5 segundos com logo animado
CTA para inscrição + próximo vídeo
Template com links + credenciais completas
Sempre
- ✓Usar Cormorant Garamond nos títulos de thumbnail
- ✓Incluir face da doutora na thumbnail
- ✓Manter lower third com nome + CRM + gold line
- ✓Usar intro padronizada de 3-5 segundos
- ✓Incluir template de descrição com links
Nunca
- ✗Criar thumbnails sem rosto humano
- ✗Usar fontes alternativas nas thumbnails
- ✗Omitir credencial médica no lower third
- ✗Exceder 5 segundos na intro animada
- ✗Publicar sem end screen com CTA
Site Institucional
A presença digital principal da marca. Tom institucional, profissional e educativo. Cada elemento reforça autoridade médica e acessibilidade.
Regras
Logo completo no header, monograma MD no favicon
Cream background, charcoal text, gold accents
Institucional, profissional, educativo
Cormorant Garamond em display size, CTA gold
Credenciais obrigatórias: CRM, RQE, TED
Sempre
- ✓Usar Cormorant Garamond para títulos hero
- ✓Manter CTA principal em gold (#8B6914)
- ✓Incluir credenciais completas no footer
- ✓Manter hierarquia tipográfica: display > h1 > h2 > body
- ✓Respeitar espaçamento de seção (120px)
Nunca
- ✗Usar fontes alternativas nos títulos
- ✗Omitir CRM, RQE ou TED do footer
- ✗Aplicar dark mode como padrão no site
- ✗Usar cores vibrantes fora da paleta
- ✗Sobrecarregar o hero com múltiplos CTAs
Curso / Plataforma (Skinphania)
A plataforma educacional premium. Dark mode elegante, gold accents e sistema de módulos estruturado com progressão visível.
Regras
Skinphania derivado da marca-mãe
Dark mode, gold accents
Numerados, com ícone de pilar + progresso
Gold border, selo MD, assinatura
Charcoal bg, superfícies elevadas em gray-800
Sempre
- ✓Usar dark mode como padrão na plataforma
- ✓Destacar progresso com gold accent
- ✓Numerar módulos com ícone de pilar
- ✓Incluir selo MD e assinatura no certificado
- ✓Manter hierarquia visual: módulo > aula > conteúdo
Nunca
- ✗Usar light mode na área de membros
- ✗Omitir indicador de progresso nos módulos
- ✗Emitir certificado sem selo MD
- ✗Usar cores fora da paleta dark mode
- ✗Misturar estilos de interface com o site institucional
Dermocosméticos
Embalagens e identidade de produto. Cada linha de dermocosméticos carrega a autoridade da marca com elegância e clareza de informação.
Regras
Fundo cream ou branco, tipografia Cormorant Garamond
"Formulado por Dra. Anna Clara Costa"
Ingredientes em Jost, nome do produto em Cormorant Garamond
Cada produto tem cor accent secundária própria
Nome > Tipo > Ingrediente principal > Volume
Sempre
- ✓Usar Cormorant Garamond para nome do produto
- ✓Incluir selo "Formulado por Dra. Anna Clara Costa"
- ✓Listar ingredientes em Jost legível
- ✓Definir cor accent única por linha
- ✓Manter fundo cream ou branco na embalagem
Nunca
- ✗Usar fontes decorativas na embalagem
- ✗Omitir selo de autoria médica
- ✗Misturar cores de linhas diferentes
- ✗Usar fundo escuro nas embalagens
- ✗Sobrecarregar rótulo com informação visual
Regras transversais
Princípios que se aplicam a todos os contextos, independente da plataforma.
Credencial sempre visível
CRM 101942, RQE 63226 e TED devem aparecer em todo material público. A credencial é a base da autoridade.
Tipografia consistente
Cormorant Garamond para títulos, Jost para corpo. Sem exceções, sem fontes alternativas.
Paleta unificada
Gold (#8B6914), cream (#F8F5F0), charcoal (#2E2E2E). Variantes apenas dentro do sistema de tokens.
Tom científico-acessível
Rigor sem arrogância. Clareza sem simplificação excessiva. A marca educa com respeito.
Logo adaptativo
Usar logo completo onde há espaço, monograma MD onde há restrição. Nunca distorcer ou recolorir.
Acessibilidade
Contraste WCAG AA em todo texto. Alt text em imagens. Hierarquia semântica em headings.
Sistema visual proprietário
Molduras, direção fotográfica, tons de pele e elementos de assinatura que constroem a linguagem visual única da Melhor Dermato.
Molduras proprietárias
Dra. Anna Clara Costa
Barreira cutânea: por que ela importa
A barreira cutânea é a primeira linha de defesa da pele contra agressores externos. Quando comprometida, manifesta-se como ressecamento e inflamação.
Frame Editorial
Moldura com borda gold fina e cantos recortados via clip-path. Transmite sofisticação editorial.
Quando usar
Citações da dra., destaques de artigos, blocos de autoridade médica.
.frame-editorialDra. Anna Clara Costa
Barreira cutânea: por que ela importa
A barreira cutânea é a primeira linha de defesa da pele contra agressores externos. Quando comprometida, manifesta-se como ressecamento e inflamação.
Frame Clinical
Moldura com linha dupla sutil (border + outline). Evoca precisão clínica e rigor científico.
Quando usar
Cards de procedimentos, fichas técnicas, dados clínicos, comparativos.
.frame-clinicalDra. Anna Clara Costa
Barreira cutânea: por que ela importa
A barreira cutânea é a primeira linha de defesa da pele contra agressores externos. Quando comprometida, manifesta-se como ressecamento e inflamação.
Frame Prescription
Estilo receituário médico: linha gold na base com ponto decorativo.
Quando usar
Recomendações de produtos, prescrições de rotina, protocolos Skinphania.
.frame-prescriptionElementos de assinatura
Accent Bar (horizontal)
Barra gold de 3px com gradiente tricolor (dark -> gold -> light).
Separador entre seções, accent em cards, headers de página.
Accent Bar (vertical)
Barra gold de 3px com gradiente tricolor. Orientação vertical.
Sidebar accent, destaque lateral em blockquotes, indicador de seção ativa.
Signature Line
Linha horizontal gold que se expande da esquerda com animação (expandLine).
Separador animado, revelação de conteúdo, finalização de seções premium.
Watermark MD
Letras "MD" gigantes semitransparentes (3-4% opacidade) com rotação de -12 graus.
Seções de destaque, hero areas, backgrounds de páginas institucionais.
Direção fotográfica
Esta seção documenta diretrizes editoriais e de estilo. Não inclui acervo fotográfico — as imagens reais serão comissionadas conforme estas especificações.
Clínica, natural, premium. Pele real com diversidade e profissionalismo.
Sempre
- ✓Luz natural ou softbox difusa
- ✓Pele real, texturas visíveis
- ✓Fundos neutros (cream, branco, beige)
- ✓Composição clean com respiro
- ✓Diversidade de tons de pele
- ✓Close-ups de textura (macro)
- ✓Enquadramento profissional
Nunca
- ✗Filtros pesados ou retoque excessivo
- ✗Fundos coloridos vibrantes
- ✗Imagens de banco genérico
- ✗Flash direto ou luz dura
- ✗Poses artificiais
- ✗Marca d'agua ou watermarks
- ✗Saturação excessiva
Color Grading Reference
Tons de pele aceitáveis para fotografia da marca
Fair
#F5E0C9
Light
#E8C9A0
Medium
#C9A06E
Olive
#B08C5A
Tan
#8D6E4C
Deep
#6B4C33
Rich
#4A3020
Pilares e formatos de conteúdo
Cinco eixos temáticos, calendário editorial, estrutura de carrossel e identidade visual para Vídeo Sales Letters.
01
Ciência da Pele
Barreira cutânea, colágeno, renovação celular, microbioma, pH. Conteúdo que traduz a ciência em linguagem acessível sem perder rigor.
02
Educação
Condições dermatológicas, tratamentos disponíveis, quando buscar profissional. Empoderamento do paciente com informação de qualidade.
03
Protocolos
Skinphania, rotinas estruturadas, protocolos sazonais (verão/inverno). Guias práticos com sequência de uso e frequência.
04
Mitos
Desmistificação com autoridade médica. Combate a desinformação viral com base científica e tom respeitoso.
05
Ingredientes
Retinol, vitamina C, ácidos (glicólico, salicílico, mandelic), niacinamida. Como funcionam, concentrações e combinações.
Distribuição de conteúdo
Calendário semanal (padrão)
Seg
Ciência
Ter
Educação
Qua
Protocolo
Qui
Mitos
Sex
Ingredientes
Sáb
Educação
Dom
Ciência
Estrutura de carrossel educacional
Capa
Conteúdo A
Conteúdo B
Conteúdo C
CTA Final
Vídeo Sales Letter (VSL)
Estrutura VSL - 5 Fases
Dark mode preferencial. Paleta: #0A0A0A bg, gold accents, white text.
Headline impactante em tela cheia. Fundo dark #0A0A0A com texto gold animado.
Identificação da dor. Lower third permanente com nome e CRM.
Apresentação do método. Barra de progresso gold no topo.
Depoimentos em overlay cards. Foto + nome + resultado.
Chamada final com urgência sutil. Botão gold centralizado.
Grid, layouts e templates sociais
Estrutura modular de grid, padrões de layout responsivo e formatos padronizados para cada plataforma social.
Sistema de grid
Grid 12 colunas
Max-width: 1200px. Gutter: 24px. Base do sistema responsivo.
Breakpoints & Containers
| Breakpoint | Range | Colunas | Container | Padding |
|---|---|---|---|---|
| Mobile | 0 - 640px | 4 | 100% | 24px |
| Tablet | 641 - 1024px | 8 | 768px | 32px |
| Desktop | 1025px + | 12 | 1200px | 48px |
Padrões de layout
Hero Full-Width
Bloco de impacto com texto sobreposto, ideal para aberturas e lançamentos.
Content + Sidebar
Conteúdo principal 2/3 com barra lateral 1/3 para navegação ou destaques.
Bento Grid
Grid irregular com blocos de tamanhos variados, para dashboards e showcases.
Centered
Conteúdo centralizado com max-width restrita, ideal para artigos e textos longos.
Templates sociais
Feed Post
Carrossel educacional, dicas de skincare
Story
Dicas rápidas, bastidores, enquetes
Reel Cover
Thumbnail de vídeo, reels
YouTube Thumb
Thumbnails de vídeo, capas
LinkedIn Post
Artigos profissionais, cases
Componentes UI e de produto
Botões, cards, badges, article cards, CTA blocks e quiz interativo. Cada elemento segue os tokens de cor, tipografia e espaçamento do design system.
Botões
Primary / Outline / Ghost
Estados
default
hover
active
disabled
Cards
Consulta Dermatológica
Avaliação completa da saúde da pele com dermatoscopia digital e plano de tratamento personalizado.
Dark
Laser Fracionado
Card invertido para seções de destaque, heróis ou CTAs com alto contraste visual.
Glass
Toxina Botulínica
Efeito glassmorphism com backdrop-blur. Funciona sobre imagens de fundo e gradientes.
Article Cards
Retinol: guia completo para iniciantes
Melasma: tratamentos que funcionam
As 8 etapas do protocolo
CTA Blocks
Primary CTA
Cuide da sua pele com quem entende
Agende sua consulta com a Dra. Anna Clara Costa e receba um plano de tratamento personalizado.
CRM 101942 · RQE 63226 · Atendimento presencial e online
Newsletter
Conteúdo exclusivo sobre pele
Receba artigos, dicas e novidades da dermatologia diretamente no seu email.