Guia de Estilos do Portal de Intranet da Rede Bahia by Alexandre Yamamoto

GUIA DE ESTILOS E IDENTIDADE VISUAL PORTAL DE INTRANET REDE BAHIA

CONTATO Endereço

Telefone / Online

Allen Recife Av. Fernando Simões Barbosa, 266 13º andar, sala 1306 - Empresarial Wecon VI Boa Viagem - Recife, PE - CEP: 51020-390

Telefone: + 55 (81) 2128-3800 Website: www.allen.com.br

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 2 // 38

INTRODUÇÃO GUIA DE ESTILOS E IDENTIDADE VISUAL - PORTAL DE INTRANET DA REDE BAHIA O objetivo deste documento é apresentar as principais características e especificações técnicas sobre o contexto visual dos diversos elementos e funcionalidades que se encontram no Portal de Intranet da Rede Bahia e nos Portais de Intranets das empresas que compões o Grupo Rede Bahia. Esses elementos encontram-se neste Guia de Estilo e estão dividos por grupos, de acordo com a funcionalidade, sua disposição no layout ou por página da ferramenta.

Enviar uma mensagem consistente e controlada sobre a plataforma é essencial para apresentar uma imagem forte e unificada da solução como um todo. Esse Guia de Estilos reflete o comprometimento da Allen com a excelência e qualidade. A marca Rede Bahia, incluindo o logotipo, o nome, as cores, seus elementos visuais são recursos valiosos da empresa, portanto, é importante proteger sua identidade visual, prevenindo o uso incorreto e não autorizado da marca.

ÍNDICE DE CONTEÚDO SEÇÃO 1

01 TIPOGRAFIA / 01.1 HIERARQUIA DA TIPOGRAFIA

SEÇÃO 2

02 PALETA DE CORES DO PORTAL

SEÇÃO 3

03 ICONOGRAFIA

SEÇÃO 4

04 ANATOMIA DO PORTAL

SEÇÃO 5

05 CABEÇALHO

SEÇÃO 6

06 MENU

SEÇÃO 7

07 MENU DE SERVIÇOS

SEÇÃO 8

08 BANNER DE DESTAQUE

SEÇÃO 9

09 MÓDULOS / WIDGETS

SEÇÃO 10

10 TAMANHO DOS MÓDULOS

SEÇÃO 11

11 RODAPÉ

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 4 // 38

01 TIPOGRAFIA Família Tipográfica Segoe UI Família Tipográfica Roboto

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 6 // 38

FAMÍLIA TIPOGRÁFICA SEGOE UI USO DA TIPOGRAFIA Esta família tipográfica é padrão do SharePoint e em outros produtos da Microsoft e o seu uso geral se aplica para corpos de textos em geral, como textos de notícias e artigos, descrições e

entre outros. O uso de qualquer outra família tipográfica nesses elementos pode acarretar na quebra do layout e na perda da identidade visual do portal.

S E G O E U I

PESOS PRIMÁRIOS

Bold (700)

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

Regular (300)

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

NÚMEROS E CARACTERES ESPECIAIS

Números

Caracteres Especiais

0 1 2 3 4 5 6 7 8 9 0

! “ § $ % & / ( ) = ? ` ; : ¡ “ ¶ ¢ [ ] | { } ≠ ¿ ‘

« ∑ € ® † Ω ¨ ⁄ ø π • ± ‘ æ œ @ ∆ º ª © ƒ ∂ ‚ å ¥ ≈ ç

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 7 // 38

FAMÍLIA TIPOGRÁFICA ROBOTO USO DA TIPOGRAFIA Para uso geral como cabeçalhos, títulos, chamadas, botões e outros elementos visuais que exigem uso de texto e que precisam atrair a atenção do usuário. O uso de qualquer outra família

PESOS PRIMÁRIOS

Bold (700)

tipográfica pode acarretar na quebra do layout e na perda da identidade visual do portal.

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

Regular (300)

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

NÚMEROS E CARACTERES ESPECIAIS

Números

Caracteres Especiais

012 3 4 5 6 7 8 9 0 ! “ § $ % & / ( ) = ? ` ; : ¡ “ ¶ ¢ [ ] | { } ≠ ¿ ‘ « ∑ € ® † Ω ¨ ⁄ ø π • ± ‘ æ œ @ ∆ º ª © ƒ ∂ ‚ å ¥ ≈ ç

