Próximo
- Comunicação não violenta e empatia.
- Regionalismos e depoimentos.
- Nome e localidade de cada personagem.
Design System · Versão 1 · Baseado no Manual MS.138
Aqui tem Unimed
Presença que transforma o cuidado com a saúde e a vida.
Conteúdo e voz
Três registros ao mesmo tempo
Cada peça precisa soar próxima, didática e propositiva. O leitor entende rápido, sente que alguém da comunidade falou com ele e confia na recomendação.
Didático
- Passo a passo, em frases curtas e ordem direta.
- Sem estrangeirismos; termos técnicos explicados.
- Histórias com início, meio e fim.
Propositivo
- Fala como o maior sistema de cooperativas médicas do mundo.
- Fatos, dados e fontes oficiais.
- Recomenda como autoridade em saúde.
Orientações de conteúdo
Visão sistêmicaHumano de verdadeCompartilhar conhecimentoDa complexidade à simplicidade
Escreva assim
Caminhar dez minutos depois do almoço já ajuda o coração.
Evite
Implemente um mindset de wellness com performance cardiovascular.
Vamos juntos?
Termine cada peça com um único CTA, no tom de convite. Exemplo de assinatura: “Um pouco por dia. Todo dia.”
Fundamentos · Cor
Verde protagonista, laranja só para agir
O Verde Unimed é a cor principal. O verde escuro substitui o preto no texto. Verde cítrico e laranja dão impacto às peças comerciais; as seis cores de apoio predominam nas institucionais. Clique em uma amostra para copiar o código.
verde-unimed#00995d
Cor principal. Pantone 348 C · RGB 0/153/93. Branco sobre ela só em texto grande ou negrito (3,67:1).
verde-escuro#004e4c
Pantone 7722 C · RGB 0/78/76. Substitui o preto em textos e é o fundo escuro da marca.
verde-citrico#b1d34b
Pantone 381 C · RGB 177/211/75. Impacto comercial. Texto sobre ela: verde escuro (5,6:1).
Cores de apoio
Superfícies e ilustração. Texto verde escuro passa em todas, exceto Terra (4,32:1, só texto grande).
laranja#f47920
Pantone 1585 C · RGB 244/121/32. Reservado a descontos, datas e CTAs.
terra#d2a494
Pantone 7521 C. Verde escuro sobre ela: 4,32:1, só texto grande.
rosa#f1cdcd
Pantone 691 C. Verde escuro: 6,5:1.
areia#ece3d9
Pantone 7527 C. Fundo suave institucional. 7,5:1.
amarelo#ffe596
Pantone 1205 C. Verde escuro: 7,7:1.
verde-claro#cde3bb
Pantone 7485 C. Verde escuro: 7,0:1.
azul-claro#a4d8de
Pantone 304 C. Verde escuro: 6,1:1.
Tons de 80, 60, 40 e 20%
O manual permite tons das cores da marca. Valores calculados sobre branco.
verde-unimed-80#33ad7d
verde-unimed-60#66c29e
verde-unimed-40#99d6be
verde-unimed-20#ccebdf
laranja-20#fde4d2
verde-escuro-80#337170
Neutros
Cinzas amostrados do manual, sem código oficial. Não use cinza-40 nem cinza-50 em texto.
branco#ffffff
cinza-5#f2f2f2
cinza-10#e5e5e5
cinza-20#cccccc
cinza-40#999999
cinza-50#808080
preto#000000
Campanhas de saúde
Podem sair da paleta da marca, apenas nas campanhas do ano (como Setembro Amarelo, Outubro Rosa, Novembro Azul).
mes-amarelo#ffd532
mes-laranja#fa7210
mes-vermelho#e90000
mes-verde#6bd369
mes-azul#00bbe4
mes-azul-marinho#002b7a
mes-lilas#a379e7
mes-roxo#5719bb
mes-rosa#ff92cc
mes-dourado#df9b46
Tokens semânticos e temas
Use estes tokens nas interfaces. Eles trocam entre claro e escuro. Use a cor de paleta direta só onde a marca exige valor fixo, como a caixa branca sobre foto.
| Token | Claro | Escuro | Uso |
|---|---|---|---|
surface | #ffffff | #004e4c | Fundo da página. |
surface-areia | #ece3d9 | #003a39 | Seção alternada e cartões. |
ink | #004e4c | #ffffff | Texto principal (12:1 ou mais). |
ink-secondary | #266967 | #ece3d9 | Legendas, fontes e metadados. 6,4:1 no claro; 7,5:1 no escuro. |
brand | #00995d | #b1d34b | Marca em superfícies, ícones e títulos grandes. Não em texto corrido. |
on-brand | #ffffff | #004e4c | Texto sobre brand. 3,67:1 no claro (só grande ou negrito); 5,6:1 no escuro. |
accent | #b1d34b | #b1d34b | Realce comercial: faixas, selos e números. Texto: verde escuro. |
cta | #f47920 | #f47920 | Fundo de botão de chamada, desconto e data. |
on-cta | #004e4c | #004e4c | Texto sobre cta (3,46:1): só negrito de 18,66px ou mais. |
deep | #004e4c | #002f2e | Faixas e blocos escuros de contraste. |
on-deep | #ffffff | #ffffff | Texto sobre deep (10:1 ou mais). |
border | #e5e5e5 | #337170 | Divisores e bordas decorativas. |
border-strong | #808080 | #8cafae | Borda de campos e controles (≥3:1). |
focus-ring | #004e4c | #b1d34b | Anel de foco: 2px com offset de 2px. |
Acessibilidade
Contraste: o que passa e o que não passa
Texto corrido usa ink sobre surface ou surface-areia. Alguns pares do próprio manual ficam abaixo de 4,5:1. Eles estão sinalizados e valem só para texto grande (24px ou mais) ou negrito de 18,66px ou mais.
Aa Cuidar é presença
Texto principal
12:1+Passa
12:1+Passa
Aa Cuidar é presença
Texto sobre areia
7,5:1Passa
7,5:1Passa
Aa Cuidar é presença
Verde escuro sobre cítrico
5,6:1Passa
5,6:1Passa
Aa Cuidar é presença
Verde escuro sobre amarelo
7,7:1Passa
7,7:1Passa
Aa Cuidar é presença
Verde escuro sobre azul-claro
6,1:1Passa
6,1:1Passa
Aa Fonte: Ministério da Saúde
Texto de apoio sobre branco
6,4:1Passa
6,4:1Passa
Aa Vamos juntos
Branco sobre Verde Unimed
3,67:1Só texto grande
3,67:1Só texto grande
Vamos juntos?
Verde escuro sobre laranja
3,46:1Só texto grande
3,46:1Só texto grande
Aa Cuidar é presença
Verde escuro sobre terra
4,32:1Só texto grande
4,32:1Só texto grande
Aa Vamos juntos
Branco sobre laranja
2,76:1Não use
2,76:1Não use
Aa Cuidar é presença
Verde escuro 80% sobre areia
4,43:1Não use
4,43:1Não use
Aa Texto corrido
Verde Unimed sobre branco
3,67:1Não use
3,67:1Não use
Fundamentos · Tipografia
Uma família, cinco vozes
A Família Unimed (Sans, Slab, Serif, Brush e Condensed) é proprietária e não faz parte deste sistema. As pilhas listam o nome Unimed primeiro e usam substitutas livres. Alinhe sempre à esquerda; títulos de display têm tracking fechado e caixa mista.
Aa
SansTítulos, legendas e digital. Substituta: Nunito Sans.Aa
SlabTexto longo e depoimentos. Substituta: Zilla Slab.Aa
CondensedNúmeros e títulos curtos. Substituta: Barlow Condensed.Aa
BrushSelos e chamadas emocionais curtas. Substituta: Caveat Brush.Escala
Aqui tem Unimed
Um pouco por dia. Todo dia.
Vamos juntos?
Presença que transforma o cuidado
Saúde em dia
Caminhar dez minutos depois do almoço já ajuda o coração. Comece devagar, escolha um horário que cabe na sua rotina e repita no dia seguinte.
Hoje consigo brincar com meus netos.
Fonte: Ministério da Saúde
110
Vamos juntos?
Os tamanhos da escala, exceto o título secundário a 60% do principal, são propostas deste sistema. O manual define as famílias e seus usos.
Direção fotográfica
Imagens que contam histórias
A direção fotográfica dá vida à linguagem: luz, cores, jeitos, olhares, texturas e personalidades. As fotografias não são meramente ilustrativas. Elas ajudam a contar histórias de vida reais, humanas e transformadoras, de quem cuida de perto e de quem busca viver melhor.
“Toda fotografia é um certificado de presença.”Roland Barthes, escritor, sociólogo e filósofo francês
Três temas
A direção fotográfica se divide em retratos, closes e viver bem.
Retratos
Humanos, de verdade (portrait).
- Câmera na altura dos olhos, que comunica empatia.
- Luz equilibrada, que revela a textura natural da pele.
- Fundo de cores suaves, porém presentes, e fora de foco. Não é recortado.
- Expressão sincera, sorriso natural e brilho no olhar.
- Externa ou estúdio, sempre com luz natural, sem exagero e sem filtros.
Closes
Foco crítico, contato físico.
- O olhar de quem cuida é próximo, de cumplicidade.
- Câmera se aproxima sem distorcer: lentes de 35 mm ou 50 mm.
- Luz equilibrada e suave; fundos neutros e reais.
- Foco crítico que revela contato e intimidade.
- Servem também para mostrar, de forma didática, movimentos, exercícios e cuidados especiais.
Viver bem
Natureza, exercícios, alimentação saudável.
- Histórias de quem quer viver bem, com leveza.
- Expressões naturais, registros simples, suor e sorrisos.
- Não é a performance que interessa, e sim uma vida saudável e alegre.
- Luz solar e natureza comunicam o conceito.
- Alimentação: planos que mostram as mãos, não apenas o prato.
Guia prático
Fotos podem ser feitas por fotógrafo profissional ou por um colaborador, com câmera profissional ou um bom smartphone. O que importa é a intenção, o cuidado e a clareza do que se quer comunicar.
Luz
- Natural.
- Em ambientes fechados, um ponto de luz principal, como uma grande janela.
- Equilibrada, suave e difusa: revela a textura da pele e traz a sensação de humano, de verdade.
Tratamento e cores
- Cores reais, nem saturadas demais, nem apagadas.
- Sem abuso de filtros, sem efeitos.
- Tom de pele que revela saúde.
Enquadramento e foco
- Câmera próxima, sem distorcer; lentes de 35 mm ou 50 mm.
- Altura dos olhos do personagem.
- Não recortar as imagens: estamos presentes.
Acting
- Expressões naturais, como suor e sorrisos.
- Leveza e alegria.
- Brilho no olho de quem faz parte do Sistema.
Cenário
- Luz solar e natureza comunicam o Viver Bem.
- Roupas reais: não é figurino.
- Instalações reais, organizadas e bem iluminadas.
- Em estúdio, fundos nas cores de apoio.
Narrativa
- Contar histórias de quem quer viver bem.
- Expressar as transformações positivas geradas pela presença da Unimed.
- Mostrar elementos de uma vida saudável e, nos closes, cuidados de forma didática.
Diversidade é ética e estética. Retrate todos que fazem parte do Sistema: clientes, médicos, funcionários, crianças e idosos, do nascimento à terceira idade, de vários jeitos, idades, lugares e cores.
Gradiente Unimed
Uma régua para comparar e entender se uma imagem está de acordo com a linguagem. No centro está a foto Unimed; nos extremos, a foto mal produzida e a foto fria e artificial.
ExtremoFoto mal produzida
- Filtro verde que altera o tom de pele.
- Excesso de pessoas e elementos no cenário, que distraem.
ReferênciaFoto Unimed
- Luz suave e equilibrada.
- Pose natural, expressão espontânea.
- Fundo na paleta de cores de apoio.
ExtremoFoto fria e artificial
- Luz dura e fria.
- Uniforme impecável e postura forçada: foto montada, sem realismo.
- Fundo recortado; falta calor e proximidade.
Recorte
Permitido
Recorte apenas para fundos sólidos, ou quando é possível apresentar o contexto da foto e garantir proximidade e realidade.
Não permitido
Recorte-colagem e recorte para fotomontagem fake.
Nas peças comerciais
O protagonismo é menos da foto e mais do texto. Quando entra sobre a imagem, o texto perde destaque e leitura, por isso deve entrar sempre sobre uma cor de fundo com bastante contraste.
Mostre o cenário, mas o foco é o personagem, o brilho no olhar, o sorriso. Os fundos aparecem lisos, com cor (foto em estúdio), ou fora de foco (foto interna ou ao ar livre).
Dicas para fotografar com o smartphone
Use o grid da câmera
Ajuda a compor melhor e a deixar a foto reta.
Cuidado com distrações
Evite o que estiver ao redor do assunto. Se houver modo retrato, ative-o ao fotografar pessoas.
Mantenha o aparelho estável
Segure com as duas mãos e cotovelos junto ao corpo. Espere a tela piscar e a foto aparecer na galeria.
Limpe a lente
Use um pano limpo ou uma camisa de algodão, com movimentos suaves.
Toque para focar e travar a exposição
Toque no ponto desejado; se precisar, ajuste a exposição no slider da tela.
Use luz natural e evite o flash
O flash achata o sujeito e deixa a cor irreal. Aproxime-se de uma fonte externa de luz.
Fotos: exemplos do Manual de Linguagem da Marca Unimed (MS.138), páginas 60 a 66 e 73, usadas aqui para ilustrar as diretrizes.
Dicas adaptadas do e-book “10 dicas de fotografia com o smartphone”, de Paulo Del Valle, conforme o manual.
Fundamentos · Espaço
Respiro faz parte da marca
O branco ocupa de 20% a 50% da peça. A escala abaixo, em múltiplos de 4, é uma proposta deste sistema; o manual define a grade, não os passos.
space-14pxspace-28pxspace-312pxspace-416pxspace-524pxspace-632pxspace-748pxspace-864pxMarca · Logotipo
A logo Unimed Maringá
O logotipo vive na caixa verde, no canto superior esquerdo, como no site Unimed Nacional do manual. O Verde Unimed aparece pontualmente, na logo e nos principais CTAs. Use sempre os arquivos oficiais da marca.
Caixa verdeSobre branco, areia e cores de apoio claras. Versão principal do cabeçalho.
BrancaSobre verde escuro e faixas escuras. Não use sobre cores claras.
- Não redesenhe, recolora, gire nem distorça a logo.
- Dê respiro: o branco ajuda a fortalecer a identidade e serve de suporte para a logo e para caixas de texto (20% a 50% da área da peça).
- A caixa arredondada nasce da silhueta da logo e é o elemento que marca a identidade Unimed; veja a seção seguinte.
Fundamentos · Forma
A Caixa Unimed
Retângulo arredondado com um canto reto, derivado do logo. Borda branca de cerca de 3px e raio de cerca de 22% da altura. O canto reto fica embaixo, à direita.
Perto de você, todo dia.
Altura 110px · raio 24px · canto inferior direito reto
- Na caixa de depoimento, a lateral reta encosta na borda da peça.
- Caixa branca sobre foto leva texto em verde escuro.
- Não gire, não distorça e não troque o canto reto de lugar.
- Use somente os arquivos oficiais da logo (seção anterior). Não redesenhe, recolora nem deforme.
radius-box-sm · 8pxCaixas de ~36px: tags e botões
radius-box · 16pxCaixas de ~72px: cartões e depoimentos compactos
radius-box-lg · 24pxCaixas de ~110px, próximas ao logo (25,5px em 115px)
radius-pill · 999pxChips e tags totalmente arredondados
Grid · Fundamentos e uso
Grid, respiro e texto sobre foto
Organize a peça em margens, colunas, guias horizontais, módulos e zonas espaciais. Web e newsletter usam 12 colunas; redes sociais usam grade modular; o texto se alinha à razão áurea.
12 colunas
Margem de peça: space-7 (48px). Espaço entre colunas: 12px.
Imagem e branco
Imagem 80%
Branco 20%
Imagem 50%
Branco 50%
Imagem ocupa de 50% a 80% da área; branco, de 20% a 50%.
Texto sobre foto
Cuidar é presença.
Vamos juntos? - Texto branco, bold, sem efeitos e sem cobrir rostos.
- Se faltar leitura, só uma sombra muito suave a 20%.
- Laranja e verde apenas em CTAs.
Para que serve
O grid reúne e organiza informações em formatos variados e cria uma estrutura visual para a comunicação. Poupa tempo na criação e torna a leitura mais clara, eficiente e intuitiva.
Introduz uma ordem sistemática para a hierarquia das informações da peça.
O sistema ajuda o observador a entender o seu uso.
Economiza tempo na organização de grandes volumes de conteúdo.
Facilita a navegação na página e nos documentos.
Traz consistência para a identidade visual da comunicação.
Cinco elementos básicos
Cada parte tem uma função e pode ser combinada conforme a necessidade de cada conteúdo.
1. MargensEspaços entre o limite do formato e o conteúdo. Definem o arejamento e a tensão da composição e orientam o foco e o repouso dos olhos.
2. ColunasAlinhamentos verticais que criam divisões entre as margens.
3. Guias horizontaisDividem o espaço em faixas. Orientam os olhos e criam novos pontos de partida ou pausas.
4. MódulosUnidades de espaço separadas por intervalos regulares que, repetidas, criam colunas e faixas.
5. Zonas espaciaisGrupos de módulos que formam campos distintos, cada um com uma função: imagens, tabelas, gráficos, aspas.
Como usar
Imagem 61,8%
Texto
CTA
Proporção áureaOrienta as escolhas de alinhamento e cria relações entre os elementos da composição e o olhar. Na vertical, a curva áurea orienta o posicionamento da chamada.
Título em grande escala
Texto de apoio em escala média.
Vamos juntos?
Fluxo de leituraSegue o caminho natural, da esquerda para a direita. Variações de escala resultam em um layout forte, com hierarquia clara.
- Grid modular: permite flexibilidade para criar composições dinâmicas de forma sistemática. É o grid das redes sociais.
- 12 colunas: para conteúdos extensos, como site e newsletter. É divisível por 1, 2, 3, 4, 6 e 12, o que dá grande flexibilidade.
- Variação de entonação: o sistema de relações harmoniosas cria uma imagem ao mesmo tempo regular e expressiva.
Redes sociais
Posts que parecem Unimed
Nas redes sociais, o grid modular dá flexibilidade e ajuda na consistência. As peças combinam foto real, título grande em bold, o box verde com a logo e um respiro em branco ou cor de apoio. Os exemplos abaixo são do manual.
Aqui tem Unimed
Texto sobre imagem só em títulos, sem cobrir rostos nem áreas importantes. Em bold e em branco, que dá o melhor contraste com a foto. Verde ou laranja entram só nos CTAs, em menor proporção.
Campanhas comerciais
Nas peças comerciais, o protagonismo é do texto. O verde cítrico dá impacto, o desconto ganha destaque e o laranja marca datas e CTAs.
Em todas as peças
- Box verde com a logo, alinhado ao grid.
- Foto real, sem filtros, e tom de pele natural.
- Sem efeitos no texto. Se a leitura estiver comprometida, uma sombra bem suave, a 20% de opacidade.
- Um único CTA, no tom de convite.
Brush para selos e stories
A fonte Brush entra quando é importante um tom ainda mais pessoal e emocional: stories que convidam para um novo episódio e posts que anunciam uma matéria especial. Funciona em selos e chamadas curtas, nunca em textos longos, pequenos ou em arco.
Grid modular em carrossel
Os módulos se repetem e se combinam: foto, título, texto de apoio e box de logo mudam de lugar, mas a estrutura se mantém.
Texto de um post de campanha
Exercício do manual: o mesmo post antes e depois de aplicar o tom de voz próximo, didático e propositivo.
Antes
Unimed
Um pouco todos os dias
Este é um convite pra você! +
Acesse unimed.me/mesunimed
Mês Unimed Mude1Hábito
Mês Unimed Mude1Hábito
Depois
Mude1Hábito
Um pouco por dia. Todo dia.
Alongamentos fazem bem para o corpo e acalmam a mente.
Vamos juntos?
mude1habito.com.br
Unimed
mude1habito.com.br
Unimed
- Próximo: fale com empatia, com o tom de quem entende e se coloca no lugar do outro, assumindo uma expressão regional.
- Propositivo e didático: respostas simples, com soluções possíveis.
- Próximo e propositivo: use expressões que convidam e sugerem proximidade com o público. Feche com um único CTA.
Peças e texto: exemplos do Manual de Linguagem da Marca Unimed (MS.138), páginas 93, 114, 116, 117, 136 e 137. Algumas peças trazem marcas e textos de campanhas, usados aqui só para ilustrar as diretrizes.
Componentes
Peças prontas para montar
Todos usam os tokens semânticos e os raios da Caixa Unimed. Alterne o tema no topo para ver como cada um responde.
Botão de chamada (CTA)
cta · on-ctaUm único CTA por peça, no final. O texto verde escuro sobre laranja dá 3,46:1, por isso o botão mantém 18px bold e padding generoso. Nunca use branco sobre laranja.
Tags e chips
radius-pill PrevençãoSetembro AmareloTelemedicinaNovoAté 31/10
Fundos de apoio com texto verde escuro. Datas e descontos usam laranja a 20%.
Campo de formulário
border-strong · focus-ringComo aparece no cartão Unimed.
Borda de 1,5px em border-strong (3,95:1 no claro, 4,0:1 no escuro). O anel de foco tem 2px com offset de 2px.
Cartão de conteúdo
radius-box · texto-corridoDez minutos fazem diferença
Caminhar depois do almoço ajuda a controlar a pressão e o açúcar no sangue.
Fonte: Ministério da SaúdeChapéu, título em Sans, texto em Slab e fonte em legenda. Termina em um único CTA quando for peça de campanha.
Caixa de depoimento
brand · depoimentoHoje consigo brincar com meus netos.Dona Lúcia, 68 anos · Maringá, PR
A lateral reta encosta na borda da peça. Sempre com nome e localidade da pessoa.
Número em destaque e selo
Condensed · Brush110cooperativas médicas atendendo perto de você
Vamos juntos? Números em Condensed, com fonte citada em legenda. O selo em Brush é curto, emocional e nunca vai em arco. Os números acima são ilustrativos.
Aviso de promoção
laranja-20Inscrições até 31/10Reserve laranja a descontos, datas e CTAs.
Fundo de laranja a 20% com texto verde escuro (passa). A cor cheia fica para o botão.
Faixa escura
deep · on-deep · accent Cuidado contínuo Um pouco por dia. Todo dia.
Blocos de contraste. Verde cítrico em destaques sobre o fundo escuro, texto branco com 10:1 ou mais.
Recursos gráficos
Poucos traços, só o essencial
Os recursos gráficos dão suporte à comunicação, ajudam a construir uma identidade visual mais rica e criam signos comuns que agilizam o entendimento. São quatro: uso do branco, Box Unimed, ilustrações e ícones. A força vem das pessoas: muito branco e poucas intervenções.
1. Uso do branco
Áreas de respiro fortalecem a identidade e dão suporte à logo e aos boxes de texto.
Áreas de respiro fortalecem a identidade e dão suporte à logo e aos boxes de texto.
2. Box Unimed
Caixa arredondada, originária da silhueta da logo, que marca a identidade.
Caixa arredondada, originária da silhueta da logo, que marca a identidade.
3. Ilustrações
Estilo flat e vetorial, com cenas que revelam cuidado e proximidade.
Estilo flat e vetorial, com cenas que revelam cuidado e proximidade.
4. Ícones
Simples e funcionais, com cantos levemente arredondados.
Simples e funcionais, com cantos levemente arredondados.
Uso do branco e Box Unimed
Imagem de 50 a 80% da área total, branco de 20 a 50%. O box arredondado vira o elemento que marca a identidade; alinhado com o logotipo, leva depoimentos e conteúdos secundários. Veja as seções Grid e Caixa Unimed.
Ilustrações
Partimos de um mesmo estilo e adaptamos os detalhes para cada público e objetivo. São descritivas, com elementos essenciais para uma mensagem clara.
Com cenário
- Estilo flat, com formas simples e preenchidas.
- Uma cena com poucos elementos, que dão contexto e criam narrativa.
- Proximidade no enquadramento e na ação do personagem, com gestos e expressões amigáveis.
Sem cenário
- Personagens recortados revelam os atributos pela ação: gestos amigáveis, sorrisos e abraços.
- O Verde Unimed tem protagonismo; cores de apoio suaves simbolizam o cuidado; o laranja traz calor.
- Poucos ou nenhum fio, só nos detalhes. Fundos lisos, sem efeitos ou gradientes.
Em vídeo
- Menos detalhes, para facilitar a animação.
- Sem sombras; vistas frontais ou laterais.
- Perspectiva por zoom, ou movimento em elementos secundários: chuva caindo, olho piscando, braços e mãos animados.
Ícones
Ajudam a navegar rápido e são parte crucial de qualquer sistema de design. A régua abaixo mostra o estilo buscado: nem duros e pontiagudos, que não refletem o cuidado, nem detalhados demais, que viram ilustração e não funcionam na redução.
Duro e frioRetos e pontiagudos. Não refletem o cuidado.
RecomendadoDesenho simples e funcional, com cantos levemente arredondados.
Muitos detalhesViram ilustração e não funcionam na redução.
Os três ícones são exemplos desenhados para esta página. Este sistema não inclui uma biblioteca de ícones, porque o manual não a fornece como arquivos.
Logo
Use somente os arquivos oficiais da Unimed Maringá. Não redesenhe, recolora nem distorça.
Editorias de conteúdo
Um sistema para achar o que importa
Com um grande volume de conteúdo, a Unimed o organiza em editorias, subeditorias e tags. As editorias separam o conteúdo interno do externo ao Sistema Unimed, as subeditorias agregam conteúdo e as tags facilitam a busca por assuntos predefinidos.
Sistema Unimed
Comunica o funcionamento da cooperativa, apresenta as ações internas e como a Unimed se conecta com a comunidade.
UnimedAssuntos e temas da cooperativa e da marca: história, campanhas comemorativas internas.
ServiçosPortfólio e funcionamento dos serviços: planos, segunda via de boletos, guia médico.
NotíciasMudanças e novidades do sistema, como novos hospitais e premiações. É também a central de imprensa, com os releases da cooperativa.
Viver Bem
Mais do que tratar doenças, a Unimed cuida para que as pessoas vivam bem. Cobre sintomas, tratamentos, saúde mental, comportamento, bem-estar, alimentação e exercícios.
ABC da saúdeSintomas, tratamentos, dicas de saúde, ações sustentáveis, voluntariado, campanhas externas.
Mente sãSaúde mental, comportamento e bem-estar.
Corpo sãoDicas de exercícios físicos e alimentação, incluindo receitas.
Subeditoria temporáriaTrata de um tema do momento, como uma pandemia ou a dengue. Leva o nome do assunto (ex.: Coronavírus) e é descontinuada quando o tema deixa de ser urgente.
Sistema de tags
Na editoria Viver Bem, as tags direcionam o usuário. As mais acessadas ficam na home do portal. Há só dois critérios: tema de interesse e faixa etária. Um conteúdo pode ter mais de uma tag. As tags funcionam de forma independente da subeditoria e, por isso, não são diferenciadas por cor.
Experimente: filtre por tag
exemplos do manual Tema de interesse Faixa etária
Mostrando todos os 4 conteúdos. Escolha uma tag para filtrar.
Você sabia que a distensão da musculatura do abdômen pode provocar dores na lombar?
Aprenda a identificar e tratar a diástase abdominal.
Aprenda 5 dicas para um home office produtivo e saudável
Com organização e diálogo com a família e equipe, é possível aproveitar o melhor do trabalho remoto.
Ômega 3, 6 e 9: qual é a diferença?
Descubra os benefícios e em quais alimentos encontrar as chamadas “gorduras boas”.
Depressão na pandemia: saiba mais!
Longos períodos de isolamento social podem causar fortes impactos na saúde mental.
No site Unimed Nacional
- Na seção Viver Bem, as subeditorias (Coronavírus, ABC da saúde, Mente sã e Corpo são) organizam os conteúdos.
- O Verde Unimed aparece pontualmente, na logo e nos principais CTAs.
- As tags, em “Navegue por assunto”, funcionam de forma independente da subeditoria e por isso não têm cores, para não confundir com as subeditorias.
- Brancos e cinzas, em conjunto com o grid e os estilos de texto, estruturam e organizam o conteúdo.
- Tom de voz: frases curtas e didáticas; o título destaca o conteúdo do portal Viver Bem.
- Fotografia: fotos reais, sem filtros ou excesso de saturação.
Formatos de conteúdo
Os conteúdos aparecem em formatos diferentes, o que amplia a acessibilidade e o didatismo. O uso das tags se mantém independente do formato.
NotíciasPasso a passoPerguntas e respostasPesquisas e estudos científicosCartilhasWebsériesVídeosPodcasts
Transparência
Lacunas e premissas
O que este sistema ainda não cobre e onde ele propõe valores próprios.
Fora de escopo
Direção fotográfica, grid, recursos gráficos e editorias foram lidos no manual. Ainda não cobrimos o casting (p. 84–86) e os exercícios de linguagem (p. 158–176). As fotos e ilustrações vêm do próprio manual, em resolução reduzida; para uso em peças, peça os arquivos originais à Unimed.
Valores amostrados ou calculados
Cinzas básicos, cores de campanhas e tons de 80/60/40/20% são amostras ou cálculos, não códigos oficiais.
Divergência no manual
A p. 140 fala em ilustrações com traços gestuais e texturas; as p. 144–147 definem estilo flat, sem textura. Seguimos as segundas, que são as diretrizes detalhadas.
Escalas propostas
Tamanhos tipográficos (exceto o título secundário a 60%), passos de espaçamento e de raio são propostas deste sistema.