Amar Assist
Amar Assist
Manual de Identidade Visual

Design System

A expressão visual oficial da Amar Assist. Um sistema estruturado em proteção, inovação e excelência para inspirar conexões reais.

Explore

1. Introdução

1.1 Bem-vindo ao Manual de Identidade Visual

Este documento é um guia essencial que define e organiza a maneira como a nossa marca deve ser aplicada em diferentes contextos, garantindo uma comunicação visual consistente e alinhada com os nossos valores e missão.

Objetivo

O objetivo deste manual é assegurar que a identidade visual da Amar Assist seja utilizada de forma coerente e uniforme em todas as plataformas e materiais de comunicação. Um uso consistente fortalece nossa marca, facilita o reconhecimento e promove uma imagem profissional e confiável.

Importância da Identidade Visual

A identidade visual é um dos pilares fundamentais da nossa marca. Ela representa a essência da Amar Assist e comunica nossos valores de forma visual e intuitiva. Através de uma identidade visual bem definida, podemos transmitir confiança, profissionalismo e empatia, que são os alicerces da nossa atuação.

Abrangência

Este manual é destinado a todos os colaboradores, parceiros, fornecedores e qualquer outra parte interessada que esteja envolvida na criação e produção de materiais relacionados à Amar Assist. Inclui diretrizes detalhadas sobre o uso correto do logotipo, paleta de cores, tipografia, elementos gráficos e outras aplicações visuais.

1.2 Manifesto

Cuidar é estar junto. É apoiar, facilitar, amparar e resolver. É assim que protegemos o que mais amamos: nossos "Aumigos", nosso lar, nossa própria saúde, nosso trabalho, nossos bens, nosso tempo e aquilo que temos de mais precioso, nossa família.

Quando cuidamos com carinho desses pilares fundamentais de nossas vidas, estamos semeando a longevidade com bem-estar.

Imagine que somos como um forte abraço representado por uma marca. Uma marca que está sempre ao seu lado.

Porque Amar é cuidar de quem você ama.

Propósito

Nós nascemos para cuidar de você e de quem você ama, especialmente nos momentos mais desafiadores da sua vida.

Slogan

"Cuidamos de quem você ama."

1.3 Visão, missão e valores

Nosso objetivo é ser uma marca admirada por sua abordagem humanizada sobre longevidade (busca pela saúde e qualidade de vida), com medicamentos, consultas, exames, além de soluções funerárias, pet, previdenciárias e emocionais para as famílias brasileiras, com o propósito de servir a cada vida, cada história, sempre, impactando socialmente a comunidade que elas fazem parte.

Valores

  • Família: É o alicerce da nossa atuação.
  • Empatia: A base do nosso atendimento.
  • Vida: Valorizamos e protegemos a vida.

1.4 Por que
evoluímos?

Um Design System não é apenas um conjunto de cores e componentes. É a materialização da maturidade de um produto e do respeito pela experiência do usuário final. Nossa evolução não foi estética; foi estrutural.

Escalabilidade do Ecossistema

À medida que os canais da Amar Assist expandiram, precisávamos de uma base centralizada. A nova arquitetura garante que qualquer nova interface herde imediatamente a identidade premium, reduzindo a fragmentação visual.

Consistência & Acessibilidade

Adoção de diretrizes rígidas de contraste (Dark Mode-first) e a transição para a família tipográfica Geist garantem máxima legibilidade. Proteção visual para focar no que importa sem atrito cognitivo.

Posicionamento Premium

O design reflete o valor do serviço. Ao adotarmos paletas vibrantes sob fundos sóbrios e o conceito de "Menos é Mais", nossa interface comunica autoridade, confiança corporativa e excelência inegociável.

Performance e IA

O novo sistema foi moldado para ser semanticamente puro e leve, facilitando a adoção e integração futura com interfaces geradas por Inteligência Artificial e garantindo velocidade de carregamento em qualquer tela.

3. Paleta de Cores

3.1 Cores primárias e secundárias

