Guia de Estilo 2.0.1 PDF

Guia
de estilo
Identidade Padrão de Comunicação
Digital do Poder Executivo Federal
Secretaria Especial de
Versão 2.0.1 Comunicação Social
1 O SISTEMA
2 O SISTEMA
SUMÁRIO
APRESENTAÇÃO 4 6.5 Notícias 36

6.6 Coleções 48
2. PILARES DE COMUNICAÇÃO 5 6.7 Galeria de Fotos 49
6.8 Galeria 50
3. DIRETRIZES DE LINGUAGEM 6 6.9 Carrossel 51
Grid 7 6.10 Linha do Tempo 52
Tipografia 9 6.11 Página de Notícias 53
Elementos de interface 12 6.12 Página de Campanha 54
Cores 13 6.13 Página em Lista 57
6.14 Página de Cobertura em Tempo Real
4. ELEMENTOS DA ESTRUTURA PRINCIPAL 15 (BROADCASTING) 58
4.1 Barra da Identidade Padrão de Comunicação 6.15 Centrais de Conteúdo 60
Digital do Poder Executivo Federal 16 6.16 Informação ao Cidadão 61
4.2 Cabeçalho 17
4.3 Cabeçalho - Campo de Busca Expandido 18 MANUAIS DA IDENTIDADE PADRÃO 65
4.4 Meni 19
4.5 Miolo 20
4.6 Rodapé 21
5. CAPAS 22
5.1 Capas Internas (subhomes) 26
5.3 Montagem de capas - Recomendações 27
6. MÓDULOS 28
6.1 Agenda 29
6.2 Banners 32
6.3 Cabeçalho 34
6.4 Navegação 35
3 O SISTEMA
1 APRESENTAÇÃO
Esse manual apresenta o projeto gráfico da Identidade Padrão de Comunicação Digital do Poder Executivo Federal, com
detalhes sobre cada um dos elementos que a compõem.
O Guia de Estilo complementa o Manual de Diretrizes. Todos os documentos sobre a Identidade Digital estarão publicados no
site da Secretaria Especial de Comunicação da Presidência da República e no Portal Padrão. Esse último é a principal referên-
cia online disponível para os profissionais do Executivo Federal e disponibiliza exemplos de aplicação dos elementos.
As recomendações deste Guia para aplicação dos módulos e peças gráficas são os padrões ideais para que os sites e portais
estejam alinhados à Identidade Digital do Governo. Independente do Sistema de Gestão de Conteúdo (CMS) utilizado, cada
órgão deve adotar as recomendações para que os objetivos do projeto sejam alcançados e para que chegue a toda população de
forma coerente.
4 O SISTEMA
2 PILARES DE COMUNICAÇÃO
A concepção da nova Identidade Padrão atende princípios básicos: Experiência digital comum, Relevância para o público,
Acessibilidade, Economicidade, Credibilidade e Inovação constante.
EXPERIÊNCIA DIGITAL COMUM ACESSIBILIDADE
A Identidade Padrão permite que os cidadãos naveguem Sistemas, ferramentas e linguagem acessíveis a todos os
de forma semelhante nos diversas sítios e portais do públicos para superar as limitações tecnológicas, sociais
Executivo Federal. Isto possibilita que os conteúdos bus- e de capacidade. A Promoção da Acessibilidade (Decreto
cados sejam encontrados facilmente, além de aproximar o 5.296/2004) é um dever do Estado brasileiro.
Estado da população. Além disso, o processo de gestão do
conteúdo é similar para os profissionais que administram
estes ambientes. ECONOMICIDADE
Solução única para todos os sítios e portais do Executivo

RELEVÂNCIA PARA O PÚBLICO Federal, com flexibilidade para atender às necessidades
dos diversos órgãos. Isto significa que estes não precisam
Acompanhar as necessidades e o comportamento dos realizar novos investimentos em outras soluções de arqui-
brasileiros na internet para criar ações de comunicação tetura, layout e desenvolvimento.
funcionais e relevantes para os diversos segmentos sociais.
5 O SISTEMA
CREDIBILIDADE
Tornar os meios oficiais do governo amplamente conhe-

cidos e próximos dos cidadãos, de modo que eles saibam
onde buscar conteúdos de qualidade e oficiais sobre as
ações e políticas públicas.
INOVAÇÃO CONSTANTE
Atualizar os padrões periodicamente em acordo com as

tendências e novas práticas de comunicação na internet,
sobretudo aquelas com aderência dos brasileiros. Além
disso, o compartilhamento de informações entres os ges-
tores de comunicação do governo fomenta a inovação.
6 O SISTEMA
3 DIRETRIZES DE LINGUAGEM
Detalhes sobre o uso correto de cores, tipografias e recomendações gerais de boas práticas de design.
É recomendada a utilização das guias a seguir para personalizar o Portal Padrão, de modo a garantir que todo o conteúdo
governamental publicado na internet seja íntegro e confiável.
As diretrizes estão adequadas ao e-MAG e ao projeto Tangram, desenvolvido pela Diretoria de Tecnologia da Presidência da
República - Ditec.
7 O SISTEMA
Grid
Regras gerais
A divisão do grid é feita através de 12 colunas com as se-

guintes divisões:
Distância das colunas da grid: 20px;

Distância das linhas da grid: 20px;
12 colunas: 1150px; - Tamanho máximo

8 colunas: 760px
7 colunas: 663px
6 colunas: 565px
5 colunas: 468px
4 colunas: 370px
3 colunas: 273px - Tamanho mínimo
A altura varia em relação a cada estilo. A altura de cada

módulo deve ser respeitada para não haver discrepância
no alinhamento e prejudicar a integridade do leiaute.

8 O SISTEMA
Capas
As capas utilizam o tamanho máximo do grid com as variações de largura e altura dos blocos de conteúdo. Os blocos de
conteúdo variam entre notícias e banners.
Variações de notícias Variações de banner GOV BR PARTICIPE SERVIÇOS ORGÃOS DO GOVERNO ∠
GOVERNO DO BRASIL
Rio São Francisco ALTO CONTRASTE VLIBRAS
273 663 273

Sobre a campanha Participe Legislação Fale Conosco O que você procura?
273x103 663x468 273x273

273x273 273x370
273x370 760
760x273 370 !
370 370x370
370x120 1150
370x273 1150x565 565
370x370 565x370
468 663
468x370 663x468
468x468
468
565 468x468
565x273
565x370
GOV BR PARTICIPE SERVIÇOS ORGÃOS DO GOVERNO ∠
DENOMINAÇÃO DO ORGÃO
Nome principal ALTO CONTRASTE VLIBRAS
565x565 Notícias Imprensa Link3 Link4 O que você procura?
Donec entesque, leo

pellentesque
Proin gravida dolor sit amet lacus
accumsan et viverra justo
commodo.
BOTÃO
9 O SISTEMA
Conteúdo interno
As páginas internas de conteúdo de texto corrido possuem

um tamanho máximo de 960px.
Nas páginas internas, as imagens e vídeos possuem tama

nho máximo de 960px.
Nas outras variações, a imagem “sangra” o grid até o

tamanho 1150px, assim como o estilo citação e serviços
vinculados.
Tamanhos de imagens recomendados para notícia interna

565x370
468x370
370x273
565x370
Para páginas que possuem conteúdo em lista, os critérios

de grid em 1150px são mantidos.
10 O SISTEMA
Tipografia
Para a apresentação de todo o conteúdo dos novos sites do

Governo Federal, somente uma família de fonte é utilizada.
A fonte é a Raleway e possui 3 pesos distintos.

Medium, Bold e Black.
Aa
A decisão pela escolha da família de fontes foi tomada a
fim de trazer harmonia, padronização e conforto na leitu-
ra e acessibilidade. Cada uma delas possui características
próprias e ocasiões de uso muito claras que serão apresen-
tadas nas páginas a seguir.
Raleway
11 O SISTEMA
Raleway medium
Raleway bold
Raleway Black
Medium
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcčćdđefghijklmnopqrsštuvwxyzž
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Bold
abcčćdđefghijklmnopqrsštuvwxyzž
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Black
abcčćdđefghijklmnopqrsštuvwxyzž1234567890
‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Font stack: ‘Open Sans’, Arial, Helvetica, sans-serif. Exemplo:

