m a n u a l d e i d e n t i d a d e v i s u a l d o s …...1. introdução m a n u a l d e i d e n...

M A N U A L D E I D E N T I D A D E V I S U A L

D O S S I T E S D O G O V E R N O D O PA R A N Á

1. Introdução

2. Estrutura

2.1. Topo

2.2. Corpo

2.3. Rodapé

3. Categorias de Sites

3.1. Portal do Governo

3.2. Secretarias

3.3. Agência de Notícias

3.4. Estrutura Governamental

Índice

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á

03

04

05

09

12

16

04

04

04

1. Introdução

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á 03

A elaboração deste material visa ao cumprimento da Lei Federal 13.460/2017, que estabelece normas básicas para participação, proteção e defesa dos direitos do cidadão a ser atendidos direta ou indiretamente pela administração pública e à necessidade da publicação de Carta de Serviços ao Usuário.

Baseia-se também no Decreto Estadual nº 4.477/2009 e Resolução CGE nº 009/2019, que estabelece regras, diretrizes e responsabilidades aos órgãos e entidades da administração direta e indireta do Poder Executivo do Paraná que prestam serviços diretamente ao cidadão pela internet.

Considera ainda o contido no Capítulo III do Decreto nº 9.360/2018, que, ao tratar de Governo Digital, estabelece a obrigatoriedade de facilitação, simplificação e transparência na prestação de serviços públicos ao cidadão. Assim, o portal centraliza informações e serviços oferecidos pelo Governo do Estado.

Este manual normatiza a criação de sites, com identidade visual determinada pela Secretaria da Comunicação Social e implementada pela Companhia de Tecnologia da Informação e Comunicação do Paraná - Celepar.

Os sites mantidos pela Celepar atendem a padrões de acessibilidade e usabilidade estabelecidos pelo Governo Federal. O sistema gerenciador de conteúdos e a base de serviços garantem a independência dos órgãos quanto à administração dos seus temas.

A identidade visual estabelece linguagem única para integrar os sites governamentais do Estado e facilitar o reconhecimento das páginas oficiais. Utiliza paleta de cores relacionada a cada instituição, a fim de valorizar sua identidade, o conteúdo e a forma de efetivação dos serviços.

No layout-padrão dos sites definido para o Governo Digital, as páginas devem

obrigatoriamente compor-se de barras horizontais que posicionem os

conteúdos de acordo com as áreas específicas para cada categoria de site.

É possível adaptar características como cores, botões de ação ou imagens,

desde que atendam à padronização dos elementos estabelecida neste manual.

Utiliza-se o princípio de design responsivo para a construção dos sites,

considerando as principais plataformas de visualização de conteúdos. A

largura padrão para desktop é de 1170px e abriga todo o conjunto de

informações das páginas. Porém, as barras que possuem cores ou imagens de

fundo podem expandir-se alcançando 100% da área da tela.

Tanto a página inicial quanto as internas possuem as áreas topo, corpo e

rodapé de acordo com a descrição a seguir.

2.1. Topo

A área superior do site poderá apresentar links de Acessibilidade, de Pessoas

Desaparecidas, Saiba Mais Sobre o Estado, para o Portal da Transparência,

para o Meu Governo e para redes sociais. As áreas de busca, da marca do

Governo do Estado do Paraná ou logomarca da instituição e o nome da

Secretaria, órgão ou título específico, deverão estar destacados. É possível

incluir mais uma barra para a aplicação de menu.

2.2. Corpo

A área central do site é destinada a menu de serviços, notícias, banners,

vídeos, áudios e, quando necessário, outros conteúdos. Para a apresentação

de notícias ou mais informações referentes às redes sociais, utilizam-se

colunas.

2.3. Rodapé

A área inferior do site é destinada a divulgar links para o Mapa do Site, a

Ouvidoria e a Transparência. Apresenta ainda, a marca do Governo do Estado

do Paraná e as informações sobre o órgão, como nome, endereço físico,

telefones, horário de atendimento e localização por mapa.

2. Estrutura


Topo

Rodapé

Corpo

100%1170

O portal do Governo Digital contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

TopoA barra superior contém os links de Acessibilidade, de Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7

A barra com imagem de fundo apresenta a marca do Governo do Estado do Paraná, o título do Governo Digital, o slogan, o botão Meu Governo, o campo de busca e links dos serviços mais buscadosÁrea utilizada: 1170x387pxMarca: 130x56pxBusca: 540x50pxBackground: imagem

