Overview
Este documento tem como objetivo a apresentação do Digital Brand System da FF, para servir como guia na construção de qualquer experiência digital do negócio.
Princípios
O Digital Brand System da FF segue três princípios fundamentais. Estes princípios não só dão base a tudo o que foi construído, mas também formam a plataforma fundamental para qualquer criação, adaptação ou expansão dos elementos visuais de interface para produtos digitais.
Modularidade
Uma das principais características da marca é sua modularidade. A marca principal e suas aparições como marcas de produto são os exemplos mais claros deste princípio. A modularidade é empregada também em outras manifestações estéticas de interface.
Segurança / Solidez
Elementos fundamentais de uma empresa de seguros, a segurança e solidez como princípios estéticos estão presentes nos elementos retos e contraste grande entre cores e elementos presentes no Digital Brand System.
Sentido único / avanço
Com a proposta de ser uma plataforma solida que dá segurança para que as pessoas avancem e progridam em suas vidas, este elemento não poderia deixar de estar presente no Digital Brand System. O sentido único e avanço aparecem com destaque nas fotos e nas regras de movimentação da interface.
Brand
A marca da FF pode ser apresentada em 2 formas distintas: Marca Principal e Sub-marcas de produtos.
Marca Principal
A Marca Principal é apresentada em 2 versões (Positiva e Negativa) que são compostas pelo logotipo “FF” e o símbolo fast forward da marca.
Sub-marcas de produtos
As sub-marcas de produtos possuem uma simbologia customizada para cada produto / serviço oferecido pela FF.
Cores
A paleta de cores da FF segue o princípio da modularidade. Sempre utiliza uma cor base e trabalha suas matizes variando saturação, luz e sombra.
A paleta de cores da FF possui 3 grandes categorias:
Cores da marca
São as cores relacionadas à estrutura de marca e branding.
Cores de produtos
São as cores relacionadas ou definidas para algum produto.
Cores utilitárias de interface
São cores de suporte para serem utilizadas em elementos visuais da interface harmonicamente junto às outras cores da paleta.
Fotografia
A fotografia da marca segue o princípio do sentido único / avanço. Dessa forma, as fotos são sempre representadas por pessoas olhando sempre para a direita (da visão do fotógrafo), passando subjetivamente a proposta de olhar para o futuro do cliente com a segurança que a FF proporciona em seus produtos e serviços.
Estrutura da fotografia
As fotos devem sempre ser apresentadas em preto em branco primariamente. As cores devem ser introduzidas por outros elementos da composição, ou serem aplicadas de forma dessaturada na própria fotografia.
Aplicação de fotos e elementos de marca
As fotos devem ser sempre em preto em branco quando aplicadas junto a elementos da marca (ex: logo FF, logo de produto, etc).
Quando apresentadas junto à elementos de marca, podem ser utilizadas ainda em conjunto com uma máscara circular.
Aplicação de logo sobre fotos
O logo da FF ou de qualquer sub-marca ou produto, podem também ser aplicados sobre fotos em preto e branco.
Aplicação de fotos e elementos de interface
Para composições com foto e elementos visuais, adotar o uso da fotografia em preto em branco (sempre que possível) e deixar as cores para os elementos de interface do usuário.
Iconografia
A iconografia digital da FF segue o princípio da modularidade. As famílias de ícones são subdivididas em 2 categorias:
Ícones de suporte à marca
Categoria de ícones que extende a utilização da sub-marca dos produtos da FF, utilizando somente a simbologia do logo de cada produto.
Ícones de suporte à interface
Categoria de ´ícones que auxilia na construção de interfaces digitais, dando ênfase ao contexto das ações do usuário e suporte à experiência.
Para esta categoria, adotamos o suporte ao uso da iconografia baseline (filled) do Material Design. Todos os ícones da paleta baseline do Material Design pode ser utilizada e as referências de ícones são encontradas junto aos componentes do Digital Brand System no Figma.
Alguns exemplos de ícones em suas sub-categorias:
Tipografia
O suporte tipográfico digital da FF segue os princípios de solidez e modularidade, dividindo 2 grandes contextos de aplicação de suas famílias.
Tipos de destaque e apresentação
Caracterizados pelo uso da família Aeonik, os tipos de destaque possuem diversas categorias de utilização. As principais são: Display, Heading, Label, Button, entre outras (descritas nos arquivos de componentes do Digital Brand System).
Tipos de detalhe e descrição
São caracterizados pelo uso da família Lora. Em geral, a família Lora, é utilizada para textos de descrição de conteúdo em geral. A principal categoria de utilização é a Paragraph, utilizada comumente em textos de parágrafo na web.
Grid
O padrão estrutural de grids e layouts de produtos digitais da FF segue o princípio da modularidade. O grid encoraja consistência entre os produtos, sites, plataformas e diversos tamanhos de tela utilizando elementos e espaçamento uniformes.
Padrões de medidas
Os padrões de medidas são baseados no padrão estrutural do Material Design, onde é aplicada uma regra de balanceamento visual aos layouts. A maioria das medições é alinhada a um grid de 8 pixels, que é aplicada ao espaçamento e layout em geral.
Componentes menores, como ícones e texto (quando em tamanhos menores que 32 pixels), podem se alinhar a um grid de 4 pixels.
8 colunas, 8 pixels de gutter entre colunas, 24 pixels de margens laterais
Fontes com tamanhos variados dentro do intervalo divisível por 8 e por 4 (Grid padrão)