06Linguagem

Cor

A estrutura é consistente. A expressão pode mudar.

02 · Cinco camadas

Oficial

Nem toda cor tem o mesmo papel.

Estrutura, neutros, expressão, estados de interface e dados de saúde são camadas diferentes. Elas convivem, mas nunca se substituem.

Estruturais

Reconhecimento da marca.

Onde viveLogotipo, capas, fundos institucionais, Vita.

NuncaSinalizar estado ou dado.

Neutros

Respiro e leitura.

Onde viveFundos, superfícies, bordas, texto.

NuncaSubstituir a marca em capas.

Expressão

Variedade com coerência.

Onde viveCampanhas, séries, eventos, editorial.

NuncaIndicar risco ou gravidade.

Semânticas

Estados de interface.

Onde viveSucesso, informação, atenção, erro.

NuncaDecorar peças de marca.

Dados de saúde

Domínios, não diagnósticos.

Onde viveCategorias: sono, coração, atividade…

NuncaClassificar como bom ou ruim.

Cada camada responde a uma pergunta diferente: quem fala (marca), onde ler (neutros), qual tema (expressão), o que aconteceu (estado) e de que se trata (domínio).

03 · Paleta principal

Oficial

Cinco cores. Valores fixos.

Estes HEX não mudam. A hierarquia em três níveis abaixo é uma proposta: o AV-BRAND-03 define os papéis de cada cor, mas não estabelece explicitamente cores primárias e secundárias.

Estrutura dominante

Proposta

Reconhecimento e autoridade. Fundos escuros, títulos institucionais e superfícies de produto.

#112031

Deep Azure

Autoridade, profundidade, institucional.

RGB: 17 · 32 · 49
Contraste: 16.5:1 c/ branco
Função: Títulos institucionais, capas, fundos escuros principais, texto de alto contraste.
Combina com: Branco · Jade · Chartreuse

#152D35

Deep Petrol

Superfícies escuras e tecnologia.

RGB: 21 · 45 · 53
Contraste: 14.4:1 c/ branco
Função: Painéis de produto escuros, Vita, Sense, telas noturnas.
Combina com: Branco · Aqua · Chartreuse

Apoio

Proposta

Conexão e respiro. Linhas, ícones, links e superfícies calmas.

#345B63

Rich Teal

Estrutura secundária e conexão.

RGB: 52 · 91 · 99
Contraste: 7.4:1 c/ branco
Função: Linhas, ícones, links, gráficos de apoio, bordas ativas.
Combina com: Branco · Snow

#D4ECDD

Pale Jade

Calma, superfície, humanidade.

RGB: 212 · 236 · 221
Contraste: 13.2:1 c/ Azure
Função: Superfícies suaves, blocos de respiro, fundos de cartões.
Combina com: Deep Azure · Rich Teal

Luz e destaque

Proposta

Atividade e seleção. Um único ponto por composição.

#E8FF9C

Pale Chartreuse

Energia, atividade e destaque raro.

RGB: 232 · 255 · 156
Contraste: 15.1:1 c/ Azure
Função: Seleção, item ativo, luz, um único destaque por composição.
Combina com: Deep Azure (texto e ícone)

#E8FF9C é luz, não fundo. Use para atividade, seleção e destaque. Não deve virar background dominante recorrente.

04 · Variações tonais

Proposta

Tons para construir, sem mudar a cor.

Escalas propostas a partir das cinco cores oficiais. Valores fixos para avaliação — não são tokens e não substituem a paleta. O passo 100 é sempre o valor oficial.

Deep Azure

família · #112031

Azure 05

#F1F2F3Fundos de destaque muito leves.c/ branco 1.1 · c/ Azure 14.7Proposta

Azure 20

#CBCED2Fundos de destaque muito leves.c/ branco 1.6 · c/ Azure 10.4Proposta

Azure 40

#949BA2Fundos de destaque muito leves.c/ branco 2.8 · c/ Azure 5.9Proposta

Azure 70

#545E6BSuperfícies suaves, fundos de seção.c/ branco 6.6 · c/ Azure 2.5Proposta

Azure 100oficial

#112031Valor oficial.c/ branco 16.5 · c/ Azure 1.0Oficial

Azure 120

#0E1B27Bordas e estados pressionados em fundo escuro.c/ branco 17.4 · c/ Azure 1.1Proposta