Corpo

Barra destinada a notícias

Barra destinada à divisão de assuntos: 1170x316pxFonte: Proxima nova rgTamanho: 1.4emCor: #565658

3.1. Portal do Governo Digital


3. Categorias de Sites

387

35

Corpo

TextoFonte: Proxima nova rgTamanho: 1.6emCor: #FFFFFF

Título: em letra maiúsculaFonte: Proxima nova boldTamanho: 1.8emCor: #FFFFFFBackground: #00B958

Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px

05

Rodapé

1170

100%

Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833

Título Informações para vocêFonte: Proxima nova boldTamanho: 2emCor: #FFFFFFBackground: #00B958

Botão Meu GovernoFonte: Proxima nova boldTamanho: 0.875emCor: #FFFFFFBackground: #00B958

Título Governo DigitalFonte: Proxima nova boldTamanho: 2.8emCor: #FFFFFF

SloganFonte: Proxima nova rgTamanho: 0.643emCor: #FFFFFF

Mais buscadasFonte: Proxima nova rgTamanho: 1.4emCor: #00B958 e #FFFFFF

Botão destaqueFonte: Proxima nova boldTamanho: 0.875emCor: #FFFFFFBackground: #FF8001Background hover: #FFA60B

RodapéContém a marca do Governo do Estado do Paraná, a logomarca da Celepar, o texto de endereço alinhado à esquerda e localização por mapaLargura: 1170pxFonte: Proxima nova rgTamanho: 1.4emCor: #666666Background: #F7F7F7

3.1. Portal do Governo Digital


387

35

Corpo

Rodapé

1170

100%

3.1. P do Governo Digitalágina de Serviços


Observando os princípios elencados na Carta de Serviços do Governo Federal, a página de serviços do Governo foi formatada para responder às seguintes questões: o que é o serviço, quem pode solicitá-lo, como solicitá-lo, onde solicitá-lo, a previsão do prazo, o custo e a legislação pertinente.

Os elementos que a compõe acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:


Barra com a marca do Governo do Estado do Paraná, o título do Governo Digital, o slogan, o campo de busca, o botão Meu Governo e links dos serviços mais buscadosÁrea utilizada: 1170x122pxBandeira: 104x74pxBusca: 228x40pxBackground: linear-gradient #324345 #686868

122

35

Título do serviço

Títulos do texto

825 253

07

Botão Meu GovernoFonte: Montserrat boldTamanho: 0.875emCor: #FFFFFFBackground: #00B858

Título Governo DigitalFonte: Montserrat boldTamanho: 2.8emCor: #FFFFFF

SloganFonte: Proxima nova rgTamanho: 0.643emCor: #FFFFFF

Mais buscadasFonte: Proxima nova rgTamanho: 1.4emCor: #00B858 e #FFFFFF


1170

100%


CorpoA coluna esquerda prioriza os conteúdos como o que é, como realizar o serviço, prazo e legislaçãoLargura: 825px

A coluna direita apresenta forma de atendimento, quanto custa, serviços relacionados e lista de outros links referentes ao serviçoLargura: 253px

RodapéContém a marca do Governo do Estado do Paraná, a logomarca da Celepar, o texto de endereço alinhado à esquerda e localização por mapaLargura: 1170pxFonte: Proxima nova rgTamanho: 1.4emCor: #666666Background: #F7F7F7


Títulos do textoFonte: Proxima nova rgTamanho: 1.2emCor: #212529

TextoFonte: Proxima nova rgTamanho: 1.4emCor: #212529 Link: #007bffLink hover: #0056b3

08

BreadcrumbFonte: Proxima nova rgTamanho: 1emCor: #999

Título do serviçoFonte: Proxima nova boldTamanho: 2.143emCor: #00B858

Títulos do textoFonte: Proxima nova boldTamanho: 1.429emCor: #212529

TextoFonte: Proxima nova rgTamanho: 1.4emCor: #212529 Link: #007bffLink hover: #0056b3

Links referentes ao serviçoFonte: Montserrat semibold regularTamanho: 1emCor: #3aae4f

Botão de açãoFonte: Montserrat semibold regularTamanho: 14pxCor: #FFFFFFBackground: linear-gradient #61ca64 #2eac58