Body {font-family: “Open Sans”, .....}
12 O SISTEMA
TÍTULOS DE PÁGINA
Usos específicos
48px Black
Raleway Medium 36px Black
É usada para texto corrido, linha fina de página, linha fina 16PX MEDIUM
de banner e título de divisão de conteúdo.
LINHA FINA DE PÁGINA
Raleway Bold
É usada para título de tile de notícia e linha fina de página. 26px Bold
18px Medium
Raleway Black
É usada para títulos de página, títulos de tile de notícia e TÍTULOS DE NOTÍCIAS
de notícia interna. 32px Black

28px Bold
Espaçamento vertical 26px Bold
22px Bold
O padrão de espaçamento vertical é baseado no modelo 18px Bold
de proporção áurea com fator de escala 1:1.618.
LINHA FINA DE NOTÍCIAS
O tamanho base de módulos e demais áreas tem como 22px Medium
padrão de altura de linha 1,4 (Fonte + 7px). 14 px Medium
A área de texto de notícia interna tem como padrão de

TÍTULOS BANNER
altura de linha 1,96 (Fonte + 17px).
28px Black
24px Black
LINHA FINA BANNERS
18px Medium
16px Medium
13 O SISTEMA
Elementos de interface
Botões
30px BOTÃO 50px 30px
20px BOTÃO 40PX 20px
15px BOTÃO 30PX 15px
DEFAULT HOVER HOVER NOTÍCIA HOVER SERVIÇOS
BOTÃO 50px BOTÃO 50px BOTÃO 50px BOTÃO 50px
BOTÃO 40px BOTÃO 40px
BOTÃO 40PX BOTÃO 40PX
BOTÃO 30PX BOTÃO 30PX
14 O SISTEMA
Inputs
15 O SISTEMA
Cores
Variações e regras cromáticas
Para apresentar a imagem do Governo Federal a partir de uma identidade única e fornecer maior articulação aos órgãos, foi
desenvolvida uma paleta de cores derivadas de signos nacionais, tais como a Bandeira Nacional, os brasões, insígnias, entre
outros.
Ela contém, subjetivamente, um código cultural, que ressalta a importância dos signos brasileiros. A paleta foi desenvolvida
sob os parâmetros de acessibilidade expostos no e-MAG.
As combinações institucionais em cada esquema de cor são fixas e estão de acordo com as instruções de acessibilidade do
manual.
A percepção de cor depende não apenas da pigmentação das superfícies em si, como também da intensidade e do tipo de
tom aplicados a ela. Esses fatores são determinantes no uso de degradês e contrastes. Dessa forma, sugere-se aplicar sempre o
maior contraste possível sem que se perca a riqueza cromática da paleta.
16 O SISTEMA
ESQUEMA DE CORES 1
Institucional Notícioso Serviços Box colorido Box colorido

RGB (41, 105, 189) RGB (6, 172, 255) RGB (31, 200, 106) RGB (58, 176, 158) RGB (255, 188, 9)
#2969BD #06ACFF #1FC86A #3AB09E #FFBC09
ESQUEMA DE CORES 2
Institucionais Notícioso Serviços Box colorido Box colorido

RGB (251, 251, 251) RGB (255, 109, 38) RGB (31, 200, 106) RGB (124, 79, 44) RGB (255, 188, 9)
#FBFBFB #FF6D26 #1FC86A #7C4F2C #FFBC09
ESQUEMA DE CORES 2
Texto Fundo de seção e hover de tiles

RGB (34, 34, 34) RGB (238, 238, 238)
#222 #EEE
17 O SISTEMA
Esquema de cores 1
A cor azul #2969BD é atribuída ao cabeçalho do tema, caso não haja imagem de fundo, salvo a área de notícia.
A cor azul #06ACFF é atribuída ao cabeçalho de notícias. É vinculada também a itens específicos de leiaute, como chapéu de
notícias, a letra capitular na área interna da notícia, detalhes de bordas em notícia interna e chapéu de notícia didática (entenda).
As cores ciano #3AB09E e amarelo #FFBC09 são para utilização exclusivamente para background do box colorido.
Esquema de cores 2
A cor cinza #FBFBFB é atribuída ao cabeçalho do tema, caso não haja imagem de fundo.
A cor laranja #FF6D26 é atribuída a itens específicos de leiaute, como o chapéu de notícias, a letra capitular na área interna da
notícia, detalhes de bordas em notícia interna, chapéu de notícia didática (entenda) e ícone de vídeo.
As cores marrom #7C4F2C e amarelo #FFBC09 são para utilização exclusivamente do estilo de notícia box colorido.
Esquema de cores padrão

A cor verde #1FC86A é atribuída a serviços. É vinculada também a itens específicos de leiaute, como detalhe de bordas na área
de notícia interna e marcadores de serviços vinculados em notícia interna.
A cor cinza #EEEEEE é atribuída aos fundos de seções, banner tiles e hover de banner tiles.
A cor preta #222222 é atribuída à cor de texto base. É vinculada também a um item específico, que é o cabeçalho da área de
centrais de conteúdo.
18 O SISTEMA
4 ELEMENTOS DA ESTRUTURA PRINCIPAL
Esse capítulo apresenta as características e funcionalidades

dos elementos que compõem a arquitetura e os leiautes
dos sítios e portais do Poder Executivo Federal.
Os elementos que compõem os sítios e portais na Identi-

dade Padrão de Comunicação Digital do Poder Executivo
Federal são:
[1] Barra Padrão de Identidade Digital Padrão

[2] Cabeçalho (header)
[3] Menu Expansível (em formato hambúrguer)
[4] Miolo
[5] Rodapé
[6] Barra de Assinatura da Identidade Padrão
19 O SISTEMA
4.1 Barra da Identidade Padrão de Comunicação Digital do Poder Executivo Federal
A barra é o único elemento da Identidade Padrão que não [1] Governo do Brasil
dispõe de variações de aplicação. Isto significa que ela será Link do portal Governo do Brasil, que agrega informações,
sempre aplicada da mesma maneira nos sítios e portais serviços e notícias sobre as ações dos órgãos do Executivo
do Executivo Federal, uma vez que cumpre a função de Federal
identificar, chancelar e integrar os ambientes digitais sob
responsabilidade do governo. [2] Participe
Leva o usuário para uma área que apresenta todos os ca-
A barra tem gestão centralizada e a replicação é feita de nais de participação social
forma única em todos os sítios e portais da administração
pública federal. Está hospedada no Serviço Federal de [3] Serviços
Processamento de Dados (SERPRO). Link para o Portal de Serviços, que apresenta informações
sobre todos os serviços disponibilizados pelo Executivo
Eventualmente, poderá ser customizada pela SECOM em Federal
ocasiões especiais, como para destacar datas e campanhas
com grande relevância social. [4] Órgãos do Governo
Conta com um botão dropdown com lista de todos os
A partir dela, o cidadão pode ter acesso às principais in- órgãos de primeiro escalão do Executivo Federal
formações e canais de comunicação do Executivo Federal
por meio de links diretos. A barra conta com os seguintes
itens:
20 O SISTEMA
Especificações técnicas
[1] Participe, Serviços, Órgãos de governo

Raleway-Bold, 11px, #fff
[2] Órgãos de governo

21 O SISTEMA
4.2 Cabeçalho
O cabeçalho é um dos principais elementos que destaca a chancela de uma instituição sobre um ambiente digital. Localizado
no topo da capa, traz a assinatura do órgão e garante que se trata de um ambiente sob responsabilidade do Executivo Federal.
A Identidade Padrão conta com um cabeçalho simples e moderno, que possibilita uma navegação intuitiva com acesso para as
principais áreas do site.
Nome Principal ALTO CONTRASTE VLIBRAS
Notícias Imprensa Link 1 Link 2 O que você procura?
Denominação do órgão Ícone menu expansível em formato hambúrguer