Principal
#621587 Copiado!
#450e78 Copiado
#631587 Copiado
#73198f Copiado
#851e97 Copiado
#92219d Copiado
#a242ab Copiado
#b263ba Copiado
#c88fce Copiado
#debbe1 Copiado
#f2e4f2 Copiado
Principal
#f36606 Copiado!
#e65c00 Copiado
#f36506 Copiado
#f97505 Copiado
#ff8602 Copiado
#ff9200 Copiado
#ffa225 Copiado
#ffb34c Copiado
#ffc97f Copiado
#ffdeb1 Copiado
#fff2e0 Copiado
Principal
#f60684 Copiado!
#920058 Copiado
#b9005e Copiado
#ce0062 Copiado
#e40066 Copiado
#f60069 Copiado
#f60682 Copiado
#f74f9a Copiado
#f886b8 Copiado
#fab7d4 Copiado
#fde2ee Copiado
Principal
#f3cb06 Copiado!
#ee7000 Copiado
#f19b00 Copiado
#f2b300 Copiado
#f3cb06 Copiado
#f3dd0a Copiado
#f5e240 Copiado
#f7e765 Copiado
#faee92 Copiado
#fcf5bd Copiado
#fefbe4 Copiado
Principal
#4e4f4f Copiado!
#2c2d2d Copiado
#4e4f4f Copiado
#6e6f6f Copiado
#828484 Copiado
#adaeae Copiado
#cacbcb Copiado
#eceded Copiado
#f1f3f3 Copiado
#f6f8f8 Copiado
#fbfcfc Copiado

3.5 Gradiente

O gradiente enriquece a identidade visual e pode ser aplicado de forma Linear (transições suaves, movimento, ideal para clareza visual) ou Abstrata (formas livres e orgânicas, dinamismo).

  • Primárias (Roxo + Laranja): Inovação, calma, energia.
  • Secundárias (Rosa + Amarelo): Cuidado, compaixão, otimismo.
  • Roxo + Cinza: Representa luto, evocando respeito, dignidade e reflexão.

3.4 Cores Sinais

Em nossa busca para fornecer um serviço intuitivo e eficiente, incorporamos cores de sinalização que orientam e facilitam a experiência do usuário. Cada cor é escolhida cuidadosamente para transmitir um sentimento para uma ação específica, garantindo clareza e rapidez na interação. A escolha também se dá com relação ao melhor contraste para o objeto proposto.

Success
#03DAC5 / #018786
Info
#3B82F6 / #1D4ED8
Warning
#FFC003
Danger
#F22E25

4. Tipografia

Nova Tipografia Unificada

4.1 Fonte Primária Digital: Geist

A Geist foi adotada como a tipografia central e unificada para todo o novo ecossistema da Amar Assist. Criada com precisão suíça, ela garante legibilidade impecável em telas digitais, modernidade e um visual premium corporativo, substituindo a necessidade de múltiplas famílias tipográficas na Web e no App.

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & *

Light300
Regular400
Medium (Títulos)500
Semibold600

Geist SemiBold & Medium Destaques e Títulos

Variações de peso maior usadas para cabeçalhos (H1, H2, H3), botões primários e chamadas de alto impacto institucional. Substitui as antigas fontes Como e fontes decorativas.

Geist Regular & Light Textos e Formal

Variações de texto corrido utilizadas em parágrafos, contratos formais, relatórios financeiros e interfaces. Substitui as antigas fontes Nunito e Calibri.

Hierarquia e Usos Específicos (Digital)

Página Inicial / Landing Pages

H1: Geist Medium (48pt) / Tracking Tighter

Cuidamos de quem você ama

H2: Geist Medium (30pt) / Tracking Tighter

Sua parceira em assistência

Corpo: Geist Regular (16pt)

Desde a nossa fundação, nos dedicamos a proporcionar tranquilidade.

App, Dashboards e Documentos

Cabeçalho de Seção: Geist SemiBold (20pt)

Resultados Financeiros 2023

Texto Corrido Formal: Geist Regular (14pt)

Em 2023, alcançamos um crescimento significativo, consolidando nossa posição no mercado enquanto expandimos nossas ofertas de assistência de forma sustentável e estratégica.

5. Elementos Básicos

5.1 Ícones

Utilizamos ícones estilo "Rounded" (Weight: 100, Grade: 0, Optical Size: 24px) para transmitir informações rapidamente. No digital, adotamos Lucide Icons.

Diretrizes de Espaçamento

  • Pequenos (16x16px): 8px de espaçamento entre cada ícone.
  • Médios (24x24px): 12px de espaçamento entre cada ícone.
  • Grandes (48x48px): 16px de espaçamento entre cada ícone.

