Guia de Expressão Visual e verbal
Este guia contém diretrizes visuais e verbais para o uso da marca Projuris ADV.
Introdução
É um conjunto de padrões e boas práticas que conduzem o nosso produto com qualidade e coerência. Trata-se de um pilar fundamental para o estabelecimento de uma linguagem de Design, onde todos os pontos da plataforma terão a cara do Projuris ADV
Um Design System vai além do escopo de um manual de estilo. Ele aprofunda as discussões relacionadas a apresentação de conteúdo, tom de voz, componentes, ilustrações e experiência do usuário. Além disso, o Magica apoia os times de produto, engenharia e design na tomada de decisões, tornando-se importante para nossos processos, trazendo escalabilidade e agilidade.
Identidade
Logo
Versões
O logotipo oficial do Projuris ADV possui três versões, a principal, fundo escuro e fundo claro.
Horizontal
Vertical
Usos Incorretos
Não utilizar as versões antigas
Não mudar a cor da marca
Não achatar ou esticar a marca
Não girar ou distorcer a marca
Cores
Limitação de cores
Ao limitar o uso de cores no Projuris ADV, as áreas que recebem cores ganham mais atenção, como texto, imagens e elementos individuais, como botões.
Acessibilidade
Cores não devem ser utilizadas como única maneira de transmitir conteúdo ou distinguir elementos visuais, conforme diretriz da WCAG(ver):
1.4.1 Utilização da Cor: A cor não é utilizada como o único meio visual de transmitir informação, indicar uma acção, pedir uma resposta ou distinguir um elemento visual. (Nível A)
Aplicação
Tema
A cor primaria é a cor exibida com mais frequência nas telas e nos componentes do Projuris ADV ela também poderá ser usada para acentuar elementos.
Uso: botões de ação, controles de seleção como sliders e switches, destacando o texto selecionado, barras de progresso e links
$green-lighter
#B3F5BA
$green-light
#8ADB92
$green
#47AD52
$green-dark
#37A043
$green-darker
#26652D
Feedback
O sistema reserva o vermelho para erros (cancelados, atrasados), verde para sucesso, amarelo para alertas (pendências). As cores de feedback são fundamentais, pois interagem com outros componentes principais e / ou encontrados como resultado de uma circunstância indesejada.
$red-lighter
#FCCBC7
$red-light
#FCCBC7
$red
#F44336$red-dark
#891008
$red-darker
#891008
$yellow-lighter
#FFFF95
$yellow-light
#FFF263
$yellow
#FBC02D
$yellow-dark
#C49000
$yellow-darker
#8F6300
$blue-lighter
#B5FFFF
$blue-light
#80D6FF
$blue
#42A5F5$blue-dark
#0077C2
$blue-darker
#004C91
Cores de fundo, superfície e tipografia
Os tons de cinza são utilizados principalmente para chamadas, textos, elementos de interface e áreas de fundo.
Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1, conforme diretrizes da WCAG (ver):
1.4.3 Contraste (Mínimo):A apresentação visual de texto e imagens de texto tem uma relação de contraste de, no mínimo, 4.5:1
$white
#FFFFFF
$grey-lightest
#DFE3F2
$grey-lighter
#ADB1BF
$grey-light
#7E828F
$grey
#525662
$grey-dark
#292D38
$grey-darker
#000212
Cores secundarias
O Projuris ADV possui cores adicionais, que são usadas em ilustrações e visualizações de dados.
$pink-lighter
#FF90BD
$pink-light
#FF5C8D
$pink
#D81B60$pink-dark
#A00037
$pink-darker
#6A0012
$purple-lighter
#7B1FA2
$purple-light
#AE52D4
$purple
#7B1FA2
$purple-dark
#4A0072
$purple-darker
#1E0046
$orange-lighter
#FFCE6F
$orange-light
#FF9D3F
$orange
#EF6C00$orange-dark
#B53D00
$orange-darker
#7F0100
Tipografia
Open Sans
A tipografia principal escolhida para o projeto de identidade visual do Projuris ADV foi a Open Sans. A Open Sans foi escolhida por possuir linhas minimalistas e geométricas que passam a sensação de modernidade. Ela foi pensada para ser utilizada em títulos e frases de destaque com pesos maiores (semi-bold e bold) e para corpo e subtítulos com o peso padrão (regular).
Hierarquia
Para reforçar nossas mensagens, é importante utilizar a tipografia de uma forma que o conteúdo tenha uma hierarquia clara por meio de escalas de tamanhos e pesos.
Destaque
Exemplo de Título
Exemplo de Sub-título
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Destaques
Para os destaques devemos utilizar o componente heading, seguindo as regras dos títulos porem utilizando a escala de Display
Títulos
Para os títulos devemos utilizar o componente heading, sendo o H1 para o título principal da página, H2 para subtítulos internos da página e H3 para subtítulos contidos dentro do subtítulo H2.
Eles ajudam a identificar a hierarquia lógica dos elementos de uma página. Eles também ajudam a dividir os conteúdos em blocos para facilitar a compreensão das informações disponíveis na interface.
O título H1 deve ser usado apenas no topo, acima das pages. Ele deve aparecer apenas uma vez por tela.
O título h2 deve aparecer sempre no topo da página. Ele pode aparecer mais de uma vez por página, já que pode ser usado para separar o conteúdo blocos de informação
O título h3 pode ser usado para subdivir o conteúdo em mais blocos de informação. Use sempre dentro de um conteúdo que já possua um h2.
Parágrafos
Devemos utilizar o componente paragraph para textos que não sejam headings, respeitando o entrelinhamento de 20px e tamanho 14px de fonte.
Legendas
As legendas possuem 80% do tamanho do parágrafo convencional e devem ser utilizadas para dicas e mensagens complementares para inputs.
Devemos utilizar o componente paragraph para os textos de legenda e utilizar a tag <small> utilizando a fora.
Ilustrações
As ilustraões escolhidas seguem o estilo Flat, um estilo minimalista que agrega modernidade e tecnologia na comunicação da marca.
Quando precisar de uma ilustração que ainda não exista utilize a biblioteca UnDraw que segue a mesma linha visual das ilustrações do Projuris ADV.
Mascote
Esta é o Alex, nosso Bot de inteligência artificial.
Suas aplicações abrangem o site do Projuris ADV e o produto. Também pode ser utilizado em peças de divulgação, ou em campanhas que abordem a inteligência artificial do Projuris ADV.
Fotos
A fotografia do Projuris ADV é focada nos escritórios de advocacia. Queremos falar com os advogados sócios e gestores, por isso opte por cenários em que haja mais de um advogado quando estiver comunicando com o escritório e quando o discurso for voltado diretamente ao advogado, utilize uma imagem que transmita felicidade e confiança no uso da tecnologia.
É importante ressaltar que os indivíduos que compõe a fotografia devem estar preferencialmente em poses espontâneas e sempre com uma expressão alegre.
Grid
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nisi dapibus, consectetur risus rhoncus, rhoncus arcu. Integer porttitor metus quis tincidunt tincidunt.
Espaços
Os espaçamentos ditam os parametros de margin e padding de todos os objetos e devem sempre obedecer a uma escala de 1 a 5 onde:
- 1 - 5px
- 2 - 10px
- 3 - 20px
- 4 - 40px
- 5 - 80px
Components
Retorno
Principios
Retornos fornecem mensagens breves sobre processos em segundo plano na parte inferior da tela. Eles não devem interromper a experiência do usuário e podem incluir uma opção para desfazer a ação.
Components
Retorno
Principios
Retornos fornecem mensagens breves sobre processos em segundo plano na parte inferior da tela. Eles não devem interromper a experiência do usuário e podem incluir uma opção para desfazer a ação.
- Informacional: Fornece atualizações sobre os processos de um aplicativo.
- Temporário: Aparece temporariamente e desaparecem por conta própria, sem exigir que a entrada do usuário seja descartada.
- Contextual: É colocados na área mais adequada da interface do usuário.
Biblioteca de mensagens: Disponível no Confluence
Banners
Os banners comunicam mensagens importantes, mas que não exigem ação do usuário. Eles são mais proeminentes que mensagens de retorno e menos interruptivos do que os diálogos.
A mensagem do banner comunica uma alteração ou erro em um aplicativo. Os banners devem ser considerados como parte de sua estratégia geral de mensagens no aplicativo.
Principios
- Adequadamente interruptivo: Os banners são interruptivos, mas seu nível de interrupção deve corresponder às informações que eles contêm e ao contexto em que aparecem.
- Claro: Banners comunicam uma mensagem sucinta e o que acontecerá se os usuários interagirem com eles.
- Focado: Os banners contêm uma única mensagem e ações específicas que um usuário pode realizar.
<div class="alert alert-success" role="alert">Alert text.<button type="button" class="close" data-dismiss="alert"></button></div><div class="alert alert-warning" role="alert">Alert text.<button type="button" class="close" data-dismiss="alert"></button></div><div class="alert alert-danger" role="alert">Alert text.<button type="button" class="close" data-dismiss="alert"></button></div><div class="alert alert-primary" role="alert">Alert text.<button type="button" class="close" data-dismiss="alert"></button></div>
Annoucement bar
Principios
- ...
<div class="alert annoucement-success" role="alert"><span>Alert text.</span><button type="button" class="btn btn-light">Action</button><button type="button" class="close" data-dismiss="alert"></button></div><div class="alert annoucement-warning" role="alert"><span>Alert text.</span><button type="button" class="btn btn-light">Action</button><button type="button" class="close" data-dismiss="alert"></button></div><div class="alert annoucement-danger" role="alert"><span>Alert text.</span><button type="button" class="btn btn-light">Action</button><button type="button" class="close" data-dismiss="alert"></button></div><div class="alert annoucement-info" role="alert"><span>Alert text.</span><button type="button" class="btn btn-light">Action</button><button type="button" class="close" data-dismiss="alert"></button></div>Badges
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nisi dapibus, consectetur risus rhoncus, rhoncus arcu. Integer porttitor metus quis tincidunt tincidunt.
<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-blue-gray">Blue Gray</span><span class="badge badge-success">Success</span><span class="badge badge-warning">Warning</span><span class="badge badge-danger">Danger</span><span class="badge badge-deep-purple">Deep Purple</span><span class="badge badge-light">Light</span><span class="badge badge-dark">Dark</span>
Pills
<span class="badge badge-pill badge-primary">Primary</span><span class="badge badge-pill badge-secondary">Secondary</span><span class="badge badge-pill badge-blue-gray">Blue Gray</span><span class="badge badge-pill badge-success">Success</span><span class="badge badge-pill badge-warning">Warning</span><span class="badge badge-pill badge-danger">Danger</span><span class="badge badge-pill badge-deep-purple">Deep Purple</span><span class="badge badge-pill badge-light">Light</span><span class="badge badge-pill badge-dark">Dark</span>
Butons
Linguagem
Um botão informativo diminui o tempo necessário para a tomada da decisão, sendo o clique um botão uma metáfora para uma ação, um verbo deve ser utilizado para dizer explicitamente ao usuário que ação ele está tomando e garantir que ele saiba exatamente o que vai acontecer.
Teste WYLTIWLT
O texto do botão deve poder ser lido na voz do software e na voz do usuário. Essa verificação é feita através do teste WYLTIWLT. Adicionando estas frases antes do texto do botão ele ainda deve fazer sentido.
Você gostaria de [texto do botão]?
Eu gostaria de [texto do botão].
Tipos
<button type="button" class="btn btn-primary">Button primary</button><button type="button" class="btn btn-secondary">Button secondary</button>
Tamanhos
<button type="button" class="btn btn-primary btn-lg">Button large</button><button type="button" class="btn btn-primary">Button default</button><button type="button" class="btn btn-secondary btn-sm">Button small</button>
Dropdowns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nisi dapibus, consectetur risus rhoncus, rhoncus arcu. Integer porttitor metus quis tincidunt tincidunt.
<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle=dropdown>Button default</button>Dropdown</button><div class="dropdown-menu"><a href="#" class="dropdown-item">First Item</a><a href="#" class="dropdown-item">Second Item</a><a href="#" class="dropdown-item">Third Item</a></div></div>
Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nisi dapibus, consectetur risus rhoncus, rhoncus arcu. Integer porttitor metus quis tincidunt tincidunt.