01 .1

HIERARQUIA DA TIPOGRAFIA Corpo de Texto / Textos Descritivos / Botões e Links Cabeçalhos e Títulos

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 9 // 38

CORPO DE TEXTO / TEXTOS DESCRITIVOS / BOTÕES E LINKS

Legendas

font-family: ‘Roboto’; font-size: 0.68em / 10 px;

Links e botões

Corpo de Texto / Descrições

CABEÇALHOS E TÍTULOS

LEGENDAS

Títulos dos Widgets

Chamada dos Widgets

Links e Botões font-family: ‘Roboto’; font-size: 0.7em / 11 px;

font-weight: 300;

Corpo de Texto / Descrições font-family: ‘Segoe UI’; font-size: 0.89em / 14 px;

font-weight: 300;

TÍTULO DOS WIDGETS font-family: ‘Roboto’; font-size: 0.7em / 11 px;

font-weight: 500; text-transform: uppercase;

Chamada do Widget

font-family: ‘Roboto’; font-size: 1.55em / 22 px;

Título das Páginas

font-weight: 100; text-transform: uppercase;

font-weight: 500;

Título das Páginas font-family: ‘Roboto’; font-size: 2em / 32 px;

font-weight: 500;

PALETA DE CORES DO PORTAL Cores Primรกrias do Tema Cores Secundรกrias do Tema Cores Fixas do Sistema

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 11 // 38

CORES PRIMÁRIAS DO TEMA Explicação: As cores do tema são as cores que o definem como um padrão visual para todo o portal de intranet. Elas são mandatórias.

Uso: O uso dessa paleta é direcionado para os menus laterais, o principal e o menu de serviços .

CPT1 - “BLUE CHARCOAL”

CPT2 - “BLACK PEARL”

CPT3 - “OXFORD BLUE”

CÓDIGOS DA COR

CMYK RGB Web

: C082 M069 Y053 K064 : R038 G043 B052 : #262B34

: C083 M071 Y053 K066 : R034 G039 B048 : #222730

: C081 M067 Y051 K059 : R042 G048 B058 : #2A303A

Cor de fundo da parte superior da barra dos menus laterais.

Cor da linha divisória entre a barra superior da barra do menu principal.

Cor de fundo da barra vertical do menu principal.

CPT4 - “WATERLOO”

CPT5 - “JAVA”

CPT6 - “WHITE”

CÓDIGOS DA COR

CMYK RGB Web

: C082 M069 Y053 K064 : R038 G043 B052 : #262B34

Cor da fonte dos itens do menu principal.

: C067 M000 Y036 K000 : R017 G207 B189 : #11CFBD

Cor padrão dos boxes dos ícones do menu principal.

: C002 M000 Y000 K000 : R255 G255 B255 : #FFFFFF

Cor dos ícones do menu principal.

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 12 // 38

CORES SECUNDÁRIAS DO TEMA Explicação: As cores secundárias são cores complementares às cores do tema e não são mandatórias. Elas ajudam a criar uma padrão de reconhecimento visual aos elementos do portal.

Uso: O uso dessa paleta é direcionado para os módulos, botões, links e ícones.

CST1 - “SEAGULL”

CST2 - “BLUE MARGUERITE”

CST3 - “JAVA”

CÓDIGOS DA COR

CMYK RGB Web

: C052 M016 Y007 K000 : R132 G184 B218 : #84B8DA