Raleway-Bold, 10px, #fff (ou #222 dependendo do tema) 24px/20px
Nome Principal Itens de menu abertos e permanentes

Raleway-Black, 26px, #fff (ou #222 dependendo do tema) Raleway-Medium, 17px, #fff
Barra de Acessibilidade Campo de busca

Raleway-Bold, 11px, #fff (ou #222 dependendo do tema) Raleway-Medium, 12px, #222
Barra de Idiomas [não aplicar sigla do país do padrão da

língua estrangeira]
22 O SISTEMA
Aplicação de marcas no cabeçalho Recomenda-se utilizar a imagem com preenchimento
total de cor.
Empresas públicas, órgãos das Forças Armadas, autarquias O tamanho máximo do símbolo é de 70x70 pixels (largura
e outras instituições que tenham logomarca própria po- e altura), sempre com fundo transparente.
dem aplica-la no cabeçalho dos seus sites e portais, desde
que respeitadas as seguintes recomendações: A área máxima é correspondente a área útil. Ou seja, caso
o símbolo esteja em posição vertical, a altura máxima deve
A imagem deve ter o mínimo de contraste exigido pe- permanecer 70 pixels, de modo que a largura será definida
las diretrizes do Modelo de Acessibilidade em Governo automaticamente.
Eletrônico – eMAG.É possível verificar os níveis de con-
traste na seguinte plataforma: https://webaim.org/resources/ Recomenda-se a utilização “chapada” do símbolo, com
contrastchecker/. o menor número de cores possível, para que a leitu-
ra não seja prejudica. É possível inserir duas imagens
para aplicações em fundo escuro e fundo claro, caso seja
necessário.
MINISTÉRIO DA DEFESA
Força Aérea Brasileira ALTO CONTRASTE VLIBRAS
Nome principal ALTO CONTRASTE VLIBRAS
Nome do orgão ALTO CONTRASTE VLIBRAS
23 O SISTEMA
4.3 Cabeçalho – Campo de Busca Expandido
A Identidade Padrão conta com duas possibilidades de aplicação da busca: reduzida e expandida. A primeira opção está apre-
sentada no item anterior. Na outra versão, a busca ocupa a área nobre da homepage acompanhada por uma imagem de fundo
(background), que destaca uma campanha ou ação importante do governo no período.
A alternativa deve ser usada quando a propriedade digital contar com um número de atualizações diárias que justifique o em-
prego desta. O objetivo é oferecer uma via direta ao cidadão para acessar o conteúdo que deseja. Os critérios para aplicação desta
busca estão definidos no Manual de Diretrizes da Identidade Padrão de Comunicação Digital do Poder Executivo Federal.
Neste caso, o menu quente (hot menu) destaca os principais temas do dia e permite que o usuário acesse uma lista com todos
os conteúdos publicados no portal sobre um assunto. A seleção dos temas é feita pelos gestores de conteúdo, que podem defi-
nir até cinco e, no mínimo, três destaques.
24 O SISTEMA
Denominação do órgão
Nome Principal
Raleway-Black, 26px, #fff
Barra de Acessibilidade
Barra de Idiomas
Raleway-Bold, 11px, #ffffff
Menu Expansível em formato hambúrguer

24px/20px
Campo de busca (760px/60px)

Raleway-Medium, 14px, #222
Menu quente (hot menu)

25 O SISTEMA
4.4 Menu
O menu apresenta ao cidadão as principais áreas de um sítio, de modo que ele poderá ir diretamente para a seção temática
que deseja. Na Identidade Padrão, a estrutura completa de menu é acessada a partir do botão “hambúrguer” (representado por
três pequenas linhas horizontais sobrepostas) situado no lado esquerdo da parte inferior do cabeçalho. Com um clique, é aber-
ta uma caixa com todos os itens referentes ao primeiro e segundo níveis de navegação.
Ao lado do hambúrguer, devem ser destacadas as quatro principais seções do portal, que podem ser definidas em acordo com
o número de acessos ou com o interesse do órgão em priorizar algo. Essa opção indica ao visitante que é possível navegar tam-
bém por meio do botão lateral, além de oferecer as opções de acesso direto a temas relevantes. O menu de relevância deve ser
definido com base nas buscas do usuário e no interesse do órgão em dar visibilidade ao tema.
Conheça os principais elementos do menu
[1] Botão “Hambúguer”

[2] Menu de Relevância
[3] Menu Principal
[4] Centrais de Conteúdo
[5] Canais de Fale Conosco
[6] Redes Sociais
26 O SISTEMA
[1] Menu de Relevância

Raleway-Medium, 14 px, #fff (ou #222 dependendo do tema)
[2] Menu Principal - Título

Raleway-Black, 20px, #222
[3] Menu Principal – Itens das colunas

Raleway-Medium, 14 px, #222
[4] Ícones de Mídias Sociais

25x25px, #222
27 O SISTEMA
4.5 Miolo
A área principal do sítio destaca os conteúdos produzidos por cada órgão. Por meio dos módulos previstos, as diferentes in-
formações podem ser apresentadas em acordo com o formato disponível, objetivo da mensagem e aderência junto ao público.
Assim, é possível construir capas (homepage e subhomes) e páginas internas com texto, vídeos, áudio, imagens e publicações
em mídias sociais.

As diferentes formas, comportamentos e funcionalidades dos módulos estão descritas no capítulo Módulos deste Guia.
28 O SISTEMA
4.6 Rodapé
O rodapé (footer) ocupa a parte inferior da estrutura padrão dos sítios e portais na Identidade Digital do Executivo Federal.
Trata-se de mais um elemento que assegura a credibilidade do ambiente quando o usuário chega ao final. Além de apresentar
atalhos para as diferentes áreas do sítio, a estrutura conta com o link para o site da Lei de Acesso à Informação e link para o
próprio portal aplicado na logomarca do Governo do Brasil.
Confira as características dos elementos que formam o rodapé:
Linha de Redes Sociais
Título
Raleway-Black, 20px
#222
Ícones
Facebook - #3C5395
Twitter - #009DE3
YouTube - #C80500
Instagram - #205585
Google Plus - #F53A09
Flickr - #0058DA e FF007C
Soundcloud - FC3C00
Assinatura de Newsletter
Título
Raleway-Black, 20px
#222
Campo de assinatura
Raleway-Medium, 14px
#222
29 O SISTEMA
5 CAPAS
As capas são as principais portas de entrada de um portal ou de uma seção temática interna. Esses espaços destacam os prin-
cipais conteúdos produzidos pela equipe de comunicação. Ou seja, trata-se de uma espécie de vitrine que expõe as principais
ações, projetos e serviços oferecidos pelo órgão.
As informações são organizadas e disponibilizadas no miolo do portal por meio dos módulos disponíveis na Identidade Pa-
drão, em acordo com os critérios editoriais definidos pelos gestores de conteúdo.
As imagens a seguir reproduzem um exemplo da capa principal (também conhecida como homepage) e subcapa (subhome)
temática. Na prática, existe uma hierarquia informacional entre esses ambientes, de modo que a homepage apresenta os con-
teúdos mais relevantes das diversas seções/editorias e as subhomes permitem que o cidadão se aprofunde e encontre outras
informações específicas sobre cada tema.
30 O SISTEMA
31 O SISTEMA
5.1 Capas Internas (subhomes)
As capas internas permitem organizar conteúdos por