3.1. Página de Serviços do Governo Digital

122

35

Título do serviço

Títulos do texto

825 253

1170

100%

Página Inicial


100%1170

120

35

45

75

Notícia Destaque

Notícia em Linha Notícia em Coluna

Agenda Executiva

Agenda

3.2. Secretarias Os sites desta categoria contêm elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:


Barra para serviços do Governo Digital: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emBackground: #009B54

CorpoA página inicial apresenta barras com conteúdos como notícias, banners, vídeos, áudios, calendário ou outras informações, que podem ser distribuídas em até quatro colunasLargura: 1170px

50

250

390

Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: #0072bbBackground hover: #00AEEF

Barra com a marca do Governo do Estado do Paraná, título da instituição, campo de busca e links para redes sociais: 1170x120pxMarca do Governo: 80x100pxFonte título: Proxima nova boldTamanho: .85emCor: #555555Busca: 373x40pxÍcones redes sociais: 38x38px


Botão Encontre Aqui: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%

Botão Meu Governo: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #3F8033Background: #FFFFFF

Notícia destaque: pode ser com título abaixo ou sobre a foto, em 3 ou 4 colunasFonte título sobre a foto: Proxima nova boldTamanho: 1.286emCor: #FFFFFFFonte título caixa-alta: Proxima nova rgTamanho: 1.45emCor: #00AEEFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333

Agenda ExecutivaFonte título caixa-alta: Proxima nova boldTamanho: 1.714emCor: #333333Borda esquerda: 5px #00AEEF Fonte mês: Proxima nova boldTamanho: 0.875emCor: #FFFFFFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333

Destaques


09

Barra de Destaques: 1170px

Barra de Agenda: 1170px

RodapéLargura: px1170

Notícia em linha: pode ser com ou sem fotoFotos: 165x123pxFonte título notícia: Proxima nova boldTamanho: 1.125emCor: #333333Fonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333

Barra com links para Mapa do Site, Ouvidoria e Transparência: 1170x50pxBackground: #0072BC 90%Botão borda: 1px solid #FFFFFF 20%Fonte: Proxima nova boldTamanho: 0.857emCor: #FFFFFFHover: #333333Background hover: #FFFFFFÍcones: 20x20px

Notícia em colunaFonte título assunto: Proxima nova rgTamanho: 0.875emCor: #00AEEFFonte título notícia: Proxima nova rgTamanho: 0.875emCor: #333333

Botão Mais Notícias: 116x34pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #00AEEF

10

3.2. Secretarias

Barra com a marca do Governo do Estado do Paraná, logomarca da Celepar, título da secretaria, endereço, contato, horários de atendimento e localização por mapa alinhados à esquerda.Largura: 1170pxFonte: Proxima nova bold e rgTamanho: 1.2em e 0.875emCor: #FFFFFFBackground: #0072BCÍcones de redes sociais alinhados à direita: 38x38px

Destaques rotativos: altura 250pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFDestaques estáticos: altura 390pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto:570x390px

Fonte títulos: Proxima nova boldTamanho: 1.714emCor: #00AEEFFonte data: Proxima nova boldTamanho: 3.214emCor: #FFFFFFFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #005388

Fonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #0072BC

Botão Saiba Mais: 119x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: #00AEEF

Botão Ver Agenda: 169x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: #00AEEF

Página Inicial


100%1170

120

35

45

75

Notícia Destaque

Notícia em Linha Notícia em Coluna

Agenda Executiva

Agenda

50

250

390

Destaques

Página InternaLargura de 1170pxBorda esquerda: 6px #00AEEFFonte título assunto: Proxima nova boldTamanho: .378emCor: #00AEEFFonte título: Proxima nova boldTamanho: 1.924emCor: #666666Fonte texto: Proxima nova rgTamanho: 1.143emCor: #666666Link: #00AEEF Link hover: #0072BC

11M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á

50

120

35

45

75

3.2. Secretarias

Página Interna

100%1170


3.3. Agência de Notícias O site da Agência de Notícias contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

TopoA barra superior contém os links de Acessibilidade, Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7

CorpoA página inicial apresenta duas colunas que distribuem notícias, vídeos, áudios ou outras informaçõesLargura: 1170px

Coluna EsquerdaPrioriza a utilização de notícias. Outros diferenciais somente quando necessárioLargura: 750px