: C068 M070 Y000 K000 : R109 G089 B176 : #6D59B0

: C067 M000 Y036 K000 : R017 G207 B189 : #11CFBD

Cor de fundo de módulos e botões.

Cor de fundo de módulos e botões e elementos de formulários.

CST1 - “FIORD”

CST1 - “UFO GREEN”

CST1 - “BLUE LAGGON”

CÓDIGOS DA COR

CMYK RGB Web

: C069 M051 Y041 K031 : R078 G092 B104 : #4E5C68

Cor de fundo de módulos e botões.

: C068 M000 Y071 K000 : R046 G204 B113 : #2ECC71

Cor de fundo de módulos e botões.

: C085 M035 Y036 K018 : R000 G113 B131 : #007183

Cor de fundo de módulos e botões.

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 13 // 38

CORES FIXAS DO SISTEMA Explicação: As cores fixas do sistema são cores que não alteram, independentemente da alteração da paleta de cores do tema aplicado.

Uso: O uso dessa paleta é direcionado para fundos, tipografia e ícones.

CFS1 - “WHITE”

CFS2 - “LILY WHITE”

CFS3 - “MOUNTAIN MIST”

CÓDIGOS DA COR

CMYK RGB Web

: C002 M000 Y000 K000 : R255 G255 B255 : #FFFFFF

: C010 M007 Y008 K000 : R234 G234 B234 : #EAEAEA

: C043 M033 Y033 K012 : R149 G149 B149 : #959595

Cor de fundo de módulos do tipo 3, textos, ícones e outros elementos.

Cor de fundo da área de conteúdo.

Cor para textos e ícones.

CFS4 - “STORM DUST”

CFS5 - “THUNDER”

CFS6 - “BUNKER”

CÓDIGOS DA COR

CMYK RGB Web

: C083 M071 Y053 K066 : R098 G098 B098 : #626262

Cor para textos e ícones.

: C057 M046 Y046 K035 : R076 G076 B076 : #4C4C4C

Cor para textos e ícones.

: C071 M061 Y057 K070 : R044 G044 B044 : #2C2C2C

Cor para textos.

ANATOMIA DO PORTAL Estrutura/Esqueleto do Portal de Intranet (desktop e tablet) Estrutura/Esqueleto do Portal de Intranet (mobile)

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 15 // 38

ESTRUTURA/ESQUELETO DO PORTAL DE INTRANET (DESKTOP E TABLET) ENTENDENDO AS ÁREAS 1

MICROSOFT SHAREPOINT RIBBON Elemento nativo do SharePoint.

HEADER / CABEÇALHO Composto pela a notificação de tarefas, contato, busca, menu secundário (item 3.2) e ícone de ativação e desativação do menu de serviços (item 3.3).

3.1

AGREGADOR DE CONTEÚDO Menu retrátil interativo persistente. Ativado/desativado automaticamente de acordo com a interação do usuário.

3.2

MENU SECUNDÁRIO Menu que exibe a navegação de conteúdo interno de determinados espaços (item 3.1).

3.3

MENU DE SERVIÇOS Menu retrátil de serviços. Ativado/desativado ao clicar no ícone do menu de serviços (item 2). Quando está desativado, fica completamente oculto na direita.

BANNER DE DESTAQUE Espaço reservado para exibir conteúdo corporativo persistente para todos os usuários.

ÁREA DE CONTEÚDO, WIDGETS / MÓDULOS Espaço onde haverá o conteúdo principal, widgets / módulos e entre outros conteúdos.

FOOTER / RODAPÉ Espaço onde se encontram as marcas das empresas que compõem o grupo da Rede Bahia.

1 2

3.2

3.1 5

3.3

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 16 // 38

ESTRUTURA/ESQUELETO DO PORTAL DE INTRANET (MOBILE) ENTENDENDO AS ÁREAS 1

MICROSOFT SHAREPOINT RIBBON Elemento nativo do SharePoint.