assuntos ou editorias. É possível usar os mesmos módulos
para montar a home principal, além de criar outros
subtemas vinculados a um mesmo assunto.
32 O SISTEMA
5.2 Montagem de capas - Recomendações
Um dos pilares da Identidade Padrão de Comunicação Digital é o foco no público. Por isso, a escolha dos menus é feita com
base nos principais temas ou assuntos de atuação do órgão. Não é recomendado replicar a sua estrutura organizacional no
menu. Por isso, evite o uso de siglas e de nome de secretarias (principalmente aquelas só conhecidas internamente) para dar
nome a itens de menu. Prefira termos de fácil entendimento e que venham a atrair o seu público.
Dessa maneira, a navegação deve ser direcionada a partir de itens que refletem os conteúdos relevantes para o público. Aliado
a uma linguagem multimídia cidadã, o portal torna-se acessível a todos os brasileiros.
Os conteúdos podem ser organizados na capa por blocos temáticos e em acordo com os assuntos e serviços mais buscados.
Deve-se também dar destaque a conteúdos pouco acessados, mas que possam ser relevantes para a audiência. É importante
evitar chamadas e endereçamentos repetidos no mesmo nível de apresentação. Ou seja, informações relevantes podem e de-
vem possuir mais de um ponto de acesso, desde que em páginas diferentes.
O espaço deve ser aproveitado de maneira que o público tenha noção da amplitude dos assuntos tratados, bem como priorize
informações que facilitem o acesso aos serviços e demais conteúdos de utilidade pública. Recomenda-se que as informações
mais importantes sejam publicadas no topo das capas. Vídeos, imagens e demais elementos devem ser usados para atrair mais
a atenção (e permanência) do visitante nos portais.
A elaboração de uma capa deve ser planejada de forma conjunta, com a participação das equipes de conteúdo, designers, ar-
quitetos da informação e informática. Isto garante que ações de comunicação sejam elaboradas abarcando todas as dimensões
da navegação e do consumo dos conteúdos.
33 O SISTEMA
6 MÓDULOS
Este capítulo detalha as funcionalidades e possíveis usos dos módulos na elaboração de capas e páginas internas na Identidade
Padrão.
MÓDULOS

Módulos são estruturas de entrega de conteúdo (imagens, vídeos, textos, áudios, publicações em redes sociais) que compõem
as páginas e capas de um site em CMS Plone. Os módulos são flexíveis e, em geral, podem ser configurados para receber dife-
rentes tipos de conteúdos em diversos tamanhos. A descrição das funcionalidades de cada um deles está no Manual de Gestão
de Conteúdo em Plone da Identidade Padrão e no Guia de Estilo da Identidade Padrão. Além disso, a estrutura modular per-
mite que os módulos sejam aplicados ou retirados conforme as necessidades do gestor de conteúdo.
Ainda que possam ser usados em tamanhos variados e serem independentes entre si, existem regras de composição a serem
seguidas para garantir a acessibilidade e a compreensão dos conteúdos pelos visitantes.
Temos dois grupos de módulos:
• os utilizados apenas nas homes e subhomes, com chamadas e links para os conteúdos reunidos sobre os temas que elas
abordam;
• os que se configuram como páginas internas, que agregam links e informações sobre o assunto abordado.
Nas capas (home e subhomes), os módulos devem ser organizados de forma que, em uma mesma linha, todos tenham a mesma
altura. Isto evita que apareçam espaços em branco entre eles.
Acompanhe a seguir exemplos de formas corretas de aplicar os módulos:
34 O SISTEMA
CORRETO CORRETO ERRADO
370 x 120 370 x 120 370 x 120
760 x 273 370 x 273

468 x 370 273 x 370 370 x 370 565 x 120 565 x 120
273 x 273 273 x 273 273 x 273 273 x 370

273 x 370 273 x 370 273 x 370 273 x 370
565 x 370 565 x 370
370 x 273 370 x 273 370 x 273

370 x 370 370 x 370 370 x 370
663 x 468 468 x 468
565 x 273 565 x 273
468 x 370 273 x 370 370 x 370
760 x 273 370 x 273
565 x 565 565 x 565
35 O SISTEMA
6.1 Agenda
Dar publicidade aos compromissos das autoridades públicas durante o período de trabalho é um compromisso com a demo
cracia e com a transparência das ações públicas. O módulo de agenda tem como objetivo permitir que os brasileiros acompan-
hem a rotina de atividades dos servidores que ocupam cargos diretivos e de assessoramento.
A Lei de Conflito de Interesses (Lei 12.813/2013) e a Lei de Acesso à Informação (Lei 12.527/2011) determinam a publicação
diária das agendas dos ocupantes dos seguintes cargos:
• Ministro de Estado.
• De natureza especial ou equivalentes.
• De direção e assessoramento superior (DAS) níveis 6 e 5.
• De presidente, vice-presidente e diretor, ou equivalentes, de autarquias, fundações públicas, empresas públicas ou socie-
dades de economia mista.
Na capa, o módulo de agenda pode ser aplicado para apresentar os compromissos diários de uma autoridade pública, inclusive
com possibilidade de navegação por dia, mês e ano. Três compromissos são mostrados com base na proximidade do horário
de acesso do usuário, mas também é possível navegar para ver todos os compromissos do dia.
Acompanhe a configuração do módulo de agendas em capas, que sempre deve estar aplicado em todos o grid (três colunas):
36 O SISTEMA
Título
Calendário
Data
Dia da semana
Compromissos do dia
Raleway-Medium, 16px, #fff
Nome do local e horário

do compromisso
Botão de Acesso à Agenda Completa

Raleway-Bold, 16px
Página Interna de Agenda
O módulo de agenda em uma capa é um caminho de acesso para a área interna
de agenda de uma autoridade, que também pode ser acessada por qualquer outro
link direto. Uma vez na página de agenda, o usuário pode visualizar de uma só vez
todos os compromissos do dia e navegar também por dia, mês e ano para conhecer
os compromissos anteriores.
37 O SISTEMA
38 O SISTEMA
Título com o nome da autoridade

Raleway-Black, 36px
#222
Campo de busca
#222
Hora
#222
Nome e cargo da autoridade

Raleway-Bold, 24px
#222
Local do compromisso
#222
Adicionar ao meu calendário

#222
Quando for necessária a divulgação da agenda de mais de uma autoridade no sítio
de um órgão, deve-se criar uma capa com a lista de nomes e respectivos cargos com
links para as páginas internas com a agenda completa.
39 O SISTEMA
6.2 Banners
Tamanho base do módulo

273px
[1] Imagem
273x273px
[2] Alinhamento de texto
Esquerda, direita e centro
[3] Título
Raleway-Black, 24px, #fff ou #222

Título
24px black

273px
[1] Imagem
565x273px
[2] Alinhamento de texto Título
Esquerda, direita e centro 24px black
[3] Título
40 O SISTEMA

273px
[1] Imagem
273x273px
[2] Alinhamento de texto TÍTULO
Lorem ipsum dolor sit amet,
[3] Título
consectetur adipiscing elit.
[4] Subtítulo
BOTÃO
Raleway-Medium, 16px, #fff ou #222

273px
[1] Imagem
273x273px
TÍTULO
Esquerda, direita e centro 24PX BLACK
[3] Título
Raleway-Black, 24px, #fff ou #222 consectetur adipiscing elit.
[4] Subtítulo
Raleway-Medium, 16px, #fff ou #222 BOTÃO
[5] Botão
Botão 2
41 O SISTEMA

565px
[1] Imagem
565x370px
[3] Título
[4] Subtítulo

468px
[1] Imagem
468 x 468px
[3] Título
[4] Subtítulo
42 O SISTEMA

663px
[1] Imagem
663 x 468px
[2] Alinhamento de texto Título 24px black texto
Esquerda, direita e centro centralizado
[3] Título
consectetur adipiscing elit.
[4] Subtítulo
Raleway-Medium, 16px, #fff ou
#222
43 O SISTEMA
6.3 Cabeçalho
O cabeçalho é utilizado para introduzir e indicar ao visitante o assunto que será abordado após o local onde esse componente
é aplicado. Além disso, no sistema de gestão de conteúdo, é possível configurá-lo para ser usado como link, botão para outra
página e fio separador entre linhas.
60px
Título padrão página 36px black