Notícia manchete ou banner: 750x500Fonte: Proxima nova rgTamanho título assunto: 1.000emTamanho título notícia: 2.500emCor: #FFFFFFBorda esquerda: 6px #00AEEF

100%1170

120

35

45

Aviso de Pauta

750 360

500

581

513

12

1º Bloco Notícias

Áudios

2º Bloco Notícias

Rodapé

Notícias por Região

Fotos e Vídeos

Notícia Manchete

Notícia Destaque

Notícias

Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: #30575CBackground hover: #44AD4BÍcones: Font awesome

Barra com a marca do Governo do Estado do Paraná, título da instituição, campo de busca e links para redes sociais: 1170x120pxMarca do Governo: 140x60pxFonte título: Proxima nova boldTamanho: 1.714emCor: #3F8033Busca: 310x40pxÍcones redes sociais: 38x38px



Coluna DireitaPrioriza a utilização de vídeos, áudios, notícias e outros diferenciais, quando necessárioLargura: 360px


1º Bloco notícias: largura 750px e ordenado em 3 colunasFotos: 241x160pxFonte título assunto: Proxima nova boldTamanho: 1.250emCor: #FFFFFFBackground: #00aeefFonte título notícia: Proxima nova boldTamanho: 1.000emCor: #324345Fonte texto notícia: Proxima nova rgTamanho: 0.750emCor: #324345Fonte data: Proxima nova rgTamanho: 0.688emCor: #FFFFFF

Notícia destaque: largura 750Fotos: 295x196pxFonte título assunto: Proxima nova rgTamanho: 0.833emCor: #00aeefFonte título notícia: Proxima nova boldTamanho: 1.250emCor: #324345

Notícias em listaFonte título assunto: Proxima nova rgTamanho: 0.813emCor: #00aeefFonte título notícia: Proxima nova boldTamanho: 0.750emCor: #324345Fonte data: Proxima nova rgTamanho: 0.688emCor: #999999Fonte Mais Notícias: Proxima nova rgTamanho: 0.688emCor: #00aeefLink hover: #324345Fonte links editorias: Proxima nova boldTamanho: 1.000emCor: #545454Link hover: #44ad4bFonte link Todas as Editorias: Proxima nova boldTamanho: 0.750emCor: #44ad4bBackground: #ebeddf

Fonte texto notícia: Proxima nova rgTamanho: 1.000emCor: #324345Ícones: Font awesomeTamanho: 21x20pxCor: #00aeef

Fonte título notícia: Proxima nova boldTamanho: 1.250emCor: #324345Fonte título assunto: Proxima nova rgTamanho: 0.813emCor: #FFFFFFBackground: #00aeef

Ícones: Font awesomeTamanho: 21x20pxCor: #00aeef

3.3. Agência de Notícias

Fonte título Rádio: Proxima nova boldTamanho: 2.000emCor: #00aeefFonte áudios: Proxima nova boldTamanho: 1.250em e 0.813emCor: #324345Borda esquerda: 6px #00aeef

Fonte título Aviso de Pauta: Proxima nova boldTamanho: 1.125emCor: #00aeefFonte título pauta: Proxima nova boldTamanho: 0.750emCor: #324345Borda esquerda: 6px #00aeef

100%1170

120

35

45

Aviso de Pauta

750 360

500

581

513

1º Bloco Notícias

Áudios

2º Bloco Notícias

Rodapé


Fotos e Vídeos

Notícia Manchete

Notícia Destaque

Notícias

Barra com fotos e vídeos: 1170x581px

Barra com notícias por região: 1170x513px

Barra com 2º bloco de notícias: largura 750px e ordenado em quatro colunas

RodapéLargura: px1170


3.3. Agência de NotíciasFonte título Assista: Proxima nova boldTamanho: 2.000emCor: #00aeefVídeo destaque: 652x367pxVídeos sequenciais: 76x57pxLink texto: Proxima nova rgTamanho: 0.688emCor: #a8a8a8Borda esquerda: 6px #00aeefBackground: #324345

Fonte título Curitiba: OswaldTamanho: 5.000emFonte título Na sua Região: Proxima nova boldTamanho: 1.375emFonte título e Região Metropolitana: Proxima nova rgTamanho: 1.000emCor: #FFFFFF