HEADER / CABEÇALHO Composto pelo agregador de conteúdo (item 3.1), o logotipo da Rede Bahia, o Menu de Serviços (item 3.3), o campo de busca e o Menu Secundário (item 3.2).

3.1

AGREGADOR DE CONTEÚDO Menu retrátil. Ativado/desativado ao clicar no ícone. Quando está desativado, fica completamente oculto na esquerda do viewport.

3.2

MENU SECUNDÁRIO Menu que exibe a navegação de conteúdo interno de determinados espaços (item 3.1).

3.3

MENU DE SERVIÇOS Menu retrátil de serviços. Ativado/desativado ao clicar no ícone do menu de serviços. Quando está desativado, fica completamente oculto na direita do viewport.

BANNER DE DESTAQUE Espaço reservado para exibir conteúdo corporativo persistente para todos os usuários.

ÁREA DE CONTEÚDO, WIDGETS / MÓDULOS Espaço onde haverá o conteúdo principal, widgets / módulos e entre outros conteúdos.

FOOTER / RODAPÉ Espaço onde se encontram as marcas das empresas que compõem o grupo da Rede Bahia.

1 3.1

3.3 3.2

06 CABEร ALHO O Ribbon O Cabeรงalho

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 18 // 38

O RIBBON -

65px

Explicação: O Ribbon é um elemento nativo do SharePoint e não é recomendado tentar modificar ou customizar este elemento sem consulta prévia.

DIMENSÕES DO ELEMENTO

100%

width: 100%; height: 65px;

CABEÇALHO 1

DIMENSÕES DO ELEMENTO

4 60px

Explicação: O cabeçalho do Portal de Intranet da Rede Bahia é dividido em 4 seções e é composto pelo o ícone de notificações de tarefas, mensagem, campos de busca, menu secundário e ícone de ativação do menu de serviços.

100%

NOTIFICAÇÃO DE TAREFAS E MENSAGEM Ícones de acesso com cor CFS5.

MENU SECUNDÁRIO Elemento nativo do SharePoint.

CAMPO DE BUSCA Elemento de busca com cor CFS4.

ÍCONE DE ATIVAÇÃO DO MENU SECUNDÁRIO Elemento nativo do SharePoint.

width: 100%; height: 60px;

06 MENU PRINCIPAL Agregador de Conteúdo

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 20 // 38

RETRAÍDO 1 3

EXPANDIDO

AGREGADOR DE CONTEÚDO

Explicação: O menu principal é um agregador de conteúdo e possui itens de acesso às páginas iniciais de todos os níveis principais do portal de intranet. Em sua forma original, permanece retraído, ocultando o logotipo, o item do menu e exibindo apenas o ícone do item do menu. O menu se expande automaticamente quando o usuário passa o ponteiro do mouse sobre ele, assumindo sua forma completa.

70px

100%

DIMENSÕES

280px

RETRAÍDO width: 70px; height: 100%;

EXPANDIDO width: 280px; height: 100%;

BARRA SUPERIOR Elemento com cor CPT1.

ITEM DO MENU Elemento com cor CPT4.

LOGOTIPO DA EMPRESA Elemento com cor CFS1.

ÍCONE DO ITEM DO MENU Fundo do elemento de cor CPT5 e o ícone da cor CPT6.

LINHA DIVISÓRIA Elemento com cor CPT2.

BARRA VERTICAL DO MENU Elemento com cor CPT3.

07 MENU DE SERVIร OS O Menu de Serviรงos

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 22 // 38

ATIVADO

O MENU DE SERVIÇOS

Explicação: O menu de serviços é um menu do estilo gaveta, parecido com o menu principal, mas a diferença é que ele fica completamente oculto quando não está ativo e ele fica aberto de maneira permanente, roubando o foco todo da interatividade para si. Assim sendo, ao ser aberto, ele precisa receber uma ação direta para ser fechado, tanto clicando na área exterior, no ícone de fechar ou acessando algum serviço do grid.