40px
Raleway-Black, 36px ou 48px
#222
Botão com link
Raleway-Bold, 16 px
#222
44 O SISTEMA
6.4 Navegação
O módulo de navegação serve para criar submenus em capas e seções temáticas que tenham terceiro ou quarto nível de
navegação. Ao lado esquerdo, é destacado o nome da seção e, ao lado direito, os nomes das subseções.
Se a área tiver até três subseções, elas ficam todas visíveis para o usuário. Caso tenha mais de três, deve-se destacar as três mais
importantes para ficarem sempre visíveis e as demais mostradas por meio do botão “+” no canto direito do topo da área. Se
desejar, o gestor de conteúdo também pode organizar o menu por ordem alfabética ou outros critérios editoriais.
Assunto 1 Subeditoria1 Subeditoria2
Subeditoria3
Subeditoria4
Subeditoria5
Subeditoria6
Subeditoria7
Subeditoria8
[1] Nome principal da seção/editoria

Raleway-Black, 36 px
#222
[2] Nome das subseções/subeditorias

#222
45 O SISTEMA
6.5 Notícias
O objetivo deste módulo é apresentar os conteúdos noticiosos produzidos pelos gestores de conteúdo para os sítios e portais
do Poder Executivo Federal. Os módulos podem ser configurados para se adequarem a diversos tamanhos e ao uso de conteú-
dos multimídia quando necessário.
Confira as possibilidades do uso do módulo de notícias:
Manchete de Capa (Homepage)
A manchete na capa dos portais destaca a notícia mais importante, que sempre deve ser acompanhada por uma foto ilustrativa
do tema ou evento abordado. Na Identidade Padrão, a imagem (foto ou vídeo) utilizada em uma manchete torna-se o fundo
(background - BG) do topo do portal, o que inclui o cabeçalho e menu.
46 O SISTEMA
Importante: A imagem ou vídeo utilizado neste módulo
devem conter contraste suficiente para não prejudicar a
visualização do conteúdo. Procure utilizar imagens sem
muitos detalhes e, se possível, ajustadas por meio de
programas de edição.
[1] Tamanho da foto ou vídeo de fundo

1440 x 680
[2] Título da manchete
[3] Linha fina da manchete
47 O SISTEMA
Quando necessário, é possível destacar ainda matérias
complementares de uma cobertura especial sobre um
assunto ou evento. O recurso deve ser utilizado quando
houver, no mínimo, duas matérias e, no máximo, quatro.
Isto significa que as chamadas devem ocupar apenas uma
linha abaixo da manchete.
[1] Tamanho da foto ou vídeo de fundo:

1440 x 830px
[4] Título das matérias
complementares
[5] Linha fina das matérias
complementares
Importante: A imagem ou vídeo utilizado no topo deve conter contrastes suficien-

tes para não prejudicar a visualização do conteúdo. Procure utilizar imagens sem
muitos detalhes e, se possível, ajustadas por meio de programas de edição.
48 O SISTEMA
Com texto separado da imagem
Recomendações de uso
Esse estilo utiliza tamanho e peso de fontes similares a

outros estilos de notícia, tornando fácil a composição de
capas noticiosas internas.
Variações de tamanho:

370px
[1] Imagem
370x370px ETIQUETA DA NOTÍCIA
[2] Chapéu Título da notícia Bold, 22px

Raleway-Bold, 14px, #06ACFF espaçamento 29px até 80
[3] Título da manchete caracteres e 3 linhas
Raleway-Bold, 22px, #222 Linha fina de notícia Medium com 16px

espaçamento 25 x caracteres e 2 linhas
49 O SISTEMA

273px
[1] Imagem
273x273px
[2] Chapéu
Raleway-Bold, 14px,
#06ACFF
Raleway-Bold, 20px, #222 ETIQUETA DA NOTÍCIA

Título Bold, 20px
Não existe
espaçamento 29px
máximo de 3 linhas
! "

565px
[1] Imagem
273x273px
[2] Chapéu
Raleway-Bold, 14px, #06ACFF
50 O SISTEMA
Tamanho base do módulo ETIQUETA NOTÍCIA

370px
[1] Imagem Título da notícia
175x175px
[2] Chapéu Bold, 18px
Raleway-Bold, 14px, #06ACFF espaçamento 25px
Raleway-Bold, 16px, #222
título da notícia
51 O SISTEMA
Com imagem de fundo sem máscara
Essa variação aplica-se melhor em capas de homepages. A pos-

sibilidade de utilizar esse estilo permite que a imagem faça parte
do conteúdo em primeiro plano. É necessário a manipulação
em programas de edição de imagem para melhor aplicação.

370px
[1] Imagem
370x370px
[2] Largura do texto
70%
[3] Chapéu
Raleway-Bold, 14px, #fff, opacidade 0.8
52 O SISTEMA

468px
[1] Imagem
468x370px
70%
[3] Chapéu

565px
[1] Imagem
565x370px
70%
[3] Chapéu
53 O SISTEMA

468px
[1] Imagem
468x468px
70%
[3] Chapéu

663px
[1] Imagem
663x468px
70%
[3] Chapéu
Raleway-Bold, 14px, #fff,
opacidade 0.8
54 O SISTEMA

565px
[1] Imagem
565x565px
70%
[3] Chapéu
55 O SISTEMA
Com imagem de fundo e com máscara
Recomendações de uso:
Essa variação aplica-se melhor em capas de homepages. A

possibilidade de utilizar esse estilo permite que a imagem
faça parte do conteúdo em primeiro plano. É necessário
a manipulação em programas de edição de imagem para
melhor aplicação.
Importante: A imagem ou vídeo utilizado no topo deve

conter contrastes suficientes para não prejudicar a
muitos detalhes e, se possível, ajustadas por meio de pro-
gramas de edição.

273px
[1] Imagem
273x273px
[3] Chapéu
56 O SISTEMA

273px
[1] Imagem
273x370px
[3] Chapéu

370px
[1] Imagem
370x273px
[3] Chapéu
57 O SISTEMA

565px
[1] Imagem
565x273px
[3] Chapéu

370px
[1] Imagem
370x370px
[3] Chapéu
58 O SISTEMA

468px
[1] Imagem
468x370px
[3] Chapéu

663px
[1] Imagem
663x468px
[3] Chapéu
59 O SISTEMA

565px
[1] Imagem
565x565px
[3] Chapéu
opacidade 0.8

1150px
[1] Imagem
1150x565px
[3] Chapéu
opacidade 0.8
60 O SISTEMA
Sem imagem
Recomendações de uso:
Esse estilo utiliza tamanho e peso de fontes similares a

outros estilos de notícia, tornando fácil a composição de
capas noticiosas internas. Também possui tamanhos de
manchete maiores, possibilitando destaque sem a necessi-
dade de imagem.

273 x 273px
[1] Chapéu
ETIQUETA DA NOTÍCIA
Título da notícia
Bold, 22px
espaçamento 29px
60 caracteres
61 O SISTEMA
370 x 273px
[1] Chapéu
Raleway-Bold, 14px, #06ACFF ETIQUETA DA NOTÍCIA
Raleway-Bold, 22px, #222 Título da notícia Bold, 22px
[3] Linha fina da manchete espaçamento 29px
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam eu urna diam. Cras eget
nulla eu justo

565 x 273px
[1] Chapéu
Raleway-Bold, 14px, #06ACFF Título da notícia Bold, 26px espaçamento 33px
[2] Título da manchete Lorem ipsum dolor
[3] Linha fina da manchete Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu urna
Raleway-Medium, 14px, #222 diam. Cras eget nulla eu justo Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam eu urna diam. Cras eget nulla eu justo
62 O SISTEMA
565 x 370px
[1] Chapéu
Título da notícia
[2] Título da manchete Black, 48px
[3] Linha fina da manchete espaçamento 55px
Raleway-Medium, 14px, #222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu urna
diam. Cras eget nulla eu justo Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam eu urna diam. Cras eget nulla eu justo