5.2 Ilustrações

O flat design oferece uma estética visual limpa, moderna e minimalista que promove clareza. Formas simples, cores vibrantes e linhas nítidas mantêm a identidade forte e coesa.

  • Simplificação do Gradiente: Em vez de variações complexas, inclua apenas transições suaves entre 2-3 cores principais, mantendo o estilo flat.
  • Aplicação Sutil: Utilize o gradiente de forma discreta em fundos ou detalhes específicos, evitando sobrecarregar o visual.

5.3 Texturas

Refletem a essência combinando modernidade, empatia e identidade.

  • Halftone Pattern: Modernidade e dinamismo.
  • Wave Pattern: Suavidade e fluxo contínuo de cuidado.
  • Noise Pattern: Profundidade, realismo e solidez.
  • Símbolo Amar Pattern: Identidade, amor e conexão.

5.4 Fotografia

A fotografia é essencial para transmitir a identidade visual da Amar, ajudando a comunicar nossos valores e a conectar-se emocionalmente com o público.

Especificações:

  • Idade: Preferencialmente adultos entre 47 - 62 anos.
  • Etnia: Diversidade brasileira/latina.
  • Gênero: Predominância de mulheres, mas com inclusão de homens.
  • Formalidade: Mais casual do que social.
  • Estilo: Adequado a um público mais conservador.
  • Cenário: Situações familiares.

Diretrizes de Uso:

  • Seleção de Imagens: Utilize o banco de imagens da Amar Assist.
  • Consistência: Todas as fotografias devem seguir as diretrizes de estilo e qualidade.
  • Autenticidade: Preferir imagens que transmitam autenticidade e emoções genuínas.

Filtro para Fotografia:

  • Crie um gradiente linear com as seguintes tonalidades:
    Lado esquerdo: #621587
    Lado direito: #631587
  • Na página de trabalho, aplique o gradiente sobre a imagem de fundo e ajuste a opacidade para 30%.
Download Template
Família
Família
Família
Família

5.5 Duotone

As duas camadas de cores representam os diferentes momentos e necessidades ao longo da vida, mostrando que a Amar Assist está sempre presente, fornecendo cuidado e proteção em todas as fases. Além disso, o duotone adiciona profundidade e modernidade ao design, destacando a identidade visual da marca e sua capacidade de inovar enquanto permanece confiável. A aplicação consistente do duotone fortalece a identidade visual da Amar Assist, garantindo que a marca seja reconhecida e lembrada por seu compromisso com o cuidado contínuo e a conexão emocional com seus clientes.

Diretrizes de Uso:

  1. Seleção de Cores:
    • Utilize duas cores contrastantes da paleta de cores da Amar Assist.
    • Escolha combinações que transmitam a modernidade e a empatia da marca.
  2. Aplicação:
    • Aplique o duotone em imagens e elementos gráficos para adicionar profundidade e interesse visual.
    • Garanta que o efeito mantenha a clareza e não comprometa a legibilidade dos elementos visuais.
  3. Consistência:
    • Use o duotone de forma uniforme em todos os materiais de comunicação, tanto impressos quanto digitais.
    • Mantenha a mesma abordagem de duotone em diferentes plataformas para reforçar a identidade visual.
Download Template
Duotone family

5.6 Uso de IA

A Amar Assist reconhece o potencial das tecnologias de Inteligência Artificial (IA) para criar imagens inovadoras e impactantes. No entanto, é essencial que estas ferramentas sejam usadas com cuidado para manter a integridade e a qualidade da identidade visual da marca.

Edição e Correção:

  • Deformações: Esteja atento a possíveis deformações, especialmente em partes do corpo humano, como mãos, pés e rostos.
  • Processo: Revise cuidadosamente e edite as imagens para corrigir quaisquer deformações ou anomalias.

Consistência de Estilo:

  • Estética da Marca: Certifique-se de que a estética das imagens geradas por IA esteja alinhada com o estilo visual da marca. Isso inclui paleta de cores, fotografia, composição e outros elementos visuais.
  • Coerência: Manter a coerência visual é crucial para a identidade da marca. As imagens geradas devem complementar e não destoar dos outros elementos visuais utilizados.