Fonte título assunto: Proxima nova boldTamanho: 0.625emCor: #FFFFFFBackground: #00aeefFonte título notícia: Proxima nova boldTamanho: 0.938emCor: #324345Hover: #00aeef

Fonte título Fotos do Dia: Proxima nova boldTamanho: 2.000emCor: #00aeefFotos: 133x75pxLink texto: Proxima nova rgTamanho: 0.750emCor: #a8a8a8Background: #324345

Fonte link Alterar: Proxima nova rgTamanho: 0.813emCor: #FFFF00Background: imagem

Fonte data: Proxima nova rgTamanho: 0.688emCor: #999999Fotos: largura 280pxBorda esquerda: 6px #00aeefFonte link Arquivo de notícias: Proxima nova rgTamanho: 0.875emCor: #068833Hover: #324345

À esquerda, título Agência de Notícias Fonte: Proxima nova boldTamanho: 1.750emCor: #FFFFFFFonte links: Proxima nova rgTamanho: 0.750em Cor: #FFFFFFÍcones de redes sociais: 38x38pxÀ direita, a marca do Governo do Estado do Paraná e logomarca da CeleparÀ esquerda, endereço, contato e localização por mapaFonte: Proxima nova rgTamanho: 0.688emCor: #FFFFFFHover: #00aeefText-decoration-line: #44ad4b

Barra com links para editorias, notícias por região, áudios e newsletterFonte títulos: Proxima nova boldTamanho: 1.000emCor: #FFFFFFÍcones: 20x20px #00aeefFonte links editorias, regiões e rádio: Proxima nova rgTamanho: 0.750em e 0.688emCor: #FFFFFF rgba(255,255,255,0.5)Hover: #FFFFFFBackground: #324345

100%1170

120

35

45

Aviso de Pauta

750 360

500

581

513

1º Bloco Notícias

Áudios

2º Bloco Notícias

Rodapé


Fotos e Vídeos

Notícia Manchete

Notícia Destaque

Notícias


3.3. Agência de Notícias100%1170

Página InternaA página interna permite duas colunas distribuindo links e a área de exposição do conteúdoLargura: 1170pxFonte título: Proxima nova boldTamanho: 2.250emCor: #324345Borda esquerda: 6px #00aeef

Coluna EsquerdaFonte texto esquerda: Proxima nova boldTamanho: 1.063emCor: #00aeefFonte link Compartilhar: Proxima nova rgTamanho: 0.813emCor: #FFFFFFBackground: #3367a1Ícones de redes sociais: 38x38pxFonte link Confira áudio: Proxima nova rgTamanho: 0.875emCor: #44ad4bBackground: #FFFFFFCor hover: #FFFFFFBackground hover: #44ad4bFonte texto: Proxima nova rgTamanho: 0.875em e 0.813emCor: #324345 e #8c8c8cFonte link Mais notícias: Proxima nova rgTamanho: 0.875emCor: #324345Borda esquerda: 6px #ebeddfBackground hover: #ebeddf

Coluna DireitaFonte título: Proxima nova boldTamanho: 2.250emCor: #324345Borda esquerda: 6px #00aeef

Fonte texto: Proxima nova rgTamanho: 1.063emCor: #324345Link: #068833Link hover: #00aeefouLink: #337ab7Link hover: #324345



3.4. Estrutura Governamental Esta categoria atende aos sites das Vinculadas, Departamentos, Autarquias, Sociedades de Economia Mista, Empresas Públicas, Descentralizadas, Programas de Governo e Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil). Apresenta elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:


Barra para serviços do Governo Digital: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emCor: #FFFFFFBackground: alterado conforme cores características da instituição

CorpoA página inicial apresenta barras com conteúdos como notícias, banners, vídeos, áudios, calendário ou outras informações, que podem ser distribuídos em até quatro colunasLargura: 1170px

250

390

Localização

Rodapé

Redes Sociais

Vídeos

Destaques

Notícias

Agenda

120

35

45

350

75

100%1170

Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: alterado conforme cores características da instituiçãoBackground hover: alterado conforme cores características da instituição

Barra com a logomarca da instituição, campo de busca e links para redes sociais: 1170x120pxNo caso de subsites, é possível incluir mais de uma logomarcaFonte título: Proxima nova boldTamanho: 1.714emCor: #333333Busca: 373x40pxÍcones redes sociais: 38x38px

