Design System

Sistema visual da marca. Referência única para o site e para o aplicativo.

Versão 1.0 · Setembro 2026

01 — Marca

Uma marca, um programa

Dra. Karol Thé é a marca. Ascenda 40+ é o programa dentro dela. O logo assina o site e o app; a Ascenda assina o produto. Não são marcas concorrentes e não têm sistemas visuais separados.

Personalidade

Boutique, editorial, clínica. Madura sem ser austera, sofisticada sem ser fria.

Público

Mulher 38–55, repertório intelectual, posição de responsabilidade. Comunicação médica e baseada em evidências — nunca infantilizante.

Método

O sistema se diferencia por restrição, não por variedade. Sem cor de alerta, sem pastel, sem sombra.

02 — Logo

Monograma CKT

Dois layouts — horizontal e empilhado — em três variações de cor. Sempre em SVG, nunca em PNG: o app precisa de nitidez em qualquer densidade de tela.

Horizontal · Verde Marca

Horizontal · Grafite

Horizontal · Verde Profundo

Empilhado · Verde Marca

Empilhado · Grafite

Empilhado · Verde Profundo

Horizontal · Areia

Empilhado · Areia

A variação Areia existe só para fundo escuro. Não é uma quarta cor de marca — é a mesma marca invertida.

Área de proteção

A altura do monograma CKT em todos os lados. Nada — texto, imagem, borda ou outro logo — entra nessa margem.

Arquivos

O PDF é o original vetorizado com os seis lockups. Os SVGs foram extraídos dele, um por variação.

SVG horizontal verde SVG empilhado verde SVG horizontal grafite SVG empilhado grafite SVG horizontal escuro SVG empilhado escuro SVG horizontal areia SVG empilhado areia PDF original

Os SVGs foram normalizados para os valores do sistema. O PDF original é CMYK, e CMYK não tem um equivalente RGB único — cada conversor devolve um valor diferente (ΔE 6,4 entre os dois que testamos). Se alguém reconverter o PDF por conta própria, vai obter um verde ligeiramente distinto. Use os SVGs desta página, não uma reconversão do PDF.

Tipografia do logo: Questrial. Registrada aqui apenas para quem precisar recriar o lockup — não deve ser carregada pelo site nem pelo app, já que o logo é consumido como SVG.

03 — Cor

Seis cores, e só

Verde Marca, Verde Profundo e Grafite vêm do logo vetorizado — são valores da marca, não escolhas de design. Areia, Areia Média e Sálvia vêm da identidade do programa Ascenda 40+.

O sistema é implementado por dois times que não conversam diariamente. Cada cor a mais é uma chance de divergência entre site e app — por isso a paleta é fechada.

#3D4F3B

Verde Marca

Dominante. Títulos, botão primário, fundos de seção. É a referência de cor do sistema: se site e app divergirem, este valor decide.

rgb(61,79,59) · 30%

#F7F6F2

Areia

Fundo dominante do sistema e cor de texto sobre fundo escuro. O respiro é o que comunica boutique.

rgb(247,246,242) · 40%

#132721

Verde Profundo

Fundos de alto contraste, rodapé, hover do botão primário.

rgb(19,39,33) · 10%

#9FA893

Sálvia

Acento decorativo — bordas, divisores, gradiente, ícones grandes. Nunca como texto sobre fundo claro.

rgb(159,168,147) · 8%

#EBE7E2

Areia Média

Superfície de card e estado hover sobre fundo claro.

rgb(235,231,226) · 7%

#1A1919

Grafite

Texto corrido longo e versão monocromática do logo.

rgb(26,25,25) · 5%

Proporção 40 / 30 / 30

Areia 40%, Verde Marca 30%, as quatro restantes somam 30%. Densidade visual alta destrói o posicionamento de ticket alto — a distribuição não é decorativa, é estratégica.

04 — Contraste

Combinações validadas

Valores calculados, não estimados. AA exige 4,5:1 para texto normal e 3:1 para texto grande e elementos de interface; AAA exige 7:1.

Isso não é formalidade: o público é mulher 40+ e o destino é um app de saúde, onde acessibilidade também é requisito de loja.