Deep Petrol

família · #152D35

Petrol 05

#F1F2F3Fundos de destaque muito leves.c/ branco 1.1 · c/ Azure 14.7Proposta

Petrol 20

#CCD1D3Fundos de destaque muito leves.c/ branco 1.5 · c/ Azure 10.7Proposta

Petrol 40

#96A0A4Fundos de destaque muito leves.c/ branco 2.7 · c/ Azure 6.2Proposta

Petrol 70

#57686ESuperfícies suaves, fundos de seção.c/ branco 5.8 · c/ Azure 2.8Proposta

Petrol 100oficial

#152D35Valor oficial.c/ branco 14.4 · c/ Azure 1.1Oficial

Petrol 120

#102229Bordas e estados pressionados em fundo escuro.c/ branco 16.4 · c/ Azure 1.0Proposta

Rich Teal

família · #345B63

Teal 05

#EFF2F3Fundos de destaque muito leves.c/ branco 1.1 · c/ Azure 14.6Proposta

Teal 20

#CAD4D6Fundos de destaque muito leves.c/ branco 1.5 · c/ Azure 10.9Proposta

Teal 40

#9AADB1Fundos de destaque muito leves.c/ branco 2.3 · c/ Azure 7.0Proposta

Teal 70

#617F85Fundos de destaque muito leves.c/ branco 4.3 · c/ Azure 3.8Proposta

Teal 100oficial

#345B63Valor oficial.c/ branco 7.4 · c/ Azure 2.2Oficial

Teal 120

#233F46Bordas e estados pressionados em fundo escuro.c/ branco 11.2 · c/ Azure 1.5Proposta

Pale Jade

família · #D4ECDD

Jade 05

#F2F9F5Fundos de destaque muito leves.c/ branco 1.1 · c/ Azure 15.4Proposta

Jade 20

#E5F4EBFundos de destaque muito leves.c/ branco 1.1 · c/ Azure 14.5Proposta

Jade 100oficial

#D4ECDDValor oficial.c/ branco 1.2 · c/ Azure 13.2Oficial

Jade 120

#ACC8BETexto ou ícone sobre a cor oficial clara.c/ branco 1.8 · c/ Azure 9.2Proposta

Jade 140

#7C9C9ATexto ou ícone sobre a cor oficial clara.c/ branco 3.0 · c/ Azure 5.6Proposta

Jade 160

#3B5357Bordas e estados pressionados em fundo escuro.c/ branco 8.2 · c/ Azure 2.0Proposta

Pale Chartreuse

família · #E8FF9C

Chartreuse 05

#F9FFE6Fundos de destaque muito leves.c/ branco 1.0 · c/ Azure 16.1Proposta

Chartreuse 20

#F2FFC9Fundos de destaque muito leves.c/ branco 1.1 · c/ Azure 15.6Proposta

Chartreuse 100oficial

#E8FF9CValor oficial.c/ branco 1.1 · c/ Azure 15.1Oficial

Chartreuse 120

#CCE183Texto ou ícone sobre a cor oficial clara.c/ branco 1.4 · c/ Azure 11.5Proposta

Chartreuse 140

#9AAE57Texto ou ícone sobre a cor oficial clara.c/ branco 2.5 · c/ Azure 6.7Proposta

Chartreuse 160

#4B5825Bordas e estados pressionados em fundo escuro.c/ branco 7.7 · c/ Azure 2.1Proposta

05 · Neutros

Oficial

Cinzas com temperatura.

Os neutros da AllVita têm uma leve temperatura teal. Comparados a cinzas genéricos, ficam mais calmos e mais próprios.

White

#FFFFFF

Snow

#FAFCFB

Ice

#F5F8F7

Mist

#EDF2F1

Cloud

#E2E9E7

Fog

#CAD4D1

Stone

#A7B3B0

Slate

#74817F

Graphite

#465350

Ink

#24312F

Deep Ink

#111B1D

AllVita

Cinza genérico

Agenda de hojeAtualizado há 5 min

09:30Ana RibeiroRetorno

10:15Carlos MendesPrimeira consulta

11:00Júlia PradoCancelada