Botão Encontre Aqui: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%

Botão Meu Governo: 160x40pxFonte: Proxima nova boldTamanho: 0.875emCor: alterada conforme as cores características da instituiçãoBackground: #FFFFFF

16



3.4. Estrutura Governamental Barra de Notícias - pode ser dividida em até quatro colunas e incluir editais ou outros avisos: largura 1170px

Barra de Destaques: 1170px

Barra de Agenda: 1170px

Barra de Vídeos: 1170px

17

Fonte título assunto: Proxima nova boldTamanho: 1.714emCor: #333333Fonte títulos: Proxima nova boldTamanho: 1.285emCor: #FFFFFFBorda esquerda: 6px - cor alterada conforme cores características da instituição

Fonte título assunto: Proxima nova boldTamanho: 1.285emCor: #333333Fonte texto: Proxima nova rgTamanho: 0.875emCor: #333333Borda esquerda: 6px - cor alterada conforme cores características da instituição

Botão Mais Notícias: 116x34pxFonte: Proxima nova boldTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição

Destaques rotativos: altura 250pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFDestaques estáticos: altura 390pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto:570x390pxFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFF

Fonte títulos: Proxima nova boldTamanho: 1.714emCor: alterado conforme cores características da instituiçãoFonte data: Proxima nova boldTamanho: 3.214emCor: #FFFFFFFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: alterado conforme cores características da instituição

Botão Saiba Mais: 119x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição

Botão Ver Agenda: 169x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição

Fonte título Assista: Proxima nova boldTamanho: 2.000emCor: alterada conforme cores características da instituiçãoVídeo destaque: 746x418pxVídeos sequenciais: 75x57pxLink texto: Proxima nova rgTamanho: 0.750emCor: #333333Borda esquerda: 6px - cor alterada conforme cores características da instituição

250

390

Localização

Rodapé

Redes Sociais

Vídeos

Destaques

Notícias

Agenda

120

35

45

350

75

100%1170


3.4. Estrutura Governamental Barra de Localização: largura 1170pxFonte título Localize: Proxima nova boldTamanho: 2.5emCor: #333333Background: 1903x 70px #000000Fonte texto: Proxima nova rgTamanho: 0.875emCor: #555555 e #FFFFFFMapa: 1903x483px

Barra de Redes Sociais - pode ser dividida em até quatro colunas: 1170pxFonte título assunto: Proxima nova boldTamanho: 1.714emCor: #333333Fonte título mídia: Proxima nova boldTamanho: 1.714emCor: #FFFFFFÍcones: Font awesomeTamanho: 16x46pxBackground: #474747Fonte texto: Proxima nova rgTamanho: 1.285emCor: #333333Link hover: #00aeef

Rodapé

18

Barra com links para Mapa do Site, Ouvidoria e Transparência: 1170x50pxBackground: alterado conforme cores características da instituiçãoBotão borda: 1px solid #FFFFFF 20%Fonte: Proxima nova boldTamanho: 0.857emCor: #FFFFFFHover: #333333Background hover: #FFFFFFÍcones: 20x20px

Barra com a marca do Governo do Estado do Paraná, se necessário título da secretaria, logomarca da Celepar, endereço, contato, horários de atendimento e localização por mapa alinhados à esquerdaLargura: 1170pxFonte: Proxima nova boldTamanho: 1.2em e 0.875emCor: #FFFFFFBackground: alterado conforme cores características da instituiçãoÍcones de redes sociais alinhados à direita: 38x38px

250

390

Localização

Rodapé

Redes Sociais

Vídeos

Destaques

Notícias

Agenda

120

35

45

350

75

100%1170

3.4. Estrutura Governamental Página InternaA página interna permite excluir a coluna direita, aumentando a área de exposição do conteúdoLargura: 1170pxFonte título: Proxima nova boldTamanho: 1.924emCor: #666666Borda esquerda: 6px - cor alterada conforme cores características da instituiçãoFonte subtítulo: Proxima nova rgTamanho: 1.714emCor: #333333Fonte texto: Proxima nova rgTamanho: 1.143emCor: #333333Link: #337ab7Link hover: #23527c


1170100%

3.4. Estrutura Governamental Exemplos


m a n u a l d e i d e n t i d a d e v i s u a l d o s …...1. introdução m a n u a l d e i d e n...

Documents