Texto	Sobre fundo	Razão	Nível	Uso
Verde Marca	Areia	8,16:1	AAA	títulos e links em toda a interface
Verde Marca	Branco	8,82:1	AAA	superfície elevada, input
Verde Marca	Areia Média	7,17:1	AAA	texto dentro de card
Verde Profundo	Areia	14,49:1	AAA	texto de máxima ênfase
Grafite	Areia	16,22:1	AAA	corpo de texto longo
Areia	Verde Marca	8,16:1	AAA	botão primário, seção escura
Areia	Verde Profundo	14,49:1	AAA	rodapé, faixa de alto contraste
Sálvia	Verde Profundo	6,34:1	AA	texto de apoio sobre fundo escuro
Grafite	Sálvia	7,10:1	AAA	tag ou pill em sálvia
Sálvia	Verde Marca	3,57:1	AA grande	só ≥24px, borda ou ícone — nunca corpo
Sálvia	Areia	2,29:1	Reprova	proibido
Sálvia	Branco	2,47:1	Reprova	proibido
Verde Marca	Verde Profundo	1,78:1	Reprova	proibido

Correção herdada da landing page

A LP Ascenda 40+ usa linear-gradient(147deg, #404A39 40%, #9FA893 100%) no botão primário, com texto branco. Na ponta sálvia do gradiente o contraste cai para 2,47:1 — reprovado em AA.

O gradiente sai do botão. Botão primário passa a ser Verde Marca sólido, 8,16:1. O gradiente permanece permitido apenas como fundo de seção decorativa, sem texto por cima.

↑ único uso aprovado do gradiente: faixa decorativa sem texto.

05 — Tipografia

Playfair Display e Montserrat

Duas famílias, ambas Google Fonts sob licença OFL — livres para web e para app, sem custo e sem restrição de distribuição.

Playfair Display

Display, H1–H3 e citações. Pesos 400 e 500. Serifada didone de alto contraste — é o que separa "clínica boutique" de "consultório".

Aa Bb Cc

Montserrat

Corpo, interface, labels e botões — toda a UI do app. Pesos 400, 600 e 700. Geométrica neutra, legível em tamanho pequeno e em tela de celular.

Aa Bb Cc

Escala

Razão 1,25 (terça maior), base 16px. Substitui os valores avulsos do construtor da LP (38 / 45 / 46 / 49px), que não formavam escala e não eram reproduzíveis no app.

Display
61px · 400
lh 1.05 · ls −0.04em

Longevidade

H1
49px · 400
lh 1.1 · ls −0.035em

Saúde da mulher 40+

H2
39px · 400
lh 1.15 · ls −0.03em

Medicina de precisão

H3
31px · 400
lh 1.2 · ls −0.02em

Sua saúde hormonal

H4
25px · 600 · Montserrat
lh 1.3 · ls −0.01em

Sua saúde metabólica

Body Large
20px · 400
lh 1.6 · ls −0.01em

Medicina que enxerga a mulher como um todo — corpo, mente, fases hormonais, metabolismo e as mudanças naturais do envelhecer.

Body
16px · 400
lh 1.6 · ls 0

Texto corrido de apoio, usado em blocos longos e em conteúdo denso dentro do aplicativo.

Label / Botão
12px · 600
lh 1.2 · ls +0.08em

Agendar avaliação inicial

Três desvios conscientes do material de origem

1 · Tracking em em, nunca em px. A LP usa letter-spacing: -2.5px fixo. Em 46px isso equivale a −0,054em; aplicado a 24px vira −0,10em e as letras colidem. Em em o valor escala junto com o tamanho — é o que o torna portável para o app.

2 · Entrelinha nunca abaixo de 1,05. A LP usa line-height: 1.0 nos títulos, o que cola as linhas em qualquer título de duas linhas.

3 · Tracking do label é positivo (+0,08em). A LP usa −0,5px. Texto curto, em caixa alta e a 12px precisa de espaço para respirar — o valor negativo prejudica a legibilidade justo no botão, o único elemento que precisa ser lido rápido.

Mobile

Display 39px · H1 31px · H2 25px · H3 20px. O corpo de texto não reduz — o público é 40+ e a legibilidade vem antes da composição.

06 — Espaço e forma

Base 4px

Escala de espaçamento em progressão de 4px. Substitui os valores do construtor da LP (0.44rem, 0.67rem, 3.38rem, 5.06rem), que não formavam progressão e não eram reproduzíveis em outra plataforma.

Token	Valor	Uso típico
space-1 … space-4	4 · 8 · 12 · 16px	espaço interno de componente, gap de ícone
space-6 · space-8	24 · 32px	padding de card, gap de grid
space-12 · space-16	48 · 64px	espaço entre blocos
space-24 · space-32	96 · 128px	respiro entre seções
radius-sm	6px	botão, input, tag
radius-md	18px	card
radius-lg	24px	imagem em destaque, modal
radius-full	999px	avatar, pill
container	1140px	largura máxima de conteúdo
gutter	24px / 16px mobile	respiro lateral
border	1px sálvia 35%	borda de card, divisor

Sem sombra

O sistema não usa sombra como elevação. A separação entre superfícies se dá por cor e por borda de 1px. É decisão estética e deliberada — sombra difusa é o que faz uma interface parecer template.

07 — Componentes

Base comum

Os componentes abaixo estão renderizados com os tokens reais desta página. Passe o mouse e navegue por teclado (Tab) para ver os estados.

Botões

Agendar avaliação inicial Saiba mais

Primário: Verde Marca sólido, texto Areia, hover Verde Profundo. Secundário: transparente com borda Verde Marca, hover fundo Areia Média. Ambos radius 6px, padding 20×32, Montserrat 12px/600, tracking +0,08em.

Campo de formulário

E-mail

Fundo branco, borda 1px sálvia 35%, radius 6px. No foco, anel de 2px em Verde Marca.

Card

Saúde hormonal

Equilíbrio dos hormônios femininos e seu 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, avaliação de composição corporal e plano construído sobre o que o corpo pede.

Faixas de seção

Seção clara

Fundo Areia, títulos em Verde Marca, corpo em Grafite. É o padrão do sistema.

Seção escura

Fundo Verde Profundo, títulos e corpo em Areia. Exceção com propósito, não alternância decorativa.

Estados obrigatórios

Todo elemento interativo implementa default, hover, focus, active e disabled (opacidade 40%). O foco visível — anel de 2px em Verde Marca — não é opcional: é requisito de acessibilidade e o item que times de aplicativo mais esquecem.

08 — Regras

O que sempre, o que nunca

Sempre

Logo em SVG — nitidez em qualquer densidade de tela.

Área de proteção = altura do monograma CKT em todos os lados.

Verde Marca decide — se site e app divergirem na cor, o logo é a referência.

Fundo Areia como padrão; fundo escuro é exceção com propósito.

Foco visível em todo elemento interativo.

Nunca

Gradiente com texto por cima.

Sálvia como texto sobre fundo claro (2,29:1).

Playfair Display no corpo ou abaixo de 20px.

Caixa alta em título de Playfair — a serifa didone perde o desenho.

Distorcer, rotacionar, sombrear ou recolorir o logo fora das três variações oficiais.

Verde Marca sobre Verde Profundo (1,78:1).

Cor fora da paleta — inclusive cor de erro ou sucesso, sem aprovação.

09 — Tokens

Exportação

Dois formatos com os mesmos valores: CSS custom properties para o site e JSON no padrão W3C Design Tokens para o app, independente de framework.

Baixar tokens.css Baixar tokens.json

CSS custom properties

carregando…

W3C Design Tokens (JSON)

carregando…

10 — Para o time do app

Três perguntas antes de fechar a v1

Este documento é a v1 do sistema. Três decisões ainda dependem de informação que só o time do aplicativo tem, e as três são mais baratas de resolver agora do que depois.

1 · O que já é imutável?

O app já tem tokens, protótipo ou biblioteca de componentes definidos? Se algo já está travado, é melhor o sistema acomodar agora.

2 · Unidades

Precisam da escala tipográfica em sp/dp (Android) ou pt (iOS) além de rem? A conversão sai junto na v1.1.

3 · Modo escuro

O app vai ter modo escuro? Se sim, o Verde Profundo passa a ser superfície base e a paleta precisa de uma rampa a mais — isso muda o sistema.

Como propor mudança

Alterações de token são acordadas entre os dois times e versionadas aqui — este endereço é a fonte de verdade e se mantém a cada republicação. Nenhum dos lados altera um valor localmente: divergência silenciosa de token é o que faz site e app pararem de parecer o mesmo produto.