4 5

100%

DIMENSÕES

280px

width: 280px; height: 100%;

BARRA SUPERIOR Elemento e ícone de fechar na cor CPT1.

ÍCONE DO SERVIÇO Ícone da cor CPT4.

TÍTULO DO COMPONENTE Elemento com cor CPT4.

NOME DO SERVIÇO Elemento com cor CPT4.

BARRA VERTICAL DO MENU Elemento com cor CFS1.

BANNER DE DESTAQUE Responsividade e Áreas Visíveis Exemplos de Aplicação

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 24 // 38

RESPONSIVIDADE E ÁREAS VISÍVEIS -

Regras de uso: O banner de destaque possui certas peculiaridades devido à responsividade do portal. Assim sendo, certas regras devem ser seguidas para que não haja uma disparidade visual impactante quando o Portal for visualizado em dispositivos móveis, como um tablet e um smartphone, por exemplo. O ideal para que o componente apresente seu conteúdo de forma adequada em displays menores, é de que sejam criadas pelo menos 3 imagens diferentes, uma para cada dispositivo e cada uma respeitando um limite de área em que o conteúdo relevante deve estar aparente. O guia ao lado tem por finalidade exibir qual o tamanho mínimo que as imagens devem possuir e qual os tamanhos recomendados.

DIMENSÕES width: 100%; height: 200px;

200px

Explicação: O banner de destaque é um elemento visual logo abaixo do cabeçalho e é permanente na página inicial do Portal de Intranet. Ele tem como função, exibir conteúdos institucionais e chamar a atenção dos usuários. Embora ele seja permanente na página inicial, ele não é fixo no viewport. 100%

DESKTOP A imagem contida dentro do espaço de largura relativa, para displays maiores que 1024px, deve ter no mínimo 1200px de largura e 200px de altura. A informação contida deve estar dentro deste espaço mínimo de 1200px, sendo sempre importante, respeitar uma área de respiro de pelo menos 20px.

TABLETS A imagem contida dentro do espaço de largura relativa, para displays maiores que 728px e até 1024px, deve ter no mínimo 728px de largura (1024px = recomendado) e 200px de altura. A informação contida deve estar dentro deste espaço mínimo de 728px, sendo sempre importante, respeitar uma área de respiro de pelo menos 20px.

SMARTPHONES A imagem contida dentro do espaço de largura relativa, para displays menores que 728px, deve ter no mínimo 330px de largura e 200px de altura. A informação contida deve estar dentro deste espaço mínimo de 330px, sendo sempre importante, respeitar uma área de respiro de pelo menos 20px.

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 25 // 38

EXEMPLOS DE APLICAÇÃO -

200px

VISÃO DESKTOP DIMENSÕES min-width: 1200px; height: 200px; mín. 1200px

200px

VISÃO TABLET DIMENSÕES min-width: 1200px; height: 200px; mín. 1024px

200px

VISÃO SMARTPHONES DIMENSÕES min-width: 1200px; height: 200px; mín. 330px

09 MÓDULOS / WIDGETS Módulos do Tipo 1 Módulos do Tipo 2 Módulos do Tipo 3

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 27 // 38

MÓDULOS DO TIPO 1

mín. 300px

3 4

Explicação: Os módulos do tipo 1 são usados para representar conteúdos dinâmicos flutuantes, como notícias e vídeos. Estes módulos são característicos por possuirem uma imagem de chamada do conteúdo no fundo com um efeito de esmaecimento (blur), uma máscara de degradê entre a cor preto > transparente de baixo para cima, o título do widget dentro de um box da cor branca semi-transparente, o título do conteúdo, texto descritivo (opcional) e os bullets do carrossel (opcional).

- Notícias em Destaque; - Notícia Fixa; - Acontece na Redes; - Vídeos em Destaque.

