Guia de Estilo Identidade Padrao Comunicacao Digital-IDG

Guia de Estilo do Portal
Institucional Padro
Identidade Padro de Comunicao Digital do Poder Executivo Federal
verso 5.0 | 12/2014

Edio
verso data alterao
1.0 Novembro de 2013 Criao do manual
2.0 Janeiro de 2014 Check in e check out, Agenda, Banner Rotativo

Destaques
3.0 Fevereiro de 2014 Atualizao do item de Agenda. Correes: Cores

Correo dos HEXAS. Novo Mdulos: Viso de
lbuns e exibio de lbuns
4.0 Maio de 2014 Reformulao do manual
4.1 Setembro de 2014 Atualizao do item Planos e Programas
4.2 Outubro de 2014 Atualizao do item Pgina de Destaque
5.0 Dezembro de 2014 Atualizao de nomenclatura

Novo item: Portlets e cores da editorias.
Sumrio
1 Apresentao 06 4 Elementos da Estrutura Principal 32
Elementos da Estrutura Principal 33
2 Pilares de comunicao 08 Barra Padro da Identidade Padro

de Comunicao Digital do Governo Federal 34
Foco no pblico 09
Experincia digital comum 10 Cabealho 36
Coluna de menus
Acessibilidade 11 43
Economicidade 12 Miolo 49
Rodap 50
3 Diretrizes de linguagem 13 Barra Inferior da Identidade Padro

de Comunicao Digital do Governo Federal 55
Legenda 14
Grid 15
Blocos 19 5 Temas 57
Verde 58
Tipografia 21
Amarelo 59
Cores 27
Azul 60
cones 31
Branco 61
Sumrio
6 Planos e programas 62 Links externos 125
Planos e programas 63 Enquete 128
Redes sociais 131
7 Pgina de destaque 69 Agenda 133

Apresentao 70 Dados e resultados 140
8 Mdulos 85 9 Portlets 143

Mdulos 86 Apresentao 144
Banner rotativo 87 Portal padro coleo 145
Banner rotativo texto sobreposto 91 Portal padro carrossel de imagens 150
Lista - ltimos contedos 95 Portal padro galeria de vdeos 153
Galeria de vdeos 100 Portal padro galeria de udios 156
Galeria de lbuns 105 Portal padro de udio 159
Galeria de imagens 110 Portal padro de vdeo 162
Player de udio 115
Galeria de udio 120
Sumrio
10 Agenda 165
Templates 164
13 Acessibilidade e responsividade 225
Alto contraste 226
Capa 167
Texto corrido
Listagem 178
175
14 Desenvolvimento 232
Folha de estilo 233
Listagem em colunas 180 Manuais da Identidade Padro de
Comunicao Digital do Poder Executivo Federal 236
Listagem de lbuns 182
Listagem em contedos 184
Fotos 187
Manchete 189
Bloco temtico de chamadas 203
11 Formatos 209
Banners 208
12 Busca Multifacetada
Funcionalidades avanadas 216
218
1. Apresentao
Apresentao
Este Guia de Estilo foi desenvolvido com o objetivo de apresentar as funes, caractersticas e relaes estruturais entre os diversos elementos do projeto grfico, possibilitando a compreenso
do conjunto e ao mesmo tempo oferecendo as informaes necessrias para sua correta replicao.
O Guia de Estilo um complemento do Manual de Diretrizes. O documento, disponvel para consulta no Site da Secretaria de Comunicao Social da Presidncia da Repblica, deve ser
consultado em primeiro lugar, j que traz os conceitos da Identidade Padro de Comunicao Digital, alm de apresentar as funes, vantagens e caractersticas do Portal Institucional Padro.
Os mdulos e demais peas grficas listados e explicados neste manual so exemplos ideais de aplicao nos portais de rgos do Poder Executivo Federal. Independentemente do sistema
de gesto de contedo (CMS) escolhido, cada rgo deve perseguir este ideal para a correta padronizao de estilo.
Guia de Estilo do Portal Institucional Padro 07

2. Pilares de Comunicao
Razes para padronizao: foco no pblico, experincia digital comum, acessibilidade e economicidade.
Pilares de comunicao Foco no pblico
Foco no pblico
Os contedos das propriedades digitais so disponibilizados com foco no pblico principal. Aliado a uma
linguagem multimdia de fcil entendimento, os sites e portais tornam-se acessveis a todos. O objetivo aqui
que o interessado consiga, de fato, ter conhecimento e compreenso do assunto procurado.

Pilares de comunicao Experincia digital comum
Experincia digital comum
A fim de facilitar a identificao do pblico com as propriedades digitais ligadas ao governo federal, a
Identidade Padro de Comunicao Digital do Governo Federal foi desenvolvida equilibrando os padres
estabelecidos e as peculiaridades de cada rgo. Sempre com o foco no pblico, a padronizao foi intencional
para que o cidado no tenha dificuldade em conseguir informaes ao acessar as propriedades digitais
do governo. Alm da facilidade de acesso, acredita-se que a adoo das diretrizes da Identidade Padro de
Comunicao Digital pelos rgos do Poder Executivo Federal gere mais credibilidade e posicionamento ao
prprio governo ao criar uma identificao das propriedades digitais governamentais disponveis populao.
O Portal Institucional Padro segue esta diretriz, conforme poder ser visto nos prximos captulos deste Guia
de Estilo.

Pilares de comunicao Acessibilidade e Responsividade
Acessibilidade e Responsividade
Segundo o Decreto n 5.296, de 2004, que torna obrigatria a implementao dos critrios de acessibilidade,
a Identidade Padro de Comunicao Digital do Governo Federal busca garantir o acesso a todos,
independentemente da forma ou dispositivo de conexo, assegurando a acessibilidade digital e o acesso
ubquo.
Tendo em vista o crescimento no acesso internet por meio de dispositivos mveis, a construo do Portal
Padro ocorreu de maneira responsiva. Isto , o Portal j concebido de maneira flexvel para se adaptar
aos diferentes tamanhos de tela, atendendo a uma ampla variedade de dispositivos, mantendo a gesto do
contedo organizada e eficaz. Dessa maneira, o acesso garantido em vrias plataformas.

Pilares de comunicao Economicidade
Economicidade
A Identidade Padro de Comunicao Digital do Governo Federal busca identificar iniciativas desenvolvidas
por um rgo e que possam ser aplicadas em outros rgos do Poder Executivo Federal. So premissas da
Identidade Padro de Comunicao Digital o uso ampliado, o desenvolvimento colaborativo e a replicao de
solues.
Um exemplo de aplicao dessas premissas o Portal Padro, criado com uma estrutura reutilizvel, ou seja,
que pode ser aplicada em diferentes rgos. Dessa forma no preciso investir em uma nova arquitetura e
criao, podendo reaproveitar as ferramentas j organizadas e pr-formatadas.
O Portal Padro constitudo de mdulos prontos para serem desenvolvidos, possibilitando reduo de custo
material e humano.

3. Diretrizes de Linguagem
Detalhes sobre o uso correto de cores, tipografias e recomendaes gerais de boas prticas de design.
recomendada a utilizao das guias a seguir para personalizar o Portal Padro, de modo a garantir que todo o contedo governamental publicado na internet seja
ntegro e confivel.
As diretrizes esto adequadas ao e-MAG e ao projeto Tangram desenvolvido pela Diretoria de Tecnologia da Presidncia da Repblica - Ditec.
Diretrizes de Linguagem Legenda
Legenda
Elementos indicativos para especificao de Indica que o alinhamento do Indica que o alinhamento do
leiautes, elementos master e grids, no que tange: texto dentro do elemento texto dentro do elemento no
espaamentos no qual ele est inserido qual ele est inserido direita
alinhamentos esquerda (e ao centro, se o (e ao centro, se o espaamento
formatos espaamento vertical no for vertical no for especificado).
caractersticas especificado).
Indica que o alinhamento do Indica que o alinhamento do

1 2 texto dentro do elemento texto dentro do elemento no
Indica quando um elemento tem
no qual ele est inserido qual ele est inserido direita
suas caractersticas descritas ao
esquerda (e embaixo porm (e em cima porm respeitando
3 4 lado da imagem.
respeitando as margens as margens sempre que
especificadas). especificadas).
Indica o espaamento vertical Indica que o alinhamento do Indica que o alinhamento do

30 px entre dois elementos (seja um texto dentro do elemento texto dentro do elemento no
objeto, uma cor de fundo ou o no qual ele est inserido qual ele est inserido direita
limite do leiaute). esquerda (e em cima, porm (e embaixo porm respeitando
Indica o espaamento horizontal especificadas). especificadas).
entre dois elementos (seja um
objeto, uma cor de fundo ou o
30 px limite do leiaute).

Diretrizes de Linguagem Grid
Grid
Cabealho e rodap parte, o grid formado por
dois grupos principais de colunas: CABEALHO (HEADER)
1 o grupo da esquerda, que conter sempre o

Coluna de Menus, tem 150 pixels.
2 o grupo da direita, que receber o contedo

principal de cada pgina, tem 750 pixels.
O espaamento entre esses dois grupos ser sempre MENU

REA DE CONTEDO
LATERAL
de 60 pixels.
Dentro do segundo grupo, o grid dividido em 3
colunas, que podem ser organizadas da seguinte
forma:
Bloco de contedo com largura de 750 pixels;

Bloco de contedo dividido em duas partes,
sendo uma delas com 230 e outra com 490 pixels
de largura
Bloco de contedo dividido em duas partes,
sendo uma delas com 490 e outra com 230 pixels RODAP (FOOTER)
de largura;
Bloco de contedo divivido em trs partes,
todas com 230 pixels de largura;
Bloco de contedo dividido em seis partes,
todas com 100 pixels de largura.
O espaamento entre elas sempre ser de 30 pixels.

Grid telas de 1024 px de largura

Grid da rea central (menu e contedo), aplicado
ao leiaute em uma rea de 1024 px (padro de
largura da janela de navegadores).
1 rea de largura varivel de acordo com

tamanho da janela do navegador.
1 1
1024 px

Grid telas menores que 1024 px de largura

Neste caso, o Coluna de Menus suprimido e vira
um boto abaixo do cabealho.

tamanho da janela do navegador.
1 1
768 px

Grid telas menores que 768 px de largura

Grid do leiaute em uma rea de 320 px
(otimizado para telas de smartphones).
Neste caso, o Coluna de Menus suprimido e
vira um boto abaixo do cabealho. Os mdulos
que compunham uma mesma linha, ocupando
originalmente as 3 colunas, passam todos para
apenas uma coluna.

tamanho da janela do navegador. 1 1
320 px

Diretrizes de Linguagem Blocos
Blocos construo de blocos e caixas

Blocos so unidades estruturais que delimitam e Preferencialmente, devem ser utilizadas caixas
organizam mdulos. com raio de 4px.
Linhas-guia so utilizadas para orientar a construo

de blocos de informao e caixas de sustentao,
padronizando tambm as bordas e cantos das
caixas e o uso de cones. Os elementos j esto pr-
definidos no Portal Padro e seguem as regras a 4px
seguir.
Desta forma, caixas da cor cinza com bordas de 1 px,

tero cantos arredondados. Em imagens, os cantos
arredondados devero possuir 4 px. Podem ser utilizadas, em algumas situaes, caixas
sem cantos arredondados. o caso dos contedos
textuais de cada pgina principal e dos chapus
das editorias presentes nos sites.
No captulo Mdulos h o detalhamento

dos blocos e caixas para cada mdulo.

Diretrizes de Linguagem Blocos
Blocos estilo e acabamento

CERTO ERRADO
As caixas podem ter bordas de 1 px de As abas inativas devem ficar

espessura em linha contnua, sempre oticamente sob a caixa principal.
acompanhando toda sua extremidade. No entanto, no devem se esconder
atrs do contedo.

Diretrizes de Linguagem Tipografia
Tipografia
Para a apresentao de todo o contedo dos
novos sites do Governo Federal, somente duas
fontes so utilizadas.
So elas:
Open Sans (Google Fonts)
Arial
Open Sans & Arial

A deciso pela escolha das duas fontes foi tomada
a fim de trazer harmonia, padronizao, conforto
na leitura e acessibilidade.
Cada uma delas possui caractersticas prprias

e ocasies de uso muito claras que sero
apresentadas nas pginas a seguir.
A unidade de medida pt uma referncia

para a
Para o elaborao
designer (arte) elaborar
do CSS, o leiaute.
o desenvolvedor
Para a elaborao
poder do CSS,
usar em, % o desenvolvedor
ou px, como
poder usar
indicado peloem,
W3C% ou px, como
(www.w3c.com.br).
indicado pelo W3C (www.w3c.com.br).

Tipografia
open sans REGULAR regular
AaBbCcDdEeFfGgHh
Open Sans Bold
Link para download da fonte Open Sans.
1234567890
Bold
AaBbCcDdEeFfGgHh
1234567890
Font stack: Open Sans, Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Open Sans, .....}

Tipografia
Arial regular regular
AaBbCcDdEeFfGgHh
Arial bold
1234567890
Bold
AaBbCcDdEeFfGgHh
1234567890
Font stack: Arial, Helvetica, sans-serif. Exemplo: Body {font-family: Arial, .....}

Tipografia comparativo entre famlias tipogrficas

Enquanto a Open Sans tem um desenho mais suave, Open sans arial
mais aberto e com hastes que afinam nas junes,
a Arial tem um desenho mais pesado, com menor
desproporo entre hastes verticais e horizontais e
com letras mais fechadas (Ex. letra a e letra c).

Tipografia usos especficos

Em geral, a fonte Open Sans utilizada em ttulos de
pginas, ttulos de mdulos e links de navegao - itens
de menu, links do cabealho (header), rodap (footer),
mdulos, etc. - e textos secundrios. A fonte Arial
utilizada em chamadas, linhas finas e textos corridos.
A exceo o chapu, que apesar de ser uma informao

referente diretamente notcia, usa Open Sans por dois
motivos:
aplicada em um tamanho menor e em caixa alta,

a Open Sans contrasta (em peso e tamanho) com os
outros componentes da notcia (chamada/linha fina),
tornando o conjunto mais equilibrado.
no chapu, utilizada a cor da editoria. Por isso, tem

uma ligao visual direta com o ttulo da editoria
presente no mdulo. Para reforar esse vnculo, esses
dois elementos utilizam tambm a mesma fonte.

Tipografia tamanhos de fonte e entrelinhas

As especificaes de fonte sero detalhadas em cada
mdulo e nos templates ao longo deste manual.
Para textos corridos, normalmente utilizados em notcias,
releases, relatrios, entre outros, deve ser seguido o
seguinte padro:
1 Texto corrido
Arial Regular, 15 px
Entrelinhas: 21 px
cor: #172938
Links no texto
Entrelinhas: 21 px
cor: #2c67cd
Links no texto (hover)

Entrelinhas: 21 px
cor: #172938
Para a elaborao do CSS, o desenvolvedor

poder usar em, % ou px, como

Diretrizes de Linguagem Cores
Cores
Para apresentar a imagem do Governo Federal a partir
de uma identidade nica e fornecer maior articulao aos
rgos, foi desenvolvida uma paleta de cores derivadas
de signos nacionais, tais como a Bandeira Nacional, os
brases, insgnias, entre outros. A seguir sero dispostos
os discos cromticos (paletas de cores) com suas
derivaes, complementos e recomendaes.
A cor exerce um papel fundamental ao exprimir
a atmosfera do Governo Federal. Ela contm,
subjetivamente, um cdigo cultural que ressalta
a importncia dos signos brasileiros. A paleta foi
desenvolvida sob os parmetros de acessibilidade
expostos no e-MAG. As variaes e combinaes
propostas podem ser intercaladas e usadas de diferentes
formas, desde que estejam sempre de acordo com as
instrues de acessibilidade do manual.
A percepo de cor depende no apenas da pigmentao
das superfcies em si, mas tambm da intensidade
e do tipo de tom aplicados a ela. Esses fatores so
determinantes no uso de degrads e contrastes. Dessa
forma, sugere-se aplicar sempre o maior contraste
possvel sem que se perca a riqueza cromtica da paleta.
As cores presentes no disco cromtico ao

lado so as cores principais, portanto, so
as cores temas. Dessa forma, nenhum
portal poder ser desenvolvido usando
outra cor como tema.

Cores disco cromtico

possvel combinar as quatro cores entre si. No
entanto, sugere-se que no sejam usadas sempre
juntas, possibilitando assim uma maior aderncia
e discernimento dentro do Portal Padro. Para
facilitar a escolha, foi selecionado um conjunto
de duas cores complementares para cada matiz. Verde 60% 60% Branco
Elas podem ser seguidas nessa orientao ou Amarelo 30% 30% Verde
invertidas quando necessrio.
Azul 10% 10% Amarelo
Amarelo 60% 60% Azul

Azul 30% 30% Branco
Branco 10% 10% Verde
O modelo de leiaute com as cores de todos os

temas se encontra no Manual de Diretrizes.

Cores valores
Cores em RGB e hexadecimal. CORES PRIMRIAS
Em cabealhos e elementos de destaque, a cor