Uso de Prompt:

  • Detalhes: Devem conter o máximo de detalhes possíveis, de acordo com a identidade da marca.
Cachorro ruim

Faça um cachorro

Cachorro bom

Faça um cachorro com pelagem brilhante em tons de caramelo, ostentando um sorriso e olhos castanhos. O cachorro usa uma coleira de couro roxa com um pingente de coração. Fundo em um parque com ótima iluminação e com desfoque gaussiano.

6. AI-Ready (Skill & Prompt)

Design Agent-Ready

O Design System da Amar Assist foi arquitetado para ser compreendido não apenas por humanos, mas também por Agentes de Inteligência Artificial (LLMs).

Abaixo disponibilizamos o Prompt Mestre (System Prompt / Skill). Você deve fornecê-lo ao Cursor, Claude, GitHub Copilot, Gemini ou ChatGPT sempre que for codificar uma nova interface para o ecossistema Amar Assist. Isso garante que a IA gere os componentes com aderência total à nossa identidade, utilizando as classes utilitárias corretas do Tailwind CSS e respeitando rigidamente nossas diretrizes de contraste e Dark Mode. 

Você é um Engenheiro Front-end Sênior encarregado de construir UIs para o ecossistema Amar Assist. Siga ESTRITAMENTE o Design System da marca.

# 1. CORES E TEMA (Dark Mode-First)
- Fundo Principal da Página: `bg-[#F4F4F5] dark:bg-[#2c2d2d]`
- Superfícies/Cards: `bg-white dark:bg-[#4e4f4f]`
- Flyouts/Tooltips/Submenus: `bg-white dark:bg-[#6e6f6f]`
- Bordas Subtis: `border border-gray-100 dark:border-white/5`
- Acentos Oficiais: `amar-purple` (#621587), `amar-orange` (#F96F19), `amar-yellow` (#FFC003)
- Hover em links dark mode: `dark:text-[#c88fce]`

# 2. TIPOGRAFIA E ESPAÇAMENTO
- Fonte Primária: Use SEMPRE a família `font-geist`. 
- Cabeçalhos (H1 a H3): `font-geist tracking-tighter font-medium text-amar-dark dark:text-white`
- Corpo de texto padrão: `text-gray-500 dark:text-gray-400 text-sm leading-relaxed`

# 3. UI PATTERNS E COMPONENTES
- Botões Primários: `bg-amar-purple text-white hover:bg-amar-purple/90 rounded-xl px-4 py-2 text-sm font-medium transition-colors`
- Botões Secundários/Outline: `bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/10 rounded-xl px-4 py-2 text-sm font-medium transition-colors`
- Inputs e Selects: `w-full bg-gray-50 dark:bg-[#2c2d2d] border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amar-purple/20 focus:border-amar-purple transition-all`
- Cards Principais (Painéis): `bg-white dark:bg-[#4e4f4f] border border-gray-100 dark:border-white/5 shadow-sm rounded-2xl md:rounded-3xl p-6 md:p-8`
- Menus Flutuantes (Dropdowns): `bg-white dark:bg-[#6e6f6f] border border-gray-100 dark:border-white/10 shadow-xl rounded-xl z-50`
- Modais: Backdrop `bg-gray-900/40 dark:bg-black/60 backdrop-blur-sm`, Card central `rounded-3xl bg-white dark:bg-[#4e4f4f] shadow-2xl border border-white/5`.
- Links de Navegação Ativos: `bg-gray-100 dark:bg-white/10 text-amar-dark dark:text-white font-medium`.
- Links Inativos (Hover): `text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5`.

# 4. SINAIS E ESTADOS
- Success: `#03DAC5` a `#018786`
- Info: `#3B82F6` a `#1D4ED8`
- Warning: `#FFC003`
- Danger: `#F22E25`

# 5. DIRETRIZES TÉCNICAS
- Construa puramente com HTML + Tailwind CSS v3+ (utility classes).
- Nunca utilize cores genéricas (ex: gray-800) se puder usar as variações HEX exatas da paleta.
- Adicione classes `dark:` para TUDO! Teste mentalmente o contraste de texto branco sobre fundos `#4e4f4f`.
- Crie designs limpos, simétricos e altamente premium ("Menos é Mais"). Sem firulas, foco no conteúdo.