Fundo de página: Snow · #FAFCFB
Superfície / cartão: White · #FFFFFF
Superfície rebaixada: Mist · #EDF2F1
Borda / divisória: Cloud · #E2E9E7
Desabilitado: Fog · #CAD4D1
Texto auxiliar: Slate · #74817F
Texto secundário: Graphite · #465350
Texto principal: Ink · #24312F

Interface demonstrativa — nomes e horários fictícios.

06 · Combinações cromáticas

Em validação

Oito conjuntos para começar qualquer peça.

Fundo, texto principal, texto secundário, destaque e elemento de interface. Contraste calculado pela fórmula WCAG 2.2; as combinações seguem em validação até aprovação do owner.

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Institucional escuro

Texto16.5:1 · AAA · texto

Secundário13.2:1 · AAA · texto

Destaque15.1:1 · AAA · texto

Interface2.2:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Produto escuro

Texto14.4:1 · AAA · texto

Secundário10.4:1 · AAA · texto

Destaque13.2:1 · AAA · texto

Interface2.5:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Teal de apoio

Texto7.4:1 · AAA · texto

Secundário6.5:1 · AA · texto

Destaque6.8:1 · AA · texto

Interface3.2:1 · Texto grande · componentes

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Leitura clara

Texto16.0:1 · AAA · texto

Secundário7.8:1 · AAA · texto

Destaque7.2:1 · AAA · texto

Interface1.2:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Superfície Jade

Texto13.2:1 · AAA · texto

Secundário6.0:1 · AA · texto

Destaque13.2:1 · AAA · texto

Interface1.4:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Produto claro

Texto13.5:1 · AAA · texto

Secundário4.0:1 · Texto grande · componentes

Destaque7.4:1 · AAA · texto

Interface1.2:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Expressão Aqua

Texto11.9:1 · AAA · texto

Secundário5.4:1 · AA · texto

Destaque1.4:1 · Somente decorativo

Interface1.4:1 · Somente decorativo

Destaque

Contexto antes da consulta.

Texto de apoio em 15px.

Destaque Chartreuse

Texto15.1:1 · AAA · texto

Secundário6.8:1 · AA · texto

Destaque15.1:1 · AAA · texto

Interface1.3:1 · Somente decorativo

Linhas de interface abaixo de 3:1 são decorativas e precisam de outro sinal (texto, ícone ou borda) para comunicar estado.

07 · Proporção cromática

Referência vigente

Muito respiro. Pouca luz.

Uma referência orientativa, não fórmula: 55–65% neutros, 20–25% Azure/Petrol, 10–15% Teal/Jade, 3–7% Chartreuse.

Institucional — leitura clara, autoridade discreta.

Produto — neutros dominam, teal estrutura.

Campanha escura — profundidade com um ponto de luz.

Distribuição em peças reais

Proposta

InícioAgendaPacientesMensagens

Interface50% · 20% · 16% · 11% · 3%

Partes distintas. Uma jornada.

MédicoPacienteClínica

Apresentação52% · 30% · 12% · 6%

08 · Fundos claros e escuros

Proposta

A mesma peça, dois fundos, uma marca.

A identidade não depende de um único fundo. Logotipo oficial na versão adequada, a mesma hierarquia e um ponto de luz em cada caso.

Claro · Snow, texto Deep Azure, destaque Rich Teal (Chartreuse não tem contraste sobre claro).

Escuro · Deep Azure, texto branco, destaque Chartreuse.

09 · Cor sobre fotografia

Proposta

A cor organiza a imagem, não a esconde.

Fotografias existentes do Brand System. Véus e gradientes ficam localizados; o rosto e a interação permanecem legíveis.

Fotografia limpa
Sem texto sobre a imagem.

Véu Azure 55%
7.1:1 · AAA · texto (fundo médio estimado)

Gradiente localizado + destaque
Só no terço inferior; uma palavra em Chartreuse.

Área reservada para texto
16.5:1 · AAA · texto

Movimento também é cuidado.

Correto— texto sobre a área escurecida, imagem preservada.

Movimento também é cuidado.

Incorreto— véu Chartreuse sobre toda a foto e texto sem contraste.

10 · Paleta de expressão

OficialProvisório

Seis famílias para variar sem perder a marca.

As seis cores principais estão registradas. Os tons claro e profundo de cada família são calculados e ficam registrados abaixo como provisórios.

Aqua

#A9E6E3

claro #D8F4F2 · profundo #669395