DIMENSÕES As dimensões dos módulos são relativas de acordo com o sistema e de acordo com os requisitos de cada módulo. O conteúdo interno, no entretanto, possui uma medida mínima de 300 x 300 px.

IMAGEM DE FUNDO Imagem com efeito de blur 7px, dimensões mínimas de 280 x 280px, área de respiro de 15px para todos os cantos.

DESCRIÇÃO DO CONTEÚDO Fonte na cor #FFFFFF, tipografia Segoe UI, tamanho 0.89em ou 14px, peso 300 e margem inferior de 15px.

MÁSCARA GRADIENTE Gradiente entre as cores preto > transparente de baixo para cima.

BULLETS / NAVEGAÇÃO DO CARROSSEL Ícones na cor #FFFFFF, dimensões de 10 x 10px e espaçamento direito de 10px, não sendo aplicado no último ícone.

TÍTULO DO WIDGET Fonte na cor #FFFFFF, tipografia Roboto, tamanho 0.7em ou 11px, peso 500, uppercase, área de respiro de 10px nas laterais e fundo de cor branca com 30% de opacidade. Margem inferior de 20px.

TÍTULO DO CONTEÚDO Fonte na cor #FFFFFF, tipografia Roboto, tamanho 1.55em ou 22px, peso 300 e margem inferior de 10px;

EXEMPLOS DE WIDGETS QUE SE ENQUADRAM NESTE TIPO

mín. 300px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 28 // 38

MÓDULOS DO TIPO 2

3 4

mín. 300px

Explicação: São usados para representar conteúdos dinâmicos que não possuem uma rotatividade tão intensa ou que não devem possuir peso de leitura mais forte que os módulos do tipo 1. Assim sendo, os módulos do tipo 2 perdem a imagem de fundo e ganham ícones relevantes ao conteúdo, localizados no canto superior direito. A estrutura restante praticamente a mesma aos módulos do tipo 1. Entretanto, existem widgets que por sua natureza e tamanho, mudam um pouco de estrutura.

EXEMPLOS DE WIDGETS QUE SE ENQUADRAM NESTE TIPO - Documentos Corporativos; - Páginas Institucionais; - Serviços; - Calendário Corporativo; - Clima.

DIMENSÕES As dimensões dos módulos são relativas de acordo com o sistema e de acordo com os requisitos de cada módulo.

FUNDO DO WIDGET As cores podem variar de acordo com o tipo de conteúdo. Vide a página 12 para mais informações.

LINK DE ACESSO COMPLETO Fonte na cor #FFFFFF, tipografia Segoe UI, tamanho 0.89em ou 14px, peso 300 e margem inferior de 15px.

ÍCONE REPRESENTATIVO DO CONTEÚDO Ícone na cor #FFFFFF, dimensões mínimas de 60 x 60px, alinhado no topo à direita.

BULLETS / NAVEGAÇÃO DO CARROSSEL Ícones na cor #FFFFFF, dimensões de 10 x 10px e espaçamento direito de 10px, não sendo aplicado no último ícone.

TÍTULO DO CONTEÚDO Fonte na cor #FFFFFF, tipografia Roboto, tamanho 1.55em ou 22px, peso 300 e margem inferior de 10px;

5 6

mín. 300px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 29 // 38

MÓDULOS DO TIPO 3

mín. 300px

Explicação: Os módulos do tipo 3 são módulos que apresentam mais informações de maneira textual e que exigem certo tipo de interatividade e que não necessariamente, precisam direcionar o usuário para outras páginas da intranet. Assim sendo, são widgets de acesso rápido que trazem informações úteis sem precisar criar fluxos de navegação. Por possuirem mais textos, possuem fundo branco para diferenciação e para deixar a leitura e o componente em si, mais clean e objetivo.

FUNDO DO WIDGET Fundo do widget na cor #FFFFFF. Os módulos do tipo 3 possuem uma pequena sombra no elemento em si de 4px de blur, na cor #000000 e opacidade de 30%.