HEX: #195128 HEX: #F7C514 HEX: #3E67B1 HEX: #ECEDF1
primria branca substituda pela cor cinza com o
RGB: 25 81 40 RGB: 247 197 20 RGB: 62 103 177 RGB: 231 237 241
intuito de no ser confundida em fundos brancos,
que estaro desta cor na maior parte da extenso
dos sites baseados no Portal Padro.
As cores secundrias so variaes cromticas

dentro dos tons da paleta principal e so utilizveis
em conjunto com as mesmas em chapus, CORES SECUNDRIAS
cabealhos (headers) de matrias e textos
destacados. HEX: #F18F20 HEX: #18A54B HEX: #FFFFFF HEX: #21376C
RGB: 241 143 32 RGB: 24 165 75 RGB: 255 255 255 RGB: 33 55 108
HEX: #FDF499 HEX: #454546 HEX: #204C90 HEX: #A41E22

RGB: 253 244 153 RGB: 69 69 70 RGB: 32 76 144 RGB: 164 30 34

Cores degrads
Exemplos de aplicao.
Certo Degrads com efeito moderado de luminosidade e volume
HEX: #17882C HEX: #F0F2F1 HEX: #FCDD4E HEX: #2160BD

RGB: 23 136 44 RGB: 240 242 241 RGB: 252 221 78 RGB: 33 96 189
HEX: #00510F HEX: #ECEDF1 HEX: #F9C404 HEX: #3A72BC

RGB: 0 81 15 RGB: 236 237 241 RGB: 249 196 4 RGB: 58 114 188
Errado Cores diferentes da paleta, com efeitos fortes de transio de cores
Degrads devem obrigatoriamente ser aplicados

partindo da base inferior ao topo e do tom mais
escuro ao mais claro, somente nos cabealhos
(headers) de cada site.

Diretrizes de Linguagem cones
cones
cones de contedo cones de funcionalidade
Os pictogramas auxiliam no entendimento do (utilizados para direcionar a outras mdias) (utilizados para acessar servios e aplicaes)
contedo e podem ser utilizados em conjunto com
sua legenda ou sozinhos. Foi criado um repositrio
de cones que pode ser reutilizado conforme a
necessidade. Para casos nos quais no existam
cones pr-estabelecidos, os mesmos podem ser
criados baseando-se na utilizao de no mximo duas
cores (quando cercado de quadrado colorido), na
simplicidade e na manuteno de reas de respiro,
como presentes nos cones a seguir.
Os cones tambm devem ser objetivos e fceis
de entender ao primeiro olhar contendo o mnimo
possvel de linhas e ornamentos, como mostrado nos
exemplos a seguir.
Devem ser observados os seguintes aspectos para a Verses reduzidas
criao de novos cones dentro da identidade padro:
utilizao do grid de montagem, enquadramento
perfeito no pixel, facilidade de cognio, objetividade
e literalidade.
cones dentro do quadrado so botes

e geralmente acompanham um texto
clicvel (call-to-action). Os cones soltos
so apenas indicativos.
Para conhecer todos os cones do

repositrio e informaes detalhadas
sobre sua aplicao, acesse aqui.

4. Elementos da Estrutura Principal
Neste captulo sero apresentados os componentes visuais que, juntos, formam os principais leiautes Portal Padro: desde elementos avulsos at mdulos.
Elementos da Estrutura Principal
Elementos da Estrutura Principal

Os elementos principais de qualquer site 1
baseado no Portal Padro so os seguintes: 2
1 Barra Padro da Identidade Padro de

Comunicao Digital do Governo Federal
2 Cabealho (header)
3
3 Coluna de Menus
4 Miolo
5 Rodap (footer)
4
6 Barra Inferior da Identidade Padro de

Comunicao Digital do Governo Federal
Eles devem estar presentes em todos os sites e

em todas as pginas modelo (templates) desse
mesmo Portal Padro.

Elementos que compem a Identidade Padro de Comunicao Digital do Governo Federal Barra de Identidade Visual do Governo Federal na Internet
Barra de Identidade Visual do Governo Federal na Internet
1 2 3 4 5 6
A Barra parte constituinte da Identidade Padro de Comunicao Digital do Governo Para oferecer manuteno eficiente, a barra est hospedada no Servio Federal de
Federal, tendo como funes identificar, padronizar e integrar sites e portais que devem Processamento de Dados (Serpro). As instrues para o uso da Barra de Identidade
seguir essas diretrizes. podem ser acessadas no site do Governo Eletrnico.
1 Portal Brasil: acesso ao Portal Brasil, responsvel por divulgar servios e informaes,
A barra tambm tem a funo de proporcionar acesso direto ao Portal Brasil, s
com linguagem acessvel ao cidado, de temas dos ministrios e rgos.
informaes pblicas de acordo com a Lei de acesso informao, aos canais de
participao social, ao portal de servios prestados pelos diversos rgos, pgina com toda Acesso Informao: link para a pgina do Portal Brasil, que rene atalhos para
2
a legislao brasileira e link para os canais de comunicao do Governo Federal. a Lei de Acesso Informao, Portal da Transparncia, Dados Abertos e o Portal Brasileiro
de Dados Geoespaciais.
A Barra de Identidade Visual tem como caracterstica a manuteno eficiente, permitindo
3 Participe: Link para a pgina do Portal Brasil que rene atalhos para os canais de
intervenes nicas para replicao em todos os rgos governamentais. Tambm
Participao Social.
permite mensurao estatstica por meio de rastreamento dos hbitos de navegao dos
usurios em todos os rgos governamentais com uma nica fonte. 4 Servios: link para Guia de Servios.
5 Legislao: link para o Portal de Legislao do Governo Federal.

Eventualmente, a barra poder ser customizada pela Secom em ocasies especiais, como
a proximidade de grandes eventos e ativaes de campanhas. Canais: Link para pgina do Portal Brasil, que apresenta os principais canais de
6
comunicao do Governo Federal.

Elementos que compem a Identidade Padro de Comunicao Digital do Governo Federal Barra de Identidade Visual do Governo Federal na Internet
Barra de Identidade Visual do Governo Federal na Internet

1 3 10 px
2 28 px
6 px
35 px 12 px
Composio da barra:
1 Acesso informao
Open Sans Semibold, 11 px,
#606060/ R: 96 G: 96 B: 96
2
Fundo da barra
#F1F1F1/ R: 241 G: 241 B: 241
3
Linha da barra
#DFDFDF/ R: 223 G: 223 B: 223

Elementos da Estrutura Principal Cabealho
Cabealho
O cabealho (header) traz as informaes bsicas 4 Subordinao do rgo Para compor a padronizao de estilo (CSS),
de identificao de um site como o nome, a qual Open Sans Regular, 12 px o texto no deve ser escrito em caixa alta,
ministrio est subordinado, alm dos menus de servio,
mas sim em caixa baixa e, ento, indicado
acessibilidade e redes sociais e a ferramenta de busca. 5 Barra de Acessibilidade para ser transformado em caixa alta.
Open Sans Regular, 10 px
Mais detalhes sobre conceituao desta parte da 9 Redes Sociais e RSS
estrutura podem ser acessados no Manual de Diretrizes 6 Campo de Busca Os cones de Redes Sociais e RSS
de Comunicao Digital do Governo Federal. Open Sans Regular, 12 px disponveis para utilizao devem ser
obrigatoriamente retirados do repositrio.
Confira a seguir a composio do cabealho. Nas 7 Barra de Servios Caso algum cone de rede social no seja
prximas pginas, a mesma estrutura apresentada Open Sans Regular, 12 px contemplado no repositrio, ele deve
de acordo com as cores disponveis para cada tema ser criado seguindo as diretrizes deste
(template) do portal: 8 Migalhas de po (breadcrumb) Guia, mas respeitando a identidade da
Open Sans Regular, 10 px, caixa alta plataforma em questo.
1 Atalhos de teclado
* As migalhas de po (breadcrumb) podem
Arial Regular, 10 px 10 Barra de Idiomas
no aparecer em algumas pginas, como,
por exemplo, na pgina inicial. Open Sans Regular, 10 px
2 Denominao do rgo
3 Nome principal
Open Sans Extrabold, 40 px
1 5 10
2
3 6
4 9
7
indicado pelo W3C (www.w3c.com.br). 8

Cabealho verde
Composio do cabealho (header):
1 Atalhos de teclado 10 Barra de Idiomas

#DCFFE3/ R: 220 G: 255 B: 227 #FFFFFF/ R: 255 G: 255 B: 255
2 Denominao do rgo 11 Base cabealho

#FFFFFF/ R: 255 G: 255 B: 255 topo mais claro: #17882C/ R: 23 G: 136 B: 44
base mais escura: #00510F/ R: 0 G: 81 B: 15
3 Nome principal
#FFFFFF/ R: 255 G: 255 B: 255
12 Base barra de servios
#01420a/ R: 1 G: 66 B: 10
4 Subordinao do rgo
#FFFFFF/ R: 255 G: 255 B: 255
5 Barra de Acessibilidade 1 5 10
#DCFFE3/ R: 220 G: 255 B: 227 2
11 6
3
6 Cor do cone lupa
4 9
#015210/ R: 1 G: 82 B: 16
12 7
7 Barra de Servios 8
#FFFFFF/ R: 255 G: 255 B: 255
8 Migalhas de po (breadcrumb)
#2C66CE/ R: 44 G: 102 B: 206
9 Redes Sociais e RSS

#DAEADD/ R: 218 G: 234 B: 221

Cabealho amarelo

#03316F/ R: 3 G: 49 B: 111 #03316D/ R: 3 G: 49 B: 109
2 Denominao do rgo
11 Base cabealho
#03316F/ R: 3 G: 49 B: 111 topo mais claro: #FCDD4E/ R: 252 G: 221 B: 78
base mais escura: ##F9C404/ R: 249 G: 196 B: 4
3 Nome principal
#03316F/ R: 3 G: 49 B: 111
12 Base barra de servios
#e8ab02/ R: 232 G: 171 B: 2
4 Subordinao do rgo
#03316F/ R: 3 G: 49 B: 111
5 Barra de Acessibilidade 5
1 10
#03316F/ R: 3 G: 49 B: 111 2
11 6
3
6 Cor do cone lupa
4 9
#03316F/ R: 3 G: 49 B: 111
12 7
#03316F/ R: 3 G: 49 B: 111
#2C66CE/ R: 44 G: 102 B: 206

#03316F/ R: 3 G: 49 B: 111

Cabealho azul
10 Barra de Idiomas
#DCECFF/ R: 220 G: 236 B: 255 #FFFFFF/ R: 255 G: 255 B: 255

#FFFFFF/ R: 255 G: 255 B: 255 base mais clara: #3A72BC/ R: 58 G: 114 B: 188
topo mais escura: #2160BD/ R: 33 G: 96 B: 189
3 Nome principal
#FFFFFF/ R: 255 G: 255 B: 255 12 Base barra de servios
#0e4097/ R: 14 G: 64 B: 151
4 Subordinao do rgo
#FFFFFF/ R: 255 G: 255 B: 255
5 Barra de Acessibilidade 1 5 10
#DCECFF/ R: 220 G: 236 B: 255 2
11 6
3
6 Cor do cone lupa
4 9
#1F4DA3/ R: 31 G: 77 B: 163
12 7
#FFFFFF/ R: 255 G: 255 B: 255
#2C66CE/ R: 44 G: 102 B: 206

#D7ECFF/ R: 215 G: 236 B: 255

Cabealho branco

#2C66CE/ R: 44 G: 102 B: 206 #2E65C9/ R: 46 G: 100 B: 200

#2C66CE/ R: 44 G: 102 B: 206 topo mais claro: #F0F2F1/ R: 240 G: 242 B: 241
base mais escura: #ECEDF1/ R: 236 G: 237 B: 241
3 Nome principal
#2C66CE/ R: 44 G: 102 B: 206 12 Base barra de servios
#cfd0d2/ R: 207 G: 208 B: 210
4 Subordinao do rgo
#2C66CE/ R: 44 G: 102 B: 206
5 Barra de Acessibilidade 5
1 10
#2C66CE/ R: 44 G: 102 B: 206 2
11 6
3
6 Cor do cone lupa
4 9
#1F4DA3/ R: 31 G: 77 B: 163
12 7
#2C66CE/ R: 44 G: 102 B: 206
#2C66CE/ R: 44 G: 102 B: 206

#3164CF/ R: 49 G: 100 B: 207

Cabealho
Espaamentos, alinhamentos e formatos.
48 px
48 px
1 Campo de busca
221 x 30 px
15 px 15 px
30 px
2 Lupa 30 px
1 2
19 x 19 px
17 px 15 px
3
30 px 17 px
3 Redes Sociais e RSS 4 30 px
30 px
20 x 20 px
10 px 5 px
4 Barra de Servios
A cor da Barra de Servios deve ser uma
variao mais escura da cor principal do
cabealho (header). So essas:
VERDE: #00420C/ R: 0 G: 66 B: 12
BRANCO: #DADCD8/ R: 218 G: 220 B: 216
AMARELO: #F8BA07/ R: 248 G: 186 B: 7
AZUL: #0F4098/ R: 15 G: 64 B: 152

Cabealho
Espaamentos para ttulo de site com duas linhas
de texto principal.
15 px
30 px
50 px