Sky

#B8DCF5

claro #DFEFFB · profundo #6F8D9F

Lavender

#D4CBF4

claro #ECE8FA · profundo #7E849E

Coral

#F3B5A2

claro #FADED5 · profundo #8F7871

Amber

#F3D494

claro #FAECCF · profundo #8F8969

Mint

#BCE8C9

claro #E1F5E7 · profundo #719486

10 · Expressão em peças

Não o mesmo post azul-petróleo para sempre.

A paleta de expressão abre espaço para campanhas, conteúdo, eventos e domínios de saúde. A estrutura — logo, tipografia, Azure e luz — garante o reconhecimento.

InstitucionalAllVita

O cuidado continua depois da consulta.

SonoAllVita

Dormir bem também é cuidado.

CoraçãoAllVita

Seu ritmo, ao longo do tempo.

EventoAllVita

AllVita no Congresso de Medicina.

Peças demonstrativas. Diferentes na cor, iguais na estrutura.

Rose · #F2C4D3

Em avaliação

Já existe como cor registrada e é usada no domínio Saúde da Mulher, mas não faz parte das seis famílias de expressão. Possível sétima família — não oficializada nesta rodada.

11 · Distinção essencial

Oficial

Campanha ≠ interface ≠ estado ≠ dado de saúde.

Coral pode representar o domínio “coração”. Isso não significa risco. A cor de um domínio de saúde não indica, isoladamente, risco, diagnóstico ou gravidade.

Cor de campanha

Campanha Coração

Coral como expressão editorial.

Cor de interface

ConfirmarVer histórico

Estrutura e neutros guiam ações.

Estado semântico

Falha ao sincronizar o sensor.

Estado de sistema, com a camada semântica.

Categoria de dado

Coração

68 bpm

Coral identifica o domínio, não o estado.

11 · Cores semânticas de interface

Estados claros, sempre com ícone e texto.

Cor nunca é o único sinal. Cada estado combina ícone, texto, fundo e borda.

Sucesso

Exame anexado ao histórico.

Informação

Novo resumo disponível para leitura.

Atenção

Retorno ainda não confirmado.

Crítico

Não foi possível enviar a mensagem.

Neutro

Sem atualizações desde ontem.

11 · Cores de dados de saúde

Uma cor por domínio.

É linguagem visual por domínio, não classificação clínica. Nenhuma cor significa “saudável” ou “doença”.

Coração

bpm em repouso

Sono

7h12

na última noite

Recuperação

índice do dia

Estresse / carga

Moderada

carga da semana

Atividade

8.420

passos hoje

Respiração

rpm em repouso

Saúde da Mulher

Dia 12

do ciclo

Metabólico

Estável

tendência 30 dias

Valores demonstrativos — exemplo visual. Mapeamento atual preservado.

→

Metabólico · alternativa ao Rich Teal

Proposta