760 x 273px
[1] Chapéu Título da notícia Black, 48px
[2] Título da manchete espaçamento 55px
Raleway-Black, 48px, #222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit lorem felis, et congue urna convallis a. In
maximus nisl eu tincidunt vulputate. Nam laoreet dui eu sapien lacinia, id aliquam dolor consequat.
63 O SISTEMA
273 x 103px
[1] Título da manchete Título da notícia Bold,
26px espaçamento 33px
60 caracteres

370 x 120px

565 x 120px
64 O SISTEMA
Notícia destaque sem imagem e sem linha fina
Esse estilo utiliza tamanho e peso de fontes fixos.

Recomenda-se que seja utilizado em capas de homepage.
Variações de tamanho
Título da
Tamanho base do módulo notícia Black,
273 x 370px
28px
100% espaçamento
[3] Chapéu
Raleway-Bold, 14px,
35px
#06ACFF
65 O SISTEMA

370 x 370px
70% ETIQUETA DA NOTÍCIA
[3] Chapéu
Raleway-Bold, 14px, #06ACFF Título da notícia
Black, 28px
espaçamento
35px
66 O SISTEMA
Destaque de capa interna
As capas internas podem contar com um destaque noticio-

so, que assim como na homepage deve ser acompa
nhado por uma imagem. O lugar é destinado à notícia
mais importante do dia do assunto abordado na seção.
Exemplo de Editoria com menu aberto
67 O SISTEMA
Importante: A imagem ou vídeo utilizado no topo deve
conter contrastes suficientes para não prejudicar a
muitos detalhes e, se possível, ajustadas por meio de pro-
gramas de edição.
Exemplo de Editoria com menu fechado
[1] Tamanho da imagem

1150 x 565px
[2] Chapéu da matéria com
até duas linhas
[4] Linha fina
68 O SISTEMA
Citação
O módulo de citação permite destacar nas capas o depoi-

mento de um personagem de uma matéria. Para contex-
tualizar o leitor, ele deve ser usado sempre ao lado de uma
chamada com o título da notícia de referência. O objetivo
é atrair a atenção do leitor explorando um discurso forte e
impactante sobre um assunto.
Tamanho do módulo
760px
[1] Chapéu da matéria Módulo de notícia com
Raleway-Bold, 14px, #fff – Background #06ACFF Módulo de citação e foto ao lado
[2] Título da manchete notícia com esquerdo Módulo de
Raleway-Bold, 28px, #222 notícia com citação
citação e foto ao
[3] Citação
lado esquerdo Lorem ipsum dolor sit amet,
Raleway-Bold, 28px, #fff – Background #06ACFF
[4] Crédito citação ! "
Raleway-Bold, 16px, #fff – Background #06ACFF
69 O SISTEMA
6.6 Coleções
As coleções agrupam conteúdos a partir de critérios definidos pela equipe de gestão portal. Isto significa que o módulo mostra
os conteúdos que atendem aos filtros definidos internamente, como por exemplo pasta de publicação original, formato, data
de publicação, tags, entre outros.
Exemplo de coleção de notícias:
Especificações técnicas Últimas notícias

[1] Título da Coleção
[2] Chapéu da manchete ETIQUETA DA NOTÍCIA ETIQUETA DA NOTÍCIA ETIQUETA DA NOTÍCIA ETIQUETA DA NOTÍCIA
Raleway-Bold, 14px, #06acff

Título da notícia Título da notícia Título da notícia Título da notícia
[3] Título da manchete Bold, 26px Bold, 26px Bold, 26px Bold, 26px
Raleway-Bold, 22px, #222 espaçamento 33px espaçamento 33px espaçamento 33px espaçamento 33px
[4] Botão de acesso à coleção 60 caracteres 60 caracteres 60 caracteres 60 caracteres
completa
MAIS NOTÍCIAS
70 O SISTEMA
6.7 Galeria de Fotos
O módulo apresenta um conjunto de fotografias disponibilizado para o usuário, com opção de ampliar e baixar a imagem. O
usuário pode navegar por meio dos atalhos laterais (slider) de navegação e entender o contexto a partir da legenda aplicada em
cada uma delas. Quando apenas uma foto estiver disponível, o slider é desabilitado.
[1] Título da galeria

Raleway-Black, 36 px, #222
[2] Tamanho das imagens
1150 x 565px
[3] Legenda/Descrição da foto/
Crédito da foto
71 O SISTEMA
6.8 Galeria
O módulo apresenta imagens e banners com links para páginas externas ou outros sítios e portais, que podem ser campanhas,
programas ou qualquer outra ação do governo.
Todas as imagens aplicadas devem ter o mesmo tamanho, assim como devem ser planejadas com o apoio da equipe de arte para
manterem uma coerência visual tanto entre elas como com identidade visual das demais peças feitas para o programa em destaque.
Cada item da galeria conta com um chapéu, título e breve descrição, além de botão de acesso à área com mais informações
sobre a ação em destaque.
Módulo de carrosel
Tamanho da imagem Donec pellentesque, leo at convallis molestie, arcu mi facilisis massa, vel dapibus velit diam eu orci
1440x750px
[1] Título principal do módulo
ETIQUETA
Título Black
[2] Linha fina/descritivo do módulo 30px 2 linhas
com uma linha Donec pellentesque, leo at convallis
Raleway-Medium, 18px, #fff molestie, arcu mi facilisis massa, vel
dapibus velit diam eu orci
[3] Chapéu do programa em destaque BOTÃO

[4] Título do programa
BANNER1 BANNER2 BANNER3 BANNER4 BANNER 5
[5] Linha fina/descritivo do programa
[6] Botão de acesso à página do
programa
Botão 2
[7] Miniaturas dos programas
no carrossel
175x136px
72 O SISTEMA
6.9 Carrossel
Esse módulo destaca conteúdos informativos de caráter institucional com links para o próprio portal. Contam com uma ima-
gem ilustrativa, título e descritivo da ação. Quando for necessário aplicar um link externo em uma das opções, deve-se utilizar
o recurso que indica para o usuário que ele será conduzido para uma página fora da propriedade em que ele está navegando.
Especificações técnicas Carrossel

Donec pellentesque, leo at convallis molestie, arcu mi facilisis massa, vel dapibus velit diam eu orci
[1] Título principal do módulo

[2] Linha fina/descritivo do módulo
com uma linha
TÍTULO TÍTULO TÍTULO TÍTULO
TEXTO RICO TEXTO RICO TEXTO RICO TEXTO RICO
[3] Nome do canal de participação
Donec pellentesque, leo at Donec pellentesque, leo at Donec pellentesque, leo at Donec pellentesque, leo at
Raleway-Black, 24px, #222 convallis molestie, arcu mi convallis molestie, arcu mi convallis molestie, arcu mi convallis molestie, arcu mi
facilisis massa, vel dapibus facilisis massa, vel dapibus facilisis massa, vel dapibus facilisis massa, vel dapibus
[4] Linha fina/descritivo do canal
73 O SISTEMA
6.10 Linha do Tempo
O módulo de linha do tempo tem como objetivo apresentar de forma didática os marcos históricos de um acontecimento, assunto ou
política. As datas são mostradas em ordem cronológica e as marcações com informações sobre cada fato são acessadas com o clique na
linha inferior do módulo.
O gestor de conteúdo deve planejar e cadastrar os acontecimentos por intervalo de anos. Para cada intervalo é criado um slide, com
informações sobre cada data e link para a área geral que reúne os marcos de toda a história. Para cada fato histórico, é possível contar
uma imagem de referência.
Especificações técnicas Timeline

Donec pellentesque, leo at convallis molestie, arcu mi facilisis massa, vel dapibus velit diam eu orci
[1] Título
Raleway-Black, 36px, #222 Molestie, arcu mi facilisis
[2] Chapéu It is a long established fact that a reader will be distracted by the readable content of a page when looking at