TÍTULO DO WIDGET Fonte na cor #2C2C2C, tipografia Roboto, tamanho 0.7em ou 11px, peso 500, uppercase e com área de respiro de 15px na esquerda.

CONTEÚDO DO WIDGET O conteúdo dos módulos do tipo 3 podem variam muito de acordo com as necessidades. O ideal para formatar o conteúdo deste componente é seguindo a tipografia (página 5), a hierarquia da tipografia (página 8) e usando as paletas de cores (página 10) do portal.

mín. 300px

EXEMPLOS DE WIDGETS QUE SE ENQUADRAM NESTE TIPO - Aniversariantes; - Ramais; - Oportunidades; - Enquete.

DIMENSÕES As dimensões dos módulos são relativas de acordo com o sistema e de acordo com os requisitos de cada módulo.

BULLETS / NAVEGAÇÃO DO CARROSSEL Ícones na cor #959595, dimensões de 10 x 10px e espaçamento direito de 10px, não sendo aplicado no último ícone.

TAMANHOS DOS MĂ&#x201C;DULOS Tamanho 1x1 Tamanho 2x1 Tamanho 2x2 Tamanho 4x2

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 31 // 38

TAMANHO 1X1 Explicação: Os módulos que possuem o tamanho 1x1 são módulos que têm a intenção única de possuir um conteúdo de acesso rápido, sem muita informação explicativa ou descrivita.

WIDGETS QUE SE ENQUADRAM NESTE TAMANHO - Serviços; - Links Externos; - Empresas do Grupo.

DIMENSÕES Tamanho do módulo em pixels = 145 x 145px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 32 // 38

TAMANHO 2X1 Explicação: Usado para incluir pouca informação textual, que seja consica e objetiva.

WIDGETS QUE SE ENQUADRAM NESTE TAMANHO - Calendário; - Clima.

DIMENSÕES Tamanho do módulo em pixels = 300 x 145px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 33 // 38

TAMANHO 2X2 Explicação: É o tamanho padrão dos módulos. Possui espaço adequado para conter um nível razoável de informações e ainda permitir uma área de respiro entre os elementos internos.

WIDGETS QUE SE ENQUADRAM NESTE TAMANHO - Notícias Fixas; - Serviços; - Páginas Institucionais; - Documentos Corporativos; - Sorteios; - Aniversariantes; - Ramais; - Oportunidades; - Acontece na Rede; - Fique por dentro; - Novos Colaboradores; - Vídeos; - Mais Vida; - Empresas do Grupo.

DIMENSÕES Tamanho do módulo em pixels = 300 x 300px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 34 // 38

TAMANHO 2X4 Explicação: Os módulos que possuem este tamanho ou superior são aqueles que precisam o maior nível de atenção dos usuários. Comporta um nível muito elevado de informações visuais e textuais.

WIDGETS QUE SE ENQUADRAM NESTE TAMANHO - Notícias em Destaque.

DIMENSÕES Tamanho do módulo em pixels = 610 x 300px

11 RODAPÉ O Rodapé

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 36 // 38

DIMENSÕES DO ELEMENTO

O RODAPÉ

width: 100%; height: 70px;

Explicação: O Rodapé do Portal de Intranet da Rede Bahia é composto pelo o logotipo das empresas que compões o Grupo Rede Bahia.

1 100%

LINHA DIVISÓRIA Na cor CFS3.

FUNDO DO RODAPÉ Na cor CFS2.

LOGOTIPOS DAS EMPRESAS DO GRUPO Possuem altura máxima de 36px, sendo a largura, variável de acordo com o logotipo.

70px

Guia de Estilos e Identidade Visual - Portal de Intranet Rede Bahia 37 // 38

GUIA DE ESTILOS E IDENTIDADE VISUAL PORTAL DE INTRANET REDE BAHIA