Hoje o domínio Metabólico usa Rich Teal, uma cor estrutural — mistura marca com dado. Proposta: um tom de expressão próprio (ex.: Sage #C9D9A6, contraste 11.0:1 com Azure). O mapeamento atual não foi alterado.

12 · Gradientes

Oficial

Gradiente cria atmosfera.

Poucos gradientes, sempre suaves. Eles nunca devem parecer “gradient branding”. Cada um tem um tipo e um lugar.

Vita

Iluminação da Vita

Presença calma da inteligência.

7h12

de sono · exemplo

Sense

Gradiente expressivo

O cotidiano medido com leveza.

Novo insight disponível.

Inteligência

Destaque cromático

Luz que aparece quando há insight.

Acolher também é cuidar.

Humano

Em avaliação

Gradiente expressivo

Calor de relação e acolhimento. Os tons pêssego não são cores institucionais.

Clinical Dark

Gradiente estrutural

Foco e profundidade em telas escuras.

Sobreposição fotográfica

Quinto tipo: sobreposição fotográfica. Deep Azure em degradê localizado para dar leitura ao texto — detalhado na seção 09.

Glow

Glow comunica atividade.

Aparece na Vita, no Sense, em insights, conexões e no centro de luz. Não é decoração permanente.

Correto— glow marca um evento, em um único ponto.

Incorreto— glow em tudo, como decoração.

13 · Acessibilidade

Oficial

Consulte o par antes de aplicar.

Critérios WCAG 2.2: 4.5:1 para texto, 3:1 para texto grande (≥ 24px, ou 19px em negrito), ícones, bordas de componentes e indicadores. Cor nunca é o único sinal de estado.

Fundo

Texto ou ícone

Ícone e rótulo

O cuidado continua entre consultas.

Texto corrido de 16px para leitura de apoio.

#112031 / #E8FF9C15.07:1 · AAA · texto

Pale Chartreuse não é usado como texto ou ícone sobre fundo branco ou claro. Sobre branco o contraste é 1.09:1 — abaixo de qualquer critério. Sobre fundo claro, o destaque passa para Rich Teal ou Deep Azure.

Par	Contraste	Classificação	Adequado para	Inadequado para
Aa#FFFFFF / #112031	16.47:1	AAA · texto	Texto, títulos, botões	—
Aa#112031 / #FFFFFF	16.47:1	AAA · texto	Capas, títulos, texto longo	—
Aa#112031 / #E8FF9C	15.07:1	AAA · texto	Palavra de destaque, item ativo	Parágrafos longos
Aa#FFFFFF / #345B63	7.44:1	AAA · texto	Links, ícones, texto curto	—
Aa#D4ECDD / #112031	13.21:1	AAA · texto	Cartões, blocos de respiro	—
Aa#152D35 / #A9E6E3	10.36:1	AAA · texto	Rótulos, gráficos em fundo escuro	Texto pequeno corrido
Aa#FFFFFF / #74817F	4.05:1	Texto grande · componentes	Texto auxiliar ≥ 16px	Texto essencial pequeno
Aa#FFFFFF / #E8FF9C	1.09:1	Somente decorativo	Somente decoração	Qualquer texto ou ícone
Aa#D4ECDD / #E8FF9C	1.14:1	Somente decorativo	Somente decoração	Qualquer texto ou ícone
Aa#FFFFFF / #F3B5A2	1.76:1	Somente decorativo	Preenchimento de domínio com rótulo	Texto, sinal de risco

Retorno ainda não confirmado.

Correto— ícone, texto e cor juntos.

Ana Ribeiro · 09:30

Incorreto— só um ponto colorido indica o estado.

14 · Aplicações

Mais cor, mesma elegância.

Peças existentes do Brand System (as mesmas usadas nos capítulos 16 e 17), sem alteração. A documentação completa de cada canal fica nesses capítulos.

AllVitaConheça

Website

A saúde que continua entre consultas.

Vita

Organizei o contexto para você.

Sense · conceito

7h12

de sono · Exemplo visual

Plataforma

Ana Ribeiro09:30

Carlos Mendes10:15

Júlia Prado11:00

Apresentação

3 camadas.
1 cuidado.

Instagram e Stories · peça existente

LinkedIn · peça existente

O custo da consulta sem contexto.

Documento · 8 páginas

Onde o tempo da consulta se perde

Dados ilustrativos

Documento / carrossel profissional

Apresentação · peça existente

Website · peça existente

Nomes e números demonstrativos.

Faça / Evite

Mais contexto. Menos esforço.

Correto— Um ponto de Chartreuse por composição.

Mais contexto. Menos esforço.

Incorreto— Chartreuse como fundo dominante.

Dormir bem também é cuidado.

Correto— Expressão em campanha, com estrutura AllVita.

Pressão elevada

Incorreto— Coral para alertar risco.

Escuta antes de tudo.

Correto— Véu localizado sobre fotografia.

Incorreto— Muitas cores de expressão na mesma peça.

Nem toda cor tem o mesmo papel.

Cinco cores. Valores fixos.

Tons para construir, sem mudar a cor.

Cinzas com temperatura.

Oito conjuntos para começar qualquer peça.

Muito respiro. Pouca luz.

A mesma peça, dois fundos, uma marca.

A cor organiza a imagem, não a esconde.

Seis famílias para variar sem perder a marca.

Não o mesmo post azul-petróleo para sempre.

Campanha ≠ interface ≠ estado ≠ dado de saúde.

Estados claros, sempre com ícone e texto.

Uma cor por domínio.

Gradiente cria atmosfera.

Glow comunica atividade.

Consulte o par antes de aplicar.

Mais cor, mesma elegância.

Inteligência clínica para o cuidado que não termina na consulta.