[3] Texto de descrição
MÊS REFERÊNCIA
Donec pellentesque, leo at
[4] Botão
convallis molestie, arcu mi
Botão 2
facilisis massa
[5] Ano da linha histórica
MAIS INFORMAÇÕES
[6] Abreviação dos meses do ano
Raleway-Bold, 18px, #222 ANTERIOR PRÓXIMO
[7] Imagem de fundo MÊS
1440 x 698px
74 O SISTEMA
6.11 Página de Notícias
Os conteúdos de uma cobertura noticiosa são organizados e disponibilizados em uma ou mais páginas que recebem os con-
teúdos multimídia preparados para informar o público. É possível utilizar todo o grid para organizar e disponibilizar o mate-
rial produzido, intercalando texto, fotografias, vídeos, infográficos, áudios (podcasts), posts em perfis de mídias sociais e outros
recursos.
Confira os elementos que podem ser aplicados em uma página de notícias.
75 O SISTEMA
Título da notícia entre 35 e 90

caracteres Raleway Black 48px
Subtitulo do texto 1. Se em uma linha, usar 90 caracteres. Se em duas linhas usar 190 caracteres. Ideal sempre
Especificações técnicas utilizar duas linhas para melhor aproveitamento da função.Subtitulo do texto 1. Se em uma linha
Publicado em 13 de setembro de 2017 às 10h41 | Atualizado às 21h30 OUVIR
Notícia
A
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
[1] Chapéu da matéria

!
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
Raleway-Bold, 18px, #06acff "

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
[2] Título da matéria Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Raleway-Black, 48px, #222 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
[3] Linha fina SERVIÇOS RELACIONADOS tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
financiamento
Discussão sobre
commodo
busca
Serviço 1
fortalecer base industrial
consequat. Duis aute irure dolor in reprehenderit de
in defesa
voluptate velit esse cillum
Serviço 2
dolore eu fugiat nulla pariatur.
[4] Data de publicação e atualização Serviço 3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
[5] Texto da notícia eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
Raleway-Medium, 18px, #222 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
[6] Legendas e créditos das fotos reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
Raleway-Medium, 14px, #999 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
[7] Olho/Destaque da matéria eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
Raleway-Bold, 26 px, #222 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
Apesar das condições, foi possível pousar com segurança e cumprir
a missão conforme o previsto – Foto: Antonio Calonne / Press
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

Serviços relacionados Lorem ipsum dolor sit amet,
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
[8] Destaque de Serviços Relacionados

consectetur adipisicing elit, sed
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
do eiusmod tempor incididunt
Título ut labore et dolore magna.
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
Raleway-Black, 20 px, #222 Nome atribuído à aspa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nome do Serviço Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
Raleway-Medium, 18 px, #222 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Fonte: Nome da fonte
Imagens
960 x 468px – fullgrid TAG 1 TAG 1 TAG 1 VOLTAR AO TOPO
468 x 370px Todo o conteúdo deste site está publicado sob a licença creative commons cc by nd 3.0 brasil REPORTAR ERRO
370 x 273px
565 x 370px Relacionadas
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Vídeo
sit amet, sit amet, sit amet,
consectetur consectetur consectetur
adipisicing elit adipisicing elit adipisicing elit
960 x 468px – fullgrid ! " ! " ! "
76 O SISTEMA
6.12 Página de Campanha
O objetivo da página de campanha é permitir que campanhas promocionais e de utilidade pública possam ter uma identidade
visual própria na web, diferente das capas diárias dos portais e sítios institucionais.
Os profissionais de comunicação têm total liberdade para planejar o visual, os conteúdos e a organização destes no grid, em
acordo com o assunto abordado e os objetivos definidos. A atuação de uma equipe multidisciplinar de comunicação é essencial
para que todos os aspectos e funcionalidades da página tenham coerência e aderência junto ao público.
As dimensões do grid são as mesmas do Portal Padrão. A diferença está na possibilidade de aplicar todos os tipos de conteúdos
no miolo, vídeos, gifs e imagens como imagem de fundo (background). Todos os módulos podem ser usados para que os conteú-
dos sejam publicados em acordo com o previsto pelos gestores, desde que observado os limites das funcionalidades disponíveis.
77 O SISTEMA
78 O SISTEMA
Página de Campanha – Cabeçalho e Menu
O cabeçalho da página de campanha é customizado com o

nome de ação, que deve ser simples e objetivo, além de es-
crito com uma linguagem acessível aos brasileiros. A barra
de governo também é aplicada com a mesma configuração
de todos os portais do Executivo Federal.
Ao lado do título da página, estão disponíveis a barra de

acessibilidade. Na linha abaixo, é possível destacar até
cinco itens no menu horizontal, escritos cada um com até
duas palavras. No lado direito do menu, o campo de busca
permite o cidadão pesquisar por assuntos e termos que o
interessam.
Acompanhe os itens que compõem o cabeçalho:
[1] Prenome da campanha
[2] Nome principal da campanha
[3] Barra de acessibilidade
[4] Itens de menu
[5] Texto da busca
79 O SISTEMA
Página de Campanha – Rodapé
O rodapé da página de campanha é diferente dos demais

portais, uma vez que se trata de uma ação específica e tem-
porária. Além disso, a página não conta com vários níveis
de navegação que precisam estar espelhados no rodapé e,
por não ser um órgão, não conta com o menu de Acesso à
Informação.
O rodapé desse tipo de página apresenta a(s) assinatura(s)

do(s) ministério(s) responsável(is) pela ação, a marca do
Governo do Brasil e o link de acesso ao portal de Acesso à
Informação.
[1] Marca Acesso à Informação

97 x 42px
[2] Assinatura(s) do(s) ministério(s) responsável(is) pela ação
[3] Marca do Governo do Brasil
104 x 42px
80 O SISTEMA
6.13 Página em Lista
Esse tipo de página permite a organização de conteúdos em lista sobre um ou mais assuntos, de modo que o usuário somente
consegue visualizar o conteúdo relativo ao tópico selecionado quando clica no botão localizado ao lado direito de cada uma
das questões apresentadas. A seção também conta com uma busca, que permite que o usuário encontre rapidamente o termo
ou assunto que procura.
É o tipo de estrutura ideal para apresentar perguntas e respostas frequentes sobre temas de interesse público (FAQ). O formato
permite que os cidadãos possam tirar dúvidas recorrentes de forma rápida e objetiva, além de reduzir o número de atendi-
mentos nos demais canais eletrônicos e postos de atendimento presencial do governo.
[1] Texto da busca

[2] Tópicos ou perguntas destacadas

[3] Texto explicativo/resposta

81 O SISTEMA
6.14 Página de Cobertura em Tempo Real (broadcasting)
Coberturas de um evento ou cerimônia podem ser transmitidas ao vivo por meio de uma página que pode ser atualizada em
tempo real, com os diversos conteúdos multimídia que são produzidos instantaneamente no decorrer da ocasião.
No topo da página, o cidadão pode acompanhar a transmissão ao vivo por vídeo. No miolo da página, os acontecimentos do
evento são narrados de forma cronológica e são acrescidas informações complementares sobre o assunto que está sendo abor-
dado. Também é possível disponibilizar conteúdos multimídia exclusivos sobre o tema em questão.
A opção em texto oferece uma alternativa para quando o usuário está em locais em que não é possível ativar o áudio da transmissão.
Confira a seguir a configuração da página:
82 O SISTEMA
[1] Tamanho do vídeo ou imagem estática no topo

Fullx680
[2] Título do evento

[3] Descrição/linha fina

[4] Texto informativo ao longo da página

[5] Tamanho das imagens ou vídeos no corpo da página

