Logo originalBaixar PNG
INFINI SOLUTIONS · IDENTIDADE VISUAL
Uma identidade.
Infinitas conexões.
CLAREZA / CONTINUIDADE / MOVIMENTO
Um sistema visual para transformar ideias em experiências que fazem sentido. Preciso no detalhe. Aberto às possibilidades.
01 / A MARCA
Uma forma de
seguir em frente.
A identidade parte da logo oficial da Infini Solutions. Sua forma e seu azul são preservados em todas as aplicações. Sobre fundos escuros, apenas a palavra “infini” passa do preto para o branco.
Aplicação sobre fundo escuroBaixar PNG
Dê espaço à marca. Preserve uma área livre equivalente à metade da altura do símbolo ao redor da assinatura.
Preserve a forma. Não redesenhe, estique, incline ou aplique efeitos. Preserve sempre o azul original. Apenas a palavra “infini” pode ficar branca sobre fundos escuros.
Escolha a versão certa. Use a logo completa, com pelo menos 160 px de largura. Não recorte elementos nem crie versões monocromáticas.
02 / PALETA
Energia com
espaço para respirar.
O azul da logo mantém a identidade reconhecível. Um azul mais profundo orienta as ações da interface, enquanto os neutros organizam a informação e dão espaço à marca.
Clique em uma cor para copiar o código. O azul da marca é preservado na logo. Para texto sobre ele, prefira preto tinta; em botões, use o azul de interface com texto branco.
03 / TIPOGRAFIA
Clara por natureza.
Expressiva por escolha.
Manrope dá voz à marca, dos grandes títulos à leitura cotidiana. IBM Plex Mono identifica categorias e pequenos dados, com uso pontual.
MANROPE / 400 · 500 · 600 · 700 · 800
Aa∞
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # →
DISPLAY / 72–96
Ir além.
TÍTULO / 40–56
Conectar ideias.
SUBTÍTULO / 24
Uma nova perspectiva.
CORPO / 16–18
Tecnologia clara. Experiências que aproximam pessoas e possibilidades.
RÓTULO / 11–12
INFINI SOLUTIONS / CLOUD
Em telas pequenas, reduza os títulos mantendo a hierarquia. Use entrelinha de 1,05–1,15 em títulos e 1,6 no corpo. Evite parágrafos com mais de 65 caracteres por linha.
04 / RITMO VISUAL
Consistência
em cada intervalo.
Uma escala baseada em 4 px aproxima elementos relacionados e cria pausas entre assuntos. Bordas sutis e cantos contidos deixam o conteúdo em primeiro plano.
4
8
12
16
24
32
48
64
96
4 px
Controles
Controles
12 px
Cards
Cards
Completo
Indicadores
Indicadores
Margens laterais: 24 px em telas pequenas e 48–72 px em telas grandes. Área de leitura centralizada, com largura máxima e respiro constante.
05 / COMPONENTES
Menos ruído.
Mais direção.
Uma ação principal por contexto. Rótulos diretos, estados visíveis e controles que funcionam tanto com mouse quanto com teclado.
O preenchimento azul indica a ação principal. A opção secundária usa contorno. Uma ação indisponível não deve parecer clicável.
Portal ativo Acesso indisponível
Uma informação útil, no momento certo. Mensagens curtas ajudam a escolher o próximo passo.
Cor e texto trabalham juntos. O estado nunca depende apenas da cor ou de um ícone.
Digite uma seção e pressione Enter. Use Tab para observar o contorno de foco dos controles.
06 / PRINCÍPIOS
O design só funciona
quando funciona
para pessoas.
Uma linguagem consistente vai além da aparência. Ela facilita encontrar, entender e agir.
Clareza primeiro.
Escreva o que a ação faz. Evite jargões, promessas vagas e interfaces sem saída.
Acesso para todos.
Use foco visível, títulos em ordem, alternativas para imagens e contraste mínimo de 4,5:1 em texto comum.
Movimento com propósito.
Transições breves apoiam a navegação. Respeite a preferência por movimento reduzido e não esconda conteúdo em animações.