Elementos da Estrutura Principal Coluna de Menus
Coluna de Menus
A Coluna de Menus apresenta ao visitante as diferentes
reas de um site. Mais detalhes sobre conceituao desta
1
parte da estrutura podem ser acessados no Manual de
Diretrizes de Comunicao Digital do Governo Federal.
2
A Coluna de Menus deve sempre ocupar a coluna lateral
esquerda do site, estando presente em todas as pginas
(exceo para a Pgina de Destaque.
Suas cores podem variar entre azul e verde, de acordo com

o template utilizado.
1 Menu de Relevncia
2 Menu Principal
3
3 Menu Acesso Informao
4 Centrais de Contedos
O Menu de relevncia no pode ser

aplicado abaixo dos outros dois menus. Por
ser organizado com itens de acordo com
sua relevncia, esse menu normalmente
usado para links que possam j estar ou no
presentes no menu.

Coluna de Menus
A Coluna de Menus deve sempre ocupar a coluna
lateral esquerda do site, estando presente em
todas as pginas padro (templates). 30 px
1 Linha colorida sobre assunto

150 x 4 px
2 Fundo sob assuntos

45 px
cor #EAEBEE
1
3 Linha colorida acima e abaixo editoria 42 px

2
aberta
150 x 2 px
4 Linha divisria interna 30 px

150 x 1 px cor #D6DCD7
3
5 Fundo sob editoria aberta 5
1 nvel selecionado
cor #EAEBEE
4
2 nvel 2 nvel selecionado
cor #EAEBEE cor #E1E2E5
3 nvel 3 nvel selecionado 30 px
cor #D9DADC cor #D1D2D5
cor #CACBCE cor #C9CACD
5 nvel 45 px
cor #C1C2C4

Coluna de Menus verde

1
todas as pginas padro (templates).
1 Menu de Relevncia 5 Menu secundrio sobre o rgo/site

Open Sans Regular, 14 px 1 nvel - Item normal
#2C66CE/ R: 44 G: 102 B: 20 Open Sans Regular, 14 px
#172938/ R: 23 G: 41 B: 56
2 Menu Principal / Menu Acesso 1 nvel - Item Selecionado
Informao / Centrais de Contedos Open Sans Bold, 14 px
2
Open Sans Bold, 12 pt, CAIXA ALTA #172938/ R: 23 G: 41 B: 56
#00500F/ R: 0 G: 80 B: 15 - Item normal 3
3 Menu Principal / Menu Acesso #172938/ R: 23 G: 41 B: 56
Informao / Centrais de Contedos 2 a 5 nvel - Item Selecionado
Open Sans Regular, 14 px Open Sans Bold, 13 px
4
#172938/ R: 23 G: 41 B: 56 #172938/ R: 23 G: 41 B: 56
5
4 Linha colorida acima e abaixo editoria 6 cones de Centrais de Contedos

aberta #004d0e/ R: 99 G: 148 B: 110 6
#00520f/ R: 0 G: 82 B: 15

Enquanto houver sub nvel, o ttulo deve

ser Open Sans Bold.

Coluna de Menus amarelo

1

#03316F/ R: 3 G: 49 B: 111 Open Sans Regular, 14 px
#172938/ R: 23 G: 41 B: 56
2
Open Sans Bold, 12 px, CAIXA ALTA #172938/ R: 23 G: 41 B: 56
#03316F/ R: 3 G: 49 B: 111 - Item normal 3
4
#172938/ R: 23 G: 41 B: 56 #172938/ R: 23 G: 41 B: 56
5

aberta #03316f/ R: 3 G: 49 B: 111 6
#00520f/ R: 0 G: 82 B: 15


ser Open Sans Bold.

Coluna de Menus azul

1

#172938/ R: 23 G: 41 B: 56
2
#2C66CE/ R: 44 G: 102 B: 206 - Item normal 3
4
#172938/ R: 23 G: 41 B: 56 #172938/ R: 23 G: 41 B: 56
5

aberta #1659bf/ R: 22 G: 89 B: 191 6
#00520f/ R: 0 G: 82 B: 15


ser Open Sans Bold.

Coluna de Menus branco

1

#172938/ R: 23 G: 41 B: 56
2
#2C66CE/ R: 44 G: 102 B: 206 - Item normal 3
4
#172938/ R: 23 G: 41 B: 56 #172938/ R: 23 G: 41 B: 56
5

aberta #1659bf/ R: 22 G: 89 B: 191 6
#00520f/ R: 0 G: 82 B: 15


ser Open Sans Bold.

Elementos da Estrutura Principal Miolo
Miolo
Este elemento da estrutura do site composto
por mdulos de visualizao de contedo, uma
ferramenta que permite destacar no miolo das
capas das pginas principais (homes e subhomes)
textos, udios, imagens, vdeos e publicaes em
redes sociais.
A definio, os formatos, as propriedades e

comportamentos dos diferentes tipos de mdulos
criados para a Identidade Padro de Comunicao
Digital podem ser acessados no captulo Mdulos.

Elementos da Estrutura Principal Rodap
Rodap
O rodap (footer) a quarta parte da estrutura do site na
Identidade Padro de Comunicao Digital e rene atalhos
para diferentes reas do site.
Mais detalhes sobre conceituao desta parte da

estrutura podem ser acessados no Manual de Diretrizes de
Comunicao Digital do Governo Federal. 30 px
1
18 px
Confira a seguir a composio de cores e fontes do rodap.
3
Nas prximas pginas, a mesma estrutura apresentada de
acordo com as cores disponveis para cada tema (template) 46 px
do portal: 2
1 Ttulo da coluna
100 px
2 Itens da coluna
28 px
3 Linha pontilhada vertical
4 Base

Rodap verde
Composio de cores e fontes do rodap (footer):
1 Ttulo da coluna
Open Sans Bold, 18 px
#61B06F / R: 97 G:176 B:111
2 Itens da coluna 1
#ffffff / R: 255 G: 255 B: 255 3

2
#80A887 / R: 128 G: 168 B: 135
4 Base
# 00510f / R: 0 G: 81 B: 15 4


Rodap amarelo
1 Ttulo da coluna
#03316F/ R: 3 G: 49 B: 111
2 Itens da coluna 1
#03316F/ R: 3 G: 49 B: 111 3

2
#03316F/ R: 3 G: 49 B: 111
4 Base
#f8c300/ R: 248 G: 195 B: 0 4


Rodap azul
1 Ttulo da coluna
#ffffff/ R: 255 G: 255 B: 255
2 Itens da coluna 1
#ffffff/ R: 255 G: 255 B: 255 3

2
#8BACDF/ R: 139 G: 172 B: 223
4 Base
#1659BF/ R: 22 G: 89 B: 191 4


Rodap branco
1 Ttulo da coluna
#2C66CE / R: 44 G:102 B:206
2 Itens da coluna 1
#2C66CE / R: 44 G:102 B:206 3

2
#2C66CE / R: 44 G:102 B:206
4 Base
#d5d5d5 / R: 213 G:213 B:213 4


Elementos da Estrutura Principal Barra Inferior da Identidade Padro de Comunicao Digital do Governo Federal
Barra Inferior da Identidade Padro de Comunicao Digital

Este elemento da estrutura principal constitudo
do Selo de acesso informao, com link para seu
endereo eletrnico, e do logotipo do Governo
Federal representando sua identidade visual.
Logo abaixo, h a nota de direitos autorais e
desenvolvimento, indicando a propriedade de
contedo e de desenvolvimento CMS.
100 px
18 px

Elementos da Estrutura Principal Barra Inferior da Identidade Padro de Comunicao Digital do Governo Federal
Barra Inferior da Identidade Padro de Comunicao Digital

Confira ao lado a Barra Inferior da Identidade
Padro de Comunicao Digital segundo a cor do
tema (template) escolhido para o site
1
1 Barra inferior tema verde

#00420c / R: 0 G: 66 B: 12
2 Barra inferior tema amarelo

#f28f00 / R: 242 G: 143 B: 0
2
3 Barra inferior temas azul e branco
#0042b2 / R: 0 G: 66 B: 178

5. Temas
Neste captulo sero apresentados os temas: templates com variaes de cores principais que compem o visual do site.
Temas Verde
Verde

Temas Amarelo
Amarelo

Temas Azul
Azul

Temas Branco
Branco

6. Planos e Programas
Neste captulo sero apresentados os mdulos que compem a estrutura de informao visual do leiaute do site.
Planos e Programas
Planos e Programas
Os rgos do Poder Executivo Federal que possurem Planos e Programas devero disponibilizar informaes e servios de utilidade pblica de maneira uniforme, organizada e acessvel para
seus pblicos.
Uma das formas de apresentar um plano ou programa por meio de um site independente. Este site ter obrigatoriamente o tema branco como identidade.
Acesse o Manual de Diretrizes para mais detalhes sobre a apresentao de Planos e Programas em site independente e em site institucional.

Planos e Programas Cores
Cores
Tema Branco
HEX: #ECEDF1
Ao criar um site independente para planos ou programas, o gestor de
RGB: 231 237 241
contedo deve, obrigatoriamente, utilizar o tema branco.
Desta maneira confere-se unidade e identidade a todos os sites de

planos ou programas do governo federal.
HEX: #F0F2F1
RGB: 240 242 241
Confira ao lado as especificaes relativas ao tema branco.
HEX: #ECEDF1
RGB: 236 237 241

Planos e Programas Cabealho
Cabealho branco
O cabealho (header) do site independente de Planos
7 Barra de Servios 10 Barra de Idiomas
e Programas dever contar com a mesma estrutura do
#2C66CE/ R: 44 G: 102 B: 206 #2E65C9/ R: 46 G: 100 B: 200
cabealho do Portal Institucional Padro.
8 Migalhas de po (breadcrumb) 11 Base cabealho

Mais detalhes sobre o cabealho de um site independente
#2C66CE/ R: 44 G: 102 B: 206 topo mais claro: #F0F2F1/ R: 240 G: 242 B: 241
de Planos e Programas podem ser acessados no Manual
de Diretrizes de Comunicao Digital do Governo Federal.
#3164CF/ R: 49 G: 100 B: 207 12 Base barra de servios
Confira a seguir a composio do cabealho:
#cfd0d2/ R: 207 G: 208 B: 210
#2C66CE/ R: 44 G: 102 B: 206
2 Denominao do rgo
#2C66CE/ R: 44 G: 102 B: 206
1 5 10
3 Nome principal 2
#2C66CE/ R: 44 G: 102 B: 206 3 6 11
4 9
4 Subordinao do rgo
7 12
#2C66CE/ R: 44 G: 102 B: 206
8
5 Barra de Acessibilidade
#2C66CE/ R: 44 G: 102 B: 206
6 Cor do cone lupa

#1F4DA3/ R: 31 G: 77 B: 163

Planos e Programas Coluna de Menus
Coluna de Menus azul (parte 1)

Como j visto anteriormente, a coluna de menus deve
4 Menu de Relevncia
sempre ocupar a coluna lateral esquerda do ste,
estando presente em todas as suas pginas.
#03316F/ R: 3 G: 49 B: 111
Para um site independente de Planos e Programas, 1

5 Menu Principal / Menu Acesso 5
devem ser observadas algumas particularidades, como
Informao / Centrais de Contedos
por exemplo a incluso da logo do Plano ou Programa. 6
Open Sans Bold, 12 px, CAIXA ALTA
#03316F/ R: 3 G: 49 B: 111
Mais detalhes podem ser acessados no Manual de
Diretrizes de Comunicao Digital do Governo Federal.
6 Menu Principal / Menu Acesso
Informao / Centrais de Contedos
1 Logo do plano ou programa
#172938/ R: 23 G: 41 B: 56
150 x 150px 4 5
7 cones de Centrais de Contedos

2 Linha colorida sobre assunto 6
#004d0e/ R: 99 G: 148 B: 110
150 x 4 px 7
2
3 Fundo sob assuntos 5
cor #EAEBEE
6


ser Open Sans Bold.

Planos e Programas Coluna de Menus
Coluna de Menus azul (parte 2)

Confira a seguir a configurao de um item aberto
na coluna de menus de um site independente de
Planos e Programas.
8
8 Linha colorida acima e abaixo 10 Fundo sob editoria aberta 9
editoria aberta 1 nvel selecionado
#03316F/ R: 3 G: 49 B: 111 cor #EAEBEE
9 Menu secundrio sobre o rgo/ cor #EAEBEE cor #E1E2E5
10
site - 1 nvel - Item normal 3 nvel 3 nvel selecionado
Open Sans Regular, 14 px cor #D9DADC cor #D1D2D5
#172938/ R: 23 G: 41 B: 56 4 nvel 4 nvel selecionado
1 nvel - Item Selecionado cor #CACBCE cor #C9CACD
Open Sans Bold, 14 px 5 nvel
#172938/ R: 23 G: 41 B: 56 cor #C1C2C4
- Item normal
#172938/ R: 23 G: 41 B: 56
2 a 5 nvel - Item Selecionado
#172938/ R: 23 G: 41 B: 56

Planos e Programas Rodap
Rodap branco
O rodap (footer) de um site independente de Planos
e Programas semelhante ao de um Portal Institucional
Padro.
Mais detalhes podem ser acessados no Manual de Diretrizes

de Comunicao Digital do Governo Federal.
1
Confira a seguir a composio de cores e fontes do rodap:
2
3
1 Ttulo da coluna 5 Base da barra inferior
Open Sans Bold, 18 px #0042b2 / R: 0 G: 66 B: 178
#2C66CE / R: 44 G:102 B:206
2 Itens da coluna
Open Sans Regular, 13 px 4
#2C66CE / R: 44 G:102 B:206
5
#2C66CE / R: 44 G:102 B:206
4 Base
#d5d5d5 / R: 213 G:213 B:213


7. Pgina de Destaque
Neste captulo sero apresentadas as campanhas institucionais e de utilidade pblica.
Pgina de Destaque Apresentao
Apresentao
O objetivo principal da Pgina de Destaque criar uma identidade visual prpria desvinculada do portal em que foi criada para realar as campanhas institucionais e de
utilidade pblica ao cidado realizadas pelos rgos que compem o Poder Executivo Federal.
Acesse o Manual de Diretrizes para mais detalhes sobre a apresentao de Pginas de Destaque bem como informaes sobre as funes, vantagens e caractersticas da
Identidade Padro de Comunicao Digital do Governo Federal.

Pgina de Destaque Legenda
Legenda
Elementos indicativos para especificao de Indica que o alinhamento do Indica que o alinhamento do
leiautes, elementos master e grids, no que tange: texto dentro do elemento texto dentro do elemento no
espaamentos no qual ele est inserido qual ele est inserido direita
alinhamentos esquerda (e ao centro, se o (e ao centro, se o espaamento
formatos espaamento vertical no for vertical no for especificado).
caractersticas especificado).
Indica que o alinhamento do Indica que o alinhamento do

1 2 texto dentro do elemento texto dentro do elemento no
Indica quando um elemento tem
no qual ele est inserido qual ele est inserido direita
suas caractersticas descritas ao
esquerda (e embaixo porm (e em cima porm respeitando
3 4 lado da imagem.
especificadas). especificadas).
Indica o espaamento vertical Indica que o alinhamento do Indica que o alinhamento do

30 px entre dois elementos (seja um texto dentro do elemento texto dentro do elemento no
objeto, uma cor de fundo ou o no qual ele est inserido qual ele est inserido direita
limite do leiaute). esquerda (e em cima, porm (e embaixo porm respeitando
Indica o espaamento horizontal especificadas). especificadas).
entre dois elementos (seja um
objeto, uma cor de fundo ou o
30 px limite do leiaute).

Pgina de Destaque Grid
Grid
O grid formado por um nico grupo de 3 colunas:
CABEALHO (HEADER)
O espaamento entre as colunas ser sempre de 30
pixels.
Essas 3 colunas podem ser organizadas da seguinte

forma:
Bloco de contedo com largura de 960 pixels;

Bloco de contedo dividido em duas partes, REA DE CONTEDO
sendo uma delas com 630 e outra com 300 pixels
de largura
Bloco de contedo divivido em trs partes,
todas com 300 pixels de largura;
RODAP (FOOTER)

Pgina de Destaque Grid
Grid telas de 1024 px de largura


tamanho da janela do navegador. 960 px
1 1
630 px 300 px
300 px 300 px 300 px
1024 px

Pgina de Destaque Estrutura
Estrutura
A Pgina de Destaque possuiu uma verso mais simplificada Pgina de Destaque Portal Institucional
em relao estrutura do Portal Institucional Padro.
Ao invs do formato em C, com cabealho, coluna de menus

e rodap, a Pgina de Destaque prioriza a rea de miolo e
Cabealho
simplifica o espao destinado ao cabealho e ao rodap. Por
fim, a coluna de menus deixa de ser vertical e passa a ocupar,
quando necessrio, o espao destinado para a Barra de
Servios.
Coluna
Rodap

Pgina de Destaque Cabealho
Cabealho
O cabealho da Pgina em Destaque uma verso reduzida
em relao estrutura definida para um Portal Institucional.
1 A Barra Padro do Governo o nico elemento a ser

repetido nas duas estruturas. Ela deve ser mantida
para identificar que todo o contedo faz parte da
propriedade digital do Poder Executivo Federal. Como
comum a todos os sites que integram o Poder Executivo
Federal, a atualizao da barra no feita no ambiente
1
de gesto de contedo dos portais institucionais.
2 2
2
O cabealho contm a identificao da campanha, menu
2 de teclas de atalho, menu de acessibilidade e o menu de
navegao horizontal (este apenas quando necessrio). 2
Como a Pgina de Destaque ir destacar seus contedos em

uma nica pgina e no haver aprofundamento sobre o
tema, o campo de busca e o mapa do site foram retirados do
cabealho.
O menu com cones para as redes sociais tambm foi

retirado do cabealho pois no recomendada a criao de
perfis especficos para uma campanha. O destaque para as
interaes nos citados sites deve ser realizado na seo rea
de Contedo.

Cabealho
Na rea destinada identificao da campanha, Importante: nenhum item deste menu obrigatrio, ficando a equipe de contedo livre para definir
3
deve-se sempre seguir a imagem ao lado com a palavra quais sero usados. Confira os leiautes criados para os itens que formam o menu horizontal.
Campanha ocupando o espao conhecido no Portal
Institucional como Denominao do rgo e o A migalha de po (breadcrumb) prpria e considera a capa da Pgina de Destaque como
nome pelo qual a campanha ser batizada no espao 10
pgina inicial.
denominado Nome do rgo.
O menu de navegao horizontal no obrigatrio fica

localizado abaixo do cabealho e alinhado esquerda (no
lugar ocupado pela Barra de Servio no Portal Institucional,
seguindo a formatao:
3
4 O que ? link texto que ir apresentar a campanha;
5 Participe informaes sobre como feita a interao 4 5 6 7 8 9
entre o pblico e o rgo responsvel; 10
6 Divulgao rea para publicao de peas da

campanha que possam ser utilizadas por outros rgos
do Poder Executivo Federal;
7 Legislao rea para divulgao de legislao prpria

sobre a campanha.
8 Participantes informaes sobre os rgos parceiros

da campanha;
9 Contato rea de contato com o rgo ou link para

pgina com informaes dos gestores da campanha;

Cabealho
Confira a seguir a composio de cores, fontes,
espaamentos e alinhamentos do cabealho de uma
Pgina de Destaque:
1 4
1 Atalhos de teclado 2
7
#2C66CE/ R: 44 G: 102 B: 206 3
5 8
2 Identificao da campanha
#2C66CE/ R: 44 G: 102 B: 206 6
3 Nome da campanha
#2C66CE/ R: 44 G: 102 B: 206
4 Barra de Acessibilidade
#2C66CE/ R: 44 G: 102 B: 206 48 px
5 Menu de navegao horizontal

#2C66CE/ R: 44 G: 102 B: 206 15 px 15 px
25 px
6 Migalhas de po (breadcrumb) 84 px
#2C66CE/ R: 44 G: 102 B: 206 28 px
7 Base cabealho
topo mais claro: #F0F2F1/ R: 240 G: 242 B: 241
8 Base menu de navegao horizontal

#cfd0d2/ R: 207 G: 208 B: 210

Pgina de Destaque Menu
Menu
Confira abaixo o layout dos itens de menu de uma Pgina de Destaque
O que Participe Divulgao Legislao Participantes

Pgina de Destaque Rodap
Rodap
Como um site que se resolve em apenas uma pgina, a formatao do rodap da Pgina de Destaque diferente daquela apresentada nos portais institucionais.
Como no existem links de primeiro nvel, barra de servio, menu de redes sociais e de navegao, o local ser preenchido com atalhos para os rgos do Poder
Executivo Federal que fazem parte da campanha.
O rodap com os atalhos para demais rgos s dever ser configurado se houver uma parceria entre dois ou mais rgos e instituies do Poder Executivo Federal.
So mantidas obrigatoriamente ao fim da pgina a barra inferior com atalho para o site Acesso Informao e a nota de direitos autorais e de desenvolvimento.
Confira na prxima pgina o exemplo e a composio do rodap de uma Pgina de Destaque.

Pgina de Destaque Rodap
Rodap
Composio de cores, fontes, espaamentos e alinhamentos
do rodap:
1 Itens do rodap 1
Open Sans Regular e Bold 14 px 2
#2C66CE / R: 44 G:102 B:206
2 Base 3 Logo do Governo
#d5d5d5 / R:213 G:213 B:213
3 Base da barra de acesso informao

#0042b2 / R:0 G:66 B:178
42 px
46 px

Pgina de Destaque rea de Contedo
rea de Contedo
Espao destinado para a publicao de contedo relativo campanha. Possui um grid mais largo (do que ao aplicado no Portal Institucional) e conta com a ferramenta
de exibio de imagem de fundo (background).
Miolo
Apesar de a rea destinada ao contedo ter aumentado, no foi preciso realizar alteraes nas configuraes dos mdulos de visualizao de contedo (tiles).
Os mdulos que podem ser aplicados na Pgina de Destaque j foram listados no captulo Orientaes editoriais. A configurao desses mdulos pode ser acessada
no Manual de Gesto de Contedo do Portal Institucional Padro - CMS Plone, disponvel para consulta e download no Site Secom.
A especificao tcnica de cada um desses mdulos pode ser encontrada no Guia de Estilo do Portal Institucional Padro, tambm disponvel para consulta e
download no site da referida secretaria.
Alm daqueles j desenvolvidos, um novo mdulo foi criado especificamente para a Pgina de Destaque. O tile Espaador permite a insero de texto alternativo (ALT)
a ser exibido apenas para leitores de tela e na verso responsiva do site, alm de indicar espaamento vertical na capa para que a imagem de fundo aplicada no
entre em conflito com outras chamadas.
Imagem de fundo (background)

Quando usada sua aplicao no obrigatria -, a imagem de fundo da capa dever atender algumas especificaes. O arquivo tem de ser gravado com uma
resoluo de 72 dpi (dots per inches) e com a largura em 960 pixels (a altura livre).
Cada rgo/instituio tem a liberdade de produzir as peas grficas, que iro ambientar o visitante campanha que se quer destacar. As equipes envolvidas no
processo de criao devem levar em conta possveis limitaes de altura da imagem ou de posicionamento de uma mensagem escrita para evitar interferncias entre
a imagem e demais mdulos que iro fazer parte da capa.
Por conta da acessibilidade, ser preciso utilizar o mdulo Espaador sempre que uma imagem de fundo for aplicada (mesmo que no seja preciso definir um
espaamento vertical). este mdulo que garante aos programas que fazem leitura de tela a possibilidade de traduzir uma imagem em texto.

rea de Contedo
Redes sociais
Embora no seja recomendada a criao de perfis em redes sociais exclusivos para campanhas, os perfis que j existem para este fim devem ser divulgados.
Recomenda-se o uso do mdulo destinado s redes sociais Twitter e Facebook, j configurados e aplicados no Portal Institucional Padro para exercer esta funo.
Quando no houver perfis prprios para as campanhas, o gestor de contedo dever apresentar as interaes que ocorrem nos perfis institucionais.

rea de Contedo
Exemplos de aplicao
Seguem abaixo exemplos de aplicao dos miolos.
Com imagem de destaque Sem imagem de destaque Imagem de fundo e contedo horizontal Imagem de fundo e contedo vertical

Pgina de Destaque Tema
Tema
Para a Pgina de Destaque foi criado um tema especfico Pgina de Destaque Portal Institucional
(da cor cinza) para receber as alteraes no cabealho,
coluna de menus, rodap e miolo descritas anteriormente.
Os mesmos critrios de acessibilidade e usabilidade

utilizados nos demais temas do Portal Institucional sero
atendidos nesta criao especfica.
Na verso responsiva haver omisso da imagem de fundo

de uma capa, com exibio do texto de acessibilidade
e remoo da altura de marcao introduzidos pelo novo
mdulo desenhado para esta finalidade.
Na verso com alto contraste a imagem de fundo ficar

aparente, portanto o texto de acessibilidade no aparecer
e todo texto sofrer o contraste padro e necessrio.

8. Mdulos
Neste captulo sero apresentados os mdulos que compem a estrutura de informao visual do leiaute do site.
Mdulos
Mdulos
Mdulos so estruturas de visualizao de contedo Nas pginas principais (home e subhomes), os mdulos devem ser organizados de forma que,
(imagens, vdeos, textos, udios, publicaes em redes em uma mesma linha, todos mantenham tenham a mesma altura. Assim, no surgem espaos
sociais) que compem as pginas de um site. Em geral, em branco entre eles. A imagem ao lado ilustra o correto uso dos mdulos em uma capa.
seu gerenciamento flexvel: podem ser adicionados ou
retirados conforme as necessidades do gestor de contedo. A seguir, confira os mdulos desenhados e que podem ser aplicados nos sites que seguem
a Identidade Padro de Comunicao Digital.
H tambm mdulos de exibio de contedo presentes
em posies fixas na coluna mais direita do grid. Estes
mdulos so chamados de portlets e contam com uma
configurao e funcionamento muito semelhantes aos
mdulos aplicados nas capas das pginas principais. CERTO CERTO ERRADO
Apesar de serem independentes na sua estrutura, os

mdulos seguem algumas regras de composio entre si
e de acordo com a pgina a ser desenvolvida.
Quanto sua posio, temos basicamente dois grupos de

mdulos:
os utilizados apenas nas homes e sub homes, sendo estas

pginas principais que agregam vrios links para diferentes
pginas.
os que devem ser utilizados apenas nas pginas internas,

como portlets.

Mdulos Banner Rotativo
Banner Rotativo
Apresentao
Quando preciso apresentar mais de uma matria

com o mesmo peso em importncia, o banner rotativo
dever ser usado.
O banner rotativo mostra at quatro destaques em

uma nica rea. O usurio tem a liberdade de escolher
qual destaque deseja acessar clicando nos seletores
(em forma de crculos) no canto inferior direito do
mdulo. A troca de exibio tambm controlada por
um temporizador (timer).

Banner Rotativo
Abaixo, voc pode conferir as indicaes de fontes,
tamanhos, cores, raio e mximo de caracteres.
1
1 Crdito
Arial Itlico, 12 px
cor: #172938 2
2 Foto grande
750 x 423 px
canto (raio): 8 px
3 Ttulo da Matria
Arial Bold, 34 px
entre linha: 37 px
cor: #172938
mximo de caracteres: 90
4 Linha Fina
entrelinhas: 18 px
cor: #172938
Para a elaborao do CSS, o desenvolvedor poder usar

em, % ou px, como indicado pelo W3C
(www.w3c.com.br).

Banner Rotativo
5 cones paginao
25 x 25 px
Os botes presentes no banner rotativo e que permitem

a navegao entre as imagens ou chamadas varia conforme
a cor escolhida para o tema (template).
Tema Verde
Paginao no selecionada Tema Azul
base: #0f551f Paginao no selecionada
pginas: #ffffff base: #1659bf
Paginao selecionada pginas: #ffffff
base: #ffb400 Paginao selecionada
pginas: #0f551f base: #edeff1
pginas: #1659bf
Tema Amarelo
Paginao no selecionada Tema Branco
base: #03316f Paginao no selecionada
base: #edeff1 Paginao selecionada
pginas: #03316f base: #edeff1 5
pginas: #1659bf

(www.w3c.com.br).

Banner Rotativo
Ao lado, voc pode conferir as indicaes alinhamento,
espaamento, base, linha divisria e linha pontilhada.
10 px
18 px
20 px

Mdulos Banner Rotativo Texto Sobreposto
Banner Rotativo Texto Sobreposto

Apresentao
Outra opo de aplicao do Banner Rotativo com

o texto da chamada sobreposto imagem. Nesta
configurao, o texto da chamada fica localizado
dentro da imagem, sob um fundo cinza transparente.


tamanhos, cores, raio e mximo de caracteres.
1 Crdito
1
Arial Itlico, 12 px
cor: #172938
2 Foto grande
750 x 463 px
canto (raio): 8 px
2
3 Ttulo da Matria
Arial Bold, 18 px
entre linha: 22 px
cor: #ffffff
4 Base transparente
750 x 70 px
cor: #000000
Opacidade: 70%
3
4

(www.w3c.com.br).


5 cones paginao
25 x 25 px
Os botes presentes no banner rotativo e que permitem

a navegao entre as imagens ou chamadas varia conforme
a cor escolhida para o tema (template).
Tema Verde
Paginao no selecionada Tema Azul
base: #0f551f Paginao no selecionada
base: #ffb400 Paginao selecionada
pginas: #0f551f base: #edeff1
pginas: #1659bf
Tema Amarelo
Paginao no selecionada Tema Branco
base: #03316f Paginao no selecionada
base: #edeff1 Paginao selecionada
pginas: #03316f base: #edeff1
pginas: #1659bf
5

(www.w3c.com.br).


Ao lado, voc pode conferir as indicaes alinhamento,
10 px
20 px 40 px

Mdulos Lista - ltimos Contedos
Lista - ltimos Contedos

Apresentao
Bloco de contedo com 230 px de largura Bloco de contedo com 490 px de largura
O mdulo apresenta a relao de qualquer tipo de
contedo (notcias, imagens, vdeos e udios) seguindo
critrios de publicao definidos pelo gestor de contedo.
O acesso realizado clicando sobre o ttulo de cada link.

O visitante poder clicar em um link no rodap do mdulo
para acessar a listagem completa daquele determinado
contedo.
Nos exemplos ao lado, temos a reproduo de uma lista

de ltimas notcias em uma coluna (esquerda) e em duas
colunas (direita).
Trata-se de um mdulo presente em capas e lista as ltimas

notcias publicadas em um portal.

Listagem - ltimos Contedos bloco com 230 px de largura

tamanhos, cores e mxima quantidade de caracteres.
1 Ttulo do mdulo
Open Sans Bold, 16 px 1
cor: #454545
CAIXA ALTA
2 Ttulo do texto
Arial Bold, 15 px
cor: #335277 2
3 Texto do link do rodap

cor: #444a53
CAIXA ALTA



Abaixo, voc pode conferir as indicaes alinhamento,
1 Base
230 x 400 px 10 px 1
cor: #eeeff1/ contorno: #C0C1C1 20 px

2
2 Linha divisria
230 x 1 px
cor: #C0C1C1
3 Linha pontilhada entre chamadas

230 x 1 px / 1 px
cor: #C0C1C1 20 px 3
20 px
8 px
8 px
Este mdulo s deve ser utilizado em

blocos de contedo com largura de 490 e
230 pixels.


1 Ttulo do mdulo
1
cor: #454545
CAIXA ALTA
2
2 Ttulo do texto
Arial Bold, 15 px
cor: #335277

cor: #444a53
CAIXA ALTA



1 Base 15 px
490 x 442 px 15 px 1
2
cor: #eeeff1/ contorno: #C0C1C1
2 Linha divisria
490 x 1 px
cor: #C0C1C1
Linha pontilhada entre chamadas 20 px

3
490 x 1 px / 1 px 20 px
cor: #C0C1C1 3
2
15 px
15 px
30 px
Este mdulo s deve ser utilizado em

blocos de contedo com largura de
490 e 230 pixels.

Mdulos Galeria de Vdeos
Galeria de Vdeos
Apresentao
No vdeo em destaque, os recursos de interao so Bloco de contedo com 490 px de largura Bloco de contedo com 750 px de largura
os mesmos disponveis em vdeos incorporados do
Youtube. possvel dar incio (play), pausar, retirar o
som, avanar/retroceder o vdeo e assisti-lo em tela
cheia.
Tambm possvel clicar na miniatura (thumbnail) de

um dos vdeos da lista para que ocupe o lugar do vdeo
em destaque.
Para a galeria de vdeos aplicadas em blocos de

contedo com 490 pixels de largura, o gestor de
contedo poder exibir a quantidade de miniaturas
que desejar, desde que respeite a esttica e a clareza
de contedo da pgina. O mesmo no ocorre dentro da
galeria de vdeos em blocos de contedo com 750 px de
largura, na qual obrigatria a exibio de 5 miniaturas.
O usurio tambm pode ter acesso aos demais vdeos

clicando em Acesse a galeria de vdeos.

Galeria de Vdeos bloco com 490 px de largura

1 Ttulo da galeria 4 Chamadas de vdeos secundrios 1

Open Sans Regular, 22 px Arial Bold, 12 px
cor: #FFFFFF entrelinhas: 16 px
2
CAIXA ALTA cor: #FFFFFF
mximo de caracteres: 18 mximo de caracteres: 50
mximo de linhas: 3
2 Chamada do vdeo 3
de destaque Texto do link do rodap
Arial Bold, 16 px 5 Open Sans Regular, 11 px
cor: #FFFFFF cor: #FFFFFF
mximo de caracteres: 55 CAIXA ALTA
3 Linha fina da chamada do 4
vdeo de destaque
entrelinhas: 16 px
cor: #FFFFFF
5
Para a elaborao do CSS, o desenvolvedor poder

usar em, % ou px, como indicado pelo W3C
(www.w3c.com.br).
Para manter a melhor visualizao, recomenda-se

sempre respeitar os limites de caracteres.


15 px
1 Base do cabealho 5 Base rea de outros vdeos 1
15 px
490 x 44 px 490 x 89 px
cor: #051D5B cor: #051D5B
3
raio (cantos superiores): 4 px 2
6 Linha divisria pontilhada

2 Vdeo 1 px / 1 px
490 x 328 px cor: #213E83
3 Base rea da chamada 7 Base do rodap

490 x 89 px 17 px
490 x 48 px 4
8 px
cor: #051D5B cor: #061848
raio (cantos inferiores): 4 px
4 Linha divisria cheia 17 px
5
1 px
cor: #213E83 15 px
15 px
17 px 6
15 px
7
30 px
15 px 15 px 15 px
15 px


tamanhos, cores e mximo de caracteres.
1 Ttulo da galeria 4 Chamadas de vdeos secundrios

Open Sans Regular, 22 px Arial Regular, 12 px
1
cor: #FFFFFF entrelinhas: 16 px
CAIXA ALTA cor: #FFFFFF
mximo de linhas: 3
2 Chamada do vdeo
de destaque 5 Texto do link do rodap
Arial Bold, 16 px Open Sans Regular, 11 px
cor: #FFFFFF cor: #FFFFFF 4
3 Linha fina da chamada do

vdeo de destaque
2
entrelinhas: 16 px 3
cor: #FFFFFF
mximo de caracteres: 50 5
mximo de linhas: 3
Para a elaborao do CSS, o desenvolvedor poder

usar em, % ou px, como indicado pelo W3C
(www.w3c.com.br).
Para manter a melhor visualizao, recomenda-se

sempre respeitar os limites de caracteres.


1 Base do cabealho 5 Base rea de outros vdeos

750 x 60 px 262 x 90 px 20 px
1
cor: #051D5B cor: #051D5B 20 px 4
raio (cantos superiores): 4 px
6 Linha divisria pontilhada
2
2 Vdeo 1 px / 1 px
452 x 340 px cor: #213E83
5
3 Base rea da chamada 7 Base do rodap

490 x 120 px 750 x 50 px
cor: #051D5B cor: #061848
raio (cantos inferiores): 4 px
4 Linha divisria cheia 6 15 px
15 px
1 px
15 px
cor: #213E83
26 px 3
15 px 15 px

Mdulos Galeria de lbuns
Galeria de lbuns
Apresentao
Na Galeria de lbuns o visitante poder acessar Bloco de contedo com 490 px de largura Bloco de contedo com 750 px de largura
colees de galerias de imagens separadas por temas
especficos.
A visualizao do mdulo composta por uma imagem

em destaque e seu ttulo, descrio, crdito, local e
data. Abaixo, o carrossel lista as miniaturas de demais
galerias e um link para que o visitante acesse mais
lbuns. A navegao lateral ativada assim que a linha
completamente preenchida conforme a quantidade
de galerias de lbuns registradas no portal.
O mdulo, utilizado exclusivamente para listar galerias

de lbuns, exibe at 30 miniaturas.

Galeria de lbuns bloco com 490 px de largura

1
1 Ttulo da galeria 4 Crdito do lbum

Open Sans Bold, 16 px (quando houver)
cor: #454545 Arial Regular, 13 px
itlico
2 Ttulo do lbum
entrelinhas: 18 px
Arial Bold e Arial Italic, 13 px
cor: #172938
entrelinhas: 18 px
cor: #172938
mximo de linhas: 2
cor: #335277
Descrio do lbum CAIXA ALTA
3 2
(quando houver) 3
Arial Regular, 13 px 4
entrelinhas: 18 px
cor: #172938
mximo de linhas: 2

poder usar em, % ou px, como 5
Para manter a melhor visualizao,

recomenda-se sempre respeitar os limites
de caracteres.


15 px 1
20 px
1 Base do cabealho
2
490 x 47 px
cor: #edeff1/ contorno: #D5D5D5
2 Foto
490 x 102 px
contorno: 1 px/ cor: #454545
3 Base da rea de ttulo e descrio do lbum

490 x 87 px
cor: #edeff1
10 px
3
4 Caixa da galeria
478 x 103 px
20 px
cor: #FFFFFF/ contorno: #CBCBCE 6 6
10 px
5 Miniatura da foto 4
5
130 x 87 px
6 cones
8 px
22 x 22 px 10 px
35 px
15 px
5 px


1
1 Ttulo da galeria 4 Crdito do lbum

Open Sans Bold, 16 px (quando houver)
itlico
2 Ttulo do lbum
entrelinhas: 18 px
cor: #172938
entrelinhas: 18 px
cor: #172938 5 Texto do link do rodap
mximo de caracteres: 60 Open Sans Regular, 11 px
mximo de linhas: 2 cor: #335277
CAIXA ALTA
3 Descriob do lbum
(quando houver)
cor: #172938 4
mximo de linhas: 2
Para a elaborao do CSS, o desenvolvedor 5


de caracteres.


15 px
1
20 px
1 Base do cabealho
750 x 47 px 2
cor: #edeff1/ contorno: #D5D5D5

2 Foto
750 x 420 px
contorno: 1 px/ cor: #454545
3 Base da rea de ttulo e descrio do

lbum
750 x 72 px
cor: #edeff1
10 px
4 Caixa da galeria 3 6 6
735 x 10 px 12 px 8 px
cor: #FFFFFF/ contorno: #CBCBCE 4
5
5 Miniatura da foto
130 x 87 px 10 px
10 px
6 cones
22 x 22 px 15 px

Mdulos Galeria de Fotos
Galeria de Imagens
Apresentao
O mdulo oferece ao usurio a possibilidade de
visualizar uma coleo de imagens (fotografias,
infogrficos, logotipos, etc).
A visualizao do mdulo composta por uma

imagem em destaque e seu ttulo, descrio e crdito.
Abaixo, o carrossel lista as miniaturas de demais

imagens que faam parte da galeria e um link para
que o visitante acesse mais imagens. A navegao
lateral ativada assim que a linha completamente
preenchida conforme a quantidade de imagens
registradas em uma galeria.
O mdulo exibe at 30 miniaturas de imagem em sua

linha inferior.
Alm de imagens este mdulo tambm pode, se

preciso, ser usado para destacar vdeos. Recomenda-
se, no entanto, que o mdulo Galeria de Vdeos seja
usado para este fim.

Galeria de Imagens bloco com 490 px de largura

1
1 Ttulo da galeria 4 Crdito da imagem

Open Sans Bold, 16 px Arial Regular, 13 px itlico
cor: #454545 entrelinhas: 18 px
cor: #172938
2 Ttulo da imagem mximo de caracteres: 60
Arial Bold, 13 px mximo de linhas: 2
entrelinhas: 18 px
mximo de linhas: 1 Open Sans Regular, 11 px
cor: #335277
3 Legenda da imagem CAIXA ALTA
entrelinhas: 18 px
cor: #172938
mximo de linhas: 2
2
3
4


de caracteres.


espaamento, base, tamanhos das fotos e cone.
15 px 1
1 Base do cabealho 20 px
490 x 47 px 2
cor: #EEEFF1/ contorno: #D5D5D5

2 Foto
490 x 368 px
Base da rea de legenda e galeria

3
490 x 70 px
cor: #EEEFF1
4 Caixa da galeria
476 x 60 px
cor: #FFFFFF/ contorno: #CBCBCE
Miniatura da foto
5 10 px
60 x 40 px
3
6 cone de navegao 10 px
15 x 15 px 4
5
10 px
6
10 px
5 px


1
1 Ttulo da galeria 4 Crdito da imagem

Open Sans Bold, 16 px Arial Regular, 13 px itlico
cor: #172938
2 Ttulo da imagem mximo de caracteres: 60
Arial Bold, 13 px mximo de linhas: 2
entrelinhas: 18 px
mximo de linhas: 1 Open Sans Regular, 11 px
cor: #335277
3 Legenda da imagem CAIXA ALTA
entrelinhas: 18 px
cor: #172938
mximo de linhas: 2
2
3
4
5

de caracteres.


espaamento e tamanho das fotos. 15 px 1
20 px
1 Base do cabealho
750 x 47 px
cor: #EEEFF1/ contorno: #D5D5D5 2
2 Foto
750 x 562 px
3 Base da rea de legenda e galeria

750 x 70 px
cor: #EEEFF1
4 Caixa da galeria
730 x 60 px
cor: #FFFFFF/ contorno: #CBCBCE
5 Miniatura da foto
60 x 40 px
10 px
6 cone de navegao 3
15 x 15 px 10 px
4
5
10 px
6
10 px
15 px

Mdulos Player de udio
Player de udio
Apresentao
Bloco de contedo com 230 px de largura

O mdulo reproduz arquivos deste tipo de mdia
que estejam hospedados no site. O usurio pode,
por meio de cliques, dar incio (play), pausar ou
retirar o som durante sua navegao. O mdulo est
disponvel em formatao de uma ou duas colunas.
Bloco de contedo com 490 px de largura

Player de udio bloco com 230 px de largura

1 Descrio do udio
cor: #062767



espaamento, base e cone.
1 Base
216 x 50
cor: #EDEFF1 / contorno: #C0C1C1
2 cone Player
25 x 25 px
cor: #0A2967 10 px 10 px
1
5 px


1 Descrio do udio
cor: #062767



espaamento, base, player, rea do ttulo e cone.
1 Base
275 x 50
10px 10px
2 cone Player 1
25 x 25 px
2
5 px

Mdulos Galeria de udios
Galeria de udios
Apresentao
A galeria de udios oferece a possibilidade de ouvir

uma lista de udios reunidas em um nico mdulo. Bloco de contedo com 230 px de largura
O visitante pode, por meio de cliques, dar incio (play),

pausar ou retirar o som durante sua navegao. No Bloco de contedo com 490 px de largura
rodap do mdulo oferecido a opo para que se
acesse lista de udios que fazem parte da galeria.
O mdulo est disponvel em formatao para duas ou

trs colunas.

Galeria de udios bloco com 230 px de largura

1
1 Ttulo da galeria 4 Texto do link do rodap

Open Sans Bold, 16 px Open Sans Regular, 11 px
cor: #454545 cor: #335277
CAIXA ALTA CAIXA ALTA
2 Ttulo do udio de destaque

Arial Bold, 14 px 2
entrelinhas: 18 px
cor: #172938
mximo de linhas: 2
3 Ttulos dos udios secundrios

3
cor: #172938
mximo de linhas: 3

4
de caracteres.


espaamento, base, player, rea do ttulo e cone. 15 px
1
15 px
1 Base 15 px
230 x 590 px
cor: #EDEFF1 / contorno: #C0C1C1 2
20 px
2 Player
204 x 54 px
3
3 rea do ttulo do udio
15 px
230 x 90 px
cor: #F6F7F8
4 cone da lista da galeria

15 x 18 px
4
cor: #315177
5 cone de navegao
6
15 x 15 px
cor: #0A2967

490 x 1 px
#D3D3D3
15 px
10 px
5
10 px


1
1 Ttulo da galeria 4 Texto do link do rodap

cor: #454545 cor: #335277
2 Ttulo do udio
Arial Bold, 14 px 2
entrelinhas: 21 px
cor: #172938
mximo de linhas: 2 3
3 Lista da galeria
cor: #172938
mximo de linhas: 3


4
de caracteres.


espaamento, base, player, rea do ttulo e cone.
15 px
Base 1
1 15 px
490 x 450 px 24 px
2 Player
466 x 58 px 2
3 rea do ttulo do udio

65 px
490 x 62 px
3
cor: #F6F7F8
4 cone da lista da galeria

15 x 18 px
cor: #315177
5 cone de navegao 4
15 x 15 px
cor: #07266F 6
17 px
490 x 1 px
#D3D3D3 17 px
15 px
38 px 5
15 px

Mdulos Links Externos
Links Externos
Apresentao
Este mdulo rene uma listagem de links que, ao serem

clicados, redirecionam o usurio para pginas externas ao
site em questo. O acesso realizado clicando nos nomes
apresentados na lista ou nos cones sua direita.
No h limites para a quantidade de links externos

inseridos no mdulo, no entanto, importante avaliar se tal
quantidade est adequada esttica, estrutura da pgina e
objetivo da listagem.
O visitante sempre poder conhecer a listagem completa

clicando em Acesse lista de [nome do contedo]
O print ao lado indica o uso deste mdulo para exibir uma

lista de links de servios prestados pelo Governo Federal.
Este mdulo s deve ser utilizado em blocos

de contedo com largura de 230 pixels.

Links Externos
1 Ttulo do mdulo 4 Texto do link do rodap 1

cor: #454545 cor: #444A53
2 Chamada 2
entrelinhas: 21 px
cor: #172938
mximo de linhas: 2
3
3 Seta
20 x 20 px
cor: #335277

4

de caracteres.

Links Externos
espaamento, base e linhas.
1 Base do cabealho
1
230 x 48 px 2
cor: #d4d4d6 / contorno: #C0C1C1
2 Linha divisria
230 x 1 px
cor: #C0C1C1
3 Base dos itens

cor 1: #F6F9F7
3
cor 2: #EAEBEE
4 Linha pontilhada entre itens

490 x 1 px / 1 px 60 px
cor: #C0C1C1
5 Base do rodap
230 x 48 px
4
cor: #d4d4d6
15 px 5 15 px
Este mdulo no deve ser usado em

3 colunas.

Mdulos Enquete
Enquete
Apresentao
O mdulo de enquete utilizado para que um

visitante registre sua opinio sobre determinado
assunto.
composto de tema, pergunta e uma lista de opes

de respostas em carter de mltipla escolha. Aps
escolher a opo preferida, o visitante poder clicar
em Enviar para ter sua opinio registrada.
As respostas so salvas na prpria enquete

necessrio acessar o sistema para visualizar.
Este mdulo s deve ser utilizado em blocos

de contedo com largura de 230 pixels.

Mdulos Enquete
Enquete
1 Ttulo do mdulo 4 Boto Enviar

Open Sans Bold, 16 px Open Sans Bold, 15 px 1
cor: #454545 cor: #FFFFFF
2
2 Pergunta Open Sans Regular, 11 px
Arial Bold, 15 px cor: #444A53
cor: #335277 CAIXA ALTA 3
mximo de linhas: 2
3 Respostas
cor: #335277


de caracteres.

Mdulos Enquete
Enquete
1 Base do cabealho
10 px
230 x 48 px
1
cor: #edeff1 / contorno: #C0C1C1 10 px
2 Base pergunta 2
57 px
cor: #F6F9F7
3 Base boto Enviar

cor: #344d72
4 Base rodap 30 px
230 x 48 px
cor: #EAEBEE
10 px
3
10 px
4
12 px 10 px

Mdulos Redes Sociais
Redes Sociais
Apresentao
Este mdulo oferece ao usurio interao nas

redes sociais Facebook e Twitter. importante
considerar que tais interaes so definidas
pela programao nativa de cada servio, no
havendo influncia do site no qual so exibidas.
No twitter, possvel buscar contedos (tweets)
de uma conta ou realizar busca por palavras-
chaves (chamadas no servio em questo de
hashtags). O usurio poder trocar de rede social
clicando nas abas no canto superior do mdulo,
no sendo possvel a exibio de mais de uma
rede na mesma aba.
Recomenda-se que o mdulo seja

posicionado na ltima linha de contedo
da pgina principal (home), direita da
tela do navegador.
cabealho
rodap

Mdulos Redes Sociais
Redes Sociais
tamanhos, cores e espaamentos.
30 px 2 30 px
1 Ttulo do perfil 2

CAIXA ALTA
cor: #454545 1 1
2 Aba
cor: #EAEBEE / contorno: #b3b4b6
Recomenda-se que o mdulo seja

posicionado na ltima linha de contedo
da pgina principal (home), direita da
tela do navegador.
cabealho
rodap

Mdulos Agenda
Agenda
Apresentao
O mdulo Agenda exibe, de forma concentrada e

simplificada, as principais informaes da agenda de
uma autoridade ou rgo. Pela barra de rolagem do
mdulo, o visitante poder conhecer a listagem de
compromissos e, ao
clicar em qualquer um deles, ser direcionado para a
agenda correspondente. Mesmo que no exista um
compromisso oficial, a altura e a largura do mdulo no
so alterados.
O cabealho da agenda deve ser preenchido com o

cargo seguido do nome daquela autoridade.
O mdulo tambm permite o acesso a demais agendas Bloco de contedo com 750 px de largura
gravadas no site pelo boto Acesse todas as agendas.
Ao clicar neste link o visitante deve ser levado para uma
capa interna que liste a agenda de todas as autoridades
do rgo.
Observao: O primeiro print (o mais estreito) o

exemplo para 3 colunas. O ltimo print (o mais largo)
o exemplo para 1 coluna.

Mdulos Agenda
Agenda bloco com 230 px de largura

tamanhos, cores e mximo de caracteres.
1 Ttulo do mdulo 4 Ttulo do compromisso 1
Open Sans Bold, 16 px Arial Bold, 15 px

CAIXA ALTA cor: #335277 2
cor: #454545 mximo de caracteres: 55
mximo de caracteres: 20 mximo de linhas: 2
3
2 Data da agenda 5 cone de hora
4
Arial Bold, 16 px 15 x 15 px
cor: #172938 cor: #424242
3 Hora do compromisso 6 Texto do link do rodap

Open Sans Regular, 12 px Open Sans Regular, 11 px
cor: #596E7F cor: #444A53
CAIXA ALTA 5

6

de caracteres.

Mdulos Agenda

Ao lado, voc pode conferir as indicaes de tamanhos 13 px
e espaamentos.
17 px
17 px
15 px
15 px
20 px
20 px

Mdulos Agenda

1 Ttulo do mdulo 4 Ttulo do compromisso 1

CAIXA ALTA cor: #335277 2
2 Data da agenda 5 cone de hora 3

Arial Bold, 16 px 15 x 15 px 4
cor: #172938 cor: #424242

cor: #596E7F cor: #444A53
CAIXA ALTA
5

6

de caracteres.

Mdulos Agenda

Ao lado, voc pode conferir as indicaes de tamanhos
e espaamentos.
17 px
17 px
15 px
15 px
30 px 20 px
30 px 20 px
20 px
Para a elaborao do CSS, o desenvolvedor 20 px


Mdulos Agenda

1
1 Ttulo do mdulo 4 Ttulo do compromisso
2
CAIXA ALTA cor: #335277
3 4
2 Data da agenda 5 cone de hora
Arial Bold, 16 px 15 x 15 px
cor: #172938 cor: #424242
5

cor: #596E7F cor: #444A53
CAIXA ALTA
6

de caracteres.

Mdulos Agenda
Ao lado, voc pode conferir as indicaes de tamanhos

e espaamentos.
17 px
17 px
15 px
30 px
30 px
20 px
20 px
20 px
20 px


Mdulos Dados e Resultados
Dados e resultados
Mdulo utilizado para apresentar os nmeros e resultados Quando existir sistema legado como fonte de dados, o rgo deve utiliz-lo para abastecer
de um plano ou programa, com filtro para resultados gerais, esta rea de maneira automatizada e segura. A alimentao manual de dados pode gerar
por estado ou municpio. inconsistncia, alm de no ser instantnea.
O mdulo deve ser aplicado em duas colunas e trazer duas

abas. A aba esquerda com os resultados do plano ou
programa no mbito nacional, enquanto a outra aba com os
dados estaduais, filtrados por municpios.
Quando o visitante do portal clicar na aba Nacional, os

resultados devem ser apresentados em duas colunas. A
coluna esquerda mostra o nmero do resultado e a coluna
direita a sua explicao em forma de texto.
Quando o visitante clicar na aba Por Estado, o mdulo ir

exibir duas caixas de seleo. A primeira com as unidades
federativas do Pas e a segunda com os municpios
que pertencem ao estado escolhido anteriormente. Os
resultados da segunda caixa s devem ser habilitados
quando a unidade federativa for previamente marcada.
Ao escolher o municpio, o mdulo deve exibir uma tabela

com as caractersticas geogrficas e os indicadores daquela
localidade. Um boto X deve ser habilitado para que
o visitante volte tela anterior. Alm da tabela, o modulo
apresenta os resultados especficos daquele municpio,
seguindo a mesma disposio explicada anteriormente
(nmero e texto).

Dados e resultados
Ao lado, voc pode conferir as indicaes de tamanhos 17 px
e espaamentos.
17 px
25 px
25 px
25 px
10 px 30 px
24 px
24 px
24 px
10 px
poder usar em, % ou px, como 10 px
12 px
12 px

Dados e resultados
1 Ttulo do mdulo 5 Aba 1
Open Sans Bold, 16 px Arial Regular, 14 px bold
CAIXA ALTA cor: #444a53
2 5
cor: #454545 cor da aba selecionada: #D3D3D3
6 Linha pontilhada entre itens
3
2 Ttulo do resultado 470 x 1 px / 1 px
Open Sans Bold, 16 px cor: #C0C1C1
CAIXA ALTA
cor: #454545 7 Texto do quadro 7
mximo de caracteres: 20 Open Sans Regular, 11 px
cor: #335277
3 Ttulo da chamada cor do quadro: #D3D3D3
Arial Regular, 14 px bold
cor: #444a53 8 Texto da fonte 6
4 Numerao cor: #444a53 4
3
Open Sans, 40 px bold

cor: #596e7f 9 Texto do link do rodap
cor: #335277
CAIXA ALTA
Para a elaborao do CSS, o desenvolvedor 8

9

9. Portlets
Neste captulo sero apresentados os portlets que compem a estrutura de informao visual do leiaute do site.
Portlets Apresentao
Apresentao
Os portlets so pequenos mdulos de visualizao de contedo, geralmente localizados nas colunas s esquerda e direita dos sites da Identidade Padro
de Comunicao Digital.
Toda a coluna de menus, localizada esquerda, visualizada pelo visitante do site a partir da configurao de portlets de navegao.
O gestor de contedo tambm pode utilizar esta ferramenta para tornar mais atraente os textos publicados no site. So os chamados portlets de contedos
relacionados, localizados sempre direita da tela do monitor e que sero mais bem detalhados nas prximas pginas.

Portlets Portal Padro Coleo
Portal Padro Coleo

Apresentao
O portlet de coleo apresenta a relao de ltimas

notcias, contedos relacionados ou outros critrios
definidos pelo gestor de contedo.
O acesso realizado clicando sobre o ttulo de cada

link. O usurio tambm poder clicar em Acesse a
lista de notcias para acessar a listagem completa.
Podemos aplicar ou no, nesse portlet de coleo de

noticia imagens.
Este portlet s deve ser utilizado em blocos

de contedo com largura de 230 pixels na
coluna da direita.

Portal Padro Coleo

1 Ttulo do portlet 4 Texto do link do rodap

Open Sans Bold, 16 px Open Sans Regular, 11 px 1
cor: #454545 cor: #444A53
2
2 Data da notcia 3

cor: #335277
3 Ttulo da notcia
cor: #335277


Portal Padro Coleo

1 Base do box
20 px 1
230 x 376 px
15 px
15 px
10 px 10 px

Portal Padro Coleo

1

cor: #454545 cor: #444A53
2 Data da notcia
cor: #335277
2
3 Ttulo da notcia 3
cor: #335277

4

Portal Padro Coleo

Abaixo, voc pode conferir as indicaes alinhamento, 20 px
1
15 px
1 Base do cabealho
230 x 534 px 2
cor: #edeff1 / contorno: #C0C1C1
2 Tamanho da foto
217 x 141 px
15 px
15 px
10 px 10 px

Portlets Portal Padro Carrossel de Imagens
Portal Padro Carrossel de Imagens

Apresentao
No portlet de Carrossel de imagens o visitante poder

acessar colees de galerias de imagens separadas por
temas especficos.
A visualizao do portlet composta por uma imagem

em destaque e seu ttulo, descrio e crdito. Abaixo,
o carrossel lista as miniaturas de demais galerias e um
link para que o visitante acesse mais lbuns. A navegao
lateral ativada assim que a linha completamente
preenchida conforme a quantidade de galerias de lbuns
registradas no portal.

coluna da direita.



cor: #454545 cor: #444A53
2 Ttulo da imagem
cor: #454545
3 Descrio da imagem
cor: #454545
4 Crdito da imagem 2
Open Sans Semibold Italic, 13 px 3

cor: #454545 4



10 px
1 Base do box 1
230 x 425 px
10 px
2 Tamanho da foto 2
222x 166 px
3 Tamanho da miniatura
45 x 36 px
10 px
10 px
10 px 10 px

Portlets Portal Padro Galeria de Vdeos
Portal Padro Galeria de Vdeos

Apresentao
Um grupo de vdeos pode ser visto pelo usurio nesta

galeria que incorpora arquivos vindos do Youtube.
No vdeo em destaque possvel dar play e pause,

avanar, retroceder, retirar som e ver em tela cheia.
Tambm h a possibilidade de acessar outros vdeos
atravs do link Acesse a galeria de vdeos que
direciona para uma pgina com lista de vdeos atuais.
A galeria composta por ttulo, vdeo em destaque,

ttulo do vdeo, descrio do vdeo, lista de vdeo com
ttulo e atalho para acesso a mais vdeos.

coluna da direita.


tamanhos, cores e mxima quantidade de caracteres. 1
1 Ttulo do portlet 4 Ttulo da miniatura

Open Sans Bold, 16 px Open Sans Bold, 12 px
cor: #454545 cor: #FFFFFF
CAIXA ALTA
mximo de caracteres: 20 5 Texto do link do rodap
2 Ttulo do vdeo cor: #D1E1FF
Arial Bold, 16 px CAIXA ALTA
cor: #FFFFFF
2
3 Descrio do vdeo
cor: #FFFFFF



Abaixo, voc pode conferir as indicaes alinhamento, 10 px
1
espaamento, base e linhas. 10 px
2
1 Base do box
230 x 540 px
cor: #072d6d
2 Tamanho da foto
220 x 154 px
3 Tamanho da miniatura 20 px
102 x 72 px
15 px
10 px
10 px
10 px 10 px

Portlets Portal Padro Galeria de udios
Portal Padro Galeria de udios

Apresentao
Composta por ttulo, player com udio em destaque,

ttulo do udio, lista de udios com ttulo, atalho para
acesso a mais udios.
Nesta galeria possvel acessar diversos udios com

possibilidade de interagir dando play, pause, avanar,
retroceder e retirar o som. Na lista o usurio pode
clicar sobre um ttulo descritivo e abri-lo acima.
O usurio pode acessar outros arquivos clicando em

acesse a galeria de udios, que direciona para uma
pgina com lista atual de udios.

coluna da direita.


1 Ttulo do portlet
Open Sans Bold, 16 px 1
cor: #454545
2 Ttulo do udio
cor: #000000
2

cor: #444A53
CAIXA ALTA



1 Base do box 15 px 1
230 x 356 px
2 Base do player 2
206 x 48 px
3 Tamanho do cone
12 x 16 px
15 px
15 px
10 px 10 px

Portlets Portal Padro de udio
Portal Padro de udio

Apresentao
O portlet reproduz arquivos deste tipo de mdia que

estejam hospedados no site. O usurio pode, por
meio de cliques, dar incio (play), pausar ou retirar
o som durante sua navegao.
Os elementos que compem este portlet so ttulo

do udio e player, e ele permite ouvir o udio do site.
H controles de play, pause, avanar, retroceder
e retirar o som.

coluna da direita.


1 Ttulo do udio
cor: #454545 1
2 Tempo
Open Sans Italic, 10 px
cor: #454545 2



1 Base do player
230 x 48 px
2 cone player 10 px
1
23 x 23 px 2 3
cor: #072d6d
3 Tamanho do cone
11 x 11 px 10 px 10 px
cor: #072d6d

Portlets Portal Padro de Vdeo
Portal Padro de Vdeo

Apresentao
Permite ao usurio assistir a um vdeo incorporado

do Youtube, sendo composto por player e legenda.
A descrio do vdeo editvel, com quantidade de
caracteres em aberto.
Atravs do controle nativo do Youtube o usurio pode

dar play no vdeo, pausar, avanar ou retroceder,
retirar o som e assistir ao vdeo em tela cheia.

coluna da direita.

Portlets Portal Padro de Vdeo
Portal Padro de Vdeo

tamanhos, alinhamento, espaamento e cores.
2
1 Ttulo do vdeo
cor: #454545
2 Tamanho da imagem
230 x 129 px
10 px
1


9. Templates
Neste captulo sero apresentados os templates que compe a estrutura de informao visual do leiaute do site.
Templates Agenda
Agenda lista autoridades

Para sites que possuem mais de uma autoridade que
necessite divulgar sua agenda, sugerimos criar uma
capa com a lista de nomes das autoridades com links
para cada agenda individual.

Templates Agenda
Agenda pgina interna

Neste template, a rea de contedo composta pela lista
de compromissos de uma autoridade, enquanto a coluna
direita conta com ferramentas relacionada esquerda.
A coluna esquerda deve manter a coluna de menus do
portal.
Na imagem possvel conferir as informaes essenciais

como: data, horrio, pauta do compromisso, descrio
da pauta e local do encontro, participantes e tambm o
nome da autoridade responsvel. Tambm possvel que
o visitante imprima a agenda, reporte erros ou adicione o
compromisso ao seu calendrio pessoal.
1 Ttulo da agenda 5 Cargo dos

Arial Bold, 21 px participantes 2

cor: #000000
3 4
2 Alterao
Arial Bold Italic, 14 px 6 Local
5
cor: #596E7F Arial Regular, 12 px
cor: #596E7F 6
3 Hora 7
Open Sans Regular, 12 px 7 Adicionar ao meu
cor: #596E7F calendrio
Open Sans, 11 px
4 Ttulo nome cor: #172938
8
dos participantes
Arial Regular, 15 px 8 cones imprimir
cor: #231F20 e reportar erros

Templates Capa
Capa pgina principal (home)

A capa a vitrine de um site (ou de uma rea interna).
neste local em que devem ser destacados os principais
contedos produzidos pela equipe de comunicao de um
rgo.
A imagem ao lado reproduz a capa utilizada para a pgina

principal (tambm conhecido como home) de um site.
Note que contedos produzidos para outras reas internas
(subhomes ou editorias) possui uma cor especfica para que
o visitante consiga identificar o assunto que tratado.
Importante: para que esta identificao ocorra preciso

que as cores usadas nas capas dessas reas internas sejam
correspondentes ao que ser utilizado na pgina principal
do site.
Na prxima pgina confira mais detalhes sobre as cores

disponveis para utilizao.

Templates Capa
Capa pgina principal (home)

As cores ao lado esto disponveis para serem usadas na
capa da pgina principal e nas capas das reas internas
(subhomes).
As indicaes visam a melhor harmonizao cromtica nas

pginas. No entanto, o editor tem livre poder de deciso
para aplic-las como achar conveniente. RGB: 117 57 0 RGB: 100 60 103 RGB: 56 103 183 RGB: 29 87 31
#753900 #643c67 #3867b7 #1d571f
RGB: 1 123 22 RGB: 183 74 0 RGB: 26 85 221 RGB: 86 118 43

#017b16 #ba4a00 #1a55dd #56762b
RGB: 130 105 56 RGB: 59 115 144 RGB: 185 122 0 RGB: 0 67 158
#826938 #3b7390 #b97a00 #00439e

Templates Capa
Capa pgina principal (subhome)

So utilizados os mesmos mdulos da pgina inicial
(home), no entanto, com uma diferena: somente a cor
do nome da editoria (como em Cincia e Tecnologia, no
exemplo da imagem ao lado) utilizada nos elementos
de cor varivel, como nos chapus das chamadas
secundrias.

Templates Capa

Para melhor diviso dos contedos e suas importncias,
apresentamos duas variaes de espaamentos entre
as linhas. 54 px
24 px
As trs primeiras linhas de mdulos apresentam a
distncia de 45 px.
A ltima linha reservada para o agrupamento de

contedos relevantes e/ou mais acessados. Por no 45 px
serem necessariamente produes recentes, esses
contedos no precisam estar no topo da capa.
Por no fazer parte, necessariamente, do restante do

contedo, essa linha apresenta um espaamento de
entrelinha de 30px, um fio de 45 px
1px de altura e mais 30px.
30 px
30 px
75 px
30 px

Templates Capa

A segunda variao do mdulo de notcias exemplificada
ao lado. Nela, a primeira linha dividida em duas colunas
com espaamento de 30px. Na coluna direita (de menor
largura) o espaamento entre cada chamada de 50px.
Assim como na variao anterior, a distncia para a prxima
linha deve ser de 45px.
54 px
24 px
18 px
50 px
30 px
18 px

Templates Capa
Capa montagem de uma capa (home e subhome)

Um dos pilares da Identidade Padro de Comunicao Digital o foco no pblico. O uso de cores para as pginas que compem o item de menu Assuntos podem ser
Por isso, a escolha dos menus feita com base nos principais temas ou assuntos do escolhidas livremente pelo gestor de contedo devendo sempre levar em conta o
rgo e no a sua estrutura organizacional. Por isso, evite o uso de siglas e de nome de estudo realizado pela equipe de arte do rgo.
secretarias (principalmente aquelas s conhecidas internamente) para dar nome a itens
de menu. Prefira termos de fcil entendimento e que venham a atrair o seu pblico. O trabalho conjunto entre a equipe de contedo (que produz textos, vdeos, imagens
e udios), arquitetura de informao (que hierarquiza a disposio desses contedos
Dessa maneira, a navegao deve ser direcionada a partir de itens que refletem em uma pgina), informtica (que garante a infraestrutura necessria para a navegao)
os contedos relevantes para o pblico. Aliado a uma linguagem multimdia de fcil e a equipe de arte (que harmoniza a disposio desse contedo) fundamental para
atendimento, o portal torna-se acessvel a todos os brasileiros. que a informao chegue de maneira clara e rpida ao pblico-alvo, evitando que
a homepage e capas internas tornem-se pesadas, sem qualquer atrativo e de difcil
Alm disso, a montagem de capa deve ser orientada por mdulos que agrupam navegao para o visitante.
informaes procuradas pelos principais pblicos, apresentando, ao mesmo tempo,
contedos pouco acessados que tambm possam ser relevantes audincia. O Portal de Referncia traz alguns modelos de capas para as pginas principais dos
Devem-se evitar redundncias de endereamentos no mesmo nvel de apresentao. portais que seguem a Identidade Padro de Comunicao Digital do Poder Executivo
Em outras palavras, informaes relevantes podem e devem possuir mais de um Federal.
ponto de acesso, entretanto, em pginas diferentes.
A seguir apresentamos alguns modelos de capas de pginas principais. Observe que os
O espao deve ser aproveitado de maneira a que o pblico tenha noo da amplitude exemplos trazem tipos de uso dos mdulos configurados para a Identidade Padro de
dos assuntos tratados, bem como priorize informaes que facilitem o acesso s Comunicao Digital.
utilidades pblicas. Recomenda-se que as informaes mais importantes sejam
publicadas no topo das capas. Vdeos, imagens e demais elementos podem ser usados
para atrair mais a ateno (e permanncia) do visitante em seu portal.

Templates Capa

Capa da pgina principal (home) do Portal de Referncia Capa de rea interna (subhome) - verso 1 Capa de rea interna (subhome) - verso 2

Templates Capa

Capa de rea interna (subhome) - verso 3 Pgina institucional (item de menu de uma subhome) Listagem de contedo (item de menu de uma subhome)

Templates Texto Corrido
Texto Corrido interna de notcias

O template ao lado mostra a configurao do template de
uma notcia aberta (texto corrido) nos sites que seguem
a Identidade Padro de Comunicao Digital.
1 Nome da rea interna 4 Autor da notcia

(editoria) Arial Regular, 12 px 55 px
93 px
Open Sans Bold, 16 px cor: #2C66CE 1
30 px
cor da editoria 2
CAIXA ALTA 5 Dados da publicao

Arial Regular, 12 px 30 px
2 Ttulo da notcia cor: #2C66CE
30 px
3
Arial Bold, 34 px 30 px
4
entrelinhas: 37 px
5
cor: #172938 20 px
3 Linha fina (descrio)

da notcia
entrelinhas: 21 px
cor: #172938


Texto Corrido interna de notcias

6 Subttulo do texto
Arial Bold, 16 px
cor: #172938 30 px
7 Texto da notcia
7
entrelinhas: 21 px
cor: #172938
8 Palavras-chave (tags) e vocabulrios do VCGE 45 px

Arial Regular, 11 px 15 px
cor: #3A70D1 8
15 px


Texto Corrido elementos obrigatrios e contedos relacionados

As notcias publicadas na Identidade Padro de
Comunicao Digital devem conter obrigatoriamente chapu
(uma palavra-chave colocada acima do ttulo de um texto),
ttulo, linha fina (ou subttulo), palavras-chaves, termos do
Vocabulrio Controlado do Governo Eletrnico (VCGE), alm
do prprio texto em si. Tambm deve estar bem visvel a
seo (rea interna ou editoria) na qual aquele texto est
gravado.
Alm desses elementos obrigatrios, o gestor de contedo

poder fazer uso de outros recursos para que o contedo
em texto fique mais atraente para o visitante do site.
Recursos esses que vo de fotos e infogrficos, a vdeos
e postagens em redes sociais.
Tambm possvel indicar contedos relacionados

diretamente com o tema daquela notcia e que ficaro
posicionados na coluna direita do texto. So os portlets
de contedos relacionados.
Por exemplo, um texto que aborde a ao de um

determinado programa do governo federal poder vir
acompanhado de uma galeria de fotos sobre aquele
programa especfico, um udio com declaraes de um
beneficirio e uma galeria de vdeo com demais realizaes
promovidas por aquela iniciativa. Esses contedos reunidos
e organizados em um nico template enriquecem a notcia
entregue para o visitante do site.
Confira a seguir um exemplo de notcia que conta com

contedos multimdias relacionados.

Templates Listagem
Listagem
Template de uma pgina interna que exibe a relao de
notcias, imagens, vdeos e/ou udios publicados em um
site da Identidade Padro de Comunicao Digital.

Templates Listagem
Listagem
1 Ttulo da listagem
cor: #2C66CE
CAIXA ALTA 30 px 1
Chapu do texto 30 px
2 30 px
15 px 3
cor: da editoria
15 px 4
CAIXA ALTA
30 px
5
17 px 30 px
3 Ttulo do texto 30 px
entrelinhas: 21 px
cor: #172938
4 Linha Fina do texto

entrelinhas: 21 px 15 px
cor: #172938 15 px
5 Palavras-chave (tags)
entrelinhas: 16 px
cor: #596E7F
17 px

Templates Listagem
Listagem em Colunas
Template alternativo para a listagem dos contedos
disponveis no site. Nesta configurao, o gestor de
contedo dever dispor as chamadas no miolo da pgina
e pode fazer uso de um recurso grfico (imagem ou vdeo)
para dar mais destaques ao material publicado, como no
exemplo ao lado.

Templates Listagem
Listagem em Colunas
1 Ttulo da listagem
cor: #2C66CE
CAIXA ALTA
30 px 1
2 Descrio da imagem 30 px
entrelinhas: 21 px
cor: #172938
3 Imagem
230 x 136 px 15 px
2
75 px
3
30 px


Templates Listagem
Listagem de lbuns
Template utilizado para listagem dos lbuns
publicados, com uso de imagens e organizao
por data.

Templates Listagem
Listagem de lbuns
1 Ttulo da listagem 30 px
1
Open Sans Bold, 28 px 30 px
cor: #2C66CE 30 px
CAIXA ALTA
2
2 Imagem
230 x 136 px
3 Ttulo do lbum 3
Arial Bold, 16 px
cor: #172938 20px
20px
4 Descrio do lbum
Arial Regular, 15 px 30px
entrelinhas: 18 px
cor: #172938


Templates Listagem
Listagem de Contedos
Neste mdulo podem ser agrupados contedos variados,
como notcias, imagens, vdeos ou udios.
A lista pode ser de apenas um tipo de contedo (somente

notcias, somente udios, por exemplo) ou com mais de um
contedo (lista de notcias, udios e vdeos).
O gestor de contedo pode indicar o que dever ser exibido

para o visitante como: ttulo e descrio de contedo, data
de publicao, imagem e palavras-chave. No exemplo ao
lado, a lista de ltimas notcias exibe apenas a data de
publicao e o ttulo do texto.
Esse mdulo deve ser usado em casos

excepcionais quando necessrio o uso
de chamadas com mais de 55 caracteres
(tamanho mximo de caracteres para uma
chamada)

Templates Listagem
15 px
1 Linha do cabealho
750 x 4 px
1
cor do tema adotado para o site 15 px
2 64 px
2 Base do cabealho
750 x 64 px
20 px
cor: #EEEFF1
20 px
3 Linha do rodap
230 x 1 px
cor: #D6DCD7 15 px
4 Base do rodap
230 x 40 px
15 px
cor: #EEEFF1
15 px
30 px
30 px
3
10 px
4

Templates Listagem
1 Nome da editoria ou mdulo
cor da editoria
1
2 Chapu ou data da matria

CAIXA ALTA 2
cor de link do tema adotado
3 Ttulo da matria em 1 bloco de 490 px

Arial Bold, 30 px
Entrelinhas: 28 px
cor: #172938 3

cor: #335277
CAIXA ALTA


Templates Fotos
Fotos capa
H trs formatos possveis de fotos para 1
aplicao nas capas (homes e subhomes). Porm,
a sua aplicao nunca ocorre isoladamente, e sim
dentro dos mdulos de notcias.
1 Foto para bloco de 230 px

230 x 136 px

490 x 246 px
2

750 x 320 px 3
O uso de fotografias em capas deve

ser sempre acompanhado de um texto
informativo ou institucional.
Imagens que no precisam de texto de

suporte so tratadas como banner.
Saiba mais sobre os formatos disponveis.

Templates Fotos
Fotos internas
Para aplicao nas capas de reas internas, as fotos 1 2
podemocupar blocos com 230, 490 e 750 pixels de
largura do grid destinadas ao contedo.
Porm, a sua aplicao nunca ocorre isoladamente,

15 px
e sim dentro dos mdulos de notcias.
1 Foto para bloco 3 Foto para bloco

de 230 px de 750 px
15 px
230 x 144 px 750 x 517 px 3
2
Foto para bloco A foto sempre acompanhada
de 490 px de uma legenda e dos crditos:
490 x 338 px Legenda e crdito
Arial Regular 11 px
Entrelinhas: 16 px
cor: #172938
mx caracteres: 60

Foto - A miniatura que acompanha os

corridos ocupa 1 bloco de 230 px e abre 15 px
uma foto grande que ocupa 1 bloco de
750 px ao ser clicada. CSS - utilize o
elemento Caption para legendar as fotos.

Templates Manchete
Manchete
Para sites noticiosos como o Portal Brasil, deve-se usar este
mdulo para destacar as notcias mais importantes. Este
mdulo deve ser usado apenas na capa da pgina principal
(home) e logo abaixo do cabealho.
Nas prximas pginas, apresentaremos cinco variaes

da manchete, que buscam contemplar as seguintes
possibilidades de notcias:
com e sem fotos

com vdeo
um assunto (cabealho principal) para todas as
notcias
um assunto para cada notcia (cabealhos individuais)
Todas as variaes ocupam bloco de contedo com 750

pixels de largura do grid.

Templates Manchete
Manchete agrupamento de notcias

1 Agrupamento utilizado quando quando todas as 1
notcias estiverem relacionadas ao mesmo assunto

(consequentemente, dentro da mesma editoria). Neste
caso, todos os chapus da notcia tero a mesma cor
da rea interna (editoria).
2 Agrupamento utilizado para quando cada notcia for

de uma rea interna (editoria) diferente. Neste caso,
cada chapu da notcia ter a cor da sua respectiva
editoria.

Templates Manchete
Manchete chamadas em bloco de 750 px com foto e em bloco de 230 px sem foto
1 Foto grande
15 px
750 x 320 px
canto (raio): 8 px
15 px
15 px
30 px
15 px

Templates Manchete
1 Chapu do texto de destaque 4 Chapu dos textos secundrios 1

cor da editoria cor da editoria
2 Ttulo do texto de destaque

5 Ttulo dos textos secundrios
Arial Bold, 34 px
Arial Bold, 16 px
entrelinha: 37 px
entrelinhas: 21 px
cor: #172938
cor: #172938
mximo de caracteres 55
3 Linha fina do texto de destaque mximo de linhas: 2
entrelinhas: 21 px 6 Linha fina dos textos secundrios
cor: #172938 Arial, 14 px
3
mximo de caracteres: 130 entrelinhas: 21 px 4
cor: #172938
5
mximo de caracteres 55


de caracteres.

Templates Manchete
Manchete chamadas em bloco de 750 px sem foto e em bloco de 230 px com foto
1 Linha inferior do cabealho / divisria
750 x 1 px
cor: #D7D7D7
2 Foto pequena
230 x 136 px 30 px
canto (raio): 8 px 15 px
30 px
1
30 px
8 px
2
15 px
15 px
1
30 px

Templates Manchete
Manchete chamadas em bloco de 750 px sem foto e em bloco de 230 px com foto
1 Chapu do texto de destaque 4 Chapu dos textos secundrios
Open Sans Bold, 16 px Arial Regular, 15 px
cor da editoria entrelinhas: 18 px
mximo de linhas: 2
Arial Bold, 34 px 1
2
entrelinha: 37 px
cor: #172938 3
Arial Bold, 16 px
entrelinhas: 21 px
3 Linha fina do texto de destaque cor: #172938 4
Arial Regular, 16 px mximo de caracteres 55
entrelinhas: 21 px mximo de linhas: 2
cor: #172938
mximo de caracteres: 130 6 Linha fina dos textos secundrios
Arial Bold, 14 px
entrelinhas: 21 px
5
cor: #172938
mximo de linhas: 2


de caracteres.

Templates Manchete
Manchete chamadas sem foto em bloco de 750 px e em bloco de 230 px

1 Linha divisria inferior do cabealho
750 x 1 px
cor: #D7D7D7
30 px
15 px
30 px
30 px
1
30 px
8 px

Templates Manchete
Manchete chamadas sem foto em bloco de 750 px e em bloco de 230 px

cor da editoria cor da editoria

Arial Bold, 34 px
Arial Bold, 16 px 1
entrelinha: 37 px
entrelinhas: 21 px
cor: #172938 2
cor: #172938
3 Linha fina do texto de destaque mximo de linhas: 2
3
entrelinhas: 21 px 6 Linha fina dos textos secundrios
cor: #172938 Arial Bold, 14 px 4
mximo de caracteres: 130 entrelinhas: 21 px 5

cor: #172938
mximo de linhas: 2


de caracteres.

Templates Manchete
Manchete chamada em bloco de 750 px sem foto

1 Linha superior e inferior do mdulo
750 x 4 px
cor: #172938
2 Linha divisria inferior do cabealho

750 x 1 px
cor: #D7D7D7
1
30 px
2
15 px
30 px
30 px
1

Templates Manchete
Manchete chamada em bloco de 750 px sem foto

1 Chapeu do texto
cor da editoria
CAIXA ALTA
2 Ttulo do texto
Arial Bold, 34 px
entrelinha: 37 px
1
cor: #172938
3 Linha Fina do texto

3
entrelinhas: 21 px
cor: #172938


de caracteres.

Templates Manchete
1 Linha divisria
750 x 1 px
cor: #D7D7D7
2 Foto pequena
230 x 136 px
30 px
1
30 px
15 px
35 px

Templates Manchete
Open Sans Regular, 11 px Arial Bold, 16 px
cor da editoria entrelinhas: 21 px
2 Ttulo do texto de destaque mximo de linhas: 2
1
Arial Bold, 34 px
entrelinha: 37 px 5 Ttulo da chamada secundria 2
cor: #172938 Arial Bold, 16 px
mximo de caracteres: 55 entrelinhas: 21 px
cor: #172938
3 Linha fina do texto de destaque 3
mximo de linhas: 2
entrelinhas: 21 px
cor: #172938 4
6 Linha fina chamada secundria
Arial Bold, 14 px 5
entrelinhas: 21 px
cor: #172938 6
mximo de linhas: 2


de caracteres.

Templates Manchete
Manchete vdeo em bloco de 490 px e chamada com foto em bloco de 230 px

1 10 px
Linha superior do mdulo
750 x 4 px 1
cor: #3C7392
30 px
2 30 px
Linha divisria inferior do cabealho
15 px
750 x 1 px
cor: #D7D7D7
3 Player de vdeo
490 x 461 px 30 px
2
4 15 px
Foto pequena
55 px
230 x 136 px
4
canto (raio): 8 px 3
15 px
15 px
15 px
30 px
15 px
15 px
30 px

Templates Manchete
Manchete vdeo em bloco de 490 px e chamada com foto em bloco de 230 px

1 Chapu 4 Chapu da chamada secundria
cor da editoria cor da editoria 1
2 Ttulo da Matria 5 Ttulo dos textos secundrios 2

Arial Bold, 34 px Arial Bold, 16 px
entrelinha: 37 px entrelinhas: 21 px
cor: #172938 cor: #172938 3
mximo de linhas: 2
3 Linha Fina 4
Arial Regular, 16 px 6 Linha Fina dos textos secundrios

entrelinhas: 21 px Arial Regular, 15 px
mximo de caracteres: 130 cor: #172938


de caracteres.

Templates Bloco Temtico de Chamadas
Bloco Temtico de Chamadas

Nesta composio so agrupadas as notcias pertencentes
a uma mesma editoria ou mesmo assunto, com chamadas
dispostas em uma linha com 750 pixels de largura e outra
linha com 230 pixels de largura.


10 px
1 Linha do cabealho de mdulo
750 x 4 px
1
cor da editoria 10 px
2 55 px
2 Base do cabealho de mdulo
24 px
750 x 55 px
10 px
cor: #EEEFF1
3
3 Foto da chamada principal
230 x 136 px
canto (raio): 8 px
Linha divisria interna 30 px

4 4
230 x 1 px 30 px
cor #D6DCD7
5 Foto da chamada secundria

5
230 x 136 px
canto (raio): 8 px
6 Linha do rodap 10 px 30 px
230 x 1 px
cor da editoria
7 Base do rodap de mdulo 30 px 6

10 px
750 x 40 px 40 px
cor: #EEEFF1 7 10 px
30 px


1 Nome da editoria 5 Chapu da chamada
Open Sans Regular, 28 px secundria
cor da editoria Open Sans Regular, 11 px
1
CAIXA ALTA
2 Chapu da chamada principal cor da editoria
CAIXA ALTA 6 Chamada secundria

3
cor da editoria Arial Bold, 16 px
entrelinhas: 21 px
3 Ttulo do texto de destaque cor: #172938
Arial Bold, 30 px
Entrelinhas: 28 px 7 Linha Fina da chamada 4
cor: #172938 secundria

5
4 Linha Final da chamada principal entrelinhas: 18 px
Arial Regular, 16 px cor: #172938
entrelinhas: 21 px
cor: #172938 8 Texto do link no rodap
CAIXA ALTA
cor: #000000 6


Bloco Temtico de Chamadas contedos em blocos de 230 px

Nestas composies, so agrupadas as notcias
pertencentes a uma mesma editoria ou, no caso de um
rgo mais especfico, um mesmo tema. No caso do
Portal Brasil, existe a possibilidade de juntar chamadas
sob um mesmo Tema Relevante. Para outros portais
que no tenham diversas editorias, possvel que o
usurio utilize a opo do mdulo de ltimas notcias.
H variaes de:
altura, para chamadas com ou sem fotos.
ttulo, tanto para abarcar o nome de uma editoria
como o nome de um assunto.

Bloco Temtico de Chamadas contedos em blocos de 230 px

1 Nome da editoria ou seo 5 Texto do link do rodap
Open Sans Regular, 18 px Open Sans Regular, 12 px 1
entrelinhas: 18 px CAIXA ALTA
cor da editoria cor: #172938
2
2 Chapu do texto
CAIXA ALTA
cor da editoria
3 Ttulo do texto
Arial Bold, 16 px 3
entrelinhas: 21 px
cor: # 172938
4
4 Linha fina do texto
entrelinhas: 18 px
cor: #172938

5

10. Banners
Neste captulo sero apresentados possveis formatos de banners para aplicao.
Banners
Formatos
Banner um recurso grfico utilizado para destacar
qualquer tipo de contedo produzido em um portal,
organizar e/ou dar nfase para um plano, programa
e campanha de um rgo do poder executivo ou do
governo federal, servir de ponto de acesso para uma
determinada rea do portal, dar publicidade para
o lanamento de um novo portal, entre outras aes que
tenham como objetivo chamar ateno do visitante.
As pginas seguintes deste captulo exibem diferentes

formatos de banners e exemplos de aplicao em capas
(homepages e subhomes). A funo que o banner ir
cumprir nas capas variado e justamente por isso deve
ser planejado e decidido aps deciso conjunta entre
a equipe de texto e a equipe de de arte da rea de
comunicao de um rgo.
Este recurso deve ser usado com moderao. O gestor de

contedo deve evitar o uso excessivo de banners em uma
mesma capa para que o visitante no tenha a sensao de
que uma capa est pesada e poluda visualmente. Como
se trata de um recurso grfico, a criao desta pea deve
ser feita pela equipe de arte (designers, diagramadores)
da rea de comunicao do rgo.

Banners Formatos
Banner Destaque
Esse banner usado para divulgar campanhas pontuais e
alertas importantes e deve ser usado exclusivamente na
homepage de um portal institucional.
Nesse caso, a pea grfica ser sempre posicionada entre

o cabealho do portal e a coluna de menus e o miolo da
1 Banner destaque - 960 x 100 px
homepage, substituindo a barra de destaque.
1 Banner destaque
960 x 100 px

Banners Formatos
Banner Destaque Interno

Assim como no caso anterior, esse banner deve divulgar
campanhas pontuais e alertas importantes. A diferena
a que a pea deve ser usada exclusivamente nas editorias
(subhomes) de um portal, sempre posicionada no topo do
miolo de contedo.
Banner destaque interno - 750 x 90 px

1 Banner destaque interno 1
750 x 90 px

Banners Formatos
Banner Em Capas retngulo

Existem diferentes maneiras para aplicar o banner na
home e em subhomes.
No exemplo ao lado, o recurso grfico tem a largura de

uma coluna (230 pixels) e pode ser usado em qualquer
uma das colunas do miolo da capa.
1 Retngulo
230 x 120 px
retngulo retngulo retngulo

1
230 x 120 px 230 x 120 px 230 x 120 px

Banners Formatos
Banner Em Capas fullbanner

Na variao ao lado, o grid dividido em duas colunas
estando o banner aplicado na coluna de maior largura
(490 px), sempre esquerda. Este banner pode ser
utilizado tanto na home como nas subhomes.
1 Fullbanner
490 x 70 px

Banners Formatos
Banner Em Capas Square

Existem diferentes maneiras para aplicar o banner na
home e em subhomes.
No exemplo ao lado, o recurso grfico tem a largura de

uma coluna (230 pixels) e pode ser usado apenas na
coluna da direita do miolo da capa. Para evitar que home
e subhome fiquem poludas visualmente, orienta-se que
seja usado apenas um banner por capa.
1 Square
230 x 260 px
Square
230 x 260 px

Banners Formatos
Selo
O banner ao lado cumpre a funo de um selo e seu uso
pode ser variado.
O banner selo pode, por exemplo, indicar ao visitante do

portal que todo o contedo posicionado abaixo pertence
ou tem alguma relao ao tema tratado na arte grfica.
Tambm pode ser utilizado para chamar ateno do

usurio e ser ponto de acesso para reas distintas de um
portal ou outros sites.
Apesar de poder ser utilizado para diferentes situaes,

tanto na homepage quanto nas subhomes, avalie junto
equipe de arte da rea de comunicao do rgo a melhor
maneira de aplic-lo. 1
1 Selo
230 x 70 px

11. Funcionalidades Avanadas
Funcionalidades Avanadas
Funcionalidades Avanadas
O Portal Padro conta com funcionalidades avanadas, aprovadas e recomendadas pela Secretaria de Comunicao Social da Presidncia da Repblica (Secom),
que podem melhorar a experincia do gestor de contedo e/ou dos visitantes de um site ou portal.
Elas no acompanham o pacote de instalao do Portal Padro pois sua implantao poderia aumentar o nvel de complexidade deste produto da Identidade Padro
de Comunicao Digital do Governo Federal ou mesmo ter pr-requisitos que no compem o produto padro. Porm, podem ser teis dependendo do projeto
editorial para sites e portais de um rgo do Poder Executivo.
Para ser escolhida pela Secom para fazer parte desta lista, a funcionalidade deve ser aplicada e testada com sucesso em um portal que aplique a Identidade Padro
de Comunicao Digital do Governo Federal. O teste da funcionalidade deve levar em conta a sua acessibilidade, segurana, navegabilidade e estabilidade de
funcionamento.

Funcionalidades Avanadas Busca Multifacetada
Busca Multifacetada
A Busca Multifacetada uma funcionalidade avanada que proporciona ao gestor de contedo uma ferramenta que melhora a pesquisa de objetos no site, com
diversos formatos de filtros. Ela permite a pesquisa por termos e tambm por perodos de data, podendo seu resultado ser ordenado por mais de um critrio.
O seu funcionamento depende de um correto tagueamento dos contedos de um portal. O uso de palavras-chave em notcias, imagens, vdeos e udios auxilia
o gestor de contedo a criar filtros mais especficos e facilita a busca feita pelos visitantes do site. Confira as orientaes sobre tagueamento no captulo
Recomendaes sobre Tagueamento presente no Manual de Diretrizes, disponvel no Site Secom.
Apesar de no estar no pacote de instalao do Portal Padro, sua aplicao pode ser acessada e testada no novo Portal Planalto e no novo Site Secom. Os dois
portais fazem uso da Busca Multifacetada em diferentes reas e para diferentes tipos de contedo.
No Portal Planalto, por exemplo, esse tipo de busca usado para que o visitante acesse arquivos de udio, textos e avisos de credenciamento para eventos
coordenados pelo Palcio do Planalto.
J no Site Secom, a Busca Multifacetada aplicada, por exemplo, na seo que rene todas as campanhas publicitrias (nos formatos udio, vdeo, texto e imagem)
assinadas pela Secom ou ento que receberam algum tipo de apoio do rgo federal.
Se voc utiliza o CMS Plone, a busca Multifacetada j est pronta para uso. Saiba como realizar a instalao e as configuraes acessando o Manual de Funcionalidades
Avanadas para Portais - CMS Plone. Se utiliza outro CMS, veja a seguir mais detalhes para o desenvolvimento desta funcionalidade.

Busca Multifacetada
1 Campo para entrada de palavras para busca,
seguido pelo boto Pesquisar.
2 Campo de filtros de pesquisa (cabe ao gestor de

contedo definir quais e quantos sero os filtros
da busca multifacetada).
3 Campo de resultado da busca.
3
2

Busca Multifacetada
A Busca Multifacetada permite encontrar contedos Orienta-se que os resultados sejam exibidos em ordem cronolgica inversa (ou seja o mais
publicados em um portal com a utilizao de critrios novo em primeiro lugar) e que o nmero de resultados por pgina seja limitado a 20 itens (ou
de busca mais especficos. Alm do campo de busca por seja quando uma busca apresentar 25 itens, 20 ficam na primeira pgina e os outros 5 em uma
palavras-chaves no topo, a funcionalidade traz filtros de segunda pgina).
busca na coluna lateral direita, definidos segundo a
necessidade de cada rgo, mas sempre contendo a opo
de filtro Por perodo.
Ao escrever uma palavra no campo de busca e clicar no

boto Pesquisar, o visitante ter acesso a uma lista de
resultados em ordem cronolgica de publicao. Os itens
presentes na lista contm data, hora e tipo de contedo
acompanhado de cone exibidos esquerda, alm do ttulo
do contedo, subttulo (se houver) e palavras-chaves (tags)
cadastradas naquele contedo.
Ao clicar em um dos itens o visitante levado diretamente

ao contedo que escolheu, sem uma pgina-pedgio.
Caso a pesquisa no encontre qualquer resultado, a Busca

Multifacetada dever exibir o seguinte texto ao visitante:
No h resultados para esta pesquisa
A ordem de exibio do resultado da busca e a quantidade

de itens que sero exibidos por pginas so definidas pelo
gestor, na rea de configuraes da funcionalidade no
ambiente de gesto de contedo do portal. Tambm cabe
Filtro por
ao gestor a definio sobre quantos e quais filtros de buscas
perdodo
sero disponibilizados bem como que tipo de contedo a
Busca Multifacetada ir procurar.

Busca Multifacetada
A Busca Multifacetada permite que o visitante tenha filtro(s) selecionado(s) anteriormente.
controle sobre aquilo que est pesquisando em um portal.
O campo de busca no possui limite de caracteres, dando

ao visitante a possibilidade de escrever a(s) palavra(s) que
desejar. O resultado para essa busca s ser gerado quando
o visitante acionar o boto Pesquisar. Caso queira alterar
a(s) palavra (s) registrada (s) no campo busca, o visitante
dever pressionar o boto Pesquisar novamente para que
um novo resultado seja gerado.
Caso seja de seu interesse, o visitante poder refinar o

resultado da busca apresentada ao clicar na lista de filtros
definidas pelo rgo, posicionada na coluna direita da
Busca Multifacetada. dada ao visitante a liberdade de
escolher quais e quantos filtros ele deseja aplicar em sua
busca.
Os campos Data de incio e Data final definem o intervalo

Item ativado
de datas no qual a busca deve realizar a pesquisa. Ao clicar
da lista de
sobre um desses campos, ser exibido um calendrio para
filtros
que seja indicado o ano, o ms e o dia.
O resultado s poder ser exibido quando os dois campos

forem definidos e s dever mostrar os itens publicados
no perodo de tempo determinado pelo visitante. Caso
os campos Data de incio e Data final fiquem vazios, a
busca dever apresentar todos os resultados cadastrados
no portal (independentemente de quando) de acordo com
a(s) palavra(s)-chave definida(s) no campo de busca e no(s)

Busca Multifacetada campo de busca

tamanhos, cores, alinhamento, espaamento e base.
1 Ttulo da busca
Open Sans Bold, 13 px - caixa alta
cor: #2c66ce
2 Campo de imput 15 px
1 4
720 x 30 px 5 px
2
cor: #ffffff 10 px
contorno: 1px #cfcfcf 3
15 px
Sem limites de caracteres
3 Boto 15 px
Open Sans Bold, 14 px - caixa alta
cor: #ffffff
130 x 30 px
cor: #7d7d7d
4 Base
750 x 120 px
cor: #e5e8ea

Busca Multifacetada filtros de pesquisa

tamanhos, cores, alinhamento, espaamento e base. 15 px 4
1
18 px
1 Ttulo do filtro
20 px
cor: #172938 2
2 Itens do filtro
cor: #172938
25 px
3
3 Linha pontilhada 25 px
227 x 1px
cor: #172938
4 Base
230 px largura, a altura variavl
cor: # edeff1
contorno: 1px #c0c1c1
12 px

Busca Multifacetada resultado da busca

tamanhos, cores, alinhamento, espaamento e base.
1 Ttulo do resultado da busca

Arial Bold, 16 px 4 1
cor: #172938
20 px
2 Texto do resultado da busca 15 px
2
5
cor: #172938
3 Tags do resultado da busca 25 px

cor: #2c67cd 30 px
6
4 Informaes
Open Sans Regular, 12 px 24 px
cor: #596e7f
cone: 15x15 px
5 Linha pontilhada
1 x 186px
cor: #596e7f
6 Linha divisria
490 x 1px
cor: #596e7f

12. Acessibilidade e Responsividade
Neste captulo sero apresentadas as regras para tornar o site acessvel para pessoas com deficincia visual.
Acessibilidade Alto Contraste
Alto Contraste
Seguindo os padres de acessibilidade para
pessoas com algum grau de deficincia visual,
listamos as regras para alterao de cor vlidas
para todos os elementos:
1 Cor de fundo
Independentemente da cor utilizada, ela
deve ser alterada para preto (#000000).
2 Cor de texto
Independentemente da cor utilizada, ela
deve ser alterada para branco (#FFFFFF).
3 Links
O modo normal do link deve ser sublinhado
para se diferenciar do restante do texto.
O mesmo vale para os modos hover e
active. A cor do link deve ser alterada para
amarelo (#FFF333).
4 cones
Todos os cones devem ser brancos.
5 Linhas e contornos
As linhas e os contornos de elementos
devem ser alterados para branco.

Alto Contraste
udio ltimos Contedos Enquete

Alto Contraste
Foto Galeria de udios Galeria de lbuns

Alto Contraste
Galeria de Fotos e Vdeos Galeria de Vdeos Galeria de Vdeos

Alto Contraste
Editoria em bloco de contedo de 750 px Editoria em bloco de contedo de 230 px Editoria em bloco de contedo de 230 px

Alto Contraste
Redes Sociais Vdeo ltimas Notcias

13. Desenvolvimento
Neste captulo sero apresentadas instrues para fazer o download e implementar os temas e estilos padres no desenvolvimento dos sites.
Desenvolvimento Folha de Estilo
Folha de Estilo
A Secretaria de Comunicao Social da Presidncia
da Repblica (Secom) disponibilizou no github um
produto de tema Diazo pronto para ser utilizado no
CMS Plone:
https://github.com/plonegovbr/brasil.gov.temas

Folha de Estilo
Caso o desenvolvedor utilize outro CMS, pode
obter o estilo por meio do cdigo do Portal
Padro em Plone, que est organizado da
seguinte forma:
- Estrutura do tema:
https://github.com/plonegovbr/brasil.gov.portal/
tree/master/src/brasil/gov/portal/static
- Esquema de cores:
https://github.com/plonegovbr/brasil.gov.temas/
tree/master/src/brasil/gov/temas/themes

Folha de Estilo
Caso o desenvolvedor utilize outro CMS, pode
obter o estilo por meio do cdigo do Portal
Padro em Plone, que est organizado da
seguinte forma:
- Estrutura do tema:
https://github.com/plonegovbr/brasil.gov.portal/
tree/master/src/brasil/gov/portal/static
- Esquema de cores:
https://github.com/plonegovbr/brasil.gov.temas/
tree/master/src/brasil/gov/temas/themes

Desenvolvimento Manuais da Identidade Padro de Comunicao Digital do Poder Executivo Federal
Manuais da Identidade Padro de Comunicao Digital

do Poder Executivo Federal
Todos os manuais referentes Identidade Padro de Comunicao Digital do Poder Executivo Federal esto hospedados e disponveis para download no Site Secom.
Conhea os principais:
Manual de Diretrizes
Material desenvolvido com objetivo de apresentar as funes, vantagens e caractersticas do Portal Institucional Padro, parte integrante do projeto de Identidade
Padro de Comunicao Digital do Poder Executivo Federal.
Guia de Estilo do Portal Institucional Padro

Guia Visual lista as funes, caractersticas e relaes estruturais entre os diversos elementos do projeto grfico, possibilitando a compreenso do conjunto e, ao
mesmo tempo, oferecendo as informaes necessrias para sua correta replicao.
Manual de Gesto de Contedo do Portal Institucional Padro - CMS Plone

Apresenta a verso 4.3 do Plone e seus principais recursos, habilitando o leitor a utilizar suas ferramentas para a gesto de contedo e consequente aplicao nos
demais sites do governo federal desenvolvidos em Plone.
Manual de Funcionalidades Avanadas para Portais - CMS Plone

Apresenta as funcionalidades avanadas, aprovadas e recomendadas pela Secom. As ferramentas podem melhorar a experincia do gestor de contedo e/ou dos
visitantes de um site ou portal.
Manual Tcnico de Instalao do Portal Institucional Padro - CMS Plone

Este documento explica como instalar a implementao modelo do Portal Institucional Padro utilizando o Plone, em um computador com sistema operacional Linux,
empregando a distribuio Debian ou Ubuntu.
Manual de Consulta Rpida para Gesto de Contedo do Portal Institucional Padro - CMS Plone
Trata-se de um guia de consulta rpida para a publicao de contedos nos sites que adotam a Identidade Digital do Poder Executivo Federal. L esto relacionadas
algumas das aes imprescindveis para a publicao dos objetos mais usuais e montagem de capas na plataforma Plone 4.3.
Manuais de apoio
Os demais manuais que fazem parte da Identidade Padro, entre eles o Manual de Orientao para atuao em Mdias Sociais, esto disponveis no Site Secom.

Guia de Estilo Identidade Padrao Comunicacao Digital-IDG

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guia de Estilo Identidade Padrao Comunicacao Digital-IDG

Caricato da

Copyright:

Formati disponibili

Guia de Estilo do Portal

verso 5.0 | 12/2014

1.0 Novembro de 2013 Criao do manual

2.0 Janeiro de 2014 Check in e check out, Agenda, Banner Rotativo

3.0 Fevereiro de 2014 Atualizao do item de Agenda. Correes: Cores

4.0 Maio de 2014 Reformulao do manual

4.1 Setembro de 2014 Atualizao do item Planos e Programas

4.2 Outubro de 2014 Atualizao do item Pgina de Destaque

5.0 Dezembro de 2014 Atualizao de nomenclatura

2 Pilares de comunicao 08 Barra Padro da Identidade Padro

3 Diretrizes de linguagem 13 Barra Inferior da Identidade Padro

7 Pgina de destaque 69 Agenda 133

8 Mdulos 85 9 Portlets 143

Guia de Estilo do Portal Institucional Padro 07

Guia de Estilo do Portal Institucional Padro 09

Experincia digital comum

Guia de Estilo do Portal Institucional Padro 10

Guia de Estilo do Portal Institucional Padro 11

Guia de Estilo do Portal Institucional Padro 12

Indica que o alinhamento do Indica que o alinhamento do

Indica o espaamento vertical Indica que o alinhamento do Indica que o alinhamento do

Guia de Estilo do Portal Institucional Padro 14

1 o grupo da esquerda, que conter sempre o

2 o grupo da direita, que receber o contedo

O espaamento entre esses dois grupos ser sempre MENU

Bloco de contedo com largura de 750 pixels;

O espaamento entre elas sempre ser de 30 pixels.

Guia de Estilo do Portal Institucional Padro 15

Grid telas de 1024 px de largura

1 rea de largura varivel de acordo com

Guia de Estilo do Portal Institucional Padro 16

Grid telas menores que 1024 px de largura

1 rea de largura varivel de acordo com

Guia de Estilo do Portal Institucional Padro 17

Grid telas menores que 768 px de largura

1 rea de largura varivel de acordo com

Guia de Estilo do Portal Institucional Padro 18

Blocos construo de blocos e caixas

Linhas-guia so utilizadas para orientar a construo

Desta forma, caixas da cor cinza com bordas de 1 px,

No captulo Mdulos h o detalhamento

Guia de Estilo do Portal Institucional Padro 19

Blocos estilo e acabamento

As caixas podem ter bordas de 1 px de As abas inativas devem ficar

Guia de Estilo do Portal Institucional Padro 20

Open Sans & Arial

Cada uma delas possui caractersticas prprias

A unidade de medida pt uma referncia

Guia de Estilo do Portal Institucional Padro 21

Link para download da fonte Open Sans.

Guia de Estilo do Portal Institucional Padro 22

Guia de Estilo do Portal Institucional Padro 23

Tipografia comparativo entre famlias tipogrficas

Guia de Estilo do Portal Institucional Padro 24

Tipografia usos especficos

A exceo o chapu, que apesar de ser uma informao

aplicada em um tamanho menor e em caixa alta,

no chapu, utilizada a cor da editoria. Por isso, tem

Guia de Estilo do Portal Institucional Padro 25

Tipografia tamanhos de fonte e entrelinhas

Links no texto (hover)

Para a elaborao do CSS, o desenvolvedor

Guia de Estilo do Portal Institucional Padro 26