760 x 468px
83 O SISTEMA
6.15 Centrais de Conteúdo
A área de Centrais de Conteúdo reúne os diversos tipos de conteúdos publicados no portal por tipo de formato. É possível
filtrar por vídeos, áudios, imagens, infográficos, publicações e outros, além de selecionar o período de publicação. Ao clicar em
uma ou mais deles, o resultado por formato é mostrado em lista em acordo com o período definido.
Para que os títulos não tomem toda a área da miniatura do arquivo (thumbnail), é importante que o texto seja curto e direto.
Dentro do arquivo, na descrição, é possível dar mais detalhes e informações sobre o contexto em que o mesmo foi produzido.
[1] Fundo do cabeçalho (header)

#222
[2] Título da seção
[3] Texto na busca
[4] Botão “Filtrar Por”
[5] Título do agrupamento de filtro
[6] Botão “Aplicar Filtro”
[7] Título do arquivo
84 O SISTEMA
6.16 Informação ao cidadão
A Identidade Padrão conta com um arquitetura e layout planejados para atender o interesse do cidadão no acompanhamen-
to dos gastos e investimentos dos órgãos públicos do Executivo Federal. A publicidade dos atos públicos e a transparência da
gestão fiscal são obrigações do Estado brasileiro.
Assim, o menu Acesso à Informação é obrigatório em todos os sítios e portais de órgãos públicos federais. As seções que o
compõem foram elaboradas a partir do que determina a Lei de Acesso à Informação (Lei 12.527/2011) e as diretrizes do Guia
de Transparência Ativa para Órgãos e Entidades do Poder Executivo Federal, documento elaborado pelo Ministério da Trans-
parência e Controladoria-geral da União.
Os itens previstos são:
Institucional
Ações e Programas
Participação Social
Auditorias
Convênios e Transferências
Receitas e Despesas
Licitações e Contratos
Servidores
Informações Classificadas
Serviço de Informação ao Cidadão (SIC)
Dados Abertos
O Guia de Transparência ativa detalha as informações que devem constar em cada um desses itens. O desenho de cada um
deles buscou facilitar a navegação do usuário na busca pelas informações, bem como a organização e a publicação das infor-
mações por parte dos gestores de conteúdo.
85 O SISTEMA
Para além dos conteúdos previstos no documento do Ministério da Transparência, é possível acrescentar opções que auxiliem
os cidadãos na busca por informações sobre a atuação do órgão. Para o Portal Padrão, foram adicionados os itens Sistemas e
Biblioteca, elementos recorrentes nos sites e portais dos órgãos públicos.
A partir de uma capa geral ou do link direto constante do menu, os usuários podem acessar cada um dos itens previstos.
Conheça os detalhes sobre cada um deles:
86 O SISTEMA
Capa Geral
A capa geral do menu Informação ao Cidadão apresenta os

itens previstos na LAI e no Guia de Transparência ativa.
[1] Título da capa/menu

Raleway-Black, 36 px, #ffffff
[2] Descrito da capa/menu
Raleway-Medium, 18 px, #ffffff
[3] Títulos dos itens
Raleway-ExtraBold, 28 px, #ffffff
87 O SISTEMA
Capa Interna
As capas internas apresentam os subitens previstos para

cada seção. A configuração é igual para todas.
O menu interno de navegação cruzada, localizado na parte

inferior das seções, permite que o usuário navegue por
todas as áreas do menu Informação ao Cidadão de modo
mais fácil e rápido, sem necessariamente ter que usar o
menu geral do site.
[1] Título da capa/menu

[2] Descrito da capa/menu
Raleway-Medium, 18 px, #a3a3a3
[3] Títulos dos itens
Raleway-ExtraBold, 28 px, #222222
[4] Título do menu interno de navegação interno
ao final da capa
Raleway-Black, 34 px, #ffffff
[5] Título dos itens no menu interno de
navegação cruzada
Raleway-ExtraBold, 22 px, #ffffff
88 O SISTEMA
Páginas Internas
Os dados sobre os assuntos abordados no menu Infor-

mação ao Cidadão serão disponibilizados em formato de
lista, com links para as páginas específicas.
[1] Título da lista/seção

[2] Descrição da lista/seção
Raleway-Medium, 18 px, #a3a3a3
[3] Título com chamada para a informação/página
Raleway-Bold, 22 px, #333333
[4] Descrição da informação/página
89 O SISTEMA
MANUAIS DA IDENTIDADE PADRÃO
Manual de Diretrizes de Comunicação Digital do Poder Executivo Federal
Manual de Gestão de Conteúdo em Plone do Portal Padrão para Identidade Padrão de Comunicação Digital do Governo
Federal
Guia de Estilo da Identidade Padrão de Comunicação Digital do Poder Executivo Federal
90 O SISTEMA

Guia de Estilo 2.0.1 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia de Estilo 2.0.1 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Guia

APRESENTAÇÃO 4 6.5 Notícias 36

EXPERIÊNCIA DIGITAL COMUM ACESSIBILIDADE

Solução única para todos os sítios e portais do Executivo

Tornar os meios oficiais do governo amplamente conhe-

Atualizar os padrões periodicamente em acordo com as

A divisão do grid é feita através de 12 colunas com as se-

Distância das colunas da grid: 20px;

12 colunas: 1150px; - Tamanho máximo

A altura varia em relação a cada estilo. A altura de cada

Variações de notícias Variações de banner GOV BR PARTICIPE SERVIÇOS ORGÃOS DO GOVERNO ∠

Rio São Francisco ALTO CONTRASTE VLIBRAS

273 663 273

273x103 663x468 273x273

Nome principal ALTO CONTRASTE VLIBRAS

565x565 Notícias Imprensa Link3 Link4 O que você procura?

Donec entesque, leo

As páginas internas de conteúdo de texto corrido possuem

Nas páginas internas, as imagens e vídeos possuem tama

Nas outras variações, a imagem “sangra” o grid até o

Tamanhos de imagens recomendados para notícia interna

Para páginas que possuem conteúdo em lista, os critérios

Para a apresentação de todo o conteúdo dos novos sites do

A fonte é a Raleway e possui 3 pesos distintos.

Font stack: ‘Open Sans’, Arial, Helvetica, sans-serif. Exemplo:

de notícia interna. 32px Black

A área de texto de notícia interna tem como padrão de

LINHA FINA BANNERS

30px BOTÃO 50px 30px

20px BOTÃO 40px 20px

20px BOTÃO 40PX 20px

15px BOTÃO 30PX 15px

DEFAULT HOVER HOVER NOTÍCIA HOVER SERVIÇOS

BOTÃO 50px BOTÃO 50px BOTÃO 50px BOTÃO 50px

BOTÃO 40px BOTÃO 40px

BOTÃO 40PX BOTÃO 40PX

BOTÃO 30PX BOTÃO 30PX

Variações e regras cromáticas

Institucional Notícioso Serviços Box colorido Box colorido

#2969BD #06ACFF #1FC86A #3AB09E #FFBC09

Institucionais Notícioso Serviços Box colorido Box colorido

#FBFBFB #FF6D26 #1FC86A #7C4F2C #FFBC09

Texto Fundo de seção e hover de tiles

Esquema de cores padrão

Esse capítulo apresenta as características e funcionalidades

Os elementos que compõem os sítios e portais na Identi-

[1] Barra Padrão de Identidade Digital Padrão

[1] Participe, Serviços, Órgãos de governo

[2] Órgãos de governo

Nome Principal ALTO CONTRASTE VLIBRAS

Notícias Imprensa Link 1 Link 2 O que você procura?

Denominação do órgão Ícone menu expansível em formato hambúrguer

Nome Principal Itens de menu abertos e permanentes

Barra de Acessibilidade Campo de busca

Barra de Idiomas [não aplicar sigla do país do padrão da

Força Aérea Brasileira ALTO CONTRASTE VLIBRAS

Notícias Imprensa Link 1 Link 2 O que você procura?

Nome principal ALTO CONTRASTE VLIBRAS

Notícias Imprensa Link 1 Link 2 O que você procura?

Nome do orgão ALTO CONTRASTE VLIBRAS

Notícias Imprensa Link 1 Link 2 O que você procura?

Menu Expansível em formato hambúrguer

Campo de busca (760px/60px)