Design System
Aplicação do sistema da marca ao site institucional.
Versão 2.0 · 22 de setembro de 2026Da v1 para a v2
A v1 deste documento, de 21 de setembro, derivava a cor do PDF do logotipo e usava Playfair Display com Montserrat. Aquela identidade foi substituída.
| Item | v1 · 21/09 | v2 · 22/09 |
|---|---|---|
| Cor primária | #3D4F3B | #1D2B1C · brand-forest |
| Fundo de página | #F7F6F2 areia | #F2F6F0 · surface |
| Display | Playfair Display | Poiret One, piso de 26px |
| Interface | Montserrat | Instrument Sans |
| Citações | — | Instrument Serif itálico |
| Texto corrido | Grafite #1A1919 | o próprio verde da marca · ink |
| Cor de ação e foco | verde da marca | mulberry #AA557F |
| Estados clínicos | não existiam | positive · attention · critical |
| Temas | um | Clínica e Noite |
| Sombra | proibida | por papel: sm · md · lg · bar |
| Botão | retângulo 6px, 12px caixa alta | cápsula, 16px caixa baixa, mín. 44px |
| Desabilitado | opacidade 40% | ink-muted sobre surface-sunken |
| Borda | sálvia em alfa 35% | cor sólida · border |
O que sobreviveu da v1
A tabela de contraste com razão, nível e uso; a regra da escala móvel (o display encolhe, o corpo nunca); a seção de governança; a exportação W3C ao lado do CSS; e a regra do CMYK — o valor canônico é o do arquivo, ninguém reconverte o PDF.
Três layouts, quatro cores
Horizontal, vertical e monograma, em forest, sage, branco e verde-marca. A linha de apoio "Medicina de Precisão e Longevidade" só existe no tamanho G.
Horizontal · forestHorizontal · sobre tint
Horizontal · sage
Vertical · forestVertical · sage
Vertical · branco, só sobre accent
Monograma · forest
Monograma · sage
Monograma · verde-marca, só impressoTamanhos
Medidos pela altura do monograma: G 72px assinatura completa, M 48px monograma e nome, P 32px só o monograma. No site entram G no cabeçalho e no rodapé, e M no cabeçalho em tela estreita. O cabeçalho fica com 96px de altura.
Área de proteção
A altura do C em volta de tudo. Nada entra nessa margem.
Arquivos
Os 12 arquivos abaixo foram extraídos do PDF vetorizado da cliente, limpos para carregar só o próprio lockup (de 102KB para 23KB, e 1,5KB no monograma) e recoloridos para a paleta nova. A arte é a original dela, não um traçado. Continuam sujeitos a substituição pelos arquivos oficiais do sistema do app, para não existirem duas versões do logotipo.
O logotipo entra sempre como vetor: o A de DRA.KAROL não tem travessão e não existe em fonte nenhuma. A linha de apoio é Questrial, mas nenhuma fonte precisa ser carregada por causa do logo.
Raster — onde vetor não entra
Favicon, ícone de tela inicial e imagem de compartilhamento são os únicos lugares que exigem bitmap. Gerados em sage sobre forest.
Atenção no favicon: a 32px o monograma é traço fino demais e quase some. Se for para ficar legível na aba, o desenho precisa de uma versão com traço mais grosso — decisão de quem desenhou a marca, não nossa.
Oito de marca, 33 de papel
A paleta é fechada ao tokens.json, e ele inclui estados. Os dois verdes do PDF da cliente continuam no sistema, mas só para peça impressa que precise bater com o material existente dela.
Os verdes do PDF
brand-verde-original #375439 e brand-verde-profundo #112B23 continuam no sistema, só para impresso que precise bater com material já existente. Nenhum dos dois serve sobre fundo escuro — o primeiro lê 2,1:1 no tema Noite.
Estado nunca só por cor
Toda métrica traz número, unidade, data e um selo com a palavra do estado. A barra colorida é reforço, nunca a única portadora do dado.
Conferido, não estimado
Todos os valores abaixo foram recalculados a partir dos tokens. AA pede 4,5:1 para texto normal e 3:1 para texto grande e elementos de interface.
| Texto | Sobre | Razão | Nível | Uso |
|---|---|---|---|---|
| ink | surface | 13,58:1 | AAA | texto principal do site |
| ink | surface-raised | 14,85:1 | AAA | texto em cartão |
| ink | surface-tint | 11,39:1 | AAA | bloco editorial e citação |
| ink-muted | surface | 5,49:1 | AA | legenda, rótulo, desabilitado |
| ink-muted | surface-raised | 6,00:1 | AA | apoio em cartão |
| ink-muted | surface-tint | 4,60:1 | AA | piso do sistema em texto |
| on-accent | accent | 4,87:1 | AA | botão primário, 16px |
| accent-text | surface | 6,29:1 | AA | link e ícone em mulberry |
| accent-text | surface-accent | 5,97:1 | AA | texto em bloco de contexto |
| positive | surface | 5,24:1 | AA | métrica na faixa ideal |
| attention | surface | 5,58:1 | AA | métrica em atenção |
| critical | surface | 6,46:1 | AA | erro e alerta clínico |
| ink-inverse | surface-inverse | 14,85:1 | AAA | faixa escura |
| ink-inverse-muted | surface-inverse | 11,39:1 | AAA | subtítulo em faixa escura |
| border-strong | surface-raised | 4,00:1 | AA UI | contorno de campo e de botão |
| focus-ring | surface | 4,45:1 | AA UI | anel de foco |
| focus-ring | surface-inverse | 3,05:1 | no limite | foco sobre faixa escura |
| slate-500 | surface-raised | 4,00:1 | só 24px+ | fio e ícone, nunca corpo |
| green-500 | surface-raised | 3,46:1 | só 24px+ | barra e ícone, texto usa positive |
| border | surface | 1,13:1 | decorativo | fio de cartão — não carrega significado |
| surface-raised | surface | 1,09:1 | decorativo | degrau do cartão, junto com shadow-sm |
Duas notas sobre os números
Três valores da tabela original do sistema estavam um pouco acima do real — ink lê 13,58 e não 14,8; accent-text 6,29 e não 6,9; positive 5,24 e não 5,7. Todos continuam aprovados; a tabela acima já traz os valores recalculados.
border a 1,13:1 e o degrau do cartão a 1,09:1 ficam abaixo de 3:1 — e isso é deliberado: o próprio sistema classifica a borda como decorativa, que não carrega significado sozinha. Quem carrega o limite do controle é border-strong, a 4,00:1.
Poiret One, Instrument Sans, Instrument Serif
As três são Google Fonts sob OFL. Poiret One tem peso único 400 — por isso o piso de 26px. Instrument Sans é variável de 400 a 700. Instrument Serif tem normal e itálico.
76 / 80 · Poiret One
ls +0,01em
celular 44 / 48
60 / 64 · Poiret One
celular 40 / 44
42 / 48 · Poiret One
celular 32 / 38
32 / 38 · Poiret One
celular 28 / 34
22 / 28 · Instrument Sans 600
18 / 28 · Instrument Sans
medida 680px
16 / 24 · Instrument Sans
não reduz no celular
16 / 20 · Instrument Sans 600
caixa baixa
11 / 14 · caixa alta
ls +0,08em
40 / 50 · Instrument Serif itálico
Regras que mudaram
Tracking em display agora é positivo (+0,01em): a Poiret One é aberta por desenho e apertar quebra os anéis. Botão passa a 16px caixa baixa — texto nunca abaixo de 16px, botão incluído. A eyebrow é o único estilo que pode ir a 11px, e no máximo uma a cada três seções.
Regras que ficaram
O corpo não reduz no celular. Tracking em em, nunca em px. Fonte de display nunca em corpo de texto nem em caixa alta — vale igual para a Poiret One, com piso de 26px. A serifa é só para as citações dela, sempre assinadas; não é estilo de interface.
Base 4px, raios por papel
| Token | Valor | Uso |
|---|---|---|
| space-1 … space-6 | 4 · 8 · 12 · 16 · 20 · 24 | espaço interno, gap de ícone |
| space-8 … space-12 | 32 · 40 · 48 | padding de cartão, gap de grid |
| space-16 · space-24 | 64 · 96 | respiro de seção — 64 em tela larga, 16 no celular |
| radius-xs | 6px | selo e marcação miúda |
| radius-sm | 10px | campo de formulário |
| radius-lg | 20px | cartão |
| radius-xl | 26px | folha e modal |
| radius-2xl | 36px | imagem em destaque |
| radius-full | 999px | botão e chip — botão é cápsula, sempre |
| tap-min | 44px | alvo mínimo de toque |
| control-lg | 50px | campo de agendamento e botão no celular |
| content-max | 1120px | largura de conteúdo |
| reading-max | 680px | medida de texto corrido — nunca ultrapassar |
| shadow-sm / md / lg | cartão / folha / dispositivo | sombra curta e sempre junto com o fio, nunca no lugar dele |
Renderizados com os tokens
Passe o mouse e navegue por teclado para ver hover, foco e pressionado.
Botões
Cápsula, 44px de altura mínima, padding lateral 20px, 16px caixa baixa peso 600. Pressionado: escala 0,97 em 120ms. Uma ação primária por tela. O desabilitado é legível de propósito — a paciente precisa ler o que não pode mudar.
Campo
Rótulo permanente acima em 14px caixa baixa, mensagem de apoio abaixo, contorno em border-strong, raio 10px, 50px de altura no celular. O erro diz o que fazer, não só que está errado.
Cartão
Saúde hormonal
Equilíbrio dos hormônios femininos e o impacto no sono, na clareza mental e na performance física.
Saúde metabólica
Estratégias individualizadas para reduzir inflamação e promover emagrecimento consciente após os 40.
Acompanhamento
Consulta aprofundada, composição corporal e um plano construído sobre o que o corpo pede.
Branco sobre surface, raio 20px, fio mais shadow-sm. Cartão nunca sobre o próprio tom, e nunca um cartão dentro de outro.
A escada de seis chãos
A página desce por seis superfícies, nesta ordem. Uma faixa escura por página, e é a primeira. O cabeçalho assume o tom da faixa que está embaixo dele: escuro sobre o herói, claro depois.
Cuidar aos 40 é ter a oportunidade de mudar a história aos 80.
— Dra. Karol Thé
A serifa aparece só aqui: citação dela, sempre assinada.
Sete durações, quatro curvas
| Token | Valor | Quando |
|---|---|---|
| dur-press | 120ms | pressionar controle — escala 0,97 |
| dur-micro | 160ms | tooltip e rótulo no hover |
| dur-menu | 240ms | menu, popover, chip, controle segmentado |
| dur-reveal | 300ms | revelar bloco ao rolar |
| dur-surface | 320ms | barra que gruda, troca de cor e de aba — o padrão |
| dur-sheet | 400ms | folha modal e gaveta |
| dur-stagger | 80ms | atraso entre irmãos — no máximo quatro |
| ease-out | .23 1 .32 1 | tudo que entra ou sai da tela |
| ease-in-out | .4 0 .6 1 | o que fica e muda de lugar ou de cor |
| ease-sheet | .32 .72 0 1 | folha, gaveta e pressionar |
Movimento reduzido
prefers-reduced-motion desliga toda transição de posição. A opacidade continua.
O que o site tem de respeitar
Marca e texto
Logotipo sempre em vetor · área de proteção igual à altura do monograma · texto nunca abaixo de 16px, botão incluído · Poiret One nunca abaixo de 26px, nunca em corpo, nunca em caixa alta · medida de leitura máxima de 680px · o corpo não reduz no celular.
Cor e interface
Uma ação em accent por tela · uma faixa escura por página, a primeira · sálvia nunca como texto sobre fundo claro · foco visível em todo controle · estado nunca só por cor, sempre palavra e ícone · ink-muted é o piso do texto e desabilitado não usa opacidade · gradiente nenhum.
Exportação
Os mesmos valores do sistema do aplicativo, nos dois formatos. Incluem o tema Noite, que o site não usa mas o portal e o app usam.
No tema Noite
surface-inverse vira sálvia, não verde profundo. O accent clareia para #C97BA1 e o texto sobre ele passa a ser o verde da marca. A sombra some e quem separa é o fio.
CSS custom properties
carregando…
W3C Design Tokens
carregando…
O que falta para fechar
Logotipo oficial
Os 12 arquivos aqui são provisórios, gerados do PDF da cliente e recoloridos. Aguardam os arquivos do sistema do app.
Conferir os tokens
Estes tokens foram extraídos do documento do sistema, não recebidos como arquivo. Ao receber o original, diferenciar antes de seguir.
Ascenda 40+
A landing page atual está na identidade antiga e precisa ser refeita nesta. Falta definir prazo e o que está rodando em cima dela.