Produto 6 - Escopo Funcional de Propriedade Digital

Página 1 de 506
PRODUTO 6 - ESCOPO FUNCIONAL DE PROPRIEDADE DIGITAL

https://www.facape.br
O Escopo Funcional traz a descrição do funcionamento de uma propriedade digital, para

subsidiar seu desenvolvimento. Para tanto se faz necessário enumerar as necessidades do
projeto para identificar os requisitos funcionais.
PROJETO:
Implantação da Propriedade Digital da FACAPE - https://www.facape.br
OBJETIVOS:
1. Estabelecer padrões de qualidade de uso, desenho, arquitetura de informação e
navegação;
2. Estabelecer um fluxo de criação, desenvolvimento e manutenção na gestão do sítio da
FACAPE;
3. Consolidar a acessibilidade;
4. Cumprir todos os requisitos da lei nº 12.527 – Lei de Acesso a Informação;
5. Cumprir todos os requisitos da Portaria da Sec. De Governo do Gov. Federal nº 540;
6. Criar artefatos de acordo com os padrões estabelecidos pelo W3C1.
DEFINIÇÃO DOS ITENS A SEREM DESENVOLVIDOS NO PROJETO:
1. Criação de leiaute;
2. Elaboração de arquitetura da informação;
3. Planejamento estratégico;
4. Planejamento editorial;
5. Implantação da Propriedade Digital da FACAPE;
6. Manuais.
1
O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe
em tempo integral e o público trabalham juntos para desenvolver padrões para a Web.
CNPJ Nº 37.338.077/0001-86
Rua do Aveloz, 136 – São José
(87) 98837-8237
CEP: 56.302-420 | Petrolina – PE
administrativo@plenapropaganda.com
Página 2 de 506
SUMÁRIO
PROJETO: ................................................................................................................................. 1
OBJETIVOS: .............................................................................................................................. 1
DEFINIÇÃO DOS ITENS A SEREM DESENVOLVIDOS NO PROJETO: ............................................ 1
ESCOPO DETALHADO DO PROJETO: ....................................................................................... 37
Introdução: ........................................................................................................................ 37
PRINCÍPIOS DO DESIGN .......................................................................................................... 37
Objetivos dos Princípios ..................................................................................................... 37
Experiência Única............................................................................................................... 37
Eficiência e Clareza ............................................................................................................ 38
Acessibilidade .................................................................................................................... 38
Reutilização........................................................................................................................ 38
Colaboração ....................................................................................................................... 38
Boas Práticas ...................................................................................................................... 38
PADRÃO VISUAL DIGITAL ....................................................................................................... 40
Web Responsivo ................................................................................................................ 41
Adote as boas práticas para criar formulários ................................................................... 42
Princípios do Design ............................................................................................................... 45
Objetivos dos Princípios ..................................................................................................... 45
Experiência Única............................................................................................................... 45
Eficiência e Clareza ............................................................................................................ 45
Acessibilidade .................................................................................................................... 45
Reutilização........................................................................................................................ 45
Colaboração ....................................................................................................................... 45
Boas Práticas ...................................................................................................................... 46
MANUAIS ............................................................................................................................... 47
Cores ...................................................................................................................................... 47
Princípios ........................................................................................................................... 47
Experiência Única........................................................................................................... 47
Eficiência e Clareza......................................................................................................... 47
Acessibilidade ................................................................................................................ 47
Reutilização e Colaboração ............................................................................................ 49
Sistema de Cores ................................................................................................................... 50
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 3 de 506
COR .................................................................................................................................... 50
Família de Cores ............................................................................................................. 50
Família de Cores Alternativas ......................................................................................... 50
Círculo Cromático .......................................................................................................... 51
Função das Cores ........................................................................................................... 53
Cor Principal ................................................................................................................... 53
Cor Alternativa ............................................................................................................... 53
Fundo Claro Vs Fundo Escuro......................................................................................... 54
1. Função Contêiner (Superfícies) .................................................................................. 54
Especificação.................................................................................................................. 54
FUNDO CLARO ............................................................................................................... 54
FUNDO ESCURO ............................................................................................................. 55
2. Função Leitura (Tipografia e Iconografia)................................................................... 55
Especificação.................................................................................................................. 56
FUNDO CLARO ............................................................................................................... 56
FUNDO ESCURO ............................................................................................................. 56
3. Função Feedback (Estados) ............................................................................................ 56
Função Interação ........................................................................................................... 56
ESPECIFICAÇÃO .............................................................................................................. 57
ESPECIFICAÇÃO .............................................................................................................. 57
FEEDBACK INFORMAÇÃO ................................................................................................... 58
FEEDBACK SUCESSO ........................................................................................................... 58
FEEDBACK ALERTA ............................................................................................................. 58
FEEDBACK ERRO................................................................................................................. 59
Paleta do Design FACAPE ................................................................................................... 59
Red ................................................................................................................................. 60
Red Vivid ........................................................................................................................ 61
Red Cool ......................................................................................................................... 62
Red Cool Vivid ................................................................................................................ 63
Red Warm ...................................................................................................................... 64
Red Warm Vivid ............................................................................................................. 65
Orange ........................................................................................................................... 66
Orange Vivid .................................................................................................................. 67
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 4 de 506
Orange Warm ................................................................................................................ 68

Orange Warm Vivid ........................................................................................................ 69
Gold ............................................................................................................................... 70
Gold Vivid....................................................................................................................... 71
Yellow ............................................................................................................................ 72
Yellow Vivid.................................................................................................................... 73
Green ............................................................................................................................. 74
Green Vivid .................................................................................................................... 75
Green Cool ..................................................................................................................... 76
Green Cool Vivid ............................................................................................................ 77
Green Warm .................................................................................................................. 78
Green Warm Vivid.......................................................................................................... 79
Mint ............................................................................................................................... 80
Mint Vivid ...................................................................................................................... 81
Mint Cool ....................................................................................................................... 82
Mint Cool Vivid .............................................................................................................. 83
Cyan ............................................................................................................................... 84
Cyan Vivid ...................................................................................................................... 85
Blue ................................................................................................................................ 86
Blue Vivid ....................................................................................................................... 87
Blue Cool ........................................................................................................................ 88
Blue Cool Vivid ............................................................................................................... 89
Blue Warm ..................................................................................................................... 90
Blue Warm Vivid ............................................................................................................ 91
Indigo ............................................................................................................................. 92
Indigo Vivid .................................................................................................................... 93
Indigo Cool ..................................................................................................................... 94
Indigo Cool Vivid ............................................................................................................ 95
Indigo Warm .................................................................................................................. 96
Indigo Warm Vivid ......................................................................................................... 97
Violet.............................................................................................................................. 98
Violet Vivid ..................................................................................................................... 99
Violet Warm ................................................................................................................. 100
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 5 de 506
Violet Warm Vivid ........................................................................................................ 101

Magenta....................................................................................................................... 102
Magenta Vivid .............................................................................................................. 103
Gray ............................................................................................................................. 104
Gray Cool ..................................................................................................................... 105
Gray Warm................................................................................................................... 106
Pure ............................................................................................................................. 107
Tabela de Contraste ......................................................................................................... 108
Espaçamento ................................................................................................................... 109
Princípios ......................................................................................................................... 109
Experiência Única......................................................................................................... 109
Eficiência e Clareza....................................................................................................... 109
Acessibilidade .............................................................................................................. 109
Reutilização e Colaboração .......................................................................................... 110
Tipos de espaçamento ..................................................................................................... 110
Espaçamento Interno ................................................................................................... 111
Espaçamento Externo .................................................................................................. 112
Sangria ......................................................................................................................... 113
Espaçamento VS Borda (Ferramentas de Design) ........................................................ 114
Métodos de Espaçamento ............................................................................................... 115
Dimensão ..................................................................................................................... 116
Alinhamento ................................................................................................................ 117
Escala ........................................................................................................................... 118
Recomendações e Boas Práticas ...................................................................................... 120
Otimização de Espaços................................................................................................. 120
Estados ................................................................................................................................ 121
Princípios ......................................................................................................................... 121
Experiência única ......................................................................................................... 121
Eficiência e clareza ....................................................................................................... 122
Acessibilidade .............................................................................................................. 122
Reutilização e colaboração .......................................................................................... 123
Entendendo os estados.................................................................................................... 123
Texto vs objeto ............................................................................................................ 124
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 6 de 506
Fundo vs primeiro plano .............................................................................................. 124

Fundo claro vs fundo escuro ........................................................................................ 125
Overlay ......................................................................................................................... 125
Herança........................................................................................................................ 126
Tipos de estado ................................................................................................................ 126
1- Interação .................................................................................................................. 126
2- Aviso ........................................................................................................................ 127
Observações ................................................................................................................ 127
Interativo ......................................................................................................................... 128
Hiperlinks ..................................................................................................................... 128
Referência externa ....................................................................................................... 128
Objetos ........................................................................................................................ 128
Underline vs legibilidade .............................................................................................. 128
Especificação................................................................................................................ 129
Desabilitado ................................................................................................................. 129
Evitar estado desabilitado ............................................................................................ 129
Especificação................................................................................................................ 130
Hover ........................................................................................................................... 131
Cuidados ...................................................................................................................... 131
Especificação................................................................................................................ 131
Pressionado ................................................................................................................. 132
Cuidados ...................................................................................................................... 132
Especificação................................................................................................................ 132
Foco ............................................................................................................................. 133
Foco tênue ................................................................................................................... 134
Cuidados ...................................................................................................................... 134
Especificação................................................................................................................ 134
Ativo ................................................................................................................................ 136
Cuidados ...................................................................................................................... 136
Estado ativo vs selecionado ......................................................................................... 136
Especificação................................................................................................................ 137
Selecionado ..................................................................................................................... 139
Estado ativo vs selecionado ......................................................................................... 139
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 7 de 506
Evitar estado selecionado ............................................................................................ 139

Especificação................................................................................................................ 139
Arrastando ................................................................................................................... 140
Cuidados ...................................................................................................................... 140
Estado arrastando vs arrastar .......................................................................................... 141
Especificação................................................................................................................ 141
Arrastar ............................................................................................................................ 142
Cuidados ...................................................................................................................... 142
Estado arrastando vs arrastar ...................................................................................... 142
Especificação................................................................................................................ 143
Dropzone ......................................................................................................................... 144
Cuidados ...................................................................................................................... 144
Especificação................................................................................................................ 144
Dropzone ativo ................................................................................................................ 145
Cuidados ...................................................................................................................... 145
Estado dropzone ativo vs dropzone.................................................................................. 145
Estado dropzone ativo e arrastando ................................................................................ 145
Especificação................................................................................................................ 145
Visitado ............................................................................................................................ 146
Cuidados ...................................................................................................................... 146
Especificação................................................................................................................ 147
Ligado e desligado ........................................................................................................... 147
Especificação................................................................................................................ 147
Erro .................................................................................................................................. 148
Especificação................................................................................................................ 149
Alerta ............................................................................................................................... 149
Especificação................................................................................................................ 149
Sucesso ............................................................................................................................ 150
Especificação................................................................................................................ 150
Informativo ...................................................................................................................... 151
Especificação................................................................................................................ 152
Ilustração ............................................................................................................................. 153
Anatomia ......................................................................................................................... 154
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 8 de 506
Detalhamento dos itens ................................................................................................... 155

1- Elementos de fundo (Obrigatório) ........................................................................... 155
2- Luz e sombra (Obrigatório) ...................................................................................... 156
3- Personagem (Opcional)............................................................................................ 157
4- Spot ou objetos (Obrigatório) .................................................................................. 159
5- Cor (Opcional) .......................................................................................................... 160
6- Linha de contorno (Opcional) .................................................................................. 166
7- Textura (Opcional) ................................................................................................... 167
Áreas granuladas ................................................................................................................. 167
EFEITO GRANULADO EM ÁREAS CONTÍNUAS .................................................................. 167
EFEITO GRANULADO EM ÁREAS LOCALIZADAS ................................................................ 168
8- Padrões ou Patterns (Opcional) ............................................................................... 169
Cenários para uso de Ilustração ....................................................................................... 170
Empty Space ................................................................................................................ 170
Onboarding .................................................................................................................. 172
Com o corpo da mensagem ......................................................................................... 172
Call to action ................................................................................................................ 173
Estilos de ilustração ......................................................................................................... 174
Estilo Abstrato ou literal .............................................................................................. 175
Estilo Micro ou Macro .................................................................................................. 176
Estilo de Baixa ou Alta fidelidade ................................................................................. 177
Tipos de ilustração ........................................................................................................... 178
Modelos ....................................................................................................................... 178
Organismos .................................................................................................................. 179
Moléculas..................................................................................................................... 180
Ícones........................................................................................................................... 180
Quando usar Ilustrações ou imagens ............................................................................... 181
Ilustração ..................................................................................................................... 181
Imagem ........................................................................................................................ 182
Guia para construção de ilustrações ................................................................................ 182
1- Definindo elementos de Anatomia .......................................................................... 182
2- Identificando o cenário ............................................................................................ 183
3- Definição de Estilo ................................................................................................... 183
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 9 de 506
4- Tipos e complexidade .............................................................................................. 184

5- Variantes de tamanho.............................................................................................. 184
6- Formato SVG ............................................................................................................ 184
Comportamento .............................................................................................................. 185
Responsividade ............................................................................................................ 185
Acessibilidade .............................................................................................................. 186
Sistema de Grid.................................................................................................................... 186
Acessibilidade .............................................................................................................. 187
Breakpoints ...................................................................................................................... 188
Comportamentos ............................................................................................................. 189
1- Largura ..................................................................................................................... 189
2 - Sangria na Grid (Bleed) ............................................................................................ 191
Tipos de Grid .................................................................................................................... 192
Grid de 4 colunas ......................................................................................................... 192
Grid de 8 colunas ......................................................................................................... 193
Grid de 12 Colunas ....................................................................................................... 195
Responsividade ................................................................................................................ 197
Entendendo uma grid responsiva ................................................................................ 198
Objetos Temporários ................................................................................................... 204
Superfície ............................................................................................................................. 207
Princípios ......................................................................................................................... 207
Acessibilidade .............................................................................................................. 208
Propriedades.................................................................................................................... 208
Cores ............................................................................................................................ 208
Bordas .......................................................................................................................... 209
Cantos .......................................................................................................................... 211
Opacidade .................................................................................................................... 213
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 10 de 506
Elevação ....................................................................................................................... 214

Comportamento .............................................................................................................. 215
Deslocável .................................................................................................................... 215
Dimensionável ............................................................................................................. 215
Overlay ......................................................................................................................... 216
Elevação ............................................................................................................................... 219
Princípios ......................................................................................................................... 219
Acessibilidade .............................................................................................................. 220
Sombra ............................................................................................................................ 220
Atributos ...................................................................................................................... 221
Tokens e exemplos do uso de sombras ........................................................................ 224
Camadas .......................................................................................................................... 224
Tabela de valores padrão de sombra ........................................................................... 226
* O valor depende da camada em que o elemento se encontra. Veja adiante mais
detalhes. ...................................................................................................................... 226
Camada zero ................................................................................................................ 226
Camada 1 ..................................................................................................................... 227
Camada 2 ..................................................................................................................... 228
Camada 3 ..................................................................................................................... 229
Camada 4 ..................................................................................................................... 230
Comportamentos ............................................................................................................. 233
1- Content Overflow ..................................................................................................... 233
Movimento .......................................................................................................................... 234
Princípios ......................................................................................................................... 234
Acessibilidade .............................................................................................................. 235
Propriedades.................................................................................................................... 237
1. Transição .................................................................................................................. 237
2. Easing....................................................................................................................... 241
3. Duração .................................................................................................................... 246
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 11 de 506
Melhores Práticas ............................................................................................................ 249

Tipografia ............................................................................................................................. 250
Rawline ............................................................................................................................ 250
Princípios ......................................................................................................................... 250
Acessibilidade .............................................................................................................. 251
Estilos da Fonte Rawline .................................................................................................. 252
Peso da fonte (Font-Weight) ........................................................................................ 253
Fonte Base ....................................................................................................................... 253
Escala Tipográfica ............................................................................................................ 254
Ampliando a Escala Tipográfica.................................................................................... 256
Line-height (entrelinha) ................................................................................................... 256
Tabelas de Estilos ............................................................................................................. 257
H1 ................................................................................................................................ 258
H2 ................................................................................................................................ 259
H3 ................................................................................................................................ 260
H4 ................................................................................................................................ 261
H5 ................................................................................................................................ 262
H6 ................................................................................................................................ 263
P ................................................................................................................................... 264
Label ............................................................................................................................ 265
Input ............................................................................................................................ 266
Placeholder .................................................................................................................. 267
Legend ......................................................................................................................... 268
Mark ............................................................................................................................ 269
Code ............................................................................................................................. 269
Unidades de Espaçamento entre caracteres (Letter Spacing) .......................................... 270
Tabela de conversão PX, PT, EM e % ................................................................................ 271
PADRÕES.............................................................................................................................. 272
Ajuda e Comunicação .......................................................................................................... 272
Ajuda................................................................................................................................ 273
Iconografia ................................................................................................................... 273
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 12 de 506
Tipos de Ajuda ............................................................................................................. 274

COMO USAR..................................................................................................................... 275
USO DE DROPDOWN COM MODAIS E TOOLTIPS ............................................................. 276
Comunicação ................................................................................................................... 279
Iconografia ................................................................................................................... 280
Tipos de Feedback do Usuário ..................................................................................... 280
Como Coletar Feedback do Usuário ............................................................................. 281
Localização ................................................................................................................... 284
Acesso Imediato ........................................................................................................... 287
Densidade ............................................................................................................................ 288
Tipos de Densidade .......................................................................................................... 289
Densidade Padrão ........................................................................................................ 289
Densidade Alta ............................................................................................................. 289
Densidade Baixa ........................................................................................................... 290
Como Usar Densidade...................................................................................................... 290
Dimensões e Espaços Internos ..................................................................................... 290
Escala de Densidade..................................................................................................... 292
Restrições Mínimas ...................................................................................................... 295
Content Overflow ................................................................................................................ 296
Técnicas para otimizar o Content Overflow ..................................................................... 298
1. Informações essenciais ................................................................................................ 299
A- Rolagem................................................................................................................... 299
2. Informações complementares ..................................................................................... 302
2.1 Conteúdo oculto .................................................................................................... 303
2.2 Conteúdo parcialmente oculto .............................................................................. 307
3. Informações adicionais ................................................................................................ 311
A- Modal ...................................................................................................................... 311
B- Página interna .......................................................................................................... 312
C- Página externa ......................................................................................................... 312
Melhores práticas ............................................................................................................ 313
Dropdown ............................................................................................................................ 313
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 13 de 506
Anatomia ......................................................................................................................... 315

Detalhamento dos Elementos ...................................................................................... 315
Comportamento .............................................................................................................. 319
1. Ênfase ...................................................................................................................... 319
2. Responsividade ........................................................................................................ 321
3. Posicionamento ....................................................................................................... 323
4. Uso do Identificador de Estado ................................................................................ 324
5. Uso do Acionador ..................................................................................................... 326
6. Fechamento da Superfície Flutuante ....................................................................... 328
7. Conteúdos ................................................................................................................ 331
8. Acessibilidade .......................................................................................................... 333
Especificação.................................................................................................................... 335
Iconografia ................................................................................................................... 335
Sombra......................................................................................................................... 335
Formulário ........................................................................................................................... 336
Anatomia ......................................................................................................................... 337
1- Título e Subtítulo ..................................................................................................... 337
2- Componentes de Entrada de Dados......................................................................... 338
3- Botões ...................................................................................................................... 350
Layout e Estrutura ........................................................................................................... 353
Considere a Semântica ................................................................................................. 353
1- Grid (Colunas e Linhas) ............................................................................................ 354
2- Fieldset e Legend ..................................................................................................... 355
3- Indentação e Subagrupamentos .............................................................................. 357
4- Outras Formas de Agrupamento.............................................................................. 359
Recomendação Geral ................................................................................................... 363
Lei Geral de Proteção de Dados ....................................................................................... 363
Dados Sigilosos e Dados Anonimizados ....................................................................... 364
Boas Práticas de LGPD em Políticas de Privacidade ..................................................... 366
Gráfico ................................................................................................................................. 369
Anatomia ......................................................................................................................... 370
Detalhamento dos itens ................................................................................................... 371
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 14 de 506
Áreas ............................................................................................................................ 371

1- Área cabeçalho (Opcional) ....................................................................................... 371
2- Área principal ........................................................................................................... 372
3- Área de rodapé (opcional) ....................................................................................... 373
Tipos de gráficos .............................................................................................................. 374
Gráficos de colunas e barras ........................................................................................ 375
Gráfico de pizza e rosca ............................................................................................... 377
Gráfico em linhas e áreas ............................................................................................. 381
Histograma................................................................................................................... 383
Gráfico de dispersão e bolhas ...................................................................................... 384
Outros tipos de gráficos ............................................................................................... 389
Como escolher um gráfico? ............................................................................................. 390
Quais tecnologias poderão ser utilizadas e como utilizá-las? ...................................... 391
Acessibilidade .................................................................................................................. 391
Recomendações para apresentação de dados visuais ................................................. 392
Organizando gráficos ....................................................................................................... 406
Painel de gráficos ou dashboard ...................................................................................... 408
Como projetar um painel de gráfico agradável ............................................................ 408
Outros comportamentos ................................................................................................. 414
1- Ação de expandir painel de gráfico (opcional) ......................................................... 414
2- Ação de ampliar e reduzir visualização interna (opcional) ....................................... 415
3- Filtragem de dados (opcional) ................................................................................. 416
4- Uso do loading para gráficos dinâmicos .................................................................. 417
Onboarding .......................................................................................................................... 418
Tom e Voz ........................................................................................................................ 418
Anatomia ......................................................................................................................... 419
Detalhamento dos Itens ............................................................................................... 420
Tipos ................................................................................................................................ 425
1 - Ênfase na Interface ................................................................................................. 425
2 - Ênfase Textual ......................................................................................................... 426
Estruturando o Onboarding ............................................................................................. 426
Tela de Boas Vindas ..................................................................................................... 426
Etapas .......................................................................................................................... 427
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 15 de 506
Pulando o Tutorial........................................................................................................ 428

Desabilitando o Tutorial ............................................................................................... 429
Indicadores de Progresso ............................................................................................. 430
Conclusão..................................................................................................................... 430
Comportamentos ............................................................................................................. 431
1 - Posicionamento dos Controles de Navegação ........................................................ 431
2 - Posicionamento do Tooltip ..................................................................................... 433
Especificações .................................................................................................................. 435
Collapse ............................................................................................................................... 435
Anatomia ......................................................................................................................... 436
Detalhamento dos itens ............................................................................................... 437
Comportamento .............................................................................................................. 443
1 - Área de Clique ......................................................................................................... 443
2 - Tamanho e Direção da Área/Conteúdo Expansível ................................................. 443
3 - Expansão/Retração e Conteúdo em Tela ................................................................ 447
4 - Estruturas Hierárquicas ........................................................................................... 448
5 - Combinando Múltiplos Elementos Collapse ............................................................ 455
Especificação.................................................................................................................... 457
Iconografia ................................................................................................................... 457
Navegação ........................................................................................................................... 458
Estruturando o Processo de Navegação........................................................................... 458
Inventário..................................................................................................................... 458
Priorização ................................................................................................................... 459
Sequência..................................................................................................................... 459
Desconstrução ............................................................................................................. 460
Hierarquia .................................................................................................................... 460
Boas Práticas ................................................................................................................ 465
Tipos de Navegação ......................................................................................................... 466
Navegação Lateral........................................................................................................ 467
Navegação Progressiva ................................................................................................ 469
Navegação Reversa ...................................................................................................... 474
Padrões de Navegação ..................................................................................................... 478
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 16 de 506
Organizando Padrões de Navegação............................................................................ 478

Empty States ........................................................................................................................ 490
Boas Práticas Gerais ......................................................................................................... 491
Anatomia ......................................................................................................................... 491
1 - Imagem (Opcional).................................................................................................. 492
2 - Título ....................................................................................................................... 492
3 - Corpo da Mensagem ............................................................................................... 492
4 - Elementos Interativos (Opcional) ............................................................................ 493
Tipos Comuns de Empty States e como Usá-los ............................................................... 493
Ausência de Dados ....................................................................................................... 493
Ausência de Dados por Ação do Usuário ..................................................................... 494
Gerenciamento de Erros em Empty States .................................................................. 497
Onde Usar Empty States .................................................................................................. 499
Utilizando Empty States em Espaços Pequenos ........................................................... 499
Utilizando Empty States em Espaços Amplos ............................................................... 503
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 17 de 506
INDICE REMISSIVO DAS FIGURAS
Figura 1 - Pontos de Aderência .............................................................................................. 40

Figura 2 - Aplicativos .............................................................................................................. 41
Figura 3 - Boas práticas para criar formulários ...................................................................... 42
Figura 4 - Interface ................................................................................................................. 43
Figura 5 – Cores ..................................................................................................................... 44
Figura 6- Círculo cromático (padrão) ..................................................................................... 51
Figura 7 - Círculo cromático vivid (alternativo) - cores mais saturadas. ................................. 52
Figura 8 - Exemplo de Indicação - Cor Principal ..................................................................... 53
Figura 9 - Exemplo de Indicação - Cor Alternativa ................................................................. 53
Figura 10 - Cor Superfície - Família Pure para Fundos Claros ................................................. 55
Figura 11 - Cor Superfície Alternativa - Família Gray para Fundos Claros .............................. 55
Figura 12 - Cor Superfície - Família Blue Warm Vivid para Fundos Escuros ........................... 55
Figura 13 - Cor Leitura - Família Gray para Fundos Claros ..................................................... 56
Figura 14 - Cor Leitura - Família Pure para Fundos Escuros ................................................... 56
Figura 15 - Cor Feedback Informação - Família Blue Warm Vivid .......................................... 58
Figura 16 - Cor Feedback Sucesso - Família Green Cool Vivid ................................................ 58
Figura 17 - Cor Feedback Alerta - Família Yellow Vivid .......................................................... 58
Figura 18 - Propriedades básicas do Box-model .................................................................. 110
Figura 19 - Comportamento das dimensões do Box-Model utilizado no Design FACAPE .... 111
Figura 20 - Tipos de Espaçamento no Design FACAPE: Interno e Externo ............................ 111
Figura 21 - Exemplo do Espaçamento Interno em um componente .................................... 112
Figura 22 - Exemplo do Espaçamento Externo em um componente ................................... 113
Figura 23 - Elementos “sangrando” dentro de um componente ......................................... 114
Figura 24 - Ferramenta desconsiderando a borda para o espaçamento .............................. 115
Figura 25 - Configurando comportamento da borda nas ferramentas de design ................ 115
Figura 26 - Objetos com dimensões fixas. ............................................................................ 116
Figura 27 - Pontos de alinhamento dentro de um objeto .................................................... 117
Figura 28 - Exemplo de Alinhamento ao centro ................................................................... 117
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 18 de 506
Figura 29 - Exemplo de Escala .............................................................................................. 118

Figura 30 - Escala Layout...................................................................................................... 119
Figura 31 - Escala Ajuste ...................................................................................................... 120
Figura 32 - Margens Iguais - Prevalece apenas uma das margens ....................................... 121
Figura 33 - Margens Diferentes - Prevalece a margem com valor maior ............................. 121
Figura 34 - Botões ................................................................................................................ 124
Figura 35 - Fundo Claro/ Fundo Escuro ................................................................................ 125
Figura 36 - Exemplo do estado interativo sendo aplicado em um texto e um objeto, tanto no
fundo claro como no escuro. ............................................................................................... 129
Figura 37 - Exemplo do estado desabilitado sendo aplicado em um texto e um objeto, tanto
no fundo claro como no escuro. .......................................................................................... 130
Figura 38 - Exemplo do estado hover sendo aplicado em um texto e um objeto, tanto no
Figura 39 - Exemplo do estado pressionado sendo aplicado em um texto e um objeto, tanto
Figura 40 - Exemplo do estado foco sendo aplicado em um texto e um objeto, tanto no fundo
claro como no escuro. ......................................................................................................... 135
Figura 41 - Exemplos do estado ativo sendo aplicado em um texto e um objeto, tanto no
Figura 42 - Exemplo do estado selecionado sendo aplicado em um texto e um objeto, tanto
Figura 43 - Exemplo do estado arrastando sendo aplicado em um texto e um objeto, tanto
Figura 44 - Exemplo do estado errastar sendo aplicado em um texto e um objeto, tanto no
Figura 45 - Exemplo do estado dropzone sendo aplicado em um texto e um objeto, tanto no
Figura 46 - Exemplo do estado dropzone ativo sendo aplicado em um texto e um objeto,
tanto no fundo claro como no escuro. ................................................................................. 146
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 19 de 506
Figura 47 - Exemplo do estado visitado sendo aplicado em um texto, tanto no fundo claro
como no escuro. .................................................................................................................. 147
Figura 48 - Exemplo dos estados ligado e desligado sendo aplicado em um texto e um objeto,
tanto no fundo claro como no escuro. ................................................................................. 148
Figura 49 - Exemplo do estado erro sendo aplicado em um texto e um objeto, tanto no fundo
claro como no escuro. ......................................................................................................... 149
Figura 50 - Exemplo do estado alerta sendo aplicado em um texto e um objeto, tanto no
Figura 51 - Exemplo do estado sucesso sendo aplicado em um texto e um objeto, tanto no
Figura 52 - Exemplo do estado informativo sendo aplicado em um texto e um objeto, tanto
Figura 53 - Conte histórias e engaje seus usuários utilizando o recurso de ilustração. ........ 153
Figura 54 - Elementos que compõem uma ilustração. ......................................................... 154
Figura 55 - Use apenas cores que realcem os elementos principais da composição. .......... 155
Figura 56 - Aplicação suave e harmônica de luz e sombra, utilizando apenas branco e preto.
............................................................................................................................................. 156
Figura 57 - Estes são exemplos de nossos personagens. Não é o conjunto completo. ........ 157
Figura 58 - Mesmo uma pequena composição pode contar uma história. .......................... 159
Figura 59 - Paleta de cores monocromática. ........................................................................ 160
Figura 60 - Paleta de cores análogas. ................................................................................... 161
Figura 61 - Paleta de cores complementares. ...................................................................... 161
Figura 62 - Elementos interativos ........................................................................................ 162
Figura 63 - Exemplos de tons de pele, existem outras opções. ............................................ 163
Figura 64 - Cor Dominante ................................................................................................... 164
Figura 65 - Uso de gradientes em ilustrações ...................................................................... 165
Figura 66 - uso de linha de contorno ................................................................................... 166
Figura 67 - Em áreas contínuas, a textura granulada confere um efeito óptico interessante.
............................................................................................................................................. 168
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 20 de 506
Figura 68 - Em áreas localizadas realçamos o volume dos objetos destacando luz e sombra.
............................................................................................................................................. 168
Figura 69 - Exemplos de padronagens recomendadas, não são o conjunto completo. ....... 169
Figura 70 - Ilustrações Spot aplicadas em Empty Spaces ..................................................... 171
Figura 71 - Utilize o recurso de Ilustração para encantar e engajar seu usuário ao apresentar
seu produto. ........................................................................................................................ 172
Figura 72 - Reforce a informação com ilustrações. .............................................................. 172
Figura 73 - Suavize situações de erro com ilustrações lúdicas. ............................................ 173
Figura 74 - Convide seu usuário a tomar decisão com ilustrações objetivas e claras........... 174
Figura 75 - A abstração é mais conceitual e provocativa. .................................................... 175
Figura 76 - As expressões literais são mais explicativas e utilitárias. ................................... 175
Figura 77 - Micro visualizações ampliam o assunto ............................................................. 176
Figura 78 - As visualizações macro representam de forma mais generalizada. ................... 176
Figura 79 - A cor sólida é mais simples e direta. .................................................................. 177
Figura 80 - Modelos são ilustrações com muitos detalhes e elementos, utilize-os em áreas
maiores. ............................................................................................................................... 178
Figura 81 - Organismos compõem modelos......................................................................... 179
Figura 82 - Moléculas são pequenas e simples, são versáteis e se encaixam em várias
proporções........................................................................................................................... 180
Figura 83 - Você pode utilizar ícones em sua ilustração, ou até mesmo criar uma pequena
composição com um ícone decorado. ................................................................................. 180
Figura 84 - Exemplos de ícones da Font Awesome. Eles não representam o conjunto
completo dos ícones. ........................................................................................................... 181
Figura 85 - Ilustração planejada para diferentes resoluções. ............................................... 185
Figura 86 - Visão geral dos breakpoints e resoluções. ......................................................... 188
Figura 87 - Grid Fixa - Exemplo 1. ........................................................................................ 189
Figura 88 - Grid Fixa - Exemplo 2. ........................................................................................ 189
Figura 89 - Grid Fluida - Exemplo 1. ..................................................................................... 190
Figura 90 - Grid Fluida - Exemplo 2. ..................................................................................... 190
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 21 de 506
Figura 91 - Max-width é o local onde está localizado todo o conteúdo principal da interface.
............................................................................................................................................. 190
Figura 92 - Exemplo de grid contendo elementos com sangria. .......................................... 191
Figura 93 - Exemplo de grid sem elementos com sangria. ................................................... 192
Figura 94 - Exemplo de grid de 4 colunas............................................................................. 193
Figura 95 - Exemplo de grid de 8 colunas............................................................................. 194
Figura 96 - Exemplo de grid de 12 colunas para desktop. .................................................... 196
Figura 97 - Exemplo de grid de 12 colunas para TV. ............................................................ 197
Figura 98 - Não há alteração nos elementos dos exemplos 1 e 2 na mudança de resolução de
uma grid fixa. ....................................................................................................................... 198
Figura 99 - Na grid fluida os elementos tiveram seu posicionamento e dimensões alterados
com a mudança de resolução. ............................................................................................. 199
Figura 100 - Alguns elementos estão atrelados a 4 colunas da grid e outras a 2 colunas. ... 200
Figura 101 - No exemplo, os elementos estão apenas alinhados (à esquerda) dentro de uma
área de 4 colunas. Caso haja mudança na resolução a largura dos elementos não sofrerá
nenhuma alteração. ............................................................................................................. 201
Figura 102 - Um card pode ter altura adaptativa ao conteúdo interno, mas a largura é
adaptativa a grid (exemplo 1). É possível também criar um card com dimensões totalmente
estáveis (exemplo 2) que não variam nem com conteúdo interno e nem com a grid ......... 202
Figura 103 - Um botão pode ter altura estável e a largura adaptativa ao conteúdo interno em
uma grid de 12 colunas (exemplo 1). Porém em uma grid de 4 colunas ele passa a ter sua
largura adaptativa a grid (exemplo 2). ................................................................................. 203
Figura 104 - Interface com elementos adaptativos e estáveis. ............................................ 204
Figura 105 - Quando visível, o menu de navegação flutuante não afeta a grid e nem os
conteúdos da interface. ....................................................................................................... 205
Figura 106 - Quando visível, o menu de navegação persistente comprime a grid (e seu
conteúdo) ............................................................................................................................ 206
Figura 107 - Exemplos de superfícies. .................................................................................. 207
Figura 108 - Exemplos de algumas cores possíveis para superfícies. ................................... 209
Figura 109 - Diferentes tipo e espessuras de bordas. .......................................................... 209
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 22 de 506
Figura 110 - Exemplo para a configuração de bordas no Adobe XD..................................... 210

Figura 111 - Variação das bordas possíveis para uma superfície previstas no DS. ............... 210
Figura 112 - Exemplos de arredondamento dos cantos a partir de uma superfície quadrada.
............................................................................................................................................. 211
Figura 113 - Variação dos arredondamentos de cantos possíveis para uma superfície neste
DS......................................................................................................................................... 212
Figura 114 - Exemplos de superfícies no formato pílula (pill). ............................................. 213
Figura 115 - A imagem 1 mostra uma foto comum. A imagem 2 mostra a mesma foto
sobreposta por superfícies com diferentes níveis de opacidade. ........................................ 213
Figura 116 - Exemplos de sombras projetadas pelas superfícies definindo distintos níveis de
elevação. .............................................................................................................................. 214
Figura 117 - A imagem ilustra as etapas da alteração da posição da superfície escura em uma
sequência de superfícies. ..................................................................................................... 215
Figura 118 - A imagem ilustra uma superfície sendo redimensionada pelo usuário. ........... 215
Figura 119 - Overlay sendo utilizado para focar um elemento modal. ................................ 216
Figura 120 - Overlay sendo utilizado para focar uma área específica da tela. ..................... 217
Figura 121 - 1. Superfície overlay “colorida” com opacidade 45%; 2. Superfície com outra cor
distinta; 3. Nova tonalidade de cor gerada pela sobreposição das duas superfícies............ 219
Figura 122 - Exemplo da sombra com o eixo Y positivo (sombra inferior). .......................... 222
Figura 123 - Exemplo da sombra com o eixo Y negativo (sombra superior). ....................... 222
Figura 124 - Exemplo da sombra com o eixo X positivo (sombra à direita). ......................... 223
Figura 125 - Exemplo da sombra com o eixo X negativo (sombra à esquerda). ................... 223
Figura 126 - Exemplo de empilhamento de camadas com as sombras projetadas. ............. 225
Figura 127 - Exemplo de empilhamento de camadas. ......................................................... 225
Figura 128 - Exemplo de objeto na camada 1. ..................................................................... 228
Figura 132 - Tabela de hierarquia de camadas. ................................................................... 232
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 23 de 506
Figura 133 - Exemplo do comportamento content overflow com o conteúdo rolando sob a
estrutura superior e inferior. ............................................................................................... 233
Figura 134 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-in.
............................................................................................................................................. 241
Figura 135 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-out.
............................................................................................................................................. 242
Figura 136 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-in-
out. ...................................................................................................................................... 243
Figura 137 - Imagem exemplificando o desenho da trajetória de deslocamento em ease. . 244
Figura 138 - Imagem exemplificando o desenho da trajetória de deslocamento no formato
linear. ................................................................................................................................... 245
Figura 139 - Estilos da fonte Rawline. .................................................................................. 252
Figura 140 - Tamanho fonte base ........................................................................................ 255
Figura 141 - Exemplo do Estilo H1 com fundo claro e escuro e na Grid de 4 colunas. ......... 258
Figura 147 - Exemplo do Estilo Parágrafo com fundo claro e escuro e na Grid de 4 colunas.
............................................................................................................................................. 264
Figura 148 - Exemplo do Estilo Label com fundo claro e escuro. ......................................... 265
Figura 149 - Exemplo do Estilo Input com fundo claro e escuro. ......................................... 266
Figura 150 - Exemplo do Estilo Placeholder com fundo claro e escuro. ............................... 267
Figura 151 - Exemplo do Estilo Legend com fundo claro e escuro. ...................................... 268
Figura 152 - Exemplo do Estilo Mark.................................................................................... 269
Figura 153 - Exemplo do Estilo Code no formato Inline e Bloco........................................... 269
Figura 154 - Exemplo de Ajuda e Envio de Feedback do Usuário ......................................... 272
Figura 155 - Utilize o question ou question-circle como iconografia padrão de ajuda ........ 273
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 24 de 506
Figura 156 - Utilize info ou info-circle como padrão alternativo para ícone de ajuda
contextual ............................................................................................................................ 273
Figura 157 - Exibindo o conteúdo de ajuda contextual com padrão Dropdown .................. 275
Figura 158 - Exibindo o conteúdo de ajuda contextual com padrão Collapse ...................... 275
Figura 159 - Posicionamento da Ajuda Contextual - Próximo ao elemento de referência da
ajuda contextual .................................................................................................................. 276
Figura 160 - Exemplo de texto objetivo em ajuda contextual .............................................. 276
Figura 161 - Utilize Modais quando houver necessidade de um conteúdo de ajuda contextual
maior ou mais rico em recursos ........................................................................................... 277
Figura 162 - Dê preferência ao uso de tooltips e uma informação mais enxuta .................. 278
Figura 163 - Quando necessário, utilize Hiperlink de acesso a mais detalhes ...................... 278
Figura 164 - Ajuda Não Solicitada seguindo o Padrão de Onboarding ................................. 279
Figura 165 - Utilize comment ou comment-alt como iconografia padrão para Envio de
Feedback.............................................................................................................................. 280
Figura 166 - Por exemplo, pode-se usar o componente Switch ou Checkbox no menu de
opções para avaliar o lançamento de um novo dashboard no sistema ............................... 281
Figura 167 - Exemplo de Caixa de Comentários ................................................................... 282
Figura 168 - Exemplo de formulário para pesquisa de satisfação do usuário ...................... 283
Figura 169 - Exemplo de Escala de Satisfação utilizando componente Slider e indicadores de
satisfação ............................................................................................................................. 284
Figura 170 - Exemplo de Escala de Satisfação utilizando componente Slider e indicador em
percentual............................................................................................................................ 284
Figura 171 - Exemplo de Escala de Satisfação com classificação em estrelas ...................... 284
Figura 172 - Exemplo de Ajuda no Cabeçalho ...................................................................... 285
Figura 173 - Exemplo de Ajuda e Envio de Feedback no Rodapé ......................................... 285
Figura 174 - Exemplo de Ajuda e Envio de Feedback no Menu ............................................ 285
Figura 175 - Exemplo de Ajuda no Menu Flutuante ............................................................. 286
Figura 176 - Acesso Imediato - Conduza o usuário imediatamente ao conteúdo de ajuda.. 287
Figura 177 - Exemplo de Uso de Densidades ....................................................................... 288
Figura 178 - Exemplo Densidade Padrão ............................................................................. 289
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 25 de 506
Figura 179 - Exemplo Densidade Alta .................................................................................. 289

Figura 180 - Exemplo Densidade Baixa ................................................................................ 290
Figura 181 - Exemplo de Ajuste de Densidade nos Espaços Internos................................... 291
Figura 182 - Exemplo de Ajuste de Densidade nas Dimensões ............................................ 291
Figura 183 - O Valor X é a referência padrão de densidade. Incrementando de 4 em 4px no
valor X, reduz-se a densidade, enquanto que decrementando de 4 em 4px no valor X
aumenta-se a densidade. ..................................................................................................... 292
Figura 184 - No componente X foi definido o valor de 8px para densidade padrão; também
foi definido o incremento e decremento de um nível na escala de densidade, logo as
densidades alta e baixa ficaram com 4px e 12px respectivamente; .................................... 293
Figura 185 - No componente Y foi definido o valor de 16px para densidade padrão; também
foi definido o incremento e decremento de dois níveis na escala de densidade, logo as
densidades alta e baixa ficaram com 8px e 24px respectivamente; .................................... 294
Figura 186 - Área Mínima de Densidade - Forma certa e errada ......................................... 295
Figura 187 - A - Área Mínima de densidade em superfície para uso com cursor do mouse; B -
Área Mínima de densidade em superfície para uso com toque/touch; ............................... 295
Figura 188 - C - Área de Ação ultrapassando as dimensões da superfície para uso com cursor
do mouse; D - Área de Ação ultrapassando as dimensões da superfície para uso com
toque/touch;........................................................................................................................ 296
Figura 189 - Exemplos de uso da content overflow. ............................................................ 297
Figura 190 - A imagem acima demonstra o uso da técnica de agrupamento de hyperlinks e
ícones com funções semelhantes. ....................................................................................... 298
Figura 191 - Exemplo do uso da barra de rolagem na página e no componente card. ........ 299
Figura 192 - Exemplo das três etapas do conteúdo sendo rolado para cima em um
componente. ....................................................................................................................... 300
Figura 193 - Comportamento de expansão/retração do conteúdo com uso do padrão
collapse. Note que o conteúdo seguinte é empurrado para baixo. ..................................... 304
Figura 194 - Apresentação de conteúdo complementar com uso de tooltip. ...................... 305
Figura 195 - Exemplo de técnica utilizando um elemento com a informação complementar.
............................................................................................................................................. 305
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 26 de 506
Figura 196 - Exemplo de menu suspenso. ............................................................................ 306

Figura 197 - Tabela com menu suspenso. Esse recurso evita que a tabela fique
sobrecarregada com todos os itens visíveis. ........................................................................ 307
Figura 198 - Variações de botões “Mostrar Mais”. .............................................................. 308
Figura 199 - Comportamento de expansão/retração com uso do componente button. ..... 308
Figura 200 - Exemplos de truncamento de texto em um parágrafo e em um componente. 309
Figura 201 - Em um truncamento, evite deixar menos de três caracteres representando uma
palavra. ................................................................................................................................ 309
Figura 202 - Utilize o componente tooltip para apresentar ao usuário a versão completa do
texto truncado. .................................................................................................................... 310
Figura 203 - Variações de truncamento de textos. .............................................................. 311
Figura 204 - Deixe claro para o usuário quando o hyperlink direcionar para uma página
externa. ............................................................................................................................... 313
Figura 205 - Exemplos de Dropdown - Menu Suspenso, Painel de Notificação e Campo de
Seleção ................................................................................................................................ 314
Figura 206 - Anatomia do Dropdown ................................................................................... 315
Figura 207 - Exemplo de Acionadores - Botões, Componente Avatar, Select e Texto Interativo
como Acionador................................................................................................................... 315
Figura 208 - Exemplo de Identificador de Estado................................................................. 316
Figura 209 - Ícones do Identificador de Estado .................................................................... 316
Figura 210 - Superfície Flutuante ......................................................................................... 317
Figura 211 - Exemplo de Superfície Flutuante no Menu ...................................................... 317
Figura 212 - Exemplo de Superfície Flutuante no Notification ............................................. 318
Figura 213 - Exemplo de Superfície Flutuante no Select ...................................................... 318
Figura 214 - Exemplo de Sombras em Diferentes Intensidades e Dropdown na Camada 2 de
Elevação ............................................................................................................................... 319
Figura 215 - Exemplos de Ênfase com características opcionais - Borda, Cor e Overlay ...... 320
Figura 216 - Exemplo de Overlay - Elementos interativos abaixo da camada Overlay
permanecem bloqueados .................................................................................................... 321
Figura 217 - Exemplo de Lista Dropdown sem interferência da Grid ................................... 321
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 27 de 506
Figura 218 - Exemplo de Menu Dropdown sem interferência da Grid ................................. 322
Figura 219 - Exemplo de Select se adequando à Grid de 4 colunas ..................................... 322
Figura 220 - Limites da Tela e Posição do Dropdown ........................................................... 323
Figura 221 - Comportamento Toggle do Identificador de Estado ........................................ 324
Figura 222 - Exemplo de Painel Retrátil com Identificador de Estado na Horizontal ........... 325
Figura 223 - Exemplo de Identificador de Estado................................................................. 325
Figura 224 - Exemplo de Acionadores sem Identificador de Estado - Já representam
fortemente o conceito Dropdown ....................................................................................... 325
Figura 225 - Caso haja necessidade, pode-se usar o Identificador de Estado para tornar mais
claro o padrão Dropdown .................................................................................................... 326
Figura 226 - Área de Clique do Acionador incluindo o Identificador de Estado ................... 326
Figura 227 - O usuário utilizou o hover para abrir o Dropdown. O Acionador mantém o
estado hover até o Dropdown fechar .................................................................................. 327
Figura 228 - O usuário utilizou o Clique para abrir o Dropdown. O Acionador mantém o
estado pressed até o Dropdown fechar ............................................................................... 327
Figura 229 - Fechamento pelo Próprio Acionador ............................................................... 328
Figura 230 - Fechamento pelo Botão Fechar ....................................................................... 329
Figura 231 - Fechamento com clique fora da superfície ...................................................... 330
Figura 232 - Fechamento com conclusão de objetivo .......................................................... 330
Figura 233 - Exemplo de Conteúdo em Dropdown .............................................................. 331
Figura 234 - Exemplo de Conteúdo Muito Extenso em Dropdown - Prefira utilizar hiperlinks
para um nova página ........................................................................................................... 331
Figura 235 - Exemplo de Boa Prática - Elementos Dropdown aninhados em cascata .......... 332
Figura 236 - Exemplo de Mau Uso - Elementos Dropdown aninhados em cascata .............. 332
Figura 237 - Exemplo de Uso do Teclado para Navegação em Dropdown - Tecla Tab ......... 333
Figura 238 - Exemplo de Uso do Teclado para Navegação em Dropdown - Teclas de
Navegação ........................................................................................................................... 334
Figura 239 - Exemplo de Uso do Teclado para Navegação em Dropdown - Fechamento com
Tecla Esc .............................................................................................................................. 334
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 28 de 506
Figura 240 - Exemplo de Uso do Teclado para Navegação em Dropdown - Acionamento com
Tecla Enter ou Espaço .......................................................................................................... 335
Figura 241 - Exemplo de estrutura de um formulário. ......................................................... 336
Figura 242 - Utilize títulos e subtítulos com ênfase bem diferenciada dos demais textos do
formulário. ........................................................................................................................... 337
Figura 243 - Exemplo de rótulos. ......................................................................................... 338
Figura 244 - Evite distanciar os rótulos dos campos. ........................................................... 339
Figura 245 - Exemplo de indicação de campo opcional. ...................................................... 340
Figura 246 - Exemplo de indicação de campo obrigatório. .................................................. 340
Figura 247 - Atenção: não utilize as regras acima concomitantemente; isto é, evite sinalizar
ao mesmo tempo os campos obrigatórios e opcionais. ....................................................... 341
Figura 248 - Campos muito grande ou pequeno em relação a previsão de entrada de dados,
podem gerar problemas para o usuário durante o preenchimento..................................... 342
Figura 249 - Preenchimento de senhas com opção de visualizar o conteúdo. ..................... 343
Figura 250 - 1- Caso alguns campos possam ser editáveis, é importante informar quais
podem ser editáveis, caso todos sejam editáveis não é necessário indicar. 2- Pode-se utilizar
o próprio indicador para acionar a edição de forma individual, ou ter um acionador “g..... 344
Figura 251 - Exemplo de placeholder, texto auxiliar, ícone de ajuda e mensagem contextual
como elementos auxiliares/suporte ao usuário. .................................................................. 345
Figura 252 - Exemplos de Placeholders. ............................................................................... 346
Figura 253 - Exemplo de texto auxiliar. ................................................................................ 348
Figura 254 - Exemplo do uso do ícone de ajuda. .................................................................. 349
Figura 255 - Exemplo de uso da mensagem contextual. ...................................................... 350
Figura 256 - Exemplo de hierarquia dos buttons. ................................................................ 351
Figura 257 - *Ordem da hierarquia das ênfases: primária (1), secundária (2) e terciária (3).*
............................................................................................................................................. 352
Figura 258 - Ordem dos buttons em uma distribuição vertical. ........................................... 352
Figura 259 - Ordem lógica para o usuário ............................................................................ 353
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 29 de 506
Figura 260 - Exemplo de uso se colunas dentro do formulário. Para formulários curtos é
preferível dispor os campos em uma única coluna. Formulários mais complexos podem exigir
um estudo mais detalhado na distribuição dos campos. ..................................................... 354
Figura 261 - Agrupamentos com fieldset melhoram a acessibilidade. ................................. 356
Figura 262 - Agrupamentos apresentados emcollapsecom uso de fieldset e legend........... 357
Figura 263 - Indentação dentro de um formulário. .............................................................. 358
Figura 264 - Utilize espaçamento necessário para caracterizar a separação entre os
agrupamentos. No exemplo foram criados 3 tipos de agrupamento com o uso de
espaçamentos consistentes. ................................................................................................ 359
Figura 265 - Exemplo de espaçamentos entre as áreas do formulário. ............................... 360
Figura 266 - Grupos de elementos separados por um divider. ............................................ 361
Figura 267 - Agrupando elementos com uma superfície com cor diferente. ....................... 362
Figura 268 - Exemplo do uso de tabs para organizar conteúdos de formulário em abas. .... 362
Figura 269 - Exemplo de utilização de Ajuda, Mensagens e Placeholders para adequação do
formulário à LGPD................................................................................................................ 364
Figura 270 - *Exemplo de Input anonimizado utilizando um identificador (2) e o componente
message (1).* ....................................................................................................................... 365
Figura 271 - Após do rótulo do campo, pode-se utilizar uma ilustração além de uma
mensagem textual para representar os dados anonimizados.............................................. 365
Figura 272 - Exemplo de organização do conteúdo utilizando agrupamentos e iconografia.
............................................................................................................................................. 367
Figura 273 - Exemplo de uso de Informações Adicionais. .................................................... 367
Figura 274 - Exemplo de formulário com exibição progressiva. ........................................... 368
Figura 275 - Exemplo do Componente Loading ................................................................... 368
Figura 276 - Exemplo de gráfico........................................................................................... 369
Figura 277 - Anatomia do gráfico. ........................................................................................ 370
Figura 278 - Exemplo do uso da área cabeçalho. ................................................................. 371
Figura 279 - Exemplo do uso do tooltip em um gráfico do tipo Mapa Geográfico na área
principal. .............................................................................................................................. 372
Figura 280 - Exemplo do uso da descrição do gráfico. ......................................................... 373
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 30 de 506
Figura 281 - Exemplo do uso da fonte de um gráfico. .......................................................... 374

Figura 282 - Exemplo de Gráfico de Colunas. ....................................................................... 375
Figura 283 - Exemplo de Gráfico em Barras. ........................................................................ 376
Figura 284 - Exemplo de Gráfico em Pizza. .......................................................................... 378
Figura 285 - Exemplo de Gráfico de Rosca. .......................................................................... 379
Figura 286 - Exemplo de Gráfico em Linhas. ........................................................................ 381
Figura 287 - Exemplo de Gráfico de Áreas. .......................................................................... 382
Figura 288 - Exemplo de Gráfico em Histograma. ................................................................ 383
Figura 289 - Exemplo de gráfico de dispersão. .................................................................... 385
Figura 290 - Exemplo de diagramas de dispersão. ............................................................... 386
Figura 291 - Exemplo de uso do gráfico de bolhas. .............................................................. 387
Figura 292 - Exemplo de outros tipos de gráficos. ............................................................... 389
Figura 293 - Fluxograma para auxiliar na escolha do gráfico. .............................................. 390
Figura 294 - Exemplo de gráfico com o uso da descrição longa. .......................................... 393
Figura 295 - À esquerda, um gráfico de pizza com três séries representadas com cores
parecidas e legendas à parte. Á direita, um gráfico de pizza com três séries representadas
com cores parecidas e legendas. ......................................................................................... 395
Figura 296 - Exemplo de combinações de cor que devem ser evitadas. .............................. 397
Figura 297 - Exemplo de uso excessivo de cores em um gráfico .......................................... 398
Figura 298 - Exemplo do uso de cores em gráficos associando-os com as cores do mundo real
............................................................................................................................................. 399
Figura 299 - Exemplo de uso de cor vibrante para ressaltar uma informação importante .. 400
Figura 300 - Imagem de um círculo e mapa com cores monocromáticas ............................ 401
Figura 301 - Imagem de círculos cromáticos com 5 esquemas de cores diferentes............. 402
Figura 302 - Á esquerda, uma tabela com símbolos em tons de verde, vermelho e amarelo
que sinalizam se os valores subiram (seta para cima), caíram (seta para baixo) ou se
mantiveram estáveis (sinal de igual). Á direita, uma tabela com círculos em tons de verde, ve
............................................................................................................................................. 403
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 31 de 506
Figura 303 - À esquerda, um mapa da Europa com regiões destacadas em tons de verde e
vermelho, cada uma com padrão de listras em direções opostas. À direita, um mapa da
Europa com regiões destacadas em tons de verde e vermelho. .......................................... 403
Figura 304 - À esquerda, um gráfico de colunas que mostra o percentual de três séries com
cores parecidas, separadas por um contorno branco. À direita, um gráfico de colunas que
mostra o percentual de três séries (X,Y,Z) com cores parecidas. ......................................... 404
Figura 305 - Á esquerda um gráfico de linhas com três séries representadas por cores
parecidas; cada série tem um padrão de traço e formas nos pontos (quadrado, losango,
triângulo). Á direita um gráfico de linhas com três séries representadas por cores parecidas e
............................................................................................................................................. 404
Figura 306 - Á esquerda, um gráfico de dispersão com três séries representadas por cores
parecidas e formas diferentes (quadrado, losango, triângulo). Á direita, um gráfico de
dispersão com três séries representadas por cores parecidas e círculos idênticos. ............ 405
Figura 307 - Exemplo do uso de gráfico no componente card. ............................................ 407
Figura 308 - Wireframe exemplificando um painel de gráficos............................................ 408
Figura 309 - Exemplo de uma melhor organização de um dashboard ................................. 409
Figura 310 - Exemplo hierarquia por tamanho e posicionamento em um dashboard. ........ 410
Figura 311 - Exemplo contexto numérico em um painel de dashboard ............................... 411
Figura 312 - Exemplo agrupamento de elementos em um dashboard. ............................... 412
Figura 313 - Exemplo layout consistente em um dashboard. .............................................. 413
Figura 314 - Exemplo arredondamento de números em um dashboard. ............................ 414
Figura 315 - Exemplo do uso da funcionalidade da expansão de um card. .......................... 415
Figura 316 - Gráfico do Card sendo ampliado. ..................................................................... 416
Figura 317 - Exemplo de filtragem de dados através de um componente select. ................ 417
Figura 318 - Exemplo de Onboarding ................................................................................... 418
Figura 319 - Anatomia do Onboarding ................................................................................. 419
Figura 320 - Utilize o Tooltip para exibir informações em pontos de destaque na interface 420
Figura 321 - Exemplos de customização do componente Carousel a partir do modelo
tradicional ............................................................................................................................ 421
Figura 322 - Buttons como controles de navegação ............................................................ 422
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 32 de 506
Figura 323 - Buttons Circulares como controles de navegação - Grid de 4 colunas e

Onboarding com ênfase textual........................................................................................... 422
Figura 324 - Hiperlink usado como atalho ao usuário que deseja pular o tutorial ............... 423
Figura 325 - Steps - usados para indicar progressão e controle de navegação .................... 423
Figura 326 - Uso da Superfície Overlay ................................................................................ 424
Figura 327 - Tipo - Ênfase na Interface................................................................................. 425
Figura 328 - Tipo - Ênfase Textual ........................................................................................ 426
Figura 329 - Exemplo de Boas Vindas para Novidades e Usuários Novatos ......................... 427
Figura 330 - Exemplo de Etapas Sequenciais Reduzidas ...................................................... 428
Figura 331 - Exemplo de Hiperlink para Pular Tutorial ......................................................... 429
Figura 332 - Exemplo de uso do Componente Checkbox para Desabilitar o Tutorial ........... 429
Figura 333 - Exemplo de Indicador de progresso com Step Simples ou Textual .................. 430
Figura 334 - Exemplo de tela de conclusão no Onboarding ................................................. 430
Figura 335 - Posicionamento Padrão - Na Base da tela ........................................................ 431
Figura 336 - Posicionamento Opcional - No centro-vertical ou no topo da tela .................. 432
Figura 337 - Posicionamento Aleatório do Tooltip exibindo o Menu em destaque ............. 433
Figura 338 - Posicionamento Aleatório do Tooltip exibindo o Header em destaque ........... 433
Figura 339 - Posicionamento Aleatório do Tooltip exibindo o Breadcrumbs em destaque . 434
Figura 340 - Exemplos de Collapse....................................................................................... 435
Figura 341 - Anatomia do Padrão Collapse .......................................................................... 436
Figura 342 - Exemplos de Acionadores ................................................................................ 437
Figura 343 - Iconografia Padrão do Collapse ........................................................................ 438
Figura 344 - Exemplos de outras formas de Iconografia ...................................................... 438
Figura 345 - Exemplos de outras formas de Iconografia ...................................................... 439
Figura 346 - Posição Padrão do Identificador de Expansão/Retração à direita .................... 440
Figura 347 - Identificador de Expansão/Retração posicionado à esquerda no Header ........ 440
Figura 348 - Exemplo do Identificador de Expansão/Retração no Button............................ 441
Figura 349 - Identificador de Expansão/Retração posicionado à esquerda na linha da tabela
............................................................................................................................................. 441
Figura 350 - Área/Conteúdo Expansível ............................................................................... 442
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 33 de 506
Figura 351 - Exemplos de Área/Conteúdo Expansível .......................................................... 442

Figura 352 - Área de Clique .................................................................................................. 443
Figura 353 - Área/Conteúdo Expansível cresce de acordo com o conteúdo ........................ 443
Figura 354 - Área/Conteúdo Expansível com tamanho fixo e barra de rolagem .................. 444
Figura 355 - A - Expandindo no sentido de leitura de cima para baixo ................................ 445
Figura 356 - B - Expandindo no sentido de leitura da esquerda para direita ....................... 445
Figura 357 - Utilização da Iconografia - Direção das Setas ................................................... 446
Figura 358 - Área/Conteúdo Expansível “empurra ou puxa” o conteúdo em tela ............... 447
Figura 359 - Área/Conteúdo Expansível “empurra ou puxa” o conteúdo em tela ............... 448
Figura 360 - Indentação em subníveis ................................................................................. 449
Figura 361 - Peso diferenciado em nível e subnível ............................................................. 450
Figura 362 - Escala de Tamanhos Tipográficos em níveis e subníveis .................................. 451
Figura 363 - Exemplo de gradação de cores em níveis e subníveis ...................................... 452
Figura 364 - Exemplo de recursos combinados - Indentação, Cores e Escala Tipográfica .... 453
Figura 365 - Exemplo de link no último subitem para uma janela modal ............................ 454
Figura 366 - Exemplo de Árvore - Como usar os ícones ....................................................... 455
Figura 367 - Expandindo Um Elemento Por Vez................................................................... 456
Figura 368 - Expandindo Vários Elementos .......................................................................... 457
Figura 369 - Identifique os principais usuários de sua aplicação e as atividades pertinentes a
eles ...................................................................................................................................... 458
Figura 370 - Defina prioridades alta, média e baixa para as atividades de cada tipo de usuário
............................................................................................................................................. 459
Figura 371 - Identifique quais caminhos os usuários percorrem.......................................... 459
Figura 372 - Desconstrução - Divida um formulário complexo em etapas menores utilizando
um Wizard por exemplo ...................................................................................................... 460
Figura 373 - A partir da home o usuário tem acesso as outras camadas hierárquicas ......... 461
Figura 374 - Pais e Filhos - Mantenha sempre o acesso entre elementos pais e filhos ........ 462
Figura 375 - Exemplo de Fluxo - Navegação Ascendente e Descendente ............................ 463
Figura 376 - Exemplo de navegação lateral (entre irmãos) .................................................. 464
Figura 377 - Os hiperlinks acessam qualquer localidade dentro ou fora de sua aplicação... 465
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 34 de 506
Figura 378 - Ilustração - Navegação Lateral ......................................................................... 467

Figura 379 - Exemplo de navegação lateral com Menu - O usuário pode navegar entre níveis
irmãos .................................................................................................................................. 468
Figura 380 - Exemplo de navegação lateral com Tabs - O usuário pode navegar entre níveis
irmãos .................................................................................................................................. 468
Figura 381 - Exemplo de Navegação com Cards em telas de Dashboard - Acessando níveis
inferiores na camada de hierarquia ..................................................................................... 470
Figura 382 - Exemplo de Navegação Sequencial com Wizard - O Usuário navega por etapas
sequenciais .......................................................................................................................... 471
Figura 383 - Exemplo de Navegação Sequencial com Pagination - O Usuário navega por
agrupamento de itens ordenados em lote........................................................................... 472
Figura 384 - Exemplo de Navegação Direta - O usuário acessa um conteúdo específico
através de pesquisa ............................................................................................................. 473
Figura 385 - Exemplo de Navegação Cronológica utilizando o button Voltar do Navegador 475
Figura 386 - Navegação Cronológica com Wizard ................................................................ 475
Figura 387 - Fluxo Reverso com Navegação Ascendente e Breadcrumbs ............................ 476
Figura 388 - Fluxo Reverso com Navegação Ascendente e Button Voltar ............................ 477
Figura 389 - Exemplo de Navegação Embutida em um App de música - Os controles de
navegação funcionam em uma forte visualização primária ................................................. 479
Figura 390 - Exemplo de Navegação Aninhada utilizando agrupamentos de pais e filhos no
Menu ................................................................................................................................... 480
Figura 391 - Exemplo de Navegação Aninhada com Collapse - Permite melhor otimização do
espaço vertical ..................................................................................................................... 481
Figura 392 - Exemplo de Navegação Aninhada com Dropdown - Adequado para aplicações
mobile ou espaços bastante reduzidos ................................................................................ 482
Figura 393 - Exemplo de Navegação Aninhada em Cascata ................................................. 483
Figura 394 - Exemplo de Navegação Aninhada em Cascata Mobile - Cada bloco em cascata é
visualizado individualmente pelo usuário ............................................................................ 484
Figura 395 - Exemplo de Navegação Gestual Horizontal - O usuário desliza o dedo
horizontalmente navegando sobre uma lista de músicas em um aplicativo ........................ 485
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 35 de 506
Figura 396 - Exemplo de Navegação Gestual Vertical - O usuário desliza o dedo verticalmente
navegando sobre uma lista em um aplicativo ...................................................................... 486
Figura 397 - Exemplo de Navegação Gestual com Touch - O usuário aciona elementos
interativos com o toque....................................................................................................... 487
Figura 398 - Exemplo de Navegação Gestual com Zoom - O usuário utiliza dois dedos para
ampliar ou reduzir a visualização do elemento ou da tela ................................................... 488
Figura 399 - Exemplo Combinado de Menu e Tabs - Neste exemplo foi utilizado dois
componentes adequados para navegação do tipo Lateral. O Menu possui uma navegação
lateral entre níveis “pais”, enquanto que os Tabs possuem navegação lateral entre itens
“filhos”. ................................................................................................................................ 489
Figura 400 - Exemplo Combinado de Menu Aninhado e Tabs - Neste exemplo foi reforçado
mais ainda um modelo de navegação aninhada e navegação lateral. Enquanto o componente
Menu já possui aninhamento com itens “filhos” utiliza-se o componente Tabs para exibir
itens ..................................................................................................................................... 489
Figura 401 - Exemplo de Empty State .................................................................................. 490
Figura 402 - Anatomia do Empty State ................................................................................ 492
Figura 403 - Exemplo de Ausência de Dados em Galeria de Imagens .................................. 493
Figura 404 - Ausência de Dados por Ação do Usuário em uma Pesquisa ............................. 495
Figura 405 - Ausência de Dados por Ação do Usuário em Próximas Etapas ......................... 496
Figura 406 - Gerenciamento de Erros em Empty States - O usuário tenta realizar upload de
um arquivo não compatível. A mensagem de Empty State ocorre no local onde deveria
aparecer o dado do arquivo enviado. .................................................................................. 497
Figura 407 - Exemplos de alinhamento de Empty States em espaços reduzidos. Imagem
centralizada ou alinhada à esquerda. .................................................................................. 499
Figura 408 - Exemplo de Tamanho das Ilustrações (Certo e Errado) .................................... 500
Figura 409 - Exemplo de Empty States em espaços muito reduzidos (Certo e Errado) ........ 501
Figura 410 - Semântica em Ilustrações (Certo e Errado) ...................................................... 501
Figura 411 - Utilizando Vários Empty States - Forma Errada ................................................ 502
Figura 412 - Utilizando Vários Empty States - Forma Correta .............................................. 502
Figura 413 - Alinhamento do Empty State - Margem lateral maior ..................................... 503
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 36 de 506
Figura 414 - Alinhamento do Empty State - Bloco Centralizado .......................................... 503

Figura 415 - Exemplo de Empty State em Tabelas - Forma Errada - Exibe conteúdo irrelevante
............................................................................................................................................. 504
Figura 416 - Exemplo de Empty State em Tabelas - Forma Correta - Oculta conteúdo
irrelevante ........................................................................................................................... 504
Figura 417 - Imagens amplas ou horizontais acima do texto e imagens menores ou verticais à
esquerda do texto................................................................................................................ 505
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 37 de 506
ESCOPO DETALHADO DO PROJETO:

Introdução:
As Tecnologias de Informação e Comunicação (TICs) são instrumentos cada vez mais
importantes no desenvolvimento de ferramentas que melhorem a prestação de serviços e a
disponibilização de informações primordiais para os cidadãos. A adoção dessas tecnologias
permite o aumento da eficácia, da eficiência e da transparência governamental.
A adoção de meios eletrônicos para a prestação dos serviços governamentais exige que sítios
e portais desenvolvidos e mantidos pela administração pública sejam fáceis de usar,
relevantes e efetivos. Somente por meio da eficiência é possível aumentar a satisfação dos
usuários de serviços eletrônicos e conquistar gradativamente uma parcela cada vez maior da
população.
É, portanto, responsabilidade da administração pública oferecer ao cidadão a melhor

experiência possível de acesso, respeitando inclusive, as particularidades da população
atingida.
Os Padrões Web são recomendações de boas práticas com o objetivo de aprimorar a

comunicação e o fornecimento de informações e serviços prestados por meios eletrônicos
pelos órgãos da Administração Pública.
PRINCÍPIOS DO DESIGN
Objetivos dos Princípios
1. Guiar decisões de design;
2. Ser autênticos e específicos, em vez de genéricos;
3. Ser facilmente memorizáveis, fáceis de lembrar e utilizáveis no dia a dia.
Experiência Única
Os diversos serviços digitais da autarquia se propõem a atender os cidadãos como uma central
única, um balcão de atendimento, que ofereça soluções para diferentes necessidades. Devem,
portanto, compartilhar e seguir os mesmos padrões estruturais e visuais. A experiência precisa
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 38 de 506
conferir confiança aos usuários, diminuindo sua curva de aprendizado. A interface deve ser
consistente, mas flexível e adaptável de acordo com o contexto de quem a utiliza.
Eficiência e Clareza
É importante que os processos dos serviços sejam simples e eficazes, com informações
organizadas e estruturadas para solucionar de forma rápida e clara as necessidades dos
usuários. Informações importantes e essenciais para o uso dos serviços devem ser sempre
priorizadas. A eficiência precisa ser alcançada sem prejudicar a compreensão do usuário (pode
ser mais adequado um maior número de etapas se as informações e o processo do serviço
ficarem mais claros para o usuário, por exemplo).
Acessibilidade
O sistema de serviços deve cumprir as diferentes necessidades de acessibilidade, atendendo
às orientações do e-MAG - Modelo de Acessibilidade em Governo Eletrônico - e,
principalmente, considerar os diferentes usos e acessos ao portal.
Reutilização
Interfaces digitais dos sites, aplicativos e sistemas de governo devem utilizar componentes
existentes sempre que possível. Caso haja necessidade de criar um novo, os padrões visuais e
funcionais devem ser respeitados.
Colaboração
O aprimoramento contínuo dos padrões apresentados pelo Design deve ser incremental,
colaborativo e contínuo, baseado nas necessidades dos cidadãos e na experiência de aplicação
já adquirida.
Boas Práticas
Boas Práticas de estruturação de Serviços foram revistas com o objetivo de garantir uma
melhoria no atendimento aos cidadãos.
Priorizar atenção ao usuário, no lugar do foco na tecnologia: é preciso entender a

necessidade do usuário para, só depois, pensar em como atendê-la. A tecnologia deve se
adequar ao objetivo e não o contrário. Recomenda-se pensar em mais de uma maneira para
resolver um problema.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 39 de 506
Boa fé dos usuários como premissa: não sacrificar soluções mais simples e eficientes em
função de possível má-fé do usuário. Mecanismos de controle devem ser usados
racionalmente de forma a minimizar os danos na experiência do usuário, sem prejudicar sua
aplicação.
Compreensão e Compatibilidade: os serviços devem ser compreensíveis tanto para usuários

quanto para máquinas, sendo também compatíveis com assistentes virtuais. É preciso que a
inteligência artificial possibilite isso à medida que apoia a classificação e organização do
conteúdo dos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 40 de 506
PADRÃO VISUAL DIGITAL
Observe abaixo alguns pontos de aderência mínima para adequar sua interface.
Figura 1 - Pontos de Aderência
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 41 de 506
Web Responsivo
A identidade visual da FACAPE aplicada em diversos dispositivos.
1. Cabeçalho
2. Logo
3. Rodapé
4. Tipografia Rawline
5. Paleta de Cores
6. Botões
Figura 2 - Aplicativos
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 42 de 506
Adote as boas práticas para criar formulários

1. Trabalhe a semântica de forma eficiente
2. Ordene os botões de ação
3. Organize os campos
4. Aplique os fundamentos visuais mínimos
5. Fundamentos
6. Aplicados
Figura 3 - Boas práticas para criar formulários
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 43 de 506
Figura 4 - Interface
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 44 de 506
7. Cores
Utilize as cores baseando-se em suas funções:
Figura 5 – Cores
8. Tipografia
Utilize a família tipográfica padrão da FACAPE com suas variações de peso e estilo.
9. Iconografia
Ao utilizar ícones, siga orientações contidas no planejamento iconográfico da FACAPE, para
guiar em suas representações visuais!
10. Cabeçalho e Rodapé

O cabeçalho ajuda a identificar seu produto/serviço e auxilia o usuário no acesso ou mesmo
execução das funcionalidades principais; Já o rodapé ajuda na localização do usuário dentro
da interface e apresenta informações complementares;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 45 de 506
PRINCÍPIOS DO DESIGN
Objetivos dos Princípios
1. guiar decisões de design;
2. ser autênticos e específicos, em vez de genéricos;
3. ser facilmente memorizáveis, fáceis de lembrar e utilizáveis no dia a dia.
Experiência Única
Os diversos serviços digitais da autarquia se propõem a atender os cidadãos como uma central
única, um balcão de atendimento, que ofereça soluções para diferentes necessidades. Devem,
portanto, compartilhar e seguir os mesmos padrões estruturais e visuais. A experiência precisa
conferir confiança aos usuários, diminuindo sua curva de aprendizado. A interface deve ser
consistente, mas flexível e adaptável de acordo com o contexto de quem a utiliza.
É importante que os processos dos serviços sejam simples e eficazes, com informações
organizadas e estruturadas para solucionar de forma rápida e clara as necessidades dos
usuários. Informações importantes e essenciais para o uso dos serviços devem ser sempre
priorizadas. A eficiência precisa ser alcançada sem prejudicar a compreensão do usuário (pode
ser mais adequado um maior número de etapas se as informações e o processo do serviço
ficarem mais claros para o usuário, por exemplo).
Acessibilidade
O sistema de serviços deve cumprir as diferentes necessidades de acessibilidade, atendendo
às orientações do e-MAG - Modelo de Acessibilidade em Governo Eletrônico - e,
principalmente, considerar os diferentes usos e acessos ao portal.
Reutilização
Interfaces digitais dos sites, aplicativos e sistemas de governo devem utilizar componentes
existentes sempre que possível. Caso haja necessidade de criar um novo, os padrões visuais e
funcionais devem ser respeitados.
Colaboração
O aprimoramento contínuo dos padrões apresentados pelo Design deve ser incremental,
colaborativo e contínuo, baseado nas necessidades dos cidadãos e na experiência de aplicação
já adquirida.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 46 de 506
Boas Práticas
Boas Práticas de estruturação de Serviços foram revistas com o objetivo de garantir uma
melhoria no atendimento aos cidadãos.
Priorizar atenção ao usuário, no lugar do foco na tecnologia: é preciso entender a

necessidade do usuário para, só depois, pensar em como atendê-la. A tecnologia deve se
adequar ao objetivo e não o contrário. Recomenda-se pensar em mais de uma maneira para
resolver um problema.
Boa fé dos usuários como premissa: não sacrificar soluções mais simples e eficientes em
função de possível má-fé do usuário. Mecanismos de controle devem ser usados
racionalmente de forma a minimizar os danos na experiência do usuário, sem prejudicar sua
aplicação.
Compreensão e Compatibilidade: os serviços devem ser compreensíveis tanto para usuários

quanto para máquinas, sendo também compatíveis com assistentes virtuais.É preciso que a
inteligência artificial possibilite isso à medida que apoia a classificação e organização do
conteúdo dos serviços
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 47 de 506
MANUAIS
CORES
A aplicação correta da paleta de cores visa trazer consistência ao Design e contribuir para
garantir uma interface unificada e facilmente reconhecível pelos seus usuários. É fundamental
que a paleta esteja alinhada aos Princípios do Design e seja aplicada corretamente na
biblioteca de componentes contribuindo para o equilíbrio entre os diversos produtos e
sistemas da autarquia.
Princípios
Experiência Única
A paleta do Design FACAPE é constituída e organizada por cores e famílias de cores,
abrangendo dimensões de matizes, brilhos e saturação. Além disso, são estabelecidas
finalidades específicas para algumas dessas famílias: Cores de Superfície, Cores de Leitura,
Cores Interativas e Cores de Feedback. Elas têm o objetivo de preservar a identidade visual e
manter a mesma experiência em todos os produtos e sistemas da autarquia.
Exemplo: Nesse sistema, a família Blue Warm Vivid, que contém a cor Blue Warm Vivid 70,
foram as cores selecionadas para representar a identidade da autarquia.
A cor deve indicar o estado e hierarquia dos elementos dispostos em uma interface,
facilitando o feedback e comunicação entre a interface e o usuário, enquanto se mantêm
consistentes ao longo de toda a navegação.
Exemplo: A cor ajuda a indicar quais elementos são interativos, como eles se relacionam com
outros elementos.
Acessibilidade
Um sistema de serviço deve cumprir as diferentes necessidades de acessibilidade. Para tanto,
as cores existentes na paleta foram selecionadas para se obter um mínimo de contraste e
garantir boa legibilidade nas interfaces digitais.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 48 de 506
A WCAG 2.1 (Diretrizes de Acessibilidade para o Conteúdo da Web) descreve que existem
vários níveis de conformidade (A, AA ou AAA), de forma que, quanto mais itens são atendidos,
maior será o nível ou suporte de acessibilidade na interface.
O contraste varia entre 1 a 21 (geralmente descritos 1:1 a 21:1).
O nível AA indica que é necessária uma taxa de contraste de pelo menos 4,5:1 para que o texto
seja considerado normal e tenha boa legibilidade. Para texto grande a taxa de contraste
mínimo deve ser de pelo menos 3:1.
O nível AAA requer uma taxa de contraste de pelo menos 7:1 para texto normal e 4,5:1 para
texto grande.
É considerado texto grande aquele em que a fonte possui pelo menos 18 pontos (24px,
1,71em, 171% do tamanho padrão da Fonte Base, veja Tipografia para maiores detalhes) ou
14 pontos em negrito (19px, 1,325em, 132,5%), um texto com tamanho abaixo desses valores
(tal como 14pt regular) é considerado texto normal.
Elementos gráficos e componentes da interface (como ícones e bordas) seguem as mesmas

regras de texto grande.
O Design da autarquia trabalha com nível de conformidade mínima de AA (na taxa de

contraste 4,5:1), pois permite uma flexibilidade maior de variações de cores (em relação à
conformidade AAA) e atende aos critérios mínimos de contraste proposto pela WCAG 2.1.
Observação: algumas cores foram selecionadas para um uso bastante específico, deste modo,
elas funcionam no contraste mínimo de 3:1, ou seja, apenas para uso em elementos gráficos
(ou texto grande).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 49 de 506
Para testar a acessibilidade das cores foram utilizadas as seguintes ferramentas online
https://contrastchecker.com/ e https://webaim.org/resources/contrastchecker/
Para o Design foi analisado a relação de contraste entre a cor aplicada aos textos (2 variações
que dependendo do brilho do plano de fundo da interface: claro ou escuro) e as cores que
compõem a paleta do DS.
Exemplo: Para o texto em fundo claro optou-se pelo uso do cinza #333333 que possui
contraste inferior ao preto, mas suficiente para uma boa leitura na tela. O tom neutro, deixa
a composição mais leve, tornando a leitura mais agradável. Para texto em fundo escuro optou-
se pela cor branca #FFFFF.
Reutilização e Colaboração
Interfaces digitais da autarquia devem utilizar sempre as cores pré-definidas. Havendo a
necessidade de acrescentar uma nova cor à paleta do DS, faz-se necessário que a cor seja
testada do ponto de vista de acessibilidade e passe por uma prévia aprovação da equipe de
design do DS.
OBS: Consulte a acessibilidade das cores usadas no Design FACAPE na Tabela de Contraste.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 50 de 506
SISTEMA DE CORES
O sistema de cores utilizado no Design FACAPE, assim como o modelo de gradação em
luminância e Famílias de Cores, foram adaptados do modelo de cores do U.S. Web Design
(USWDS).
COR
É qualquer amostra específica em nossas famílias de cores. Elas são representadas por uma
nomenclatura construída com base na família e luminância. Por exemplo: Red 50, Blue Warm
Vivid 70, Indigo Cool Vivid 5, etc.
Família de Cores
É um grupo de cores que têm o mesmo matiz em um círculo cromático. Eles contêm várias
cores individuais, diferenciadas pelo brilho ou saturação de cada uma delas. Uma família de
cores é normalmente representada por um nome que faz referência a sua matiz, como por
exemplo: Red, Blue Warm, Green Cool, etc.
As famílias de cores do Design FACAPE são escolhidas a partir do modelo HSL (Hue, Saturation,
Lightness), sistema de cores que utiliza os parâmetros de matiz, saturação e brilho, sendo
dispostas em 360º em um círculo cromático. Desta forma, é possível rotular cada família
através de sua posição em graus, neste modelo. As cores são selecionadas seguindo a mesma
lógica de gradação de luminância em todas as famílias.
Família de Cores Alternativas

Refere-se ao mesmo conceito de Família de Cores. Fazem parte de um grupo de cores de um
mesmo matiz mas pertencentes a um outro círculo cromático (com característica diferente da
família “padrão”). Sua nomenclatura tem a mesma base da Família de Cores adicionando um
sufixo.
Atualmente temos apenas um círculo cromático alternativo chamado Vivid, criando famílias
como Red Vivid, Blue Warm Vivid, Green Cool Vivid, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 51 de 506
Círculo Cromático
Os círculos cromáticos são uma maneira de exibir as famílias do sistema de cores do Design
FACAPE, dispostas em 360° no modelo de cores HSL. Cada família de cores está localizada com
sua posição (em graus) neste modelo.
Abaixo é possível observar o padrão das famílias de cores do Design FACAPE dentro de cada
círculo cromático.
Figura 6- Círculo cromático (padrão)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 52 de 506
Figura 7 - Círculo cromático vivid (alternativo) - cores mais saturadas.
Existem algumas famílias que não estão visíveis dentro dos círculos cromáticos acima, mas
que podem ser usados como cores neutras:
Famílias de Cinza: Gray, Gray-Cool e Gray-Warm.

Família Pura: Pure
A lista de todas as cores disponíveis pode ser encontrada na Paleta do Design FACAPE.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 53 de 506
Função das Cores

O Design FACAPE estabelece finalidades específicas utilizando as famílias de cores, com o
intuito de facilitar a lógica para criação de temas. Em cada função estabelecida, qualquer cor
da família especificada poderá ser usada, porém é recomendado utilizar a cor principal ou as
alternativas indicadas nas escalas de cores.
Obs: Em algumas situações, poderá ser observado o uso 2 de famílias para um determinada
função e aplicação de fundo. Isso acontece por causa do uso da Família Pure, ela funciona
como uma “família de apoio” para as demais. Maiores informações veja Paleta do Design
FACAPE.
Cor Principal
É a recomendação de uso principal que poderá ser usada para as finalidades estabelecidas.
São representadas pela letra P e indicadas na Família de Cores da seguinte forma:
Figura 8 - Exemplo de Indicação - Cor Principal

Cor Alternativa
São alternativas de cores recomendadas que podem ser usadas quando não for possível
utilizar a recomendação principal, ou trabalhar com ênfases. São representadas pela letra A e
indicadas na Família de Cores da seguinte forma:
Figura 9 - Exemplo de Indicação - Cor Alternativa
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 54 de 506
Fundo Claro Vs Fundo Escuro

Quando se escolhe uma cor para um determinado elemento ou função, geralmente existe
uma superfície comum da qual será aplicado aquele elemento. Porém, em algumas situações,
a luminância desse fundo pode ser diferente do habitual, gerando contraste insuficiente
(entre o fundo e o elemento) para se perceber o elemento. Sempre que escolher uma cor (seja
a principal ou as alternativas), determine o uso dela em diferentes luminâncias. Para facilitar,
podemos pensar no uso desses elementos em diferentes superfícies: claro e escuro.
Abaixo estão listadas as principais funções das cores, as recomendações de qual família de cor
utilizar, assim como a recomendação da cor principal e das alternativas dentro do tema base.
Obs: Cada função está ligada a um ou mais fundamentos. Procure as documentações

relacionadas para maiores detalhes.
1. Função Contêiner (Superfícies)
As cores de superfície são utilizadas como base cromática neutra para composição do tema e
compõem harmonicamente com as demais cores. São usadas especificamente em planos de
fundo nas telas da interface e superfícies de componentes. Também devem proporcionar
contraste com o texto e elementos interativos, assim como qualquer outro elemento de
comunicação visual na interface, como imagens, ilustrações, ícones, etc.
Especificação
De modo geral, as cores de superfície mais utilizadas são as gradações de cinza, presentes na
família Gray e branco ou preto na família Pure. Também pode se utilizar a família Blue Warm
Vivid para fundos escuros. Elas são usadas como plano de fundo na tela e praticamente em
todos os componentes do Design FACAPE.
FUNDO CLARO
Legenda Recomendação Hexadecimal Token
P Cor Principal #ffffff --pure-0
A Cor Alternativa #f8f8f8 --gray-2
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 55 de 506
Figura 10 - Cor Superfície - Família Pure para Fundos Claros
Figura 11 - Cor Superfície Alternativa - Família Gray para Fundos Claros
FUNDO ESCURO
P Cor Principal #071D41 --blue-warm-vivid-90
A Cor Principal #0C326F --blue-warm-vivid-80
Figura 12 - Cor Superfície - Família Blue Warm Vivid para Fundos Escuros
2. Função Leitura (Tipografia e Iconografia)

São as cores usadas nos elementos que necessitam de legibilidade, como textos e ícones, por
exemplo. A função principal dessas cores é proporcionar contraste com a Cor Superfície usada
na tela ou elementos. Logo, para toda Cor Superfície, existe uma Cor Leitura contrastante.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 56 de 506
Especificação
FUNDO CLARO
P Cor Principal #333333 --gray-80
Figura 13 - Cor Leitura - Família Gray para Fundos Claros

Cor Leitura - Família Gray para Fundos Claros
FUNDO ESCURO
P Cor Principal #ffffff --pure-0
Figura 14 - Cor Leitura - Família Pure para Fundos Escuros
3. Função Feedback (Estados)

São representações visuais para feedbacks interativos ou informacionais relacionadas aos
elementos na interface. Podemos subdividir essa função em dois grupos de
estados: interação e avisos.
Função Interação
São cores que servem para indicar ao usuário a possibilidade de interação sobre qualquer
elemento que a utiliza. É necessário que estas cores se destaquem sobre os outros elementos
ou informações textuais na interface.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 57 de 506
ESPECIFICAÇÃO
Para este tipo de cor, utilizam-se as famílias Blue Warm e Blue Warm Vivid. Abaixo seguem as
referências.
FUNDO CLARO
P Cor Principal #1351B4 --blue-warm-vivid-70
Cor Interativa - Família Blue Warm Vivid para Fundos Claros

FUNDO ESCURO
P Cor Principal #C5D4EB --blue-warm-20
Cor Interativa - Família Blue Warm para Fundos Escuros

Função de Avisos
As cores de avisos foram escolhidas para serem aplicadas em situações que exijam mais
atenção do usuário, como ocorre nas mensagens de Feedback e estados correlacionados.
ESPECIFICAÇÃO
São cores fortemente reconhecidas pela boa parte dos usuários e relacionadas a avisos
específicos. Consulte o documento Fundamentos Visuais > Estados para maiores informações.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 58 de 506
FEEDBACK INFORMAÇÃO
P Cor Principal #155BCB --blue-warm-vivid-60
A Cor Alternativa #D4E5FF --blue-warm-vivid-10
Figura 15 - Cor Feedback Informação - Família Blue Warm Vivid
FEEDBACK SUCESSO
P Cor Principal #168821 --green-cool-vivid-50
A Cor Alternativa #E3F5E1 --green-cool-vivid-5
Figura 16 - Cor Feedback Sucesso - Família Green Cool Vivid

FEEDBACK ALERTA
P Cor Principal #FFCD07 --yellow-vivid-20
A Cor Alternativa #FFF5C2 --yellow-vivid-5
Figura 17 - Cor Feedback Alerta - Família Yellow Vivid
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 59 de 506
FEEDBACK ERRO
P Cor Principal #E52207 --red-vivid-50
A Cor Alternativa #FDE0DB --red-vivid-10
Cor Feedback Erro - Família Red Vivid
Paleta do Design FACAPE

Como dito anteriormente, a paleta do Design FACAPE foi constituída por grupos de famílias,
formadas por grupos de cores dentro do círculo cromático (HSL), com um matiz igual ou muito
próximo. As famílias alternativas estão descritas com sufixo Vivid junto ao nome da família.
Os nomes das cores são formados pelo nome da família correspondente, adicionando o fator
de luminância ao qual ela pertence, dentro daquela família.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 60 de 506
Abaixo estão listadas todas as famílias do Design FACAPE.

Red
Cor Nome da Cor Luminância HSL / Hexadecimal Token
Red 90 0.008 hsl(0, 10%, 10%) / #1b1616 --red-90
Red 80 0.027 hsl(5, 23%, 20%) / #3e2927 --red-80
Red 70 0.059 hsl(2, 39%, 31%) / #6f3331 --red-70
Red 60 0.106 hsl(0, 49%, 43%) / #a23737 --red-60
Red 50 0.177 hsl(2, 68%, 52%) / #d83933 --red-50
Red 40 0.282 hsl(4, 76%, 64%) / #e9695f --red-40
Red 30 0.416 hsl(4, 80%, 75%) / #f2938c --red-30
Red 20 0.584 hsl(9, 81%, 83%) / #F7BBB1 --red-20
Red 10 0.790 hsl(7, 65%, 92%) / #F8E1DE --red-10
Red 5 0.874 hsl(0, 48%, 95%) / #F9EEEE --red-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 61 de 506
Red Vivid
Red Vivid 80 0.027 hsl(0, 69%, 21%) / #5C1111 --red-vivid-80
Red Vivid 70 0.057 hsl(3, 96%, 28%) / #8B0A03 --red-vivid-70
Red Vivid 60 0.100 hsl(0, 91%, 37%) / #B50909 --red-vivid-60
Red Vivid 50 0.178 hsl(7, 94%, 46%) / #E52207 --red-vivid-50
Red Vivid 40 0.282 hsl(6, 96%, 63%) / #FB5A47 --red-vivid-40
Red Vivid 30 0.417 hsl(8, 100%, 74%) / #FF8D7B --red-vivid-30
Red Vivid 20 0.582 hsl(8, 95%, 84%) / #FDB8AE --red-vivid-20
Red Vivid 10 0.793 hsl(9, 89%, 93%) / #FDE0DB --red-vivid-10
Red Vivid 5 0.917 hsl(5, 100%, 97%) / #FFF3F2 --red-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 62 de 506
Red Cool
Red Cool 90 0.008 hsl(347, 18%, 10%) / #1E1517 --red-cool-90
Red Cool 80 0.027 hsl(350, 23%, 20%) / #40282C --red-cool-80
Red Cool 70 0.059 hsl(349, 32%, 31%) / #68363F --red-cool-70
Red Cool 60 0.107 hsl(349, 47%, 42%) / #9E394B --red-cool-60
Red Cool 50 0.176 hsl(349, 58%, 53%) / #CD425B --red-cool-50
Red Cool 40 0.280 hsl(349, 66%, 65%) / #E16B80 --red-cool-40
Red Cool 30 0.417 hsl(350, 53%, 74%) / #E09AA6 --red-cool-30
Red Cool 20 0.587 hsl(350, 55%, 84%) / #ECBEC6 --red-cool-20
Red Cool 10 0.785 hsl(350, 43%, 92%) / #F3E1E4 --red-cool-10
Red Cool 5 0.880 hsl(347, 39%, 95%) / #F8EFF1 --red-cool-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 63 de 506
Red Cool Vivid

Red Cool Vivid hsl(351, 48%, --red-cool-vivid-
0.026
80 21%) / #4F1C24 80
0.060
70 32%) / #822133 70
0.106
60 41%) / #B21D38 60
0.177
50 50%) / #E41D3D 50
0.284
40 66%) / #F45D79 40
0.418
30 77%) / #FD8BA0 30
0.586
20 85%) / #F8B9C5 20
0.782
10 92%) / #F8DFE2 10
hsl(346, 100%,
Red Cool Vivid 5 0.913 --red-cool-vivid-5
97%) / #FFF2F5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 64 de 506
Red Warm
Red Warm 90 0.011 hsl(34, 13%, 11%) / #1F1C18 --red-warm-90
Red Warm 80 0.027 hsl(24, 11%, 18%) / #332D29 --red-warm-80
Red Warm 70 0.059 hsl(26, 21%, 27%) / #524236 --red-warm-70
Red Warm 60 0.106 hsl(19, 38%, 36%) / #805039 --red-warm-60
Red Warm 50 0.176 hsl(15, 63%, 47%) / #C3512C --red-warm-50
Red Warm 40 0.282 hsl(17, 58%, 58%) / #D27A56 --red-warm-40
Red Warm 30 0.419 hsl(20, 57%, 68%) / #DCA081 --red-warm-30
Red Warm 20 0.583 hsl(22, 64%, 79%) / #ECC0A7 --red-warm-20
Red Warm 10 0.792 hsl(19, 53%, 91%) / #F4E3DB --red-warm-10
Red Warm 5 0.872 hsl(25, 40%, 94%) / #F6EFEA --red-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 65 de 506
Red Warm Vivid

Red Warm Vivid 80 0.027 hsl(23, 35%, 18%) / #3E2A1E --red-warm-vivid-80
Red Warm Vivid 70 0.051 hsl(26, 74%, 22%) / #63340F --red-warm-vivid-70
Red Warm Vivid 60 0.104 hsl(19, 81%, 34%) / #9C3D10 --red-warm-vivid-60
Red Warm Vivid 50 0.181 hsl(17, 92%, 44%) / #D54309 --red-warm-vivid-50
Red Warm Vivid 40 0.264 hsl(17, 86%, 54%) / #EF5E25 --red-warm-vivid-40
Red Warm Vivid 30 0.406 hsl(18, 85%, 68%) / #F39268 --red-warm-vivid-30
Red Warm Vivid 20 0.583 hsl(22, 83%, 79%) / #F6BD9C --red-warm-vivid-20
Red Warm Vivid 10 0.792 hsl(19, 87%, 91%) / #FCE1D4 --red-warm-vivid-10
Red Warm Vivid 5 0.927 hsl(25, 100%, 97%) / #FFF5EE --red-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 66 de 506
Orange
Orange 90 0.008 hsl(17, 15%, 9%) / #1B1614 --orange-90
Orange 80 0.027 hsl(30, 13%, 18%) / #332D27 --orange-80
Orange 70 0.059 hsl(26, 21%, 27%) / #524236 --orange-70
Orange 60 0.107 hsl(23, 30%, 36%) / #775540 --orange-60
Orange 50 0.176 hsl(26, 48%, 43%) / #A26739 --orange-50
Orange 40 0.283 hsl(23, 71%, 53%) / #DD7533 --orange-40
Orange 30 0.418 hsl(23, 83%, 66%) / #F09860 --orange-30
Orange 20 0.583 hsl(28, 80%, 76%) / #F3BF90 --orange-20
Orange 10 0.791 hsl(32, 54%, 89%) / #F2E4D4 --orange-10
Orange 5 0.872 hsl(28, 42%, 94%) / #F6EFE9 --orange-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 67 de 506
Orange Vivid
Orange Vivid 80 0.020 hsl(28, 47%, 14%) / #352313 --orange-vivid-80
Orange Vivid 70 0.051 hsl(26, 61%, 23%) / #5F3617 --orange-vivid-70
Orange Vivid 60 0.101 hsl(23, 67%, 33%) / #8C471C --orange-vivid-60
Orange Vivid 50 0.178 hsl(27, 100%, 38%) / #C05600 --orange-vivid-50
Orange Vivid 40 0.282 hsl(27, 89%, 48%) / #E66F0E --orange-vivid-40
Orange Vivid 30 0.400 hsl(33, 100%, 50%) / #FF8C00 --orange-vivid-30
Orange Vivid 20 0.585 hsl(30, 100%, 74%) / #FFBC78 --orange-vivid-20
Orange Vivid 10 0.791 hsl(32, 90%, 88%) / #FCE2C5 --orange-vivid-10
Orange Vivid 5 0.919 hsl(39, 85%, 95%) / #FDF5E6 --orange-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 68 de 506
Orange Warm
--orange-warm-
Orange Warm 90 0.008 hsl(9, 14%, 10%) / #1C1615
90
--orange-warm-
Orange Warm 80 0.027 hsl(10, 24%, 19%) / #3D2925
80
--orange-warm-
Orange Warm 70 0.059 hsl(10, 33%, 29%) / #633A32
70
--orange-warm-
Orange Warm 60 0.107 hsl(12, 47%, 39%) / #914734
60
hsl(19, 66%, --orange-warm-
Orange Warm 50 0.177
45%) / #BD5727 50
--orange-warm-
Orange Warm 40 0.281 hsl(18, 73%, 57%) / #E17141
40
--orange-warm-
Orange Warm 30 0.419 hsl(18, 85%, 69%) / #F3966D
30
--orange-warm-
Orange Warm 20 0.583 hsl(18, 84%, 80%) / #F7BCA2
20
--orange-warm-
Orange Warm 10 0.783 hsl(22, 84%, 90%) / #FBE0D0
10
Orange Warm 5 0.871 hsl(26, 68%, 94%) / #FAEEE5 --orange-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 69 de 506
Orange Warm Vivid

Orange Warm Vivid 80 0.022 hsl(11, 36%, 18%) / #3D231D --orange-warm-vivid-80
Orange Warm Vivid 70 0.052 hsl(10, 74%, 27%) / #782312 --orange-warm-vivid-70
Orange Warm Vivid 60 0.102 hsl(12, 83%, 36%) / #A72F10 --orange-warm-vivid-60
Orange Warm Vivid 50 0.180 hsl(21, 100%, 41%) / #CF4900 --orange-warm-vivid-50
Orange Warm Vivid 40 0.282 hsl(19, 100%, 52%) / #FF580A --orange-warm-vivid-40
Orange Warm Vivid 30 0.417 hsl(15, 96%, 71%) / #FC906D --orange-warm-vivid-30
Orange Warm Vivid 20 0.584 hsl(14, 91%, 82%) / #FBBAA7 --orange-warm-vivid-20
Orange Warm Vivid 10 0.802 hsl(22, 100%, 91%) / #FFE2D1 --orange-warm-vivid-10
Orange Warm Vivid 5 0.913 hsl(26, 100%, 96%) / #FFF3EA --orange-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 70 de 506
Gold
Gold 90 0.008 hsl(36, 11%, 9%) / #191714 --gold-90
Gold 80 0.026 hsl(35, 14%, 17%) / #322D26 --gold-80
Gold 70 0.059 hsl(34, 16%, 26%) / #4D4438 --gold-70
Gold 60 0.107 hsl(30, 20%, 35%) / #6B5947 --gold-60
Gold 50 0.179 hsl(31, 29%, 43%) / #8E704F --gold-50
Gold 40 0.282 hsl(32, 31%, 54%) / #AD8B65 --gold-40
Gold 30 0.419 hsl(36, 40%, 63%) / #C7A97B --gold-30
Gold 20 0.582 hsl(39, 51%, 74%) / #DEC69A --gold-20
Gold 10 0.791 hsl(40, 56%, 87%) / #F1E5CD --gold-10
Gold 5 0.874 hsl(40, 43%, 93%) / #F5F0E6 --gold-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 71 de 506
Gold Vivid
Gold Vivid 80 0.027 hsl(35, 48%, 16%) / #3B2B15 --gold-vivid-80
Gold Vivid 70 0.060 hsl(40, 80%, 20%) / #5C410A --gold-vivid-70
Gold Vivid 60 0.113 hsl(39, 65%, 29%) / #7A591A --gold-vivid-60
Gold Vivid 50 0.178 hsl(36, 45%, 40%) / #936F38 --gold-vivid-50
Gold Vivid 40 0.282 hsl(40, 88%, 40%) / #C2850C --gold-vivid-40
Gold Vivid 30 0.417 hsl(42, 100%, 45%) / #E5A000 --gold-vivid-30
Gold Vivid 20 0.582 hsl(41, 100%, 59%) / #FFBE2E --gold-vivid-20
Gold Vivid 10 0.784 hsl(44, 100%, 79%) / #FFE396 --gold-vivid-10
Gold Vivid 5 0.875 hsl(44, 96%, 89%) / #FEF0C8 --gold-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 72 de 506
Yellow
Yellow 90 0.008 hsl(20, 13%, 9%) / #1A1614 --yellow-90
Yellow 80 0.027 hsl(30, 13%, 18%) / #332D27 --yellow-80
Yellow 70 0.059 hsl(34, 23%, 25%) / #504332 --yellow-70
Yellow 60 0.107 hsl(40, 30%, 32%) / #6B5A39 --yellow-60
Yellow 50 0.177 hsl(43, 43%, 38%) / #8A7237 --yellow-50
Yellow 40 0.284 hsl(44, 40%, 47%) / #A88F48 --yellow-40
Yellow 30 0.420 hsl(46, 54%, 54%) / #C9AB48 --yellow-30
Yellow 20 0.581 hsl(48, 75%, 60%) / #E6C74C --yellow-20
Yellow 10 0.791 hsl(47, 78%, 82%) / #F5E6AF --yellow-10
Yellow 5 0.890 hsl(50, 80%, 90%) / #FAF3D1 --yellow-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 73 de 506
Yellow Vivid
Yellow Vivid 80 0.031 hsl(29, 45%, 18%) / #422D19 --yellow-vivid-80
Yellow Vivid 70 0.069 hsl(46, 82%, 20%) / #5C4809 --yellow-vivid-70
Yellow Vivid 60 0.123 hsl(46, 68%, 28%) / #776017 --yellow-vivid-60
Yellow Vivid 50 0.181 hsl(46, 100%, 29%) / #947100 --yellow-vivid-50
Yellow Vivid 40 0.283 hsl(47, 100%, 35%) / #B38C00 --yellow-vivid-40
Yellow Vivid 30 0.441 hsl(46, 99%, 44%) / #DDAA01 --yellow-vivid-30
Yellow Vivid 20 0.649 hsl(48, 100%, 51%) / #FFCD07 --yellow-vivid-20
Yellow Vivid 10 0.793 hsl(48, 98%, 76%) / #FEE685 --yellow-vivid-10
Yellow Vivid 5 0.904 hsl(50, 100%, 88%) / #FFF5C2 --yellow-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 74 de 506
Green
Green 90 0.008 hsl(90, 9%, 9%) / #161814 --green-90
Green 80 0.026 hsl(88, 19%, 16%) / #293021 --green-80
Green 70 0.060 hsl(85, 29%, 23%) / #3C4A29 --green-70
Green 60 0.107 hsl(83, 47%, 27%) / #4C6424 --green-60
Green 50 0.179 hsl(85, 41%, 35%) / #607F35 --green-50
Green 40 0.283 hsl(83, 33%, 46%) / #7D9B4E --green-40
Green 30 0.416 hsl(84, 32%, 58%) / #9BB672 --green-30
Green 20 0.583 hsl(85, 41%, 70%) / #B8D293 --green-20
Green 10 0.789 hsl(83, 41%, 86%) / #DFEACD --green-10
Green 5 0.874 hsl(86, 51%, 91%) / #EAF4DD --green-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 75 de 506
Green Vivid
Green Vivid 80 0.028 hsl(89, 46%, 14%) / #243413 --green-vivid-80
Green Vivid 70 0.055 hsl(86, 74%, 17%) / #2F4A0B --green-vivid-70
Green Vivid 60 0.120 hsl(82, 93%, 22%) / #466C04 --green-vivid-60
Green Vivid 50 0.178 hsl(82, 100%, 25%) / #538200 --green-vivid-50
Green Vivid 40 0.284 hsl(84, 58%, 39%) / #719F2A --green-vivid-40
Green Vivid 30 0.362 hsl(84, 54%, 45%) / #7FB135 --green-vivid-30
Green Vivid 20 0.520 hsl(82, 62%, 51%) / #98D035 --green-vivid-20
Green Vivid 10 0.751 hsl(87, 73%, 75%) / #C5EE93 --green-vivid-10
Green Vivid 5 0.872 hsl(94, 81%, 88%) / #DDF9C7 --green-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 76 de 506
Green Cool
Green Cool 90 0.012 hsl(120, 9%, 11%) / #1A1F1A --green-cool-90
Green Cool 80 0.028 hsl(133, 10%, 17%) / #28312A --green-cool-80
Green Cool 70 0.058 hsl(133, 14%, 25%) / #37493B --green-cool-70
Green Cool 60 0.107 hsl(118, 20%, 33%) / #446443 --green-cool-60
Green Cool 50 0.176 hsl(129, 25%, 40%) / #4d8055 --green-cool-50
Green Cool 40 0.281 hsl(130, 26%, 50%) / #5E9F69 --green-cool-40
Green Cool 30 0.417 hsl(129, 27%, 63%) / #86B98E --green-cool-30
Green Cool 20 0.583 hsl(131, 23%, 76%) / #B4D0B9 --green-cool-20
Green Cool 10 0.797 hsl(131, 29%, 89%) / #DBEBDE --green-cool-10
Green Cool 5 0.879 hsl(120, 23%, 94%) / #ECF3EC --green-cool-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 77 de 506
Green Cool Vivid

Green Cool Vivid 80 0.024 hsl(133, 32%, 15%) / #19311E --green-cool-vivid-80
Green Cool Vivid 70 0.054 hsl(133, 57%, 19%) / #154C21 --green-cool-vivid-70
Green Cool Vivid 60 0.115 hsl(118, 56%, 28%) / #216E1F --green-cool-vivid-60
Green Cool Vivid 50 0.178 hsl(126, 72%, 31%) / #168821 --green-cool-vivid-50
Green Cool Vivid 40 0.284 hsl(130, 100%, 33%) / #00A91C --green-cool-vivid-40
Green Cool Vivid 30 0.418 hsl(127, 72%, 46%) / #21C834 --green-cool-vivid-30
Green Cool Vivid 20 0.587 hsl(126, 65%, 66%) / #70E17B --green-cool-vivid-20
Green Cool Vivid 10 0.790 hsl(126, 76%, 84%) / #B7F5BD --green-cool-vivid-10
Green Cool Vivid 5 0.870 hsl(114, 50%, 92%) / #E3F5E1 --green-cool-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 78 de 506
Green Warm
Green Warm 90 0.008 hsl(60, 12%, 8%) / #171712 --green-warm-90
Green Warm 80 0.027 hsl(69, 18%, 16%) / #2D2F21 --green-warm-80
Green Warm 70 0.059 hsl(65, 20%, 23%) / #45472F --green-warm-70
Green Warm 60 0.106 hsl(68, 26%, 30%) / #5A5F38 --green-warm-60
Green Warm 50 0.176 hsl(72, 30%, 37%) / #6F7A41 --green-warm-50
Green Warm 40 0.283 hsl(71, 34%, 45%) / #8A984B --green-warm-40
Green Warm 30 0.418 hsl(70, 39%, 53%) / #A6B557 --green-warm-30
Green Warm 20 0.597 hsl(64, 49%, 65%) / #CBD17A --green-warm-20
Green Warm 10 0.792 hsl(64, 55%, 82%) / #E7EAB7 --green-warm-10
Green Warm 5 0.883 hsl(66, 57%, 90%) / #F1F4D7 --green-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 79 de 506
Green Warm Vivid

Green Warm Vivid 80 0.036 hsl(60, 67%, 13%) / #38380B --green-warm-vivid-80
Green Warm Vivid 70 0.069 hsl(63, 66%, 18%) / #4B4E10 --green-warm-vivid-70
Green Warm Vivid 60 0.117 hsl(69, 69%, 24%) / #5A6613 --green-warm-vivid-60
Green Warm Vivid 50 0.177 hsl(69, 100%, 25%) / #6A7D00 --green-warm-vivid-50
Green Warm Vivid 40 0.283 hsl(74, 69%, 36%) / #7E9C1D --green-warm-vivid-40
Green Warm Vivid 30 0.418 hsl(69, 61%, 45%) / #A3B72C --green-warm-vivid-30
Green Warm Vivid 20 0.584 hsl(64, 91%, 43%) / #C5D30A --green-warm-vivid-20
Green Warm Vivid 10 0.819 hsl(64, 90%, 58%) / #E7F434 --green-warm-vivid-10
Green Warm Vivid 5 0.922 hsl(66, 88%, 87%) / #F5FBC1 --green-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 80 de 506
Mint
Mint 90 0.008 hsl(143, 33%, 8%) / #0D1A12 --mint-90
Mint 80 0.027 hsl(145, 34%, 15%) / #193324 --mint-80
Mint 70 0.060 hsl(146, 42%, 22%) / #204E34 --mint-70
Mint 60 0.107 hsl(148, 44%, 28%) / #286846 --mint-60
Mint 50 0.177 hsl(160, 48%, 35%) / #2E8367 --mint-50
Mint 40 0.284 hsl(160, 52%, 42%) / #34A37E --mint-40
Mint 30 0.416 hsl(155, 44%, 55%) / #5ABF95 --mint-30
Mint 20 0.593 hsl(155, 48%, 71%) / #92D9BB --mint-20
Mint 10 0.793 hsl(161, 56%, 86%) / #C7EFE2 --mint-10
Mint 5 0.870 hsl(160, 60%, 91%) / #DBF6ED --mint-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 81 de 506
Mint Vivid
Mint Vivid 80 0.027 hsl(145, 61%, 13%) / #0D351E --mint-vivid-80
Mint Vivid 70 0.056 hsl(146, 73%, 18%) / #0C4E29 --mint-vivid-70
Mint Vivid 60 0.107 hsl(156, 68%, 25%) / #146947 --mint-vivid-60
Mint Vivid 50 0.177 hsl(160, 100%, 26%) / #008659 --mint-vivid-50
Mint Vivid 40 0.291 hsl(160, 100%, 33%) / #00A871 --mint-vivid-40
Mint Vivid 30 0.416 hsl(160, 96%, 39%) / #04C585 --mint-vivid-30
Mint Vivid 20 0.633 hsl(161, 90%, 49%) / #0CEDA6 --mint-vivid-20
Mint Vivid 10 0.791 hsl(160, 95%, 75%) / #83FCD4 --mint-vivid-10
Mint Vivid 5 0.874 hsl(161, 86%, 89%) / #C9FBEB --mint-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 82 de 506
Mint Cool
Mint Cool 90 0.008 hsl(180, 17%, 8%) / #111818 --mint-cool-90
Mint Cool 70 0.059 hsl(169, 28%, 23%) / #2A4B45 --mint-cool-70
Mint Cool 50 0.180 hsl(178, 33%, 38%) / #40807E --mint-cool-50
Mint Cool 40 0.284 hsl(176, 33%, 46%) / #4F9E99 --mint-cool-40
Mint Cool 30 0.417 hsl(174, 35%, 58%) / #6FBAB3 --mint-cool-30
Mint Cool 20 0.585 hsl(175, 40%, 72%) / #9BD4CF --mint-cool-20
Mint Cool 10 0.788 hsl(176, 55%, 85%) / #C4EEEB --mint-cool-10
Mint Cool 5 0.890 hsl(177, 59%, 92%) / #E0F7F6 --mint-cool-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 83 de 506
Mint Cool Vivid

Mint Cool Vivid 80 0.025 hsl(180, 46%, 13%) / #123131 --mint-cool-vivid-80
Mint Cool Vivid 70 0.054 hsl(169, 74%, 17%) / #0B4B3F --mint-cool-vivid-70
Mint Cool Vivid 60 0.100 hsl(177, 74%, 23%) / #0F6460 --mint-cool-vivid-60
Mint Cool Vivid 50 0.180 hsl(178, 100%, 26%) / #008480 --mint-cool-vivid-50
Mint Cool Vivid 40 0.283 hsl(171, 50%, 42%) / #36A191 --mint-cool-vivid-40
Mint Cool Vivid 30 0.419 hsl(173, 74%, 44%) / #1DC2AE --mint-cool-vivid-30
Mint Cool Vivid 20 0.589 hsl(174, 72%, 56%) / #40E0D0 --mint-cool-vivid-20
Mint Cool Vivid 10 0.788 hsl(168, 94%, 74%) / #7EFBE1 --mint-cool-vivid-10
Mint Cool Vivid 5 0.896 hsl(167, 83%, 91%) / #D5FBF3 --mint-cool-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 84 de 506
Cyan
Cyan 90 0.008 hsl(188, 19%, 8%) / #111819 --cyan-90
Cyan 80 0.027 hsl(186, 23%, 16%) / #203133 --cyan-80
Cyan 70 0.059 hsl(187, 28%, 24%) / #2C4A4E --cyan-70
Cyan 60 0.107 hsl(188, 44%, 30%) / #2A646D --cyan-60
Cyan 50 0.176 hsl(189, 74%, 33%) / #168092 --cyan-50
Cyan 40 0.283 hsl(189, 43%, 47%) / #449DAC --cyan-40
Cyan 30 0.446 hsl(189, 56%, 59%) / #5DC0D1 --cyan-30
Cyan 20 0.649 hsl(189, 66%, 76%) / #99DEEA --cyan-20
Cyan 10 0.792 hsl(189, 59%, 87%) / #CCECF2 --cyan-10
Cyan 5 0.896 hsl(187, 55%, 94%) / #E7F6F8 --cyan-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 85 de 506
Cyan Vivid
Cyan Vivid 80 0.036 hsl(189, 77%, 15%) / #093B44 --cyan-vivid-80
Cyan Vivid 70 0.064 hsl(190, 74%, 21%) / #0E4F5C --cyan-vivid-70
Cyan Vivid 60 0.113 hsl(190, 100%, 25%) / #00687D --cyan-vivid-60
Cyan Vivid 50 0.182 hsl(192, 100%, 32%) / #0081A1 --cyan-vivid-50
Cyan Vivid 40 0.283 hsl(191, 100%, 38%) / #009EC1 --cyan-vivid-40
Cyan Vivid 30 0.419 hsl(190, 100%, 45%) / #00BDE3 --cyan-vivid-30
Cyan Vivid 20 0.583 hsl(189, 86%, 64%) / #52DAF2 --cyan-vivid-20
Cyan Vivid 10 0.790 hsl(189, 100%, 83%) / #A8F2FF --cyan-vivid-10
Cyan Vivid 5 0.922 hsl(192, 100%, 95%) / #E5FAFF --cyan-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 86 de 506
Blue
Blue 90 0.008 hsl(205, 26%, 9%) / #11181D --blue-90
Blue 80 0.027 hsl(207, 33%, 18%) / #1F303E --blue-80
Blue 70 0.059 hsl(207, 43%, 27%) / #274863 --blue-70
Blue 60 0.107 hsl(207, 52%, 36%) / #2C608A --blue-60
Blue 50 0.177 hsl(208, 70%, 45%) / #2378C3 --blue-50
Blue 40 0.283 hsl(207, 59%, 56%) / #4F97D1 --blue-40
Blue 30 0.416 hsl(207, 71%, 68%) / #73B3E7 --blue-30
Blue 20 0.582 hsl(208, 63%, 80%) / #AACDEC --blue-20
Blue 10 0.797 hsl(216, 80%, 92%) / #DBE8FB --blue-10
Blue 5 0.912 hsl(205, 60%, 96%) / #EFF6FB --blue-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 87 de 506
Blue Vivid
Blue Vivid 80 0.027 hsl(210, 64%, 19%) / #112F4E --blue-vivid-80
Blue Vivid 70 0.059 hsl(207, 83%, 26%) / #0B4778 --blue-vivid-70
Blue Vivid 60 0.106 hsl(205, 100%, 32%) / #005EA2 --blue-vivid-60
Blue Vivid 50 0.178 hsl(207, 100%, 42%) / #0076D6 --blue-vivid-50
Blue Vivid 40 0.278 hsl(210, 100%, 57%) / #2491FF --blue-vivid-40
Blue Vivid 30 0.419 hsl(207, 100%, 67%) / #58B4FF --blue-vivid-30
Blue Vivid 20 0.613 hsl(208, 100%, 82%) / #A1D3FF --blue-vivid-20
Blue Vivid 10 0.781 hsl(209, 100%, 91%) / #CFE8FF --blue-vivid-10
Blue Vivid 5 0.896 hsl(206, 100%, 95%) / #E8F5FF --blue-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 88 de 506
Blue Cool
Blue Cool 90 0.008 hsl(194, 30%, 8%) / #0F191C --blue-cool-90
Blue Cool 80 0.028 hsl(195, 51%, 16%) / #14333D --blue-cool-80
Blue Cool 70 0.059 hsl(196, 44%, 24%) / #224A58 --blue-cool-70
Blue Cool 60 0.106 hsl(197, 44%, 32%) / #2E6276 --blue-cool-60
Blue Cool 50 0.177 hsl(196, 44%, 41%) / #3A7D95 --blue-cool-50
Blue Cool 40 0.285 hsl(198, 32%, 54%) / #6499AF --blue-cool-40
Blue Cool 30 0.416 hsl(198, 40%, 65%) / #82B4C9 --blue-cool-30
Blue Cool 20 0.586 hsl(197, 40%, 77%) / #ADCFDC --blue-cool-20
Blue Cool 10 0.793 hsl(195, 37%, 89%) / #DAE9EE --blue-cool-10
Blue Cool 5 0.870 hsl(193, 41%, 93%) / #E7F2F5 --blue-cool-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 89 de 506
Blue Cool Vivid

Blue Cool Vivid 80 0.022 hsl(197, 100%, 12%) / #002D3F --blue-cool-vivid-80
Blue Cool Vivid 70 0.060 hsl(198, 87%, 22%) / #074B69 --blue-cool-vivid-70
Blue Cool Vivid 60 0.110 hsl(198, 91%, 29%) / #07648D --blue-cool-vivid-60
Blue Cool Vivid 50 0.176 hsl(194, 85%, 34%) / #0D7EA2 --blue-cool-vivid-50
Blue Cool Vivid 40 0.299 hsl(196, 67%, 48%) / #28A0CB --blue-cool-vivid-40
Blue Cool Vivid 30 0.420 hsl(197, 67%, 61%) / #59B9DE --blue-cool-vivid-30
Blue Cool Vivid 20 0.596 hsl(196, 66%, 75%) / #97D4EA --blue-cool-vivid-20
Blue Cool Vivid 10 0.779 hsl(196, 85%, 87%) / #C3EBFA --blue-cool-vivid-10
Blue Cool Vivid 5 0.868 hsl(193, 62%, 93%) / #E1F3F8 --blue-cool-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 90 de 506
Blue Warm
Blue Warm 90 0.008 hsl(220, 24%, 10%) / #13171F --blue-warm-90
Blue Warm 80 0.027 hsl(216, 25%, 19%) / #252F3E --blue-warm-80
Blue Warm 70 0.059 hsl(216, 38%, 30%) / #2F4668 --blue-warm-70
Blue Warm 60 0.107 hsl(215, 49%, 40%) / #345D96 --blue-warm-60
Blue Warm 50 0.179 hsl(215, 42%, 50%) / #4A77B4 --blue-warm-50
Blue Warm 40 0.282 hsl(217, 43%, 61%) / #7292C7 --blue-warm-40
Blue Warm 30 0.419 hsl(216, 39%, 71%) / #98AFD2 --blue-warm-30
Blue Warm 20 0.649 hsl(216, 49%, 85%) / #C5D4EB --blue-warm-20
Blue Warm 10 0.795 hsl(218, 36%, 91%) / #E1E7F1 --blue-warm-10
Blue Warm 5 0.874 hsl(213, 41%, 95%) / #ECF1F7 --blue-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 91 de 506
Blue Warm Vivid

Blue Warm Vivid 90 0.013 hsl(217, 81%, 14%) / #071D41 --blue-warm-vivid-90
Blue Warm Vivid 80 0.035 hsl(217, 80%, 24%) / #0C326F --blue-warm-vivid-80
Blue Warm Vivid 70 0.093 hsl(217, 81%, 39%) / #1351B4 --blue-warm-vivid-70
Blue Warm Vivid 60 0.119 hsl(217, 81%, 44%) / #155BCB --blue-warm-vivid-60
Blue Warm Vivid 50 0.178 hsl(217, 81%, 53%) / #2670E8 --blue-warm-vivid-50
Blue Warm Vivid 40 0.287 hsl(217, 80%, 64%) / #5992ED --blue-warm-vivid-40
Blue Warm Vivid 30 0.419 hsl(218, 95%, 75%) / #81AEFC --blue-warm-vivid-30
Blue Warm Vivid 20 0.597 hsl(217, 100%, 84%) / #ADCDFF --blue-warm-vivid-20
Blue Warm Vivid 10 0.772 hsl(216, 100%, 92%) / #D4E5FF --blue-warm-vivid-10
Blue Warm Vivid 5 0.905 hsl(213, 100%, 96%) / #EDF5FF --blue-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 92 de 506
Indigo
Indigo 90 0.008 hsl(233, 17%, 10%) / #16171F --indigo-90
Indigo 80 0.026 hsl(237, 20%, 21%) / #2B2C40 --indigo-80
Indigo 70 0.059 hsl(237, 32%, 35%) / #3D4076 --indigo-70
Indigo 60 0.107 hsl(237, 39%, 49%) / #4D52AF --indigo-60
Indigo 50 0.177 hsl(237, 47%, 59%) / #676CC8 --indigo-50
Indigo 40 0.282 hsl(239, 54%, 70%) / #8889DB --indigo-40
Indigo 30 0.420 hsl(237, 64%, 78%) / #A5A8EB --indigo-30
Indigo 20 0.582 hsl(240, 66%, 86%) / #C5C5F3 --indigo-20
Indigo 10 0.790 hsl(243, 69%, 94%) / #E5E4FA --indigo-10
Indigo 5 0.868 hsl(240, 39%, 95%) / #EFEFF8 --indigo-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 93 de 506
Indigo Vivid
Indigo Vivid 80 0.024 hsl(237, 50%, 26%) / #212463 --indigo-vivid-80
Indigo Vivid 70 0.057 hsl(240, 52%, 42%) / #3333A3 --indigo-vivid-70
Indigo Vivid 60 0.111 hsl(237, 51%, 53%) / #4A50C4 --indigo-vivid-60
Indigo Vivid 50 0.181 hsl(237, 59%, 62%) / #656BD7 --indigo-vivid-50
Indigo Vivid 40 0.298 hsl(237, 100%, 75%) / #8289FF --indigo-vivid-40
Indigo Vivid 30 0.423 hsl(237, 90%, 81%) / #A3A7FA --indigo-vivid-30
Indigo Vivid 20 0.641 hsl(238, 100%, 90%) / #CCCEFF --indigo-vivid-20
Indigo Vivid 10 0.763 hsl(240, 100%, 94%) / #E0E0FF --indigo-vivid-10
Indigo Vivid 5 0.880 hsl(240, 100%, 97%) / #F0F0FF --indigo-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 94 de 506
Indigo Cool
Indigo Cool 90 0.008 hsl(235, 24%, 11%) / #151622 --indigo-cool-90
Indigo Cool 80 0.027 hsl(230, 23%, 21%) / #292D42 --indigo-cool-80
Indigo Cool 70 0.059 hsl(229, 36%, 34%) / #374274 --indigo-cool-70
Indigo Cool 60 0.106 hsl(226, 45%, 45%) / #3F57A6 --indigo-cool-60
Indigo Cool 50 0.177 hsl(224, 65%, 57%) / #496FD8 --indigo-cool-50
Indigo Cool 40 0.282 hsl(223, 73%, 66%) / #6B8EE8 --indigo-cool-40
Indigo Cool 30 0.417 hsl(226, 72%, 76%) / #96ABEE --indigo-cool-30
Indigo Cool 20 0.584 hsl(227, 74%, 85%) / #BBC8F5 --indigo-cool-20
Indigo Cool 10 0.794 hsl(227, 67%, 93%) / #E1E6F9 --indigo-cool-10
Indigo Cool 5 0.873 hsl(229, 48%, 95%) / #EEF0F9 --indigo-cool-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 95 de 506
Indigo Cool Vivid

Indigo Cool Vivid 80 0.036 hsl(231, 66%, 31%) / #1B2B85 --indigo-cool-vivid-80
Indigo Cool Vivid 70 0.061 hsl(235, 70%, 44%) / #222FBF --indigo-cool-vivid-70
Indigo Cool Vivid 60 0.124 hsl(235, 83%, 59%) / #3E4DED --indigo-cool-vivid-60
Indigo Cool Vivid 50 0.181 hsl(230, 100%, 64%) / #4866FF --indigo-cool-vivid-50
Indigo Cool Vivid 40 0.284 hsl(222, 87%, 67%) / #628EF4 --indigo-cool-vivid-40
Indigo Cool Vivid 30 0.434 hsl(226, 100%, 79%) / #94ADFF --indigo-cool-vivid-30
Indigo Cool Vivid 20 0.587 hsl(226, 100%, 86%) / #B8C8FF --indigo-cool-vivid-20
Indigo Cool Vivid 10 0.787 hsl(227, 100%, 94%) / #DEE5FF --indigo-cool-vivid-10
Indigo Cool Vivid 5 0.875 hsl(230, 100%, 96%) / #EDF0FF --indigo-cool-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 96 de 506
Indigo Warm
Indigo Warm 90 0.008 hsl(257, 14%, 10%) / #18161D --indigo-warm-90
Indigo Warm 80 0.027 hsl(246, 19%, 21%) / #2E2C40 --indigo-warm-80
Indigo Warm 70 0.059 hsl(249, 34%, 36%) / #453C7B --indigo-warm-70
Indigo Warm 60 0.107 hsl(250, 32%, 47%) / #5E519E --indigo-warm-60
Indigo Warm 50 0.177 hsl(249, 54%, 61%) / #7665D1 --indigo-warm-50
Indigo Warm 40 0.283 hsl(248, 51%, 69%) / #9287D8 --indigo-warm-40
Indigo Warm 30 0.418 hsl(249, 59%, 78%) / #AFA5E8 --indigo-warm-30
Indigo Warm 20 0.585 hsl(249, 64%, 86%) / #CBC4F2 --indigo-warm-20
Indigo Warm 10 0.788 hsl(250, 70%, 94%) / #E7E3FA --indigo-warm-10
Indigo Warm 5 0.871 hsl(255, 33%, 95%) / #F1EFF7 --indigo-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 97 de 506
Indigo Warm Vivid

Indigo Warm Vivid 80 0.021 hsl(247, 49%, 24%) / #261F5B --indigo-warm-vivid-80
Indigo Warm Vivid 70 0.052 hsl(249, 56%, 39%) / #3D2C9D --indigo-warm-vivid-70
Indigo Warm Vivid 60 0.106 hsl(250, 62%, 54%) / #5942D2 --indigo-warm-vivid-60
Indigo Warm Vivid 50 0.177 hsl(249, 76%, 64%) / #745FE9 --indigo-warm-vivid-50
Indigo Warm Vivid 40 0.283 hsl(252, 94%, 74%) / #967EFB --indigo-warm-vivid-40
Indigo Warm Vivid 30 0.419 hsl(254, 100%, 81%) / #B69FFF --indigo-warm-vivid-30
Indigo Warm Vivid 20 0.598 hsl(252, 93%, 88%) / #CFC4FD --indigo-warm-vivid-20
Indigo Warm Vivid 10 0.759 hsl(251, 100%, 94%) / #E4DEFF --indigo-warm-vivid-10
Indigo Warm Vivid 5 0.901 hsl(254, 100%, 97%) / #F5F2FF --indigo-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 98 de 506
Violet
Violet 90 0.008 hsl(257, 14%, 10%) / #18161D --violet-90
Violet 80 0.027 hsl(258, 19%, 21%) / #312B3F --violet-80
Violet 70 0.058 hsl(260, 27%, 33%) / #4C3D69 --violet-70
Violet 60 0.107 hsl(260, 28%, 44%) / #665190 --violet-60
Violet 50 0.178 hsl(260, 33%, 55%) / #8168B3 --violet-50
Violet 40 0.283 hsl(259, 46%, 67%) / #9D84D2 --violet-40
Violet 30 0.415 hsl(260, 54%, 76%) / #B8A2E3 --violet-30
Violet 20 0.583 hsl(261, 46%, 84%) / #D0C3E9 --violet-20
Violet 10 0.794 hsl(262, 65%, 93%) / #EBE3F9 --violet-10
Violet 5 0.889 hsl(263, 40%, 96%) / #F4F1F9 --violet-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 99 de 506
Violet Vivid
Violet Vivid 80 0.027 hsl(264, 48%, 25%) / #39215E --violet-vivid-80
Violet Vivid 70 0.053 hsl(266, 57%, 36%) / #54278F --violet-vivid-70
Violet Vivid 60 0.107 hsl(269, 51%, 48%) / #783CB9 --violet-vivid-60
Violet Vivid 50 0.178 hsl(268, 66%, 60%) / #9355DC --violet-vivid-50
Violet Vivid 40 0.284 hsl(268, 72%, 69%) / #AD79E9 --violet-vivid-40
Violet Vivid 30 0.417 hsl(269, 66%, 77%) / #C39DEB --violet-vivid-30
Violet Vivid 20 0.586 hsl(261, 100%, 87%) / #D5BFFF --violet-vivid-20
Violet Vivid 10 0.801 hsl(261, 100%, 95%) / #EDE3FF --violet-vivid-10
Violet Vivid 5 0.904 hsl(263, 100%, 97%) / #F7F2FF --violet-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 100 de 506
Violet Warm
Violet Warm 90 0.008 hsl(300, 13%, 9%) / #1B151B --violet-warm-90
Violet Warm 80 0.026 hsl(308, 15%, 19%) / #382936 --violet-warm-80
Violet Warm 70 0.059 hsl(303, 23%, 29%) / #5C395A --violet-warm-70
Violet Warm 60 0.106 hsl(304, 33%, 39%) / #864381 --violet-warm-60
Violet Warm 50 0.178 hsl(293, 47%, 52%) / #B04ABD --violet-warm-50
Violet Warm 40 0.284 hsl(293, 42%, 63%) / #BF77C8 --violet-warm-40
Violet Warm 30 0.417 hsl(294, 44%, 73%) / #D29AD8 --violet-warm-30
Violet Warm 20 0.585 hsl(297, 41%, 82%) / #E2BEE4 --violet-warm-20
Violet Warm 10 0.791 hsl(295, 64%, 92%) / #F6DFF8 --violet-warm-10
Violet Warm 5 0.891 hsl(293, 43%, 96%) / #F8F0F9 --violet-warm-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 101 de 506
Violet Warm Vivid

Violet Warm Vivid 80 0.022 hsl(308, 57%, 18%) / #481441 --violet-warm-vivid-80
Violet Warm Vivid 70 0.055 hsl(304, 58%, 28%) / #711E6C --violet-warm-vivid-70
Violet Warm Vivid 60 0.105 hsl(304, 48%, 39%) / #93348C --violet-warm-vivid-60
Violet Warm Vivid 50 0.177 hsl(293, 63%, 51%) / #BE32D0 --violet-warm-vivid-50
Violet Warm Vivid 40 0.283 hsl(291, 82%, 65%) / #D85BEF --violet-warm-vivid-40
Violet Warm Vivid 30 0.416 hsl(292, 100%, 76%) / #EE83FF --violet-warm-vivid-30
Violet Warm Vivid 20 0.582 hsl(291, 100%, 85%) / #F4B2FF --violet-warm-vivid-20
Violet Warm Vivid 10 0.789 hsl(293, 100%, 93%) / #FBDCFF --violet-warm-vivid-10
Violet Warm Vivid 5 0.917 hsl(295, 100%, 97%) / #FEF2FF --violet-warm-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 102 de 506
Magenta
Magenta 90 0.008 hsl(348, 10%, 10%) / #1B1617 --magenta-90
Magenta 80 0.027 hsl(336, 24%, 20%) / #402731 --magenta-80
Magenta 70 0.059 hsl(334, 31%, 31%) / #66364B --magenta-70
Magenta 60 0.107 hsl(332, 34%, 41%) / #8B4566 --magenta-60
Magenta 50 0.177 hsl(332, 55%, 52%) / #C84281 --magenta-50
Magenta 40 0.284 hsl(333, 66%, 65%) / #E0699F --magenta-40
Magenta 30 0.419 hsl(338, 64%, 75%) / #E895B3 --magenta-30
Magenta 20 0.584 hsl(341, 64%, 84%) / #F0BBCC --magenta-20
Magenta 10 0.792 hsl(340, 54%, 92%) / #F6E1E8 --magenta-10
Magenta 5 0.888 hsl(347, 43%, 96%) / #F9F0F2 --magenta-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 103 de 506
Magenta Vivid
Magenta Vivid 80 0.024 hsl(335, 55%, 20%) / #4F172E --magenta-vivid-80
Magenta Vivid 70 0.050 hsl(334, 58%, 29%) / #731F44 --magenta-vivid-70
Magenta Vivid 60 0.106 hsl(330, 68%, 40%) / #AB2165 --magenta-vivid-60
Magenta Vivid 50 0.177 hsl(333, 68%, 51%) / #D72D79 --magenta-vivid-50
Magenta Vivid 40 0.272 hsl(333, 98%, 63%) / #FD4496 --magenta-vivid-40
Magenta Vivid 30 0.418 hsl(339, 100%, 76%) / #FF87B2 --magenta-vivid-30
Magenta Vivid 20 0.584 hsl(338, 100%, 85%) / #FFB4CF --magenta-vivid-20
Magenta Vivid 10 0.789 hsl(337, 100%, 93%) / #FFDDEA --magenta-vivid-10
Magenta Vivid 5 0.913 hsl(346, 100%, 97%) / #FFF2F5 --magenta-vivid-5
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 104 de 506
Gray
A família Gray utiliza cores sem saturação entro de um círculo cromático. Representa uma
família neutra.
Gray 90 0.010 hsl(0, 0%, 11%) / #1B1B1B --gray-90
Gray 80 0.033 hsl(0, 0%, 20%) / #333333 --gray-80
Gray 70 0.090 hsl(0, 0%, 33%) / #555555 --gray-70
Gray 60 0.124 hsl(0, 0%, 39%) / #636363 --gray-60
Gray 50 0.177 hsl(0, 0%, 46%) / #757575 --gray-50
Gray 40 0.246 hsl(0, 0%, 53%) / #888888 --gray-40
Gray 30 0.417 hsl(0, 0%, 68%) / #ADADAD --gray-30
Gray 20 0.603 hsl(0, 0%, 80%) / #CCCCCC --gray-20
Gray 10 0.791 hsl(0, 0%, 90%) / #E6E6E6 --gray-10
Gray 5 0.871 hsl(0, 0%, 94%) / #F0F0F0 --gray-5
Gray 4 0.896 hsl(0, 0%, 95%) / #F3F3F3 --gray-4
Gray 3 0.921 hsl(0, 0%, 96%) / #F6F6F6 --gray-3
Gray 2 0.938 hsl(0, 0%, 97%) / #F8F8F8 --gray-2
Gray 1 0.973 hsl(0, 0%, 99%) / #FCFCFC --gray-1
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 105 de 506
Gray Cool
A família Gray Cool utiliza cores com mínima saturação dentro de um círculo cromático.
Representa uma família neutra com “tons frios” (azulado).
Gray Cool 90 0.012 hsl(220, 5%, 12%) / #1C1D1F --gray-cool-90
Gray Cool 80 0.027 hsl(210, 2%, 18%) / #2D2E2F --gray-cool-80
Gray Cool 70 0.058 hsl(216, 14%, 28%) / #3D4551 --gray-cool-70
Gray Cool 60 0.105 hsl(216, 8%, 37%) / #565C65 --gray-cool-60
Gray Cool 50 0.178 hsl(207, 4%, 46%) / #71767A --gray-cool-50
Gray Cool 40 0.284 hsl(210, 5%, 57%) / #8D9297 --gray-cool-40
Gray Cool 30 0.418 hsl(202, 5%, 68%) / #A9AEB1 --gray-cool-30
Gray Cool 20 0.587 hsl(210, 8%, 79%) / #C6CACE --gray-cool-20
Gray Cool 10 0.750 hsl(200, 5%, 88%) / #DFE1E2 --gray-cool-10
Gray Cool 5 0.860 hsl(200, 9%, 94%) / #EDEFF0 --gray-cool-5
Gray Cool 4 0.894 hsl(216, 22%, 95%) / #F1F3F6 --gray-cool-4
Gray Cool 3 0.920 hsl(210, 11%, 96%) / #F5F6F7 --gray-cool-3
Gray Cool 2 0.944 hsl(200, 23%, 97%) / #F7F9FA --gray-cool-2
Gray Cool 1 0.972 hsl(210, 33%, 99%) / #FBFCFD --gray-cool-1
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 106 de 506
Gray Warm
A família Gray Warm utiliza cores com mínima saturação dentro de um círculo cromático.
Representa uma família neutra com “tons quentes” (amarelados).
Gray Warm 90 0.008 hsl(60, 2%, 9%) / #171716 --gray-warm-90
Gray Warm 80 0.027 hsl(60, 5%, 17%) / #2E2E2A --gray-warm-80
Gray Warm 60 0.107 hsl(60, 6%, 34%) / #5D5D52 --gray-warm-60
Gray Warm 50 0.178 hsl(60, 5%, 44%) / #76766A --gray-warm-50
Gray Warm 30 0.419 hsl(55, 8%, 66%) / #AFAEA2 --gray-warm-30
Gray Warm 20 0.581 hsl(54, 9%, 77%) / #CAC9C0 --gray-warm-20
Gray Warm 10 0.789 hsl(60, 7%, 89%) / #E6E6E2 --gray-warm-10
Gray Warm 5 0.869 hsl(60, 12%, 93%) / #F0F0EC --gray-warm-5
Gray Warm 4 0.910 hsl(60, 20%, 95%) / #F5F5F0 --gray-warm-4
Gray Warm 1 0.972 hsl(60, 14%, 99%) / #FCFCFB --gray-warm-1
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 107 de 506
Pure
Esta família possui uma característica especial, que representa os extremos puros da
luminância (branco e preto). Na prática, esta família pode estar presente em qualquer outra
família da Paleta Design FACAPE quando ampliada ou reduzida a luminância ao seu extremo,
independente do matiz ou saturação. Por tanto, sua identificação como uma família de cores
independente tem apenas objetivo didático.
Pure 100 0.000 hsl(0, 0%, 0%) / #000000 --pure-100
Pure 0 1.000 hsl(0, 0%, 100%) / #FFFFFF --pure-0
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 108 de 506
Tabela de Contraste
A seguir criamos uma tabela de contrastes com as principais cores das paletas apresentadas
acima. No eixo horizontal temos as principais cores utilizadas para textos e ícones e no eixo
vertical, as principais cores utilizadas para superfícies.
Superfície/Texto
#FFFFFF #333333 #1351B4 #C5D4EB
— AAA (12,63) AAA (7,33) x

#FFFFFF
x AAA (11,89) AA (6,90) x

#F8F8F8
AAA (16,65) x x AAA (11,09)

#071D41
AA (6,19) x x x
#155BCB
x AAA (9,89) AA (5,74) x

#D4E5FF
AA (4,58) x x x
#168821
x AAA (11,07) AA (6,43) x

#E3F5E1
x AAA (8,41) AA (4,88) x

#FFCD07
x AAA (11,48) AA (6,66) x

#FFF5C2
AA (4,60) x x x
#E52207
x AAA (7,60) x x
#FDB8AE
Legendas:
• AAA: passa no nível AAA para texto de qualquer tamanho.
• AA: passa no nível AA para texto de qualquer tamanho e AAA para texto grande (acima
de 18pt ou bold acima de 14pt).
• x: Contraste abaixo de 4,5. Não é recomendado no sistema de cores do Design FACAPE.
(número): taxa de contraste segundo a WCAG 2.1.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 109 de 506
Para checar qualquer combinação de cores não apresentadas na tabela, consulte

o site Contrast Ratio.
Espaçamento
Espaçamento é a distância entre um elemento a outro, representado por alguma unidade
métrica. O espaçamento é um fundamento do design visual que frequentemente cria uma
lacuna entre os designers e os desenvolvedores ao projetar uma interface. Para evitar essa
situação, o Design FACAPE cria e detalha termos em um sistema flexível, possibilitando layouts
funcionais e consistentes.
Princípios
Experiência Única
Existem 2 escalas de espaçamento no Design FACAPE que devem ser respeitadas. Utilizando-
se dessas escalas é possível criar layouts flexíveis e, ao mesmo tempo, manter a consistência
visual entre diferentes serviços e produtos dentro do Design FACAPE.
Todo elemento em uma interface pode possuir 2 tipos de espaçamento: interno (padding) e
externo (margin). É necessário detalhar cada um desses espaços para que o elemento se
comporte corretamente em uma grid.
Os métodos de espaços usados no elemento devem ser claros.
Acessibilidade
Utilizar espaços entre os elementos é a melhor forma de proporcionar uma boa legibilidade e
organização do conteúdo. No design existe um termo chamado de espaço em branco que
ajudam neste contexto.
Os espaços em branco (white space ou negative space) são recursos visuais que ajudam a
tornar um layout mais agradável. Criam hierarquias informacionais (dando foco no que for
mais importante) e criam relacionamento entre os elementos. Aplicando distância entre os
não semelhantes e a proximidade entre os semelhantes.
Os espaços em branco também são importantes para leitura, pois criam áreas de respiro
no layout, isto é, espaços onde o olhar do leitor pode descansar, e por fim manter o fluxo de
leitura.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 110 de 506
Interfaces digitais da autarquia devem utilizar as escalas de espaçamentos existentes, além de
todas as informações contidas neste documento, sempre que possível. Havendo, entretanto,
a necessidade de acrescentar ou editar o documento atual, é necessário validar a nova
proposta pela equipe de design do Design FACAPE.
Tipos de espaçamento
Quando um objeto é renderizado, ou seja, exibido em uma tela, o navegador ou o aplicativo
que está renderizando-o, interpreta todos eles como uma caixa retangular. Essa caixa é
chamada de Box Model.
A anatomia desta caixa é feita pelas seguintes propriedades:
conteúdo, padding, border e margin.
Figura 18 - Propriedades básicas do Box-model
Mesmo possuindo comportamentos variados, todos os elementos devem respeitar essas

propriedades. Entender seu funcionamento é importante para determinar as dimensões, o
espaçamento e a interação do objeto de modo geral.
No Design FACAPE, o comportamento das dimensões de um objeto é determinada pela
regra: box-sizing: border-box, ou seja, as propriedades de largura (width) e de altura (height)
incluem o tamanho do padding e do border, mas não incluem a margin.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 111 de 506
Figura 19 - Comportamento das dimensões do Box-Model utilizado no Design FACAPE
Observando somente as propriedades de espaçamento, podemos então categorizá-los dentro

do Design FACAPE em Interno e Externo.
Figura 20 - Tipos de Espaçamento no Design FACAPE: Interno e Externo
Espaçamento Interno
É frequentemente usado para criar espaços de respiro, facilitando a legibilidade de uma
informação, além da endentação de textos e qualquer elemento contido em outro.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 112 de 506
A propriedade padding define a área de espaçamento interno nos quatro lados do elemento.
Podendo também ser descrito de forma separada: padding-top (cima), padding-
right (direita), padding-bottom (baixo), e padding-left (esquerda).
Figura 21 - Exemplo do Espaçamento Interno em um componente
Espaçamento Externo
Utilizado para criar os espaços em branco, criando hierarquia entre os elementos de uma tela
e agrupando elementos relacionados.
Espaçamento externo são utilizados para criar as Áreas de Segurança ou Área de Proteção.
Área de segurança é basicamente um espaço em branco voltado para um componente
específico, criado para garantir que as funcionalidade e características hierárquicas descritas
na diretriz, sejam executadas sem falhas e sem interferências de outros elementos.
A propriedade margin define a área de espaçamento externo nos quatro lados do elemento.
Podendo também ser descrito de forma separada: margin-top (cima), margin-
right (direita), margin-bottom (baixo), e margin-left (esquerda).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 113 de 506
Figura 22 - Exemplo do Espaçamento Externo em um componente
Sangria
Da mesma forma como acontece nas definições da Grid, nos elementos também podem
acontecer a sangria: quando um elemento invade os espaçamento interno de outros, como
um separador no interior de um card, por exemplo.
Por padrão, os espaços devem ser respeitados, a não ser que seja detalhado o contrário na
documentação do componente.
Ao criar um componente, deve ser especificado se existe o comportamento de “sangria” (para
os espaços internos de outros componentes, por exemplo) e deve-se verifique também, se o
componente pai permite esse comportamento.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 114 de 506
Figura 23 - Elementos “sangrando” dentro de um componente
Espaçamento VS Borda (Ferramentas de Design)

Como visto no Box Model, o border (borda) é uma propriedade que também ocupa espaço.
Infelizmente, a maioria das ferramentas de design desconsideram essa propriedade quando
medem distância entre elementos. Fato que, ao ser desenvolvido para web, o layout acaba
com comportamentos inesperados.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 115 de 506
Figura 24 - Ferramenta desconsiderando a borda para o espaçamento
Para representar a regra do box-sizing: border-box o designer pode configurar sua ferramenta
para utilizar traçado interno (border inline), porém, a borda ainda não contará como espaço
nas ferramentas.
Figura 25 - Configurando comportamento da borda nas ferramentas de design
O designer deve entender esse comportamento e a limitação da sua ferramenta para prever
problemas relacionados a espaçamento na criação da sua interface.
Métodos de Espaçamento
Os métodos de espaçamento são um conjunto de regras sobre como posicionar elementos
em um template ou em um componente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 116 de 506
Existem 3 tipos de métodos: Dimensão, Alinhamento e Escala. Enquanto as duas primeiras

influenciam indiretamente, esta última influencia diretamente nos tipos de espaçamento.
Dificilmente é encontrado um único método isolado no elemento. O mais comum é seu uso
de forma colaborativa, em conjunto, mesclando diversos métodos em um único elemento,
componente ou template.
Dimensão
As dimensões referem-se à largura e altura dos elementos. Os componentes descrevem a sua
altura ou largura (seja por valores absolutos ou relativos), ou às vezes apenas estão atrelados
as colunas de uma grid.
Neste método, o espaçamento interno do elemento pode variar fazendo com que métodos
fixos (como de escala) não façam muito sentido.
Ao especificar as dimensões de um elemento, deve-se utilizar as boas práticas descritas
abaixo:
• Evitar fixar valores absolutos nas dimensões dos componentes quando ele for
constituído por vários elementos internos. É preferível adicionar regras aos elementos
filhos para controlar as dimensões do pai.
• Quando fixar valores absolutos nas dimensões pode ser importante detalhar a largura
e altura máxima/mínima para evitar comportamentos indesejados na interface.
• Ao especificar valores absolutos, deve-se utilizar o incremento Escala Layout como
base.
• Caso o elemento utilize a grid como referência na dimensão, é necessário especificar
quantas colunas o componente deve utilizar. É importante não esquecer de definir
essa especificação em cada breakpoint.
• Nos textos, deve-se trabalhar o conceito de entrelinhamento para controlar melhor os
espaços que serão ocupados na interface. Para maiores detalhes veja: tipografia.
Figura 26 - Objetos com dimensões fixas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 117 de 506
Alinhamento
Alinhamento é o posicionamento de elementos (conteúdo) dentro de um componente. Este
método trabalha a referência de um elemento pai a fim de alinhar os elementos filhos.
São 2 tipos de alinhamento, cada um com 3 propriedades possíveis e que, em conjunto, geram
9 pontos distintos dentro de uma área específica que podem ser utilizadas para o alinhamento
dos objetos.
Figura 27 - Pontos de alinhamento dentro de um objeto
Figura 28 - Exemplo de Alinhamento ao centro
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 118 de 506
Alinhamento Vertical
Spacing Vertical Token Propriedade
--spacing-vertical-top Top
--spacing-vertical-center Center
--spacing-vertical-bottom Bottom
Alinhamento horizontal
Spacing Horizontal Token Propriedade
--spacing-horizontal-left Left
--spacing-horizontal-center Center
--spacing-horizontal-right Right
Por padrão, as os alinhamentos são --spacing-vertical-top e --spacing-horizontal-left.
Escala
A escala de espaçamento refere-se aos tipos de espaçamento (interno e externo) existentes
nos elementos de uma interface. Ela fornece valores mais absolutos que os outros métodos.
Figura 29 - Exemplo de Escala
É um método medido em incrementos de 8px ou 4px, criando dois tipos de escala: o

de Layout e de Ajuste.
Importante: por padrão, os espaçamentos de qualquer elemento do Design FACAPE é de 0px,
ou seja, não utiliza nenhum tipo de escala.
Spacing Scale Token Value
--spacing-scale-default 0px (0em)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 119 de 506
Layout
Escala base para os componentes e templates. Possui o incremento base de 8px.
É utilizada para posicionar e hierarquizar componentes em uma interface, criar áreas de
respiro e de proteção, entre outros. Ela é escala mais utilizada pela sua flexibilidade, pois
permite o uso em qualquer tipo de elemento, além de criar posicionamentos mais
perceptíveis.
Figura 30 - Escala Layout

--spacing-scale-base 8px (1em)
--spacing-scale-2x 16px (2em)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 120 de 506
Ajuste
Escala utilizada para realizar pequenos ajustes de espaçamento em elementos de tipografia e
de iconografia. Por possuir incremento de 4px, ela é totalmente compatível com a escala
layout.
Utilize a escala Ajuste quando necessitar de espaçamentos finos de um texto ou ícone, onde
uma densidade alta possa fazer sentido na hierarquia dos elementos (como o espaço entre
um rótulo e uma entrada de texto).
Atenção: apenas textos e ícones podem utilizar a escala Ajuste.
Figura 31 - Escala Ajuste

--spacing-scale-half 4px (.5em)
--spacing-scale-baseh 12px (1.5em)
--spacing-scale-2xh 20px (2.5em)
Recomendações e Boas Práticas

Otimização de Espaços
Quando houver dois ou mais elementos posicionados horizontalmente ou verticalmente em
sequência, evite somar as margens mínimas de segurança destes elementos. Neste caso,
quando as margens forem do mesmo valor, prevalece apenas uma delas. Ou se possuírem
valores diferentes, a margem maior deve prevalecer. Observe abaixo:
A - Em elementos com margens iguais, deve prevalecer apenas uma das margens.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 121 de 506
B - Em elementos com margens diferentes, deve prevalecer a margem de maior valor.
Figura 32 - Margens Iguais - Prevalece apenas uma das margens
Figura 33 - Margens Diferentes - Prevalece a margem com valor maior

ESTADOS
Estados são representações visuais para feedbacks interativos ou informacionais relacionados
aos elementos na interface. Devem ser consistentes, estabelecendo confiança entre interface
e usuário.
Utilize os estados para comunicar visualmente:
• O tipo de interação que pode ser realizada;
• Uma resposta baseada em uma ação realizado pelo usuário;
• Uma categoria de aviso (erro, sucesso, alerta ou informativa).
Princípios
Experiência única
Os Estados devem ser consistentes nos componentes e elementos exibidos para aumentar a
usabilidade e ser um padrão reconhecível para o usuário. Caso uma interação produza
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 122 de 506
um feedback inconsistente o usuário pode ficar confuso comprometendo a integridade e

experiência proposta.
Quando os estilos definidos neste documento não forem suficientes, faça ajustes utilizando
como base outros fundamentos encontrados no Design.
Observação: cada estado terá pelo menos uma imagem de exemplo. Essa imagem é apenas
um modelo de aplicação do estado descrito, servindo apenas como guia. O Estado deve ser
aplicado conforme a necessidade e dentro das recomendações descritas neste documento.
Eficiência e clareza
Os estilos dos Estados podem ser sutis, porém devem transmitir com clareza sua mensagem.
Sua utilização deve ser funcional, e não apenas decorativa. Utilizar-se de transições
elaboradas, que criam distrações e ruídos visuais, podem tornar a interface desagradável de
se usar.
Na maioria dos estilos definidos, outras características foram adicionadas para otimizar a
eficiência do estado, não dependendo apenas da cor como parâmetro único de feedback.
A herança de um estado deve ser respeitada. Quando vários estados ocorrem ao mesmo
tempo, todos os estilos de estado devem ser exibidos, tendo prioridade os estilos herdados
por interação direta do usuário.
Por exemplo: Em um item de Menu os estilos do estado Hover podem prevalecer sobre os
estilos de um estado Ativo, já que o hover é um interação direta do usuário com o elemento.
Acessibilidade
Por tratar-se de representações visuais, os estados devem seguir os princípios de
acessibilidade encontrados em Fundamento Cores. O estado Desabilitado é uma exceção
devido à sua função dentro da interface.
Dependendo do fundo aplicado, o estado do componente deve ser revisto para atender a
todos os princípios estabelecidos dos estados. Caso as especificações contidas no estado
forem insuficientes para promover um bom contraste entre fundo e texto/ícone, inverta as
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 123 de 506
cores do elemento. Se mesmo assim não houver um contraste satisfatório, utilize as

informações localizadas do Fundamento Cores como guia para atender suas necessidades.
Em alguns casos pode ser necessário aumentar as dimensões do fundo para melhorar a
legibilidade de um texto ou a compreensão de um ícone quando um estado é aplicado.
Quando isso acontecer, tome cuidado para não sobrepor outros elementos: um aumento de
4px ou 8px por exemplo, pode ser suficiente para resolver o problema.
Usuários interagem com a interface de diversas maneiras. Ao projetar um componente,
considere o uso de diferentes dispositivos de entrada tais como:
• Mouse
• Tela sensível ao toque
• teclado
• Voz
• Controle de vídeo game
• Leitores de Tela (como sintetizadores de voz, Display Braille)
Reutilização e colaboração
Os estados definidos devem ser utilizados sempre que possível. Caso necessário, é possível
acrescentar um novo estado ou regra ao Design, devendo a nova proposta atender todos os
princípios estabelecidos nos estados, além de passar por prévia aprovação da equipe
de design do DS.
Entendendo os estados
Como os Estados são respostas visuais, utilizamos os parâmetros descritos em cada
fundamento do Design para promover essa alteração gráfica para o usuário. Portanto, é
necessário ter entendimento de como funciona cada fundamento (principalmente de
Tipografia, Cores e Superfície) para compreender a forma correta de aplicar os estados.
Segue algumas definições importantes aplicadas nos estados no Design da autarquia:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 124 de 506
Texto vs objeto
• Texto: conjunto de caracteres. É o texto propriamente dito. É comum que as definições
de um texto seja também aplicadas ao ícone, desta forma usaremos o
termo Texto/Ícone.
Ex: Um texto interativo seria um hiperlink.
• Objeto: qualquer elemento que não é compreendido como um texto. Geralmente é
um contêiner (superfície) que possui outros elementos dentro. Os elementos contidos
no objeto, se existir, podem sofrer também alterações visuais para manter a
consistência do estado e de acessibilidade.
Um objeto interativo pode ser um botão (button).
Fundo vs primeiro plano
• Fundo (background): área que envolve um texto, ou a superfície de um objeto.
• Primeiro Plano (foreground): texto ou todos os elemento que estão contidos na
superficie do objeto que sofreu o Estado (textos, ícones, outros componentes…)
O entendimento entre o que é o Fundo e o Primeiro Plano varia de acordo com a referência,
ou seja, qual elemento está sendo aplicado o estado.
Figura 34 - Botões
Para um card o botão pode ser o primeiro Plano. Mas se a referência for o próprio botão
podemos ter uma outra visão…
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 125 de 506
Fundo claro vs fundo escuro

A aplicação de um elemento sobre fundo claro ou escuro pode ser utilizada independente do
tema escolhido. Alguns Estados precisam de cuidado no contraste, pois variam de acordo com
a cor de fundo utilizada.
Uma regra simples que pode ser utilizada para determinar se um fundo é claro ou escuro
consiste em visualizar qual a cor de texto prevista para aquela determinada cor:
• Fundo Claro: Se a cor do texto prevista for preta (ou variações escuras), então o fundo
é claro.
• Fundo Escuro: Se a cor de texto previsto for branca (ou variações claras), então o fundo
é escuro.
Figura 35 - Fundo Claro/ Fundo Escuro
Nos três primeiros exemplos o texto é escuro, portanto, para gerar contraste é usado o fundo
claro. Nos dois últimos exemplos acontece o inverso.
Observação: veja o Fundamento Cores para saber o contraste adequado para cada cor.
Overlay
Alguns estados utilizam o conceito de Overlay. Overlay é uma aplicação de camada semi
transparente sobre um elemento. Os detalhes estão no Fundamento Superfície.
Dependendo da cor do elemento, a opacidade do Overlay deve ser revista para que o
destaque seja notado pelo usuário: o valor da opacidade é inversamente proporcional ao
brilho da superfície do elemento (cor de fundo), ou seja, quanto mais claro a cor de fundo,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 126 de 506
menor será o valor da opacidade necessária para que o usuário perceba o estado. Desta forma,
podem existir diferenças nos valores de opacidade entre um fundo claro e escuro.
Herança
Nos Estados, herança é a capacidade de herdar as características visuais (e às vezes até
comportamentais) de um outro estado.
Por padrão, a herança deve ser mantida entre os Estados. Caso exista conflito de estilos visuais
entre eles, o Estado realizado por último e com a interação direta pelo usuário terá prioridade.
Tipos de estado
Segue a lista dos principais Estados encontrados no Design. O detalhamento de cada Estado
será descrito adiante.
Existem 2 grupos de estados:
1- Interação
São grupos de Estados voltados a algum tipo de interação por parte do usuário. Alguns deles
podem estar aplicados diretamente na interface, mas podem ser alterados de acordo com a
interação do usuário seja por mouse, toque, voz….
• Interativo: comunica que um componente ou elemento é interativo.
• Desabilitado: comunica que um componente ou elemento está temporariamente
indisponível para interação.
• Hover: comunica que o cursor está sobre um componente ou elemento interativo.
• Pressionado: comunica que um componente ou elemento interativo está sendo
pressionado via teclado, por um clique ou toque.
• Foco: comunica quando o usuário destaca um componente ou elemento interativo,
utilizando-se de um método de entrada como teclado, mouse, toque ou voz.
• Ativo: comunica qual elemento está ativo dentro de um conjunto de escolhas, iniciado
ou não pelo usuário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 127 de 506
• Selecionado: comunica uma escolha do usuário.

• Arrastando: comunica quando um usuário move um componente ou elemento.
• Arrastar: comunica que um componente ou elemento pode ser arrastado.
• DropZone: comunica a área propícia onde um componente ou elemento pode ser
movido no Arrastando.
• Dropzone Ativo: comunica a área onde um componente ou elemento com estado
Arrastando será movido.
• Visitado: comunica que um texto interativo (hiperlink) foi acessado pelo usuário.
• Ligado: comunica a opção “ligado” na alternância entre o estado Desligado.
• Desligado: comunica a opção “desligado” na alternância entre o estado Ligado.
2- Aviso
São estados caracterizados por uma cor (e suas variações) e um ícone a fim de fornecer uma
experiência universal para os usuários quando for necessário transmitir alguma informação
importante dentro da interface.
• Erro: Informa aos usuários sobre um erro ou falha crítica.
• Alerta: Informa aos usuários sobre ações indesejáveis ou da possibilidade de gerar
resultados inesperados.
• Sucesso: Confirma se uma tarefa foi concluída conforme o esperado.
• Informativo: Fornece informações adicionais aos usuários que podem não estar
vinculados à sua ação ou tarefa atual.
Observações
• Podem existir Estados, não listados aqui, específicos em um componente. Neste caso,
devem ser detalhados na sua respectiva documentação.
• O “Estado Padrão” se trata da ausência de um estado ou de algum feedback. Por não
existir nenhuma regra especial, não existe um detalhamento sobre este “Estado”.
• A escolha das cores dos estados obedecem a algumas recomendações e boas práticas
pré-estabelecidas. Para maiores informações consultar a documentação sobre a
criação de Temas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 128 de 506
Interativo
Para o usuário, deve ser claro quais objetos são interativos ou não. Essa interação será dada
pelo usuário por um clique/toque ou em alguns casos, por algum outro dispositivo de entrada.
Após a interação, será executada alguma ação que pode ser determinada pelo elemento que
recebeu este estado, seja um texto ou um objeto.
Hiperlinks
Textos Interativos são chamados de hiperlinks, ou apenas links. A ideia do hiperlink é fazer
ligação/referência direta a um determinado conteúdo.
Evite estado Interativo em frases longas, prefira o uso em palavras chaves.
Referência externa
Quando a ação interativa for relacionada a visitar um determinado conteúdo fora do domínio
da aplicação, adicione um ícone para representar esse comportamento próximo ao elemento
com estado Interativo. O ícone recomendado é representado por um “contêiner e uma seta
diagonal”:
Objetos
Quando criar um objeto interativo, tenha em mente se vale a pena aplicar a cor sobre o fundo
ou primeiro plano. O importante é que, para o usuário, esteja claro o estado Interativo. Tenha
cuidado com contraste entre o fundo e o primeiro plano, visite sempre o Fundamento
Cores para saber o melhor contraste possível.
Underline vs legibilidade
O uso do estilo underline (sublinhado) nos textos pode atrapalhar a legibilidade em algumas
situações. Evite o uso quando o texto for aplicado em objetos (como List ou outros
componentes) ou em textos longos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 129 de 506
Especificação
A cor é utilizada como a principal característica para exibir o estado de Interação (evite o uso
desta cor, e suas variações, em outros elementos para não confundir o usuário). Por motivos
de legibilidade, a cor aplicada em fundo escuro é diferente. Essa cor pode ser aplicada tanto
nos textos como em objetos.
Para que hiperlinks sejam destacados utilize underline. Esse recurso pode ser dispensado nos
casos em que a legibilidade fique comprometida.
Figura 36 - Exemplo do estado interativo sendo aplicado em um texto e um objeto, tanto no

fundo claro como no escuro.
Element Property Token/Value
background/foreground (Sobre um fundo Claro) color --blue-warm-vivid-70
background/foreground (Sobre um fundo Escuro) color --blue-warm-20
text style underline
Desabilitado
Evitar estado desabilitado

Caso o elemento não possa ser “habilitado” por alguma ação do usuário, a recomendacao é
retirá-lo da interface, ou seja, não exibí-lo!
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 130 de 506
Exemplo: Em um site de compras, tenho um determinado produto em falta. Neste caso, retire
o botão comprar (quando se referir ao produto) ao invés de mantê-lo desativado.
Alguns outros componentes e elementos, por causa do seu comportamento, é preferível não
exibi-los na interface:
• Componentes de Navegação (Menu, Tabs, etc.)
• Modal
• Tooltip
• Magic Button
Especificação
O estado Desabilitado deve ter baixa ênfase ou ser amenizado dentro de uma interface. Ele é
exibido com um valor específico de opacidade, podendo manter a herança com o estado
interativo, ou seja, o visual do Estado Interativo. O cursor do mouse deve ser alterado para a
símbolo de não permitido: “círculo com traço diagonal”.
Figura 37 - Exemplo do estado desabilitado sendo aplicado em um texto e um objeto, tanto no

Property Token/Value
Element
background/foreground opacity --surface-opacity-md
cursor cursor not-allowed
background/foreground shadow --surface-shadow-none
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 131 de 506
Hover
O Estado hover acontece quando o usuário mantém o cursor do mouse sobre um componente
ou elemento interativo. Em alguns casos raros, ele pode ser utilizado para gerar controle de
leitura em elementos listáveis, tais como uma lista ou linhas de uma tabela.
Cuidados
• Só pode existir um elemento com hover por vez na tela.
• Se por um evento de hover executar um dropdown, o estilo do hover pode se manter
no elemento até que o comportamento dropdown seja retirado.
• Elementos desabilitados não podem receber hover .
• O feedback visual deve ser feito no objeto que está em hover.
Especificação
É importante a possibilidade de herança com outros estados mesmo com hover. Desta forma,
o recurso de Overlay é utilizado como feedback.
A cor do elemento Overlay será sempre a cor do Primeiro Plano do elemento hover. O valor
da opacidade deve variar de acordo com Fundo (Claro ou Escuro) para gerar percepção
(constraste) suficiente do Estado. Além disso, nos elementos Interativos, o cursor
do mouse deve ser alterado para a “mão fechada com indicador esticado”.
Figura 38 - Exemplo do estado hover sendo aplicado em um texto e um objeto, tanto no fundo
claro como no escuro.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 132 de 506

background color Primeiro Plano
background (Sobre um fundo Claro) opacity --surface-opacity-xs
background (Sobre um fundo Escuro) opacity --surface-opacity-sm
cursor cursor pointer
Pressionado
Quando um elemento interativo recebe um toque iniciado pelo usuário, seja ela por cursor,
toque, teclado ou método de entrada de voz, recebe o estado de pressionado.
Cuidados
• Só pode existir um elemento com pressionado por vez na tela.
• Se por um evento de pressionado executar um dropdown, o estilo do Pressionado
pode se manter no elemento até que o comportamento dropdown seja retirado.
• Elementos desabilitados não podem receber Pressionado .
• O feedback visual deve ser feito no objeto que está em estado Pressionado.
• Após o estado Pressionado, o elemento pode também receber o estado Foco (veja
detalhes no estado Foco).
Especificação
É importante manter heranças de outros Estados mesmo com Pressionado. Desta forma, o
recurso de Overlay é utilizado como feedback.
A cor do elemento Overlay será sempre a cor do Primeiro Plano do elemento Pressionado. O
valor da opacidade deve variar de acordo com Fundo (Claro ou Escuro) para que gera
percepção (contraste) suficiente do Estado. Além disso, o cursor do mouse deve ser alterado
para a “mão fechada com indicador esticado”. Características visuais referentes à elevação do
componente na tela, como sombra por exemplo, devem ser retiradas ou amenizadas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 133 de 506
Figura 39 - Exemplo do estado pressionado sendo aplicado em um texto e um objeto, tanto no


background color Primeiro Plano
background (Sobre um fundo Claro) opacity --surface-opacity-md
background (Sobre um fundo Escuro) opacity --surface-opacity-lg
cursor cursor pointer
background/foreground shadow --surface-shadow-none
Foco
O estado foco surge quando um usuário utiliza-se de um teclado ou algum método de entrada
de voz para destacar um componente interativo. Por esse motivo, ele deve ter alta ênfase
sobre demais elementos da interface.
Em alguns casos, o foco pode ser redirecionado pela própria interface, como por exemplo,
focar automaticamente no campo de busca ao entrar em uma página de pesquisa.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 134 de 506
Foco tênue
Alguns elementos, geralmente quando existe entrada de dados (como um input por exemplo),
recebem o estado de Foco após ser clicado (ou “tocado”). Neste caso, o feedback do foco não
precisa ter uma alta ênfase, pois poderá atrapalhar o reconhecimento de outros estados e/ou
chamar mais atenção do que deveria.
Como regra geral, utilize este estilo sempre que:

• Um elemento receber foco de forma indireta, ou seja, por reação a algum outro Estado
ou comportamento.
• Quando o “foco padrão” tiver uma ênfase muito maior do que deveria, interferindo
negativamente na experiência do usuário.
Cuidados
• Só pode existir um elemento com foco por vez na tela.
• Só pode existir 1 tipo de Foco por elemento.
• Elementos desabilitados não podem receber foco.
• Por padrão, o foco “normal” deve ser aplicado. O foco tênue só será utilizado quando
especificado na diretriz.
• Por padrão, a ação de “clicar/tocar” em um elemento não deve gerar foco visual.
Entretanto, o foco por outras vias (como teclado ou entrada de voz) ainda devem
existir. O Foco via “clique/toque” só será utilizado quando especificado na diretriz do
elemento.
Especificação
A principal propriedade (visual) que demonstra que um elemento está em foco é uma borda
(ou contorno). Essa borda deve ser criada em volta do elemento e deve ter um espaçamento
de segurança (para que a borda não se confunda com qualquer outra propriedade do
elemento “focado”, ou com a herança de outros estados).
Por motivos de legibilidade, a cor aplicada na borda em fundo escuro é diferente. Para maiores
informações consultar o Fundamento Cores.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 135 de 506
Figura 40 - Exemplo do estado foco sendo aplicado em um texto e um objeto, tanto no fundo
Para foco tênue a borda deve possuir menos ênfase e não há necessidade de um espaçamento
de segurança.
border (Sobre um fundo Claro) color --gold-vivid-40
border (Sobre um fundo Escuro) color --gold-vivid-20
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 136 de 506
Foco
border width --surface-width-lg
border style dashed
spacing padding --spacing-scale-half
Foco Tênue
border width --surface-width-md
border style solid
Ativo
O estado ativo indica qual item, de um conjunto de opções, está sendo visualizado no
momento, sendo iniciado por padrão ou por uma escolha do usuário utilizando-se dos
seguintes métodos de entrada: toque, cursor, teclado ou entrada de voz.
Cuidados
• Dentro de um único conjunto de opções, apenas um estado Ativo pode estar presente
de cada vez.
• Elementos desabilitados não podem receber Ativo.
• Não utilize em componentes que possam existir vários itens Ativos ao mesmo tempo,
como em listagens com expansão.
Estado ativo vs selecionado

Se a própria definição dos estado não for clara para diferenciar um estado do outro, podemos
resumir o embate com o seguinte comportamento:
• Ativo: a ação geralmente é executada imediatamente após a escolha (exibir um
conteúdo, mudar o tipo de alinhamento de texto…). Apenas um item pode ser ativado
por vez.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 137 de 506
• Selecionado: a ação é executada posteriormente e, geralmente, com auxílio de uma

outra ação ou componente (selecionar os itens e depois acionar um botão deletar…).
Posso ter a possibilidade de escolher um ou mais itens.
Especificação
O estado deve ter uma alta ênfase entre os demais elementos do seu conjunto mas uma média
ênfase entre os outros elementos em uma interface.
O Fundamento cor é utilizada como a principal característica para exibir o estado de Ativo.
São duas cores que devem ser utilizadas para gerar o máximo de contraste possível entre elas,
trabalhando entre o Fundo e o Primeiro Plano. Para distinguir melhor o Estado, a borda do
elemento pode ser trabalhada para não depender somente da cor para gerar o feedback do
estado Ativo.
Observação: nem todas as bordas do elemento precisam ser estilizadas, na maioria das
situações, apenas 1 das bordas será o suficiente!
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 138 de 506
Figura 41 - Exemplos do estado ativo sendo aplicado em um texto e um objeto, tanto no fundo
background/foreground/border color --blue-warm-vivid-80
background/foreground/border color --pure-0
border width --surface-width-lg
border style solid
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 139 de 506
Selecionado
Um estado selecionado indica a seleção de opções pelo usuário usando um dos seguintes
métodos de entrada: toque, cursor, teclado ou voz.
Estado ativo vs selecionado

Se a própria definição dos estado não for clara para diferenciar um estado do outro, podemos
resumir o embate com o seguinte comportamento:
• Ativo: a ação geralmente é executada imediatamente após a escolha (exibir um
conteúdo, mudar o tipo de alinhamento de texto…). Apenas um item pode ser ativado
por vez.
• Selecionado: a ação é executada posteriormente e, geralmente, com auxílio de uma
outra ação ou componente (selecionar os itens e depois acionar um botão deletar…).
Posso ter a possibilidade de escolher um ou mais itens.
Evitar estado selecionado

O estado Selecionado não pode ser aplicado nos seguintes componentes:
• Componentes de Navegação (Menu, Abas…)
• Modal
• Tooltip
• Button
• Message
• Divider
Especificação
O estado selecionado deve ser facilmente identificável.
Cor de fundo e um elemento gráfico devem ser utilizados para representar o estado. O
elemento gráfico pode ser um ícone que represente seleção/escolha, ou os
componentes checkbox ou radio.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 140 de 506
Figura 42 - Exemplo do estado selecionado sendo aplicado em um texto e um objeto, tanto no


background/foreground color --blue-warm-vivid-50
icon class fa-check
Arrastando
O estado arrastando ocorre quando um usuário move um elemento ou componente, seja via
cursor, toque, teclado ou método de entrada de voz.
Cuidados
• Só pode existir um elemento com Arrastando por vez na tela.
• Quando vários elementos precisarem ser arrastados, deve existir uma solução que
agrupe (visualmente) todos os elementos em uma única solução.
• Elementos desabilitados não podem receber Arrastando.
• Arrastando não sofre herança do estado Pressionado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 141 de 506
Estado arrastando vs arrastar

É importante que o usuário entenda quais elementos da tela podem ser arrastados. Portanto,
enquanto o Arrastar é o feedback que determina quais os elementos que podem ser
arrastados (antes da ação), o estado Arrastando é o feedback da ação do usuário sobre o
objeto em questão (durante a ação).
Especificação
O feedback do objeto “agarrado” deve ser claro, mostrando a diferança entre outros objetos
semelhantes na tela. Como se moverá “acima” de outros itens, uma sombra e um cortorno
deve ser utilizado para garantir a mudança do Estado tanto em um fundo claro como no
escuro; a angulação e a opacidade do objeto também deve ser alterada para gerar um efeito
“fantasma”.
A cor utilizada (tanto no contorno como na sombra) deve ser a mesma utilizada no Estado
Interativo.
O cursor do mouse deve ser alterado para a “mão fechada”.
Figura 43 - Exemplo do estado arrastando sendo aplicado em um texto e um objeto, tanto no

CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 142 de 506

border color Cor do Estado Interativo
border width --surface-width-md
border style solid
background shadow-offset-x --surface-offset-none
background shadow-offset-y --surface-offset-md
background shadow-blur --surface-blur-lg
background shadow-color Cor do Estado Interativo
background shadow-opacity --surface-opacity-sm
background/foreground opacity --surface-opacity-xl
background/foreground rotate -5°
cursor cursor grabbing
Arrastar
Um estado arrastar indica quando um elemento pode ser arrastado, se movimentando na
interface.
Cuidados
• O feedback Arrastar é somente para objetos que possam ser movimentados (com o
evento de “agarrar”), não incluindo, por exemplo, elementos redimensionáveis (neste
caso, outras características de respostas devem ser estudadas).
• Elementos desabilitados não podem receber Arrastar (veja Especificação maiores
detalhes).
Estado arrastando vs arrastar

É importante que o usuário entenda quais elementos da tela podem ser arrastados. Portanto,
enquanto o Arrastar é o feedback que determina quais os elementos que podem ser
arrastados (antes da ação), o estado Arrastando é o feedback da ação do usuário sobre o
objeto em questão (durante a ação).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 143 de 506
Especificação
Podemos utilizar ícone e o cursor para trazer o feedback necessário, mesmo que não exista
características tão universais para esse propósito (a falta de consistência na própria internet
torna difícil para os usuários reconhecerem o significado).
No Design escolhemos o ícone de “6 círculos” e o cursor do mouse “mão totalmente aberta”

como elementos que simbolizam este estado Arrastar.
Prefira o posicionamento do ícone a esquerda e/ou no topo do elemento. O cursor estilizado

deve ser exibido somente quando o mesmo estiver posicionado sobre o elemento. Em
elemento desabilitados o cursor não sofre mudança.
Figura 44 - Exemplo do estado errastar sendo aplicado em um texto e um objeto, tanto no


icon class grip-vertical
cursor cursor grab
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 144 de 506
Dropzone
O estado Dropzone (ou Área/Zona de Soltura) indica quando uma área está viável para
receber um elemento após ser movido ou arrastado.
Cuidados
• A área/zona de “soltura” do elemento pode ser maior, mas não menor, do que a área
visível/exibida na tela. Utilize o estado Dropzone Ativo (veja adiante) para gerar uma
resposta clara para o usuário.
• O Estado pode ser persistente, ou seja, sempre está visível enquanto o
comportamento de mover/arrastar estiver presente.
Especificação
É importante que outros estados ainda possam ser comunicáveis mesmo com dropzone. Desta
forma, o recurso de borda com uma cor específica do estado Interativo é o suficiente para
o feedback.
Figura 45 - Exemplo do estado dropzone sendo aplicado em um texto e um objeto, tanto no


border color Cor do Estado Interativo
border width --surface-width-sm
border style dashed
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 145 de 506
Dropzone ativo
O estado Dropzone Ativo (ou Área/Zona de Soltura Ativa) indica a área/zona que receberá o
elemento após ser movido ou arrastado.
Cuidados
• Só pode existir um área com dropzone ativo por vez na tela.
• Elementos desabilitados não podem receber dropzone ativo.
Estado dropzone ativo vs dropzone

Enquanto o dropzone informa as opções disponíveis, o dropzone ativo informa a área/zona
que, efetivamente, receberá o elemento após ser movido.
Estado dropzone ativo e arrastando

Sempre que estiver Arrastando um objeto sobre uma dropzone, o estado Dropzone Ativo deve
ser imediatamente exibido!
O cursor do mouse ou o toque do usuário é a referência para entender essa sobreposição de

objetos e não o elemento com estado Arrastando. Caso a área do Dropzone seja muito
pequena, ela poderá ser ampliada para receber essa entrada do usuário de forma mais
precisa.
Essa área ampliada não é visível para o usuário, mas assim que a entrada do usuário fizer
contato com ela, o estado Dropzone Ativo deve ser exibido!
Especificação
No dropzone ativo deve manter as heranças do estado dropzone. Desta forma, o recurso de
overlay é adicionado como feedback.
A cor do elemento overlay será sempre a cor do estado Interativo. O valor da opacidade será
fixo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 146 de 506
O cursor do mouse deve ser alterado, adicionando um ícone de “adição” ao cursor.
Figura 46 - Exemplo do estado dropzone ativo sendo aplicado em um texto e um objeto, tanto
no fundo claro como no escuro.

background color Cor do Estado Interativo
background opacity --surface-opacity-sm
cursor cursor copy
Visitado
O estado acontece quando o conteúdo acessado, referente ao hiperlink, já foi
visitado/visualizado pelo usuário. Ele serve para ajudar os usuários a distinguir a diferença
entre hiperlinks que visualizados e os não visualizados.
Cuidados
• Utilize o estado com cuidado, pois essa informação pode violar a privacidade do
usuário e revelar informações de identificação pessoal em situações sensíveis.
• Só utilize dentro de contexto de hiperlinks.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 147 de 506
Especificação
Além de herdar características básicas de hiperlinks, é necessário o uso de uma cor
diferenciada para realizar o feedback de forma eficiente.
Por motivos de legibilidade, a cor em fundos Escuros deve ser alterada.
Figura 47 - Exemplo do estado visitado sendo aplicado em um texto, tanto no fundo claro como
no escuro.

Text (Sobre um fundo Claro) color --blue-warm-vivid-80
Text (Sobre um fundo Escuro) color --gray-20
Ligado e desligado
Apesar de serem Estados diferentes, o estado ligado e desligado estão unidos na função:
comunicam uma alternância entre duas opções: Ligado ou Desligado. Um componente se
alterna entre um estado ligado ou desligado conforme a interação do usuário utilizando os
seguintes métodos de entrada: toque, cursor, teclado ou voz.
Especificação
O Fundamento cor é utilizado como a principal característica para exibir o estado Ligado e o
Desligado. A cor entre os estados deve ser possuir um contraste alto, deixando claro a
diferença entre eles.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 148 de 506
Figura 48 - Exemplo dos estados ligado e desligado sendo aplicado em um texto e um objeto,
tanto no fundo claro como no escuro.

background/foreground (Ligado) color --blue-warm-vivid-40
background/foreground (Desligado) color --gray-40
Erro
O estado informa sobre um erro ou falha crítica existente na interface ou por alguma ação
realizada pelo usuário.
Importante que o estado persista até que seja resolvido o erro.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 149 de 506
Especificação
A cor vermelha e ícone de “X” é o feedback utilizado neste estado.
Figura 49 - Exemplo do estado erro sendo aplicado em um texto e um objeto, tanto no fundo

background/foreground color --red-vivid-50
icon class times-circle
Alerta
O estado informa aos usuários sobre ações indesejáveis ou da possibilidade de gerar
resultados inesperados.
Pode persistir até que o usuário ignore a notificação.
Especificação
A cor amarela e ícone de “exclamação” é o feedback utilizado neste estado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 150 de 506
Figura 50 - Exemplo do estado alerta sendo aplicado em um texto e um objeto, tanto no fundo

background/foreground color --yellow-vivid-20
icon class exclamation-triangle
Sucesso
O estado informa ao usuário se uma tarefa foi concluída conforme o esperado.
Pode persistir de uma maneira não intrusiva, mas normalmente, não requer ações adicionais.
Pode ser dispensado automaticamente.
Especificação
A cor verde e ícone de “check” é o feedback utilizado neste estado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 151 de 506
Figura 51 - Exemplo do estado sucesso sendo aplicado em um texto e um objeto, tanto no


background/foreground color --green-cool-vivid-50
icon class check-circle
Informativo
O estado fornece informações adicionais aos usuários que podem não estar vinculados à sua
ação ou a uma tarefa atual.
Pode persistir, dependendo do conteúdo, mas não requer ações adicionais. Pode ser
dispensado automaticamente.
O estado informativo pode ser confundido com algum elemento de ajuda (que pode se
representado pela iconografia de uma “interrogação”). De fato, um pode substituir o outro. O
importante é manter a consistência visual e sempre que possível, preferir utilizar o estado
informativo, com a iconografia e a cor padrão.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 152 de 506
Especificação
A cor azul e ícone de “letra i” é o feedback utilizado neste estado.
Figura 52 - Exemplo do estado informativo sendo aplicado em um texto e um objeto, tanto no


background/foreground color --blue-warm-vivid-60
icon class info-circle
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 153 de 506
ILUSTRAÇÃO
Ilustração é uma imagem que comunica um estado de forma mais amigável. As ilustrações
ajudam a transmitir ideias simples ou complexas de maneira objetiva. Eles devem ser
significativas e refletir o contexto e o estado emocional do usuário.
Ilustração é uma poderosa ferramenta visual e emocional. Portanto, use-a com moderação e
identifique cuidadosamente as situações certas para ela. Se uma ilustração for usada apenas
como elemento decorativo, pode perder seu poder comunicativo e distrair as pessoas.
Figura 53 - Conte histórias e engaje seus usuários utilizando o recurso de ilustração.
As ilustrações podem:
• tornar ideias complexas mais acessíveis
• representar a identidade de governo - personalidade, voz e plataforma - de forma
eficiente e clara
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 154 de 506
• ajudar a contar histórias e a transmitir ideias com atenção - evite o uso meramente
decorativo.
Anatomia
A Ilustração é constituída por:
1. Elementos de fundo (Obrigatório);
2. Luz e sombra (Obrigatório);
3. Personagem (Opcional);
4. Spot ou objetos (Obrigatório);
5. Cor (Opcional);
6. Linha de contorno (Opcional);
7. Textura (Opcional);
8. Padrões ou Patterns (Opcional).
Figura 54 - Elementos que compõem uma ilustração.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 155 de 506
Detalhamento dos itens
1- Elementos de fundo (Obrigatório)

Nossos elementos secundários são simplificados e geométricos. Os elementos de fundo são
dimensionados em proporção à ilustração. Eles servem para dar ênfase aos elementos
principais, ou funcionam como agregadores da composição, unindo e integrando elementos.
Figura 55 - Use apenas cores que realcem os elementos principais da composição.
Atenção: tenha o cuidado de não poluir a ilustração com o uso exagerado de elementos de
fundo. Isso pode prejudicar o entendimento da mensagem a ser transmitida pelo elemento
principal.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 156 de 506
2- Luz e sombra (Obrigatório)

Para criar um conjunto de ilustrações fácil de personalizar e manter, usamos apenas camadas
em preto e branco para fazer Luz e sombra. Essas camadas são definidas em Soft Light ou
equivalente (opção de modo de mesclagem, utilizados em diversos softwares de edição
gráfica) e “brincamos” com a opacidade seguindo uma regra de incremento de 10%.
Figura 56 - Aplicação suave e harmônica de luz e sombra, utilizando apenas branco e preto.
Este método permite alterar rapidamente todo o tom da cor de uma ilustração, alterando
apenas a camada de cor de fundo. Essa abordagem é escalonável e amigável.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 157 de 506
3- Personagem (Opcional)
Cada ilustração de personagem tem personalidade própria e é representada através de
recursos físicos, trajes e acessórios.
Figura 57 - Estes são exemplos de nossos personagens. Não é o conjunto completo.
Nossos usuários, são exclusivamente diferentes. É importante para nós representá-los,

celebrando-os e sua história. Para isso, adicionamos cores à nossa paleta de cores
especificamente para abordar a gama de diversidade em tons de pele e cores de cabelo.
Criamos personagens, incluindo gênero, etnia e ocupação.
A diversidade é fundamental
Ao criar um personagem, deve-se ter em mente a pluralidade racial e cultural presente no
Brasil. Raça e etnia são usados para categorizar certas seções da população. Em termos
básicos, a raça descreve os traços físicos e a etnia se refere à identificação cultural. A raça
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 158 de 506
também pode ser identificada como algo que você herda, enquanto a etnia é algo que você
aprende.
RAÇA
A raça geralmente está associada à biologia e ligada a características físicas, como textura do
cabelo ou cor da pele, e cobre uma gama relativamente estreita de opções. No entanto,
pessoas de pele / textura de cabelo semelhantes podem ser definidas como raças diferentes,
e as definições no Brasil mudaram com o tempo. Na atual classificação do IBGE, a respeito do
quesito “cor e raça”, encontram-se as seguintes categorias:
• Brancos
• Pardos
• Pretos
• Amarelos
• Indígenas
Mesmo que alguém se considere de uma determinada raça, ela pode se identificar mais com
sua etnia individual, em oposição à raça. Isso pode se aplicar a qualquer membro de qualquer
raça.
ETNIA
Etnia é um termo mais amplo do que raça. O termo é usado para categorizar grupos de
pessoas de acordo com sua expressão cultural e identificação. Pontos comuns como origem
racial, nacional, tribal, religiosa, linguística ou cultural podem ser usados para descrever a
etnia de alguém.
Embora alguém possa dizer que sua raça é “preta”, sua etnia pode ser italiana, ou alguém
pode dizer que sua raça é “branca” e sua etnia ser irlandesa.
Esses conceitos auxiliam e norteiam a criação de personagens, sempre observando o público

alvo que seu produto deseja atingir.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 159 de 506
Atenção: procure sempre que possível diversificar o uso de raças e etnias, pois o povo
brasileiro é conhecido e identificado pela pluralidade racial e étnica, mas tenha cuidado para
evitar esteriótipos.
4- Spot ou objetos (Obrigatório)

Uma ilustração Spot (ou objeto) é uma pequena ilustração (geralmente de um único objeto)
que se destaca por si só. Por esse motivo, muitas vezes pode ser confundido ou referido como
um “ícone”, mas as ilustrações pontuais são mais ilustrativas ou detalhadas do que simples
ícones de símbolo. Por exemplo, um animal ou pessoa pode ser uma ilustração pontual se for
um objeto simples, em vez de uma ilustração completa do personagem.
Por serem frequentemente usados no produto como um estado vazio ou em uma composição
com outras ilustrações pontuais, eles são pequenos e simples. Eles geralmente não incluem
qualquer pessoa, mas ocasionalmente incluem alguns elementos complementares,
dependendo do design.
Figura 58 - Mesmo uma pequena composição pode contar uma história.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 160 de 506
5- Cor (Opcional)
Existem muitas maneiras diferentes de combinar amostras da paleta de cores, dependendo
do estilo e da intenção de sua ilustração. Abaixo estão algumas abordagens comuns a serem
consideradas.
Monocromática
As ilustrações monocromáticas têm uma qualidade simples e direta e são compostas por
matizes e tons de um único matiz. Esta técnica tem uma aparência lógica, sistemática e
projetada. Dentro deste esquema, podem ser aplicadas técnicas de uniformidade ou
tonalidade
Figura 59 - Paleta de cores monocromática.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 161 de 506
Análoga
Cores análogas trazem uma qualidade harmoniosa usando matizes vizinhos da paleta. Esta
técnica adiciona profundidade sutil, movimento e fidelidade a uma ilustração. Dois a três
matizes funcionam melhor para esta técnica. Cores adicionais provavelmente adicionarão
complexidade desnecessária e devem ser evitadas.
Figura 60 - Paleta de cores análogas.
Complementar
A natureza oposta das cores complementares cria vibração e tensão, o que pode ser bastante
eficaz quando você deseja chamar a atenção para um elemento. Grandes campos de cores
complementares podem ser bastante chocantes, então é melhor usá-los como detalhes
pontuais que trazem a quantidade certa de contraste e vida para uma ilustração.
Figura 61 - Paleta de cores complementares.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 162 de 506
Elementos interativos
Tenha cuidado ao usar a cor dos elementos interativos em uma ilustração para que não haja
competição entre as informações.
Figura 62 - Elementos interativos
Escolha cores que mantenham uma delimitação clara em torno dos pontos focais. Não use
abundância de cores de elementos interativos, isso pode obscurecer elementos importantes
do layout.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 163 de 506
Cores adicionais
Em alguns casos, cores adicionais serão necessárias para obter uma ilustração mais realista.
Em geral, os tons vermelho e amarelo são reservados para cores de alerta da IU, mas podem
ser usados, se necessário. As cores adicionais devem ser limitadas a casos de uso específicos,
como tons de pele.
Figura 63 - Exemplos de tons de pele, existem outras opções.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 164 de 506
O limite de 5 cores
Para manter as ilustrações simples, leves e dinâmicas, use no máximo 5 cores principais por
ilustração. Isso significa que as únicas outras cores permitidas seriam para sombreamento.
Para manter as paletas mínimas e simples, todas as cores devem ser aplicadas com uma regra
60/30/10. Esta regra de design de interiores é uma técnica de decoração atemporal que pode
ajudá-lo a montar um esquema de cores facilmente. A proporção 60% + 30% + 10% visa dar
equilíbrio a composição. Esta fórmula funciona porque cria uma sensação de equilíbrio e
permite que o olho se mova confortavelmente de um ponto focal para o próximo. Também é
incrivelmente simples de usar.
Cor Dominante: Escolha uma cor para a maior parte da ilustração, ou seja, um grande campo
de cores, uma peça de roupa proeminente ou elemento.
Cor secundária: Escolha 1 cor que esteja em harmonia com a primeira.
Cor de destaque: Escolha de 1-3 cores que complementem as tonalidades dominante e
secundária.
Figura 64 - Cor Dominante
60% é a cor dominante, 30% é a cor secundária e 10% é a cor de destaque.

CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 165 de 506
Gradientes
Gradiente corresponde a uma variação gradativa de cor ou iluminação. Tem origem na palavra
latina gradus, que corresponde a grau, e entre seus vários significados corresponde à
intensidade de uma coisa.
Um gradiente de cores é a passagem sutil de um tom escuro para um tom mais claro. Ou
também pode ser a passagem de uma cor para a outra. Gradientes trazem mais dinamismo e
realismo às ilustrações. Mas como tentamos manter a ilustração bem simples, optamos por
utilizá-los quando precisamos acrescentar realismo seguindo o estilo de Alta Fidelidade.
No Design o uso de gradientes em ilustrações visa realçar a transição de luz e sombra e podem
ser construídos de duas formas:
• escolha um tom claro e outro escuro de um mesmo matiz da paleta de cores.
• escolha cores análogas para fazer a transição de uma cor para a outra.
Figura 65 - Uso de gradientes em ilustrações
Esses são apenas alguns exemplos de uso de gradiente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 166 de 506
6- Linha de contorno (Opcional)

Linha é o elemento visual que mostra direcionamentos, delimita e insinua formas, cria
texturas e carrega em si a ideia de movimento. Independente de onde seja utilizada, a linha é
o instrumento fundamental da pré-visualização, ou seja, ela é o meio de apresentar em forma
palpável, concreta, aquilo que só existe na imaginação.
Figura 66 - uso de linha de contorno
O uso de linha de contorno não se restringe a composições em preto e branco, e funciona como
complemento em composições coloridas.
No Design utilizamos a linha de contorno: obtidas quando envolvem uma área qualquer
criando um objeto visual. Essas são suas configurações:
• Stroke: Básico, 2pt ou 1pt size, Round Corn, Round Join
• Cor: #000000
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 167 de 506
7- Textura (Opcional)
A textura é um recurso amplamente utilizado na comunicação visual como simulação de
materiais diversos. É um espaço preenchido com o intuito de gerar interesse e distinção visual
sem definir nenhuma imagem específica. Podem ser geométricas e orgânicas.
Mas qual é a sua função na composição?

• Ela é mais usada como um elemento secundário para reforçar uma ideia, do que como
um elemento básico para comunicar um conceito.
• É um elemento visual que, com frequência, serve de substituto para as qualidades de
outro sentido, o tato.
• A textura deve funcionar como uma experiência sensível e enriquecedora.
Existem duas formas de aplicar texturas em suas composições no Design: áreas granuladas e
padrões
ÁREAS GRANULADAS
EFEITO GRANULADO EM ÁREAS CONTÍNUAS
A textura granulada em áreas maiores da composição adiciona uma textura interessante à

ilustração vetorial, especialmente se usada conjuntamente ao Gradiente.
Como usar o efeito Granulação no Adobe Illustrator:
Selecione a forma, pressione Command/ Control+ C para copiar e, em seguida,
pressione Command/ Control + F para colar na frente. Em seguida, vá para o menu Efeito>
Textura> Granulado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 168 de 506
Figura 67 - Em áreas contínuas, a textura granulada confere um efeito óptico interessante.
EFEITO GRANULADO EM ÁREAS LOCALIZADAS
Nessa técnica você tem mais controle da área onde a textura granulada será aplicada. Isso
evidencia luz e sombra, conferindo profundidade à composição. Como criar o efeito
Granulado em áreas localizadas no Adobe Illustrator:
Usando a ferramenta Pincel (Brush), faça alguns movimentos na área que deseja estilizar e
veja o resultado. Nesse caso, o efeito de pincel evidenciará luz e sombra na composição, sendo
assim, utilize o efeito com a cor branca (para iluminar uma área) ou preta (para escurecer) e
aplique o efeito de Luz Suave/ Soft Light para atingir o tom adequado.
Figura 68 - Em áreas localizadas realçamos o volume dos objetos destacando luz e sombra.
Utilize nossos pincéis/brushes (Formato AI, 32 KB) para facilitar a construção das texturas.
Veja o tutorial (youtube) para entender melhor o uso dessa técnica.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 169 de 506
8- Padrões ou Patterns (Opcional)

O que são padrões? Pensamos em um padrão como sendo: “qualquer arranjo repetido
regularmente, especialmente um desenho feito de linhas, formas ou cores repetidas em uma
superfície”. Do ponto de vista do design, um padrão é composto por vários ladrilhos de arte
repetidos, que se sobrepõem para criar uma composição perfeita. Eles adicionam textura e
interesse à composição.
Figura 69 - Exemplos de padronagens recomendadas, não são o conjunto completo.
O próprio software Adobe Illustrator vem com alguns padrões interessantes, que podem ser
facilmente encontrados:
• abrindo o painel Amostras/ Swatches > Bibliotecas de Amostras/ Swatches Libraries.
• Um novo menu suspenso aparecerá, na parte inferior do qual você encontrará uma
categoria chamada Padrões/ Patterns, que por sua vez é dividida em três
subcategorias. Nós utilizaremos a opção Gráficos Básicos/ Basic Graphics.
• Assim que você escolher essa subcategoria, uma nova janela da biblioteca de amostras
aparecerá, oferecendo uma visualização de todos os designs de padrão disponíveis.
• Para usar qualquer um dos padrões, primeiro Selecione a forma, pressione Command/
Ctrl + C para copiar e, em seguida, pressione Command/ Ctrl + F para colar na frente.
Em seguida, selecione o design do padrão desejado clicando nele, que irá adicioná-lo
imediatamente ao seu preenchimento .
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 170 de 506
• Uma vez que todos esses padrões usam a cor preta, você pode aplicar o efeito Luz
suave/ Soft Light e ter uma padronagem em um tom mais escuro do que a cor de
fundo, mas o uso desse efeito não é obrigatório nesse caso. Caso você esteja ilustrando
apenas com preto e branco desconsidere este último passo.
Diferença entre o efeito de luz suave aplicado em padronagem branca e preta.
Cenários para uso de Ilustração

Use a ilustração para incentivar os usuários que estão frustrados, perdidos ou se algo deu
errado. Aqui temos alguns exemplos nos quais as ilustrações podem ser usadas.
Empty Space
Os empty spaces ou estados vazios são usados quando um elemento não tem conteúdo para
exibir ao usuário. Essa é uma oportunidade de envolver e encantar os usuários. O estado vazio
deve informar aos usuários para que serve e por que o estão vendo. Também informam aos
usuários o que eles podem fazer a seguir. As ilustrações devem mostrar dados ou estado do
sistema (vazio, por exemplo), mas não mensagens de validação de entrada do usuário.
Os estados vazios têm muitas causas, como:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 171 de 506
• Não há dados que o usuário possa ver.

• Um recurso ainda não foi configurado.
• Ocorreu um erro.
• Área vazia da tela intencionalmente deixada em branco.
• Sem dados / informações / resultado de busca vazio
• Sem histórico / feeds
Figura 70 - Ilustrações Spot aplicadas em Empty Spaces
Use estados vazios para:

• Evitar que o aplicativo pareça sem vida e vazio.
• Ajudar os usuários a integrar um aplicativo e / ou motivá-los a interagir com o
aplicativo.
• Avisar o usuário quando os dados estiverem indisponíveis (devido a um erro do
sistema ou outro motivo).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 172 de 506
Onboarding
Use a ilustração para apresentar e explicar um produto ou recurso. Isso pode ser
especialmente útil para recursos novos, mal utilizados ou negligenciados. Durante
o onboarding, as ilustrações são usadas para apresentar ao usuário os recursos do produto.
Figura 71 - Utilize o recurso de Ilustração para encantar e engajar seu usuário ao apresentar
seu produto.
Com o corpo da mensagem

As ilustrações podem incluir o texto do corpo da mensagem abaixo do título para comunicar
melhor o estado do componente. No entanto, as ilustrações não podem ter corpo de
mensagem sem texto de título.
Informativo
Cenários comuns:
• Configuração necessária
• Manutenção
Figura 72 - Reforce a informação com ilustrações.

CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 173 de 506
Erro
Cenários comuns:
• Sem acesso a uma página;
• Sem conexão;
• Página não disponível;
• Passo a passo não disponível.
Figura 73 - Suavize situações de erro com ilustrações lúdicas.
Call to action
Call to Action é uma chamada para ação, muito comum em sites, emails e anúncios, indicando
ao usuário o que deve ser feito. Geralmente, um Call to Action (CTA) é um link ou um botão,
com uma cor de destaque,mas também pode ser um banner com uma imagem ou ilustração,
e como a própria tradução já diz, a Call To Action é o momento em que você convida o seu
usuário a tomar alguma decisão.
Há várias ações que desejamos que sejam realizadas, tais como fazer um cadastro para
receber newsletter, preencher um formulário, fazer um download, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 174 de 506
Ao usar uma uma Call to action, utilize a seguinte estrutura: Ilustração representando a ação
esperada, um título e a frase de destaque.
Figura 74 - Convide seu usuário a tomar decisão com ilustrações objetivas e claras.
Estilos de ilustração
Saber a intenção de sua ilustração ajuda a criar a estrutura para atingir seu objetivo. Existem
diferentes tipos de ilustrações usadas para diversos fins, em diferentes escalas e
complexidades.
Existem muitas maneiras de comunicar ideias com ilustrações. Algumas são mais literais,
outras mais abstratas, algumas menos detalhadas, enquanto outras requerem mais fidelidade
para capturar e transmitir os detalhes. Qualquer que seja a estratégia, as ilustrações
do Design foram desenvolvidas com essa diversidade em mente para que você possa
determinar qual abordagem melhor representa os conceitos ou a natureza do assunto.
Essas abordagens apenas norteiam a criação e o uso de ilustrações no Design. Você pode usar
diferentes abordagens num mesmo produto, desde que exista consistência no uso da paleta
de cores, gradientes, valores de luz e sombra e traço.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 175 de 506
Estilo Abstrato ou literal

Expressar conceitos de maneiras abstratas cria interesse e composições emocionantes,
enquanto execuções literais podem comunicar conceitos complicados de forma mais clara.
Ambas as técnicas são vitais para a comunicação com ilustrações.
Figura 75 - A abstração é mais conceitual e provocativa.
Figura 76 - As expressões literais são mais explicativas e utilitárias.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 176 de 506
Estilo Micro ou Macro

É possível trabalhar a exibição de sistemas em micro e macro escalas. Essa capacidade de
comunicação em ambas as escalas nos permite comunicar os conceitos difíceis de ver ou
expansivos.
Figura 77 - Micro visualizações ampliam o assunto
Figura 78 - As visualizações macro representam de forma mais generalizada.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 177 de 506
Estilo de Baixa ou Alta fidelidade

Algumas ilustrações se beneficiam por serem simples e diretas, enquanto outras requerem
mais fidelidade para capturar mais detalhes ou oferecer um efeito dramático. A iluminação é
sempre uma ideia a considerar com técnicas de cores e detalhes, como gradientes, que podem
ajudar a comunicar com mais nitidez.
Figura 79 - A cor sólida é mais simples e direta.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 178 de 506
Tipos de ilustração
Segmentamos nossas ilustrações em quatro tipos: modelos, organismos, moléculas e ícones.
Modelos
Os modelos são usados para contar histórias complexas e adaptam sua complexidade ao
tamanho de suas ilustrações. Eles geralmente contêm mais de três personagens.
Figura 80 - Modelos são ilustrações com muitos detalhes e elementos, utilize-os em áreas
maiores.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 179 de 506
Organismos
Os organismos podem ser vistos como elementos dos modelos de ilustração e, com isso,
transferem conceitos mais simples.
Figura 81 - Organismos compõem modelos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 180 de 506
Moléculas
As moléculas são pequenas e simples e ajudam o usuário a entender a ideia de um conteúdo
como parágrafos curtos.
Figura 82 - Moléculas são pequenas e simples, são versáteis e se encaixam em várias

proporções.
Ícones
Os ícones diferem das ilustrações em estilo e função. As ilustrações transmitem uma história
e explicam várias ideias ao mesmo tempo. Em vez disso, os ícones têm um propósito mais
funcional: eles representam o conteúdo em vez de complementá-lo. Pense nas ilustrações
como parágrafos e nos ícones como marcadores. Os ícones são muito simples e têm uma única
cor em quase todos os casos.
Figura 83 - Você pode utilizar ícones em sua ilustração, ou até mesmo criar uma pequena
composição com um ícone decorado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 181 de 506
Mas para o uso em interfaces no Design, foi escolhida a coleção de ícones “Font
Awesome” por possuírem uma boa variedade de ícones com um layout simples, sintético e
amigável.
Figura 84 - Exemplos de ícones da Font Awesome. Eles não representam o conjunto completo
dos ícones.
Você pode encontrar mais informações sobre como usar e desenhar ícones para produtos
digitais em nossa seção de iconografia.
Quando usar Ilustrações ou imagens

As ilustrações funcionam melhor quando o assunto do conteúdo é fantástico ou de natureza
abstrata. Representações que precisem ser realistas funcionam melhor por meio de imagens.
Ilustração
Representações grandiosas. Sempre que houver necessidade de retratar algo além da vida
real use uma ilustração. Elas podem ser fluidas, abstratas e abertas à imaginação.
Contexto visual. As ilustrações podem ajudá-lo a compreender melhor o contexto geral de
uma história.
Representação de dados. Se você precisa retratar um processo, diagrama, fluxograma ou

qualquer outra representação gráfica de dados, isso requer uma ilustração.
Personifique sua marca. As ilustrações dão a você a liberdade de criar um personagem que
anda e fala da maneira que você quiser para que possa criar a percepção desejada de sua
marca na mente de seus usuários.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 182 de 506
Imagem
Autenticidade e atenção para os detalhes. As imagens são mais autênticas. É por isso que as
imagens são preferidas sempre que produtos como telefones celulares, carros e laptops são
exibidos.
Tempo e agilidade. Uma imagem adequada pode permitir que você crie uma peça
de design em meia hora, enquanto pode demorar muito mais se a mesma precisar ser
ilustrada.
Construção de confiança. As imagens permitem que você use um rosto conhecido no

conteúdo. Isso informa instantaneamente ao leitor que a pessoa na imagem apoia / endossa
o conteúdo.
Crie uma experiência visual. A fotografia permite que você crie uma “experiência visual” que
pode transportar o espectador para um lugar particular ou induzir uma sensação de nostalgia
com efeitos.
Guia para construção de ilustrações

Se você deseja começar a construir ou editar ilustrações em seu projeto, por favor, siga esse
passo-a-passo e tenha em mente as seguintes orientações.
1- Definindo elementos de Anatomia

Defina quais elementos da anatomia melhor representam a identidade do seu produto:
• Elementos de fundo (Obrigatório): harmonize os elementos de fundo com a
composição. Eles não devem competir com os elementos principais.
• Luz e sombra (Obrigatório): defina a origem da luz em sua composição e lembre-se de
usar o branco e o preto, aplicando o efeito de Luz suave em incrementos de 10% para
atingir os tons de luz e sombra.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 183 de 506
• Personagem (Opcional): existe a necessidade de utilizar um personagem, ou apenas

objetos serão suficientes para representar sua ideia? Lembre-se, a diversidade étnica
e cultural é fundamental.
• Spot ou objetos (Obrigatório): a ilustração sempre conta uma história, e os objetos
ajudam a representar sua narrativa. Seja como como ponto focal da composição ou
apenas como elementos de cenário, eles sempre estão presentes.
• Cor (Opcional): Existe alguma cor predominante no layout aplicado? Tente definir a
paleta de cores para todas as ilustrações do produto. Será preto e branco?
Monocromático ou trabalhará com a margem de 5 cores mais o preto e branco?
Utilizará cores chapadas ou trabalhará com gradientes? Evite utilizar como cor
predominante nas composições a cor de elementos interativos do tema de IU
escolhido.
• Linha de contorno (Opcional): Delimite áreas, crie formas e texturas e reforce a ideia
de movimento em suas composições com a Linha de contorno. Ela é ótima
principalmente em composições em preto e branco, além de serem bons
complementos em composições com cores chapadas.
• Textura (Opcional): Enriqueça e simule a experiência sensível de elementos físicos em
sua composição: Escolha entre a aplicação de textura em grandes áreas ou aplique em
áreas específicas.
• Padrões ou Patterns (Opcional): Pretende explorar o uso de padronagens? Prefira as
simples e geométricas. Elas acrescentam personalidade à composição sem chamar
muita atenção.
2- Identificando o cenário
Verifique em qual cenário a ilustração se encaixa. Caso não se encaixe em nenhum deles, a
ilustração pode não ser a melhor solução.
3- Definição de Estilo
Verifique qual estilo é mais adequado para comunicar a sua ideia e contar a história para os
seus usuários. Avalie o conceito, escala e fidelidade para escolher o estilo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 184 de 506
4- Tipos e complexidade
Escolha o Tipo da ilustração, de acordo com a complexidade da ideia a ser representada e o
formato/área/espaço disponível para a composição.
5- Variantes de tamanho
Os detalhes são bons, desde que não criem ruído. É por isso que a maioria das ilustrações
existem em 2 tamanhos: pequeno e grande. Em coerência com nossos Princípios de Design,
simplificamos as ilustrações para uso abaixo de 160px. Uma vez que tamanhos menores
permitem menos detalhes, eles devem ser reduzidos ao essencial.
• Variante grande: Se o espaço disponível tiver mais de 160 pixels de largura, use esta
variação.
• Variante pequena: Se o espaço disponível tiver menos de 160 pixels, use uma
ilustração pequena.
• Ícones: Se a área disponível tiver menos de 80 pixels de largura, use ícones em vez de
ilustrações.
6- Formato SVG
Por que usar esse formato? A edição é mais rápida. O redimensionamento é mais fácil (sem
pixelização). A cor é mais flexível. Os tamanhos dos arquivos geralmente são menores. Além
disso, designers sem habilidades de desenho à mão podem adicionar recursos novos e
consistentes mais facilmente à medida que o sistema evolui.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 185 de 506
Comportamento
Responsividade
Ao criar uma ilustração, tenha em mente que ela deverá adaptar-se às diferentes proporções
de diferentes dispositivos. Por exemplo, a capa de um portal pode ter uma proporção mais
horizontal ao ser visualizada em um monitor ou até mesmo em um tablet, mas pode precisar
ser ajustada para uma proporção mais quadrada ou até mesmo vertical ao ser acessada por
um celular.
No Design existem 4 tipos de grid: Smartphone Portrait, Tablet / Smartphone Landscape,

Desktop e TV, então é interessante planejar as ilustrações tendo em mente esses grids. No
exemplo abaixo, as ilustrações A e B são aplicadas na grid de 12 colunas e mudam de forma
responsiva. Já na grid de 8 e 4 colunas as ilustrações C e D ficam responsivas entre elas, porém
são uma variante resumida e com menos detalhes da primeira ilustração.
Figura 85 - Ilustração planejada para diferentes resoluções.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 186 de 506
Acessibilidade
Todas as experiências devem ser acessíveis a todos, independentemente de habilidades ou
deficiências. Se uma ilustração transmitir informações não inteiramente capturadas no texto
que o acompanha, os conceitos principais devem atender aos padrões de acessibilidade 3: 1
AA.
Esteja sempre consciente ao escolher as cores para dar a cada usuário a mesma experiência,
independentemente da habilidade.
Cada tag SVG requer um atributo aria-hidden = "true".
Ao adicionar aria-hidden = "true" a um elemento remove esse elemento e todos os seus filhos
da árvore de acessibilidade. Isso pode melhorar a experiência dos usuários de tecnologia
assistiva, ocultando conteúdo puramente decorativo, como ícones ou imagens.
SISTEMA DE GRID
Grid (ou malha) é uma estrutura geométrica constituída por eixos desenvolvida para auxiliar
o alinhamento de elementos gráficos e textuais em uma composição visual.
Utilize a grid para auxiliar no desenvolvimento de layouts organizados e estruturados.
Experiência Única
O sistema de grid de 12 colunas possui uma boa flexibilidade para projetos de layouts, pois
permite uma diagramação de páginas e telas com colunas múltiplas de 12, além de se adequar
aos principais Frameworks CSS, facilitando a escolha na tecnologia a ser utilizada.
Em Tablets e Smartphones o número de colunas é reduzido ao máximo de 8 e 4
respectivamente, devido à limitação de espaço.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 187 de 506
Seguindo o princípio de espaçamentos e dimensões múltiplas de 8, é possível preservar as
proporções em resoluções de telas diferenciadas, visto que a maioria tem suas dimensões
divisíveis por 8. Essa característica de Design Multi-Plataforma fornece ao usuário uma
sensação de consistência e clareza no projeto de design em diferentes dispositivos.
Acessibilidade
As interfaces devem ser adequadas a diferentes tipos de dispositivos. Tendo em vista esse
aspecto, o sistema de grid fornece alguns breakpoints - pontos de quebra onde o layout será
ajustado para atender diferentes resoluções, sendo assim possível desenvolver interfaces
adaptáveis a diversos formatos e tamanhos de telas.
Porventura, poderá haver alguma adaptação específica no sistema de grids, breakpoints e
padrões de proporção, para atender alguma necessidade em projetos de interface. Sendo
assim, faz-se necessário que essas evoluções/adaptações sejam testadas e passem por uma
prévia aprovação da equipe de design do Design FACAPE.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 188 de 506
Breakpoints
O sistema de grid para o Design se adequa a 5 breakpoints de referência, abrangendo
resoluções para mobile, tablet, desktop e resoluções superiores. São elas:
Figura 86 - Visão geral dos breakpoints e resoluções.
Device Breakpoint Range (px) Breakpoint (px)

Smartphone Portrait 0 - 575 0
Smartphone Landscape / Tablet Portrait 576 - 991 576
Tablet Landscape 992 - 1279 992
Desktop 1280 - 1599 1280
TV 1600 - * 1600
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 189 de 506
Comportamentos
1- Largura
Existem dois tipos de largura para as grids: Fixa e Fluida.
Largura Fixa
As colunas e as medianizes possuem largura fixa. Porém a largura das margens são
variadas de acordo com a resolução da tela, ou seja, o conteúdo se mantém centralizado da
tela em uma largura máxima (max-width) fixa.
Atenção: mesmo com os valores da margem variando, existe um valor mínimo que deve ser
respeitado. Essa margem mínima funciona como uma área de segurança para que o conteúdo
não fique totalmente “colado” no limite do dispositivo ou do navegador.
Figura 87 - Grid Fixa - Exemplo 1.
Figura 88 - Grid Fixa - Exemplo 2.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 190 de 506
Largura Fluida
Tanto as margens como as medianizes possuem largura fixa, porém a largura das colunas
variam, dimensionando também o conteúdo. Neste caso, a grid ocupa todo o espaço
disponível da tela (max-width de 100%).
Figura 89 - Grid Fluida - Exemplo 1.
Figura 90 - Grid Fluida - Exemplo 2.
Max-Width
Max-width mede a distância entre o início da primeira coluna da grid até o final da última
coluna. Em outras palavras, é o tamanho da largura da grid sem os elementos de margem.
Figura 91 - Max-width é o local onde está localizado todo o conteúdo principal da interface.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 191 de 506
2 - Sangria na Grid (Bleed)

As margens são o espaço de segurança entre o conteúdo e as bordas direita e esquerda de
uma tela. Por padrão, os elementos dentro da grid nunca devem ultrapassar as margens.
Porém, alguns componentes podem ter elementos que quebram essa regra e ocupam o
espaço da margem, é o que chamamos de sangria na grid.
Quando a sangria na grid acontece, a largura do box/contêiner do elemento deve ocupar todo
o espaço da margem enquanto o conteúdo informativo permanece dentro das colunas.
Atenção: somente elementos com funções visuais podem utilizar a sangria (como um
contêiner/background, por exemplo). Os conteúdos informativos devem respeitar as
margens da grid.
Observação: objetos podem “sangrar” invadindo espaços de outros elementos. Neste caso,
veja as regras em Fundamento > Espaçamento. As regras de sangria de grid só funcionam
em grids e em elementos que estão inseridos nela. Elementos flutuantes, por exemplo, não
utilizam a grid.
Figura 92 - Exemplo de grid contendo elementos com sangria.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 192 de 506
Figura 93 - Exemplo de grid sem elementos com sangria.
Tipos de Grid
Existem 3 tipos de grid:
• 4 Colunas;
• 8 Colunas;
• 12 Colunas.
Cada uma delas deve ser utilizada em um determinado breakpoint.
Pode-se utilizar qualquer comportamento de largura em qualquer tipo de grid. Porém, um

pode ser mais recomendado que outro dependendo da grid.
Grid de 4 colunas
O conteúdo deve ser reorganizado em 4 colunas respeitando a margem de 8px nas laterais e
medianiz de 16px.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 193 de 506
Recomenda-se o uso do comportamento de grid fluida. Evite o uso do comportamento fixo

para esta grid.
Property Value
max-width* até 559px
gutter 16px
columns 4
margin** 8px
breakpoint Smartphone Portrait
* para comportamento fluido o valor sempre será 100%.
** margem mínima no comportamento fixo.
Figura 94 - Exemplo de grid de 4 colunas.
Grid de 8 colunas
O conteúdo é organizado em 8 colunas se adequando às variações retrato e paisagem. O
espaçamento entre as colunas será de 24px e a margem externa ao conteúdo de 40px.
Essa grid pode ser utilizada em dois breakpoints distintos. Um voltado para smartphone
landscape e tablet portrait, e outro voltado somente para tablet landscape. Desta forma gera
maior flexibilidade de uso variando apenas comportamentos de responsividade e de largura
em cada resolução.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 194 de 506
Recomenda-se o uso do comportamento de grid fluido. Utilize o comportamento fixo com

cautela (geralmente em tablet landscape).
Property Value
max- de 496px até 911px (tablet e smartphone landscape) ou de 912px até 1199px
width* (tablet landscape)
gutter 24px
columns 8
margin** 40px
breakpoint Smartphone Landscape / Tablet Portrait ou Tablet Landscape
Figura 95 - Exemplo de grid de 8 colunas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 195 de 506
Grid de 12 Colunas
Utilizam 12 colunas com espaçamentos de 24 pixels ou 40 pixels entre elas (dependendo
do breakpoint). Esse sistema permite a organização do conteúdo bastante diversificado.
Quando utilizada a grid fixa, a margem externa ao conteúdo é variável (com tamanho mínimo
de 40 pixels) se adequando às dimensões da tela.
Essa grid pode ser utilizada em dois breakpoints distintos. Um voltado para desktop e outro
para TV. Por causa da grande diferença de espaço útil disponível a configuração da grid e os
comportamentos recomendados são distintos para cada breakpoint.
Desktop
O espaçamento das colunas é de 24 pixels.
A recomendação do uso de grid fluida ou fixa é variável pois depende do tipo de conteúdo
utilizado:
• Grid fluida: é recomendada para sistemas ou situações em que é preciso aproveitar a
maior parte do espaço útil da tela do dispositivo.
• Grid fixa: recomenda-se para portais ou conteúdos informativos (como sites de
notícia) em que o conteúdo não deve sofrer muita distorção, mantendo a leitura
consistente.
Property Value
max-width* de 1200px até 1519px
gutter 24px
columns 12
margin** 40px
breakpoint Desktop
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 196 de 506
Figura 96 - Exemplo de grid de 12 colunas para desktop.
TV
O espaçamento das colunas é de 40 pixels.
Recomenda-se o uso da grid fixa. Por possuir uma área útil extensa pode causar problemas de
legibilidade (nos textos) ou problemas de hierarquia da informação.
Utilize o comportamento fluido com cautela.

Property Value
max-width* a partir de 1520px
gutter 40px
columns 12
margin** 40px
breakpoint TV
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 197 de 506
Figura 97 - Exemplo de grid de 12 colunas para TV.
Responsividade
Responsividade é a forma como se estrutura a interface em diferentes resoluções de tela. O
Design FACAPE define diferentes grids e breakpoints para facilitar a aplicação deste conceito
de forma prática. Porém, posicionar os elementos dentro de um grid não significa que o
seu layout esteja responsivo. Entender como os elementos interagem com a grid responsiva
é uma etapa muito importante para promover uma experiência adequada ao usuário em
diferentes dispositivos ou situações.
Pontos importantes quando tratamos de responsividade:

1. Breakpoint Vs Dispositivo: apesar de ser uma correlação, o uso de uma determinada
resolução não significa que o usuário esteja com o dispositivo X ou Y. Eventualmente
pode ter sido alterado o espaço útil do navegador em um desktop ou apenas o modo
paisagem/retrato em um tablet (girando o dispositivo). A interface deve funcionar
independentemente do dispositivo; principalmente os elementos interativos (seja por
toque ou clique).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 198 de 506
2. Navegação: a navegação deve ser revista em cada breakpoint utilizado. Baixas

resoluções muitas vezes requerem uma área de interação ou textos maiores.
Componentes voltados à navegação devem ser sempre validados.
3. Clique Vs Toque: em resoluções mais baixas o uso de interação por toque é mais
comum e o contrário também é verdade. Trabalhe melhor essa questão quando
adaptar o layout a diferentes grids. Utilize o ponto forte de cada interação, como uso
de “gestos” para criar interfaces voltadas ao toque, por exemplo. Não esqueça que
focar em um modo de interação não significa esquecer o outro.
4. Testar: a melhor maneira de garantir uma boa experiência é testando a interface na
maior quantidade possível de cenários diferentes. Realize uma bateria de testes
considerando todos os cenários levantados anteriormente. Valide sua interface a
cada breakpoint.
Entendendo uma grid responsiva

Antes de entender os elementos dentro da grid, é importante definir o tipo de
comportamento utilizado na sua largura: grid fixa ou grid fluida?
Em uma grid fixa é mais simples de trabalhar, pois os elementos não sofrem alterações com a
resolução da tela. A única preocupação será com os breakpoints.
Figura 98 - Não há alteração nos elementos dos exemplos 1 e 2 na mudança de resolução de

uma grid fixa.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 199 de 506
A grid fluida é mais complexa, pois, além dos breakpoints, deve-se entender como os
elementos interagem com as colunas da grid (se é adaptativo ou estável).
Figura 99 - Na grid fluida os elementos tiveram seu posicionamento e dimensões alterados

com a mudança de resolução.
Observação: na grid fixa ainda existe o conceito adaptativo e estável porém, como a largura
das suas colunas são fixas, o controle é muito mais simples.
Elemento Adaptativo e Estável

Assim como a grid, as dimensões dos elementos seguem um comportamento bem parecido.
Largura adaptativa (ou fluida): a largura do elemento está atrelada às colunas da grid. Ou
seja, se a coluna mudar de tamanho, os elementos também terão a dimensão alterada.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 200 de 506
Figura 100 - Alguns elementos estão atrelados a 4 colunas da grid e outras a 2 colunas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 201 de 506
Largura estável (ou fixa): o elemento está apenas alinhado a grid. Independentemente do
tamanho da coluna, ele não terá sua dimensão alterada. Porém, pode ser que o elemento não
consiga se manter na mesma linha e precise “quebrar a linha” (passado para a linha
subsequente. Podendo empilhar e empurrar os demais conteúdos abaixo dele).
Figura 101 - No exemplo, os elementos estão apenas alinhados (à esquerda) dentro de uma
área de 4 colunas. Caso haja mudança na resolução a largura dos elementos não sofrerá
nenhuma alteração.
As informações acima foram focadas na largura por ser um elemento que pode ser
influenciado diretamente pela grid responsiva do Design FACAPE. Porém, tanto a largura
quanto a altura podem ser influenciadas também pelos elementos internos de um
componente (utilizando-se dos mesmos conceitos).
Por isso, sempre que criar um componente, tente responder a seguinte pergunta: “Ela
interage com a grid responsiva e/ou com seus elementos internos ou ela é totalmente fixa?”
É importante entender como funcionam todas as dimensões do componente, tanto a largura
como a altura, para repassar ao desenvolvedor.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 202 de 506
Figura 102 - Um card pode ter altura adaptativa ao conteúdo interno, mas a largura é
adaptativa a grid (exemplo 1). É possível também criar um card com dimensões totalmente
estáveis (exemplo 2) que não variam nem com conteúdo interno e nem com a grid
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 203 de 506
Pode-se haver componentes que possuem comportamentos distintos dependendo

da grid utilizada.
Figura 103 - Um botão pode ter altura estável e a largura adaptativa ao conteúdo interno em
uma grid de 12 colunas (exemplo 1). Porém em uma grid de 4 colunas ele passa a ter sua
largura adaptativa a grid (exemplo 2).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 204 de 506
Tenha em mente que, em uma mesma interface, pode existir grupos de elementos estáveis e
grupos de elementos adaptativos.
Figura 104 - Interface com elementos adaptativos e estáveis.
Objetos Temporários
Objetos temporários são elementos ou regiões que surgem temporariamente. Podem ser
ocultados ou visualizados ao interagir com um item da interface. Podem ser categorizados
em flutuantes ou persistentes.
Observação: é importante que o elemento temporário esteja localizado próxima da área de

conteúdo (Max-width) ou no limite do tamanho mínimo da margem da grid principalmente
quando utilizadas grids fixas que podem possuir margens muito extensas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 205 de 506
Flutuantes
Não influenciam ou são influenciados diretamente pela grid (independente do
comportamento, não sofrem alteração). Porém, para cada tipo de grid é importante rever
como o elemento flutuante será apresentado na interface.
Figura 105 - Quando visível, o menu de navegação flutuante não afeta a grid e nem os
conteúdos da interface.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 206 de 506
Persistentes
São regiões que “empurram” ou “puxam” o conteúdo e/ou a grid quando aparecem ou
desaparecem respectivamente.
Figura 106 - Quando visível, o menu de navegação persistente comprime a grid (e seu
conteúdo)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 207 de 506
SUPERFÍCIE
Superfície é qualquer forma indivisível que pode conter um ou mais elementos.
Figura 107 - Exemplos de superfícies.
Todos os componentes desse Design utilizam superfícies como base para a criação dos
componentes.
Atenção: algumas vezes podemos nos referir à superfície com os termos

genéricos background ou contêiner.
Princípios
Experiência Única
A superfície pode oferecer uma infinidade de características combinando os seus atributos de
forma a proporcionar uma vasta variedade de tipos de superfícies, mas deve manter
consistência dentro de um produto ou tema.
Exemplo: Se assumir que em determinado produto ou tema a superfície deva possuir bordas
arredondadas, mantenha a consistência em todos os componentes que utilizem a mesma
superfície. Crie e siga padrões.
Ao utilizar superfícies na criação de componentes lembre sempre que o objetivo é conter,
agrupar e organizar elementos na tela, aumentando a eficiência na compreensão da
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 208 de 506
informação pelo usuário. Não exagere na quantidade de elementos dentro das superfícies
utilizando somente o necessário. Quanto mais enxuto for o componente, mais facilidade o
usuário terá para compreendê-lo. Crie hierarquias visuais e semânticas utilizando os atributos
disponíveis.
Acessibilidade
Superfícies podem assumir qualquer cor da paleta cromática do Design mas atenção para o
contraste das cores escolhidas. Siga sempre as orientações de boas práticas deste manual.
Exemplo: A cor padrão para a superfície é branca por ser neutra e proporcionar um bom
contraste com a cor padrão utilizada em textos. Porém, é critério do designer escolher a cor
que melhor atenda às necessidades criativas e de usabilidade.
As superfícies foram pensadas para oferecer uma variedade de atributos que permitam a
criação de diversas formas e possibilidades de uso. Prefira as opções disponibilizadas nesse
documento, porém, caso haja necessidade, novos atributos podem ser sugeridos para uma
maior personalização da superfície.
Propriedades
Propriedade da superfície são algumas características variáveis que podem ser manipuladas
para criar superfícies personalizadas. São elas: cor, borda, canto, sombra e transparência. A
seguir são detalhados cada um deles:
Cores
A superfície dos elementos pode apresentar qualquer cor prevista na paleta de cores
do Design.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 209 de 506
Figura 108 - Exemplos de algumas cores possíveis para superfícies.
Atenção: lembre sempre de verificar o contraste entre as cores utilizadas na superfície e nos
elementos contidos na superfície.
Bordas
As bordas definem os limites de uma superfície e podem funcionar como espécie de
separadores entre a superfície e o background. Apresentam diferentes tipos e espessuras. É
possível também uma superfície não apresentar bordas visíveis.
Figura 109 - Diferentes tipo e espessuras de bordas.
Use bordas quando necessitar um maior contraste com a cor do fundo, principalmente nos
casos em que os componentes são brancos ou com cores claras e precisam se destacar.
Cuidado: o excesso de bordas pode ocasionar um ruído visual e dificuldade de legibilidade.
Atenção: nos softwares gráficos as bordas devem estar configuradas conforme a imagem a
seguir:
1. Traçado interno;
2. Arremate projetado;
3. Junção de mitra.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 210 de 506
Figura 110 - Exemplo para a configuração de bordas no Adobe XD.
Atributos
1. STYLE
Define o tipo/estilo de borda. Pode ser: solid ou dashed.
2. WIDTH
Refere-se à espessura do traço. Temos os seguintes tokens:
px Width Token
0 --surface-width-none
1 --surface-width-sm
2 --surface-width-md
4 --surface-width-lg
Figura 111 - Variação das bordas possíveis para uma superfície previstas no DS.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 211 de 506
3. COLOR
Pode assumir qualquer cor prevista na paleta de cores do Design.
4. SIDE
Define os lados da superfície que a borda será aplicada. Pode ser: top, right, bottom, left, all.
Tipos de Bordas
Surface Border Token Style Width Color
--surface-border-solid-none solid --surface-width-none --gray-40
--surface-border-solid-sm solid --surface-width-sm --gray-40
--surface-border-solid-md solid --surface-width-md --gray-40
--surface-border-solid-lg solid --surface-width-lg --gray-40
--surface-border-dashed-none dashed --surface-width-none --gray-40
--surface-border-dashed-sm dashed --surface-width-sm --gray-40
--surface-border-dashed-md dashed --surface-width-md --gray-40
--surface-border-dashed-lg dashed --surface-width-lg --gray-40
Cantos
As superfícies podem apresentar variações no arredondamento dos cantos das bordas. Podem
apresentar desde cantos retos (quadrados) até totalmente arredondados. Esse atributo
possibilita a criação de novas formas.
Figura 112 - Exemplos de arredondamento dos cantos a partir de uma superfície quadrada.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 212 de 506
Use as variações de arredondamento dos cantos para criar novas formas. Geralmente, quanto
mais arredondados forem os cantos, mais orgânica é a forma. Use cantos retos para formas
que necessitam transmitir solidez e seriedade e formas arredondadas para transmitir ideia de
modernidade e informalidade.
Atributos
1. ROUNDER
Refere-se ao arredondamento das bordas. Temos os seguintes tokens:
px Rounder Token
0 --surface-rounder-none
4 --surface-rounder-sm
8 --surface-rounder-md
16 --surface-rounder-lg
altura/2 --surface-rounder-pill
Figura 113 - Variação dos arredondamentos de cantos possíveis para uma superfície neste DS.
Pode-se construir superfícies com formas totalmente redondas utilizando a fórmula para os
cantos pill R=A/2, onde:
R = arredondamento dos cantos;
A = altura da superfície.
Na figura acima, a superfície circular tem uma altura de 150px, logo o arredondamento é de
75px. Assim, partindo de uma forma quadrada se consegue chegar a uma forma circular.
Esse recurso é muito utilizado para a criação de botões estilo pill (pílula) e tags.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 213 de 506
1. Botão Pill (R=24px, A=48px);
Figura 114 - Exemplos de superfícies no formato pílula (pill).
2. SIDE
Define os lados da superfície que a borda será aplicada podendo
ser: top/right, bottom/right, bottom/left, bottom/right, all.
Opacidade
Opacidade é a propriedade do objeto de reter luz. Quanto mais transparente for a superfície,
mais luz passa através dela e mais nitidez é perceptível nos elementos situados atrás. A
superfície pode apresentar diferentes níveis de opacidade. Isso é relevante quando é
necessário transparecer uma quantidade de informação do elemento que se encontra
imediatamente atrás.
Figura 115 - A imagem 1 mostra uma foto comum. A imagem 2 mostra a mesma foto
sobreposta por superfícies com diferentes níveis de opacidade.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 214 de 506
Opacidades podem ainda ser utilizadas para sobrepor imagens ou cores e desta forma
conseguir novas tonalidades. Chamamos esse comportamento de overlay. Mais adiante esse
comportamento será melhor detalhado.
Atributos
1. OPACITY
Define a transparência de uma superfície e é definido por valores entre 0 a 1. Temos os
seguintes tokens:
Value Opacity Token
0 --surface-opacity-none
1 --surface-opacity-default
0.16 --surface-opacity-xs
0.30 --surface-opacity-sm
0.45 --surface-opacity-md
0.65 --surface-opacity-lg
0.85 --surface-opacity-xl
Elevação
As superfícies estão localizadas em camadas imaginárias e assim projetam diferentes
intensidades de sombra no plano de fundo (camada zero) ou em outra superfície situada em
camada imediatamente atrás. Portanto a sombra está relacionada com a elevação da camada
em que a superfície se encontra. Este assunto é tratado de forma mais detalhado em
documento específico: Fundamentos>Elevação
Figura 116 - Exemplos de sombras projetadas pelas superfícies definindo distintos níveis de
elevação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 215 de 506
Comportamento
Deslocável
As superfícies podem ser arrastadas para outra posição dentro da tela. Esse é um
comportamento do estado arrastado e é melhor definido no documento de
Fundamentos>Estados.
Figura 117 - A imagem ilustra as etapas da alteração da posição da superfície escura em uma
sequência de superfícies.
Dimensionável
As superfícies são estruturas rígidas, porém redimensionáveis no plano bidimensional. Alguns
componentes podem ter superfícies flexíveis em relação ao conteúdo, isto é, crescem
conforme a quantidade de conteúdo em seu interior. Já outros, possuem dimensões fixas e
disponibilizam barra de rolagem para dar acesso ao conteúdo que extrapola as dimensões
fixas.
Figura 118 - A imagem ilustra uma superfície sendo redimensionada pelo usuário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 216 de 506
Overlay
Um overlay (sobreposição) é uma superfície semitransparente sobre um elemento específico
ou sobre uma área da tela. Overlays podem ajudar a redirecionar a atenção do usuário, inibir
a interação sobre outras áreas/elementos ou retornar feedback visuais para o usuário.
Apesar de infinidade de aplicações, ela se destaca em dois usos:
1. Foco
Usado para alterar o foco hierárquico de um elemento (ou uma área) sobre outros, onde um
determinado conteúdo precisa de uma grande relevância sobre os demais. Este uso é
conhecido em outros lugares como scrim.
É comum que esse tipo de uso permita inibir as interações de elementos sob a
superfície overlay.
Figura 119 - Overlay sendo utilizado para focar um elemento modal.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 217 de 506
Figura 120 - Overlay sendo utilizado para focar uma área específica da tela.
Surface overlay Token Color Color Opacity

--surface-overlay-scrim --pure-100 --surface-opacity-md
2. Legibilidade
Usado quando um texto precisa ser aplicado sobre uma superfície e o contraste entre
fundo/texto não é suficiente para gerar um contraste acessível;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 218 de 506
1. Imagem com texto (sem overlay): pouco contraste para leitura; 2. Camada overlay com
degradê; 3. Imagem com texto (com overlay): maior contraste para leitura.
Surface overlay Token Gradient Angle Color Color Opacity Hint Color Color Opacity Hint
--surface-overlay-text linear-gradient 180deg --pure-0 --surface-opacity-none 0% --pure-100 --surface-opacity-default 100%
Cuidados ao utilizar um overlay

A versatilidade de uso de uma superfície overlay é muito grande.
Podemos utilizar todas as propriedades listadas na superfície em conjunto com outros

comportamentos para gerar aplicações muito mais ricas, como por exemplo, personalizar a
forma da superfície overlay (com a propriedade canto) em conjunto com recursos de
animação (motion) gerando interações mais dinâmicas para o usuário.
Porém, o uso do overlay deve ser claro e dentro do seu propósito descrito no Design FACAPE,
pois o uso indiscriminado pode interferir nas diretrizes.
Evite a criação de novos matizes de cores: quando utilizada a superfície overlay “colorida”
sobre uma superfície de cor distinta. Essa mistura de cores pode gerar distorções na
identidade visual. Prefira o uso desse tipo de overlay em situações muito específicas (como
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 219 de 506
feedback de interações executadas pelos usuários), ou em casos mais gerais, tente interferir
somente no brilho e/ou na saturação dos elementos.
Figura 121 - 1. Superfície overlay “colorida” com opacidade 45%; 2. Superfície com outra cor
distinta; 3. Nova tonalidade de cor gerada pela sobreposição das duas superfícies.
ELEVAÇÃO
Elevação é um aspecto importante na organização do layout pois permite que o usuário
entenda a relação hierárquica entre diferentes elementos na tela.
De forma geral, a ilusão de elevação é algo que funciona melhor quando passa despercebida
e buscamos fazer exatamente isso, com o uso sutil de diferentes intensidades de sombras que
se destinam a complementar a sensação de hierarquia entre os elementos do layout.
Princípios
Experiência Única
• É a função exercida pelo componente ou elemento que irá definir a camada onde ele
deve se localizar. A sombra também é definida pela camada, isto é, pela elevação em
que se encontra em relação a uma camada de referência.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 220 de 506
• O efeito de elevação deve fazer com que os elementos pareçam empilhados uns sobre
os outros mas que não possam passar entre si.
• O elemento com maior relevância ou destaque deve se encontrar na elevação mais
alta, como por exemplo, uma caixa de diálogo que aparece temporariamente sobre os
demais elementos da tela.
• Não utilize apenas como elemento puramente decorativo sem a intenção de colocá-lo
em destaque.
• A elevação de uma camada não é adicionada ao conteúdo (imagine as camadas sem
espessura).
Acessibilidade
• Em leitores de tela a elevação deve estar implícita, isto é, o leitor deve priorizar a
leitura dos elementos que se encontram em camadas mais altas.
Sombra
A elevação é representada no Design FACAPE por meio de sombras projetadas com diferentes
intensidades de acordo com a elevação em que o elemento se encontra. O uso de sombras
auxilia na percepção da altura do elemento em relação a uma determinada superfície.
Figura 122 - Exemplos de sombras utlizadas no Design FACAPE.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 221 de 506
Atributos
1. Inner Shadow (Sombra Interna)
Refere-se ao valor da sombra interna podendo ser: inset, none
Inner Shadow Value
Interna inset
Externa none
2. Offset (Projeção)
Refere-se ao deslocamento da posição da sombra tanto no eixo X como no eixo Y.
Por ser um elemento de feedback visual que representa a elevação do elemento é importante
que a sombra esteja visível. Por tanto controle a projeção da sombra do elemento, ou seja, o
atributo Offset.
Por padrão o valor é zero no eixo X e positivo no eixo Y. Porém em casos em que o elemento
se encontra nas margens da tela a direção da sombra poderá ser alterada.
Offset (px) Offset Token
-9 --surface-offset-xl-n
-6 --surface-offset-lg-n
-3 --surface-offset-md-n
-1 --surface-offset-sm-n
0 --surface-offset-none
1 --surface-offset-sm
3 --surface-offset-md
6 --surface-offset-lg
9 --surface-offset-xl
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 222 de 506
Acompanhe os exemplos a seguir:
Figura 123 - Exemplo da sombra com o eixo Y positivo (sombra inferior).
Figura 124 - Exemplo da sombra com o eixo Y negativo (sombra superior).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 223 de 506
Figura 125 - Exemplo da sombra com o eixo X positivo (sombra à direita).
Figura 126 - Exemplo da sombra com o eixo X negativo (sombra à esquerda).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 224 de 506
3. Blur (Suavidade)
Define o nível de suavidade da sombra.
Blur (px) Blur Token
0 --surface-blur-none
1 --surface-blur-sm
3 --surface-blur-md
6 --surface-blur-lg
9 --surface-blur-xl
4. Color (Cor)
Pode assumir qualquer cor prevista na paleta de cores do Design FACAPE.
5. Color Opacity (Opacidade da Cor)

Valor da opacidade da cor utilizada.
Veja os valores possíveis nos atributos de opacidade no Fundamento de Superfície.
Tokens e exemplos do uso de sombras

No Design FACAPE sombras são utilizadas de forma simplificada. Dessa forma, foram
criadas tokens de sombras prontas para o uso.
Visite nossa página de utilitários para visualizar todas as possibilidades possíveis de uso de
sombras e tokens.
Camadas
Camadas são planos “imaginários” e sem espessura que servem de suporte para o apoio dos
componentes criando elevações distintas.
A elevação é a distância implícita acima da camada zero. O efeito da elevação em uma camada
é definido pela intensidade da sombra que ela projeta.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 225 de 506
Cada camada recebe o nome de zero, 1, 2, 3 e 4 e quanto maior o número, mais distante a
camada se encontra da camada zero e consequentemente uma sombra mais intensa é
projetada na camada imediatamente abaixo.
Figura 127 - Exemplo de empilhamento de camadas com as sombras projetadas.
Por exemplo, imagine um elemento que se encontra na camada 4. Ele está localizado mais
próximo da vista do usuário que um elemento na camada 3, e assim por diante. Esse
empilhamento de camadas cria uma hierarquia espacial entre os componentes e que, de
forma sutil, permite que o usuário consiga perceber quais elementos têm maior relevância na
tela.
Figura 128 - Exemplo de empilhamento de camadas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 226 de 506
Atenção: itens que se encontram em uma mesma camada não podem ocupar o mesmo
espaço na tela.
O atributo que determina a intensidade da sombra é o offset. Sabe-se que os outros atributos
também interferem no feedback visual da sombra (como o blur) porém, a fim de simplificar a
utilização, ficou decidido que por padrão os demais atributos permancem com valores fixos e
somente o offset varia conforme a camada em que o elemento se encontra.
Tabela de valores padrão de sombra

Inner Shadow Offset * Blur Color Color Opacity
none variável --surface-blur-lg --pure-100 --surface-opacity-xs
* O valor depende da camada em que o elemento se encontra. Veja adiante mais detalhes.
Camada zero
Todos os layouts têm uma camada base, sobre a qual todas as demais ficarão apoiadas.
Chamamos de camada zero e é sempre a camada de referência para todas as outras.
É nesta camada que geralmente se encontra a maior parte do conteúdo, como:
• Componentes de formulário: input, checkbox, radio, textarea, switch, upload, etc.;
• Componentes de ação: buttons, links, sign-in, tag interativa, etc.;
• Elementos não-interativos: texto, ícone, ilustração, divider, tag não interativa, etc.;
• Elementos informativos: table, breadcrumb, list, pagination, message, loading etc.;
• Elementos de navegação: tabs, wizard, etc.;
• Componentes estruturantes: footer, menu contextual, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 227 de 506
Os componentes que se encontram nesta camada não projetam sombras.
Figura 129 - Exemplo de objeto na camada zero.
Valores de offset e token da camada zero

0 --surface-offset-none
Camada Layer Token
zero --z-index-layer-0
Camada 1
A camada 1e se encontra um nível acima da camada zero. Nessa camada podemos encontrar
elementos que por padrão possuem maior relevância que os da camada zero.
São os casos dos:

• Header;
• Menu fixo;
• Card;
• Magic button.
Atenção: o comportamento content overflow deve se encontrar nesta camada. Veja detalhes
mais adiante.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 228 de 506
Os componentes que se se encontram nesta camada projetam uma sombra suave que axiliam
na sua relevância.
Figura 130 - Exemplo de objeto na camada 1.
Valores de offset e token da camada 1

-1 --surface-offset-sm-n
1 --surface-offset-sm
Camada Layer Token
1 --z-index-layer-1
Camada 2
A camada 2 é reservada para elementos flutuantes de baixa prioridade, isto é, são partes de
componentes que podem ser visíveis por meio de uma ação do usuário.
São os casos dos:
• DateTimePicker, notification, select, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 229 de 506
Os componentes que se se encontram nesta camada projetam uma sombra mais pronunciada.

-3 --surface-offset-md-n
3 --surface-offset-md
Camada Layer Token
2 --z-index-layer-2
Camada 3
A camada 3 é exclusiva para componentes de navegação principal quando possuir
comportamento flutuante.
São os casos dos:
• Menu flutuante;
• Sticky header;
• Sticky footer, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 230 de 506
Os componentes que se se encontram nesta camada projetam uma sombra ainda mais
pronunciada.

-6 --surface-offset-lg-n
6 --surface-offset-lg
Camada Layer Token
3 --z-index-layer-3
Camada 4
A camada 4 é reservada para os elementos flutuantes de alta prioridade, isto é, elementos
que trazem conteúdo crítico ou urgente para o usuário ou para o sistema.
São os casos dos:
• Loading (quando houver superfície), tooltip, modal, cookieBar, etc.;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 231 de 506
Os componentes que se se encontram nesta camada projetam a sombra com a maior

intensidade possível.

-9 --surface-offset-xl-n
9 --surface-offset-xl
Camada Layer Token
4 --z-index-layer-4
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 232 de 506
A seguir, a tabela de camadas resume visualmente o conceito de camadas utilizado no Design

FACAPE:
Figura 134 - Tabela de hierarquia de camadas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 233 de 506
Comportamentos
1- Content Overflow
Uma das maneiras de indicar ao usuário que há mais informações para serem visualizadas em
um espaço limitado é por meio de rolagem. Neste caso, os elementos do componente que
limitam este espaço devem subir para a camada 1 nos momentos em que ocultam o conteúdo.
Vejo o exemplo a seguir:
Figura 135 - Exemplo do comportamento content overflow com o conteúdo rolando sob a
estrutura superior e inferior.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 234 de 506
MOVIMENTO
Movimento é qualquer macro ou micro animação que altera os atributos visuais de um objeto
na tela durante um tempo determinado podendo ocorrer de forma automática, por meio de
uma interação ou pelo controle do usuário.
Exemplo de movimento.
Utilize movimentos para:

• Tornar o layout mais expressivo;
• Ajudar o usuário a avançar em questões complexas;
• Reforçar feedbacks em micro interações que, de outra forma, poderia passar
despercebido.
Princípios
Experiência Única
Muitos componentes do Design FACAPE já trazem incorporados algum tipo de micro
animações que devem ser consideradas. No entanto, para as macro animações de interações
entre componentes ou entre telas o design deve planejar conforme sua necessidade,
seguindo as orientações e sugestões deste documento.
Tenha sempre em mente o conceito de experiência única do usuário e utilize os

parâmetros efeito, easing e duração de forma consistente ao longo de todo o projeto.
Exemplo: é bastante popular nos meios digitais a utilização do recurso de movimento no

componente loading para transmitir a ideia de que algo está acontecendo no servidor e o
usuário deve aguardar o desfecho do processo.
Os movimentos devem transparecer eficiência e clareza e buscar refletir características reais
com fluidez e dinamismo trazendo familiaridade ao processo. Deve-se buscar equilíbrio entre
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 235 de 506
o expressivo e o natural e evitar, sempre que possível, a criação de movimentos que causem
distrações desnecessárias.
Os movimentos devem ser informativos destacando as relações entre os elementos, a

disponibilidade da ação e os resultados da ação.
Exemplo: a transição gradativa de uma cor para informar o estado hover.
Os movimentos foram pensados para oferecer uma variedade de atributos que permitam a
criação de diversas animações e possibilidades de uso. Prefira as opções disponibilizadas nesse
documento, porém, caso haja necessidade, novos atributos podem ser sugeridos para uma
maior personalização do movimento.
Acessibilidade
Esteja atento aos seguintes pilares:
• Compreensível: qualquer usuário pode entender;
• Robusto: pode ser utilizável em qualquer plataforma ou tecnologia assistiva;
• Operável: qualquer usuário pode utilizar;
• Perceptível: qualquer usuário pode perceber.
As pessoas de um modo geral experimentam a Internet de várias maneiras e formas. Elas vêm
o design visual em uma tela e usam periféricos ou telas sensíveis ao toque para agir com um
sistema sem terem maiores dificuldade no uso, ou seja, para elas os sistemas da web são
perceptíveis, compreensíveis, operáveis e robustos naturalmente. Entretanto, para as pessoas
que possuem limitações físicas, biológicas ou intelectuais, como por exemplo cegos ou com
problemas de visão, audição/fala, neuro típicas, que têm distúrbios vestibulares ou
dificuldades de compreensão espacial entre outras naturezas restritivas, precisam de recursos
de tecnologias assistivas para interagir com um sistema web e também que os sites acessados
possuam recursos de acessibilidade.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 236 de 506
Onde a maioria das pessoas acha fácil utilizar um ambiente web, para essas pessoas com
limitações, pode ser muito desafiador ou mesmo impossível fazer uso da internet se
os sites visitados não atenderem as recomendações mundiais de acessibilidade da WCAG
(W3C).
Motion design não é um recurso decorativo, ao contrário, é um recurso técnico poderoso que
favorece positivamente a experiência do usuário. Portanto cada vez mais é utilizado no design
de soluções para infoprodutos da web. No entanto, o motion design por adicionar uma
camada de complexidade à solução, traz impactos na acessibilidade que necessitam ser
observados e tratados durante a sua concepção e elaboração.
Esteja atento a algumas dicas:

• Disponibilize o controle do usuário sobre o uso das animações com opção explícita
para ativar ou desativar a funcionalidade.
Motivação principal: pessoas com distúrbios vestibulares (deficiência no controle do
equilíbrio e movimentos oculares) ao experimentarem certos movimentos podem
desencadear um desagradável desconforto, náuseas e desorientações em vários graus
ao fixarem o olhar na movimentação de objetos na tela.
• Forneça controle de “pausa” para qualquer movimento em tela que inicie
automaticamente e seja reproduzido por mais de cinco segundos, como por exemplo
conteúdos dinâmicos com atualizações automáticas e carrosséis ou micro interações
com elementos piscando por mais de três segundos.
Motivação principal: exibição de áreas da tela piscando acima do limite descrito pode
causar risco de ataques convulsivos em pessoas epiléticas ou com comorbidades
semelhantes.
• Não utilize as animações como única fonte de informação devendo-se utilizar
paralelamente outro canal de informação como o uso de sons e vibrações.
Motivação principal: pessoas cegas ou com problemas visuais não podem identificar
informações visuais naturalmente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 237 de 506
• Movimentos que surgem na tela de maneira abrupta podem causar confusão e

sobrecarga cognitiva em um usuário.
Motivação principal: pessoas com déficit de atenção (TDAH), neuro típicas ou com
limitações intelectuais podem não perceber ou se esforçar muito para descobrir o que
ocorreu na tela se o movimento se comportar de maneira drástica ou rápida demais
não sendo perceptível ou compreensível para eles.
• Forneça alternativas para as transições de estados da interface. Considere, sempre
que possível, o uso de interação de movimentos simplificados ou reduzidos para
celulares de tablets. Certifique-se de que haja sempre uma maneira de comunicar
mensagens semelhantes estaticamente sem grandes impactos e acessíveis.
• Opte, sempre que possível, pelas definições dos componentes nativos pois estes
permitem aproveitar os recursos de acessibilidade previamente integrados.
• Disponibilize, quando for o caso, controles da animação ou opção ativar/desativar.
Propriedades
Para criar um movimento devemos considerar três propriedades:
• Transição;
• Easing;
• Tempo.
Atenção: o objetivo da animação normalmente ditará o tipo de animação ou transição. Além

disso, lembre-se da frequência com que os usuários encontrarão a animação: quanto mais
frequente, mais sutil e mais curta você desejará que ela seja.
1. Transição
Está disponível uma lista de transições que podem ser combinadas entre si para criarem
diferentes tipos de efeitos.
Tenha cautela na escolha das transições que utilizará no movimento. Evite misturar vários
tipos de transições. Quanto mais sutil e natural, melhor.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 238 de 506
a) Opacity (transparência)
Trabalha com valores referentes ao atributo do item “opacidade” do fundamento superfície.

Tem por finalidade alterar a transparência de um objeto em um determinado tempo.
FADE IN
Trata-se de uma transição particular de opacidade em que um objeto parece surgir
gradativamente na tela.
Sugestão de uso: quando elementos precisam “entrar” na tela após uma ação do usuário.
FADE OUT
Ao contrário da transição fade in o efeito fade out sugere que um objeto desaparece
gradativamente da tela.
Sugestão de uso: quando elementos precisam “sair” da tela após uma ação do usuário.
Para mais informações consulte o documento Fundamentos > Superfície.
b) Color (cor)
Faz a transição entre duas cores.
Sugestão de uso: pode-se utilizar a transição entre cores para chamar a atenção do usuário
para uma mudança de estado ou ser substituído por algo novo.
Para mais informações consulte o documento Fundamentos > Cores para mais detalhes.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 239 de 506
c) Scale (dimensão)
Trabalha a variação da escala de um objeto criando transições entre as dimensões inicial e

final.
Sugestão de uso: é comum usar esta transição para realçar a relevância de um elemento na
tela.
Para mais informação consulte o documento Fundamentos > Superfície.
FILL (PREENCHIMENTO)
Efeito que preenche uma área previamente definida.
Trata-se de uma combinação do efeito scale e fade in.
Sugestão de uso: é usado para transições entre os elementos que não têm um relacionamento
forte entre si.
d) Slide (Posição)
Transição que visa o deslocamento de um objeto de um ponto a outro variando os valores dos
eixos X e Y em relação ao seu posicionamento original na tela. É possível deslizar para cima,
para baixo, para a direita e para a esquerda.
Este posicionamento utiliza como referência o ponto de ancoragem que normalmente é

utilizado para referenciar suas coordenadas.
Sugestão de uso: é usado para transições entre elementos que possuem um relacionamento
espacial ou de navegação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 240 de 506
e) Elevation (elevação)
Refere-se às mudanças aplicadas a valores no eixo Z. Por padrão, reflete na intensidade (blur)
da sombra projetada.
Sugestão de uso: as transições do eixo Z indicam movimento um nível para cima ou para baixo
na hierarquia das camadas de elevação.
Os parâmetros relacionados a esta transição estão descritos no documento Fundamentos >

Elevação.
f) Rotate (rotação)
Este parâmetro altera a posição de um objeto a partir da mudança da sua angulação, tomando
como referência o seu ponto de ancoragem que é geralmente utilizado para referenciar o grau
de rotação de um objeto.
A ancoragem pode ser um ponto específico ou um dos seguintes eixos: X, Y ou Z.
Seus valores podem variar de 0º a 360º.
No eixo Z, por padrão o ponto de ancoragem encontra-se no centro do objeto, mas é possível
deslocá-lo de posição, caso seja necessário.
g) Corner (arredondamento)
Transição utilizada para alterar o grau de arredondamento dos cantos das bordas de um
objeto, alterando-o entre cantos retos e arredondados.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 241 de 506
h) Form (transformação)
Transição que altera a forma de um objeto transmutando-o de uma forma inicial a uma forma
final.
Sugestão de uso: quando for necessário transformar um elemento em outro reforçando a

relação entre eles.
2. Easing
Easing é o atributo que define a aceleração e a desaceleração do movimento de um objeto ao
longo do tempo. Os valores do easing determinam o quanto natural ou artificial o movimento
parecerá.
a) Ease-In
As animações ease-in começam de forma lenta e terminam rapidamente.
Esse tipo de movimento é como uma pedra pesada caindo, onde começa lentamente e atinge
o chão rapidamente.
Figura 136 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-in.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 242 de 506
Atenção: de um ponto de vista da interação, os ease-ins podem parecer um pouco incomuns

por causa de seu término súbito. Coisas que se movem no mundo real tendem a desacelerar
em vez de simplesmente parar repentinamente. Ease-ins também têm o efeito prejudicial de
parecerem lentos no início, o que também afeta negativamente a percepção de resposta
do site ou aplicativo.
Easing Easing Token

Ease-In --animation-ease-in
b) Ease-Out
Os movimentos em ease-out começam mais rapidamente e terminam de forma lenta.
Esse tipo de movimento é como uma bola chutada que vai lentamente buscando o repouso.
Figura 137 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-out.
Atenção: o ease-out é geralmente melhor para o trabalho na interface do usuário, pois o início
rápido dá uma sensação de capacidade de resposta à sua animação, permitindo uma
desaceleração natural no final.
Easing Easing Token
Ease-Out --animation-ease-out
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 243 de 506
c) Ease-In-Out
Inicia com movimento acelerado, atinge o movimento normal e termina com movimento
desacelerado.
Esse tipo de movimento é semelhante a um carro acelerando e desacelerando e, se usado

com consciência, podem proporcionar um efeito mais dramático do que apenas o ease-out.
Figura 138 - Imagem exemplificando o desenho da trajetória de deslocamento em ease-in-out.
Atenção: evite criar animações longa demais devido à lentidão do início do ease-in na
animação. O intervalo de 0,30-0,50 segundos é geralmente adequado, mas o valor exato
depende muito do seu projeto específico. Desta forma, início lento, meio rápido e término
lento resultarão em maior contraste da animação, o que pode ser bastante satisfatório para
o usuário.
Easing Easing Token
Ease-In-Out --animation-ease-in-out
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 244 de 506
d) Ease
É semelhante ao ease-in-out, exceto que começa um pouco mais rápido do que termina.
Figura 139 - Imagem exemplificando o desenho da trajetória de deslocamento em ease.
Easing Easing Token

Ease --animation-ease
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 245 de 506
e) Linear
O movimento linear não possui easing, isto é, o movimento é linear e sem aceleração.
Figura 140 - Imagem exemplificando o desenho da trajetória de deslocamento no formato

linear.
O movimento totalmente linear parece estranho e não natural para os usuários. Um objeto
que se move pela tela na mesma velocidade o tempo todo parece menos natural do que um
que aumenta ou diminui sutilmente com o tempo. Essa impressão tem muito a ver com a
forma como os objetos se movem no mundo físico, onde muitas vezes não vemos coisas se
movendo a uma velocidade perfeitamente estável - eles tendem a acelerar e desacelerar
quando começam e, respectivamente, param de se mover.
Easing Easing Token

Linear --animation-ease-linear
Comparação dos easings em uma animação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 246 de 506
Atenção: observe que o easing é um dos aspectos mais desafiadores para se comunicar com
a equipe de desenvolvimento, já que cada plataforma tem diferentes maneiras de especificar
uma curva de easing (por exemplo, o formato cúbico-Bezier é usado em CSS, iOS e Android.
Adobe After Effects usa valores de porcentagem de entrada e saída).
Valores e tokens de easing (cúbico-Bezier)

Easing CSS Easing Token
Ease cubic-bezier (0.25, 0.1, 0.25, 1) --animation-ease
Ease-In cubic-bezier 0.42, 0, 1, 1) --animation-ease-in
Ease-Out cubic-bezier (0, 0, 0.58, 1) --animation-ease-out
Ease-In-Out cubic-bezier (0.42, 0, 0.58, 1) --animation-ease-in-out
Linear cubic-bezier (0,0,1,1) --animation-ease-linear
É possível customizar o easing com valores diferentes dos da tabela acima se for apropriado
para o seu projeto.
Você pode visualizar e comparar cada um dos easings em: cubic-bezier
3. Duração
Duração é o parâmetro que considera o tempo que o movimento ocorre. Ao decidir a duração
de um movimento considere os parâmetros easing e a área de animação para que o
resultado fique o mais natural possível.
Área de Animação
É a área da tela onde ocorrem os movimentos e podem ser entendidos como micro, média e
macro animações.
• Micro animação: trata-se da animação sutil e menos perceptível pelo usuário, porém
muito poderoso para transmitir feedbacks em elementos de entrada de dados,
estados, etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 247 de 506
• Média animação: trata-se de animações com valores intermediários entre a micro e a

macro animação e funciona melhor em elementos expansíveis e de média extensão.
• Macro animação: trata-se de animações mais perceptíveis e que geralmente
envolvem maior atenção do usuário e deve ser utilizado de forma bastante cautelosa
em elementos de grande extensão e importância no sistema.
Sugerimos a escala de tempo como referência para auxiliar a criação de micro e macro
animações no Design FACAPE:
Escala de Tempo
Tempo (s) Tipo Área
0,10 - 0,29 Muito rápido Micro animação
0,30 - 0,49 Rápido Micro animação
0,50 - 0,79 Moderado Média animação
0,80 - 0,99 Lento Macro animação
1-* Muito lento Macro animação
Comparação dos tempos em uma animação.
A duração de uma animação é extremamente importante para a usabilidade - muito rápida, é

difícil de ver ou estonteante; muito lenta, torna-se intrusiva e parece um atraso para o usuário.
Em geral, a duração da maioria das animações deve ser do tipo muito rápido ou rápido,
dependendo da complexidade e da distância percorrida pelo elemento. Como regra geral,
procure o menor tempo que uma animação pode levar sem parecer chocante.
Animações de feedback simples, como mostrar checkbox ou um switch, deve ter

aproximadamente 0,10 segundos de duração total. Essa duração parece imediata para o
usuário e cria a ilusão de manipulação física do objeto.
0,10 segundos está na extremidade inferior do movimento perceptível, onde quase parece
um salto instantâneo de um lugar para outro, mas é o suficiente para tornar
o feedback perceptível.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 248 de 506
Abaixo desse valor, o olho humano é incapaz de perceber movimento.
Quando a animação envolve mudanças substanciais de tela, como quando uma janela modal
é exibida, um movimento do tipo rápido pode ser apropriado. Quanto mais um elemento
precisa se mover, mais importante é que ele o faça de maneira suave e não chocante
(especialmente para pessoas que são sensíveis ao movimento, como usuários com epilepsia
ou distúrbios vestibulares).
Com 0,50 segundos, as animações começam parecer entediantes para os usuários - elas se
tornam pesadas e irritantes. Na maioria dos casos, uma duração muito rápida ou rápida é
apropriada, com 0,40 segundos sendo uma animação já começando a entrar no tipo
moderado e inconveniente para a maioria dos casos, sendo usado apenas para grandes
movimentos em telas grandes.
Experimente os valores, pois pequenas mudanças, como passar de 0,25 a 0,30 segundos,
podem trazer resultados muito diferentes.
Observe que os objetos animados que aparecem ou entram na tela geralmente precisam de
uma duração sutilmente mais longa do que os objetos que desaparecem ou saem da tela: uma
janela pop-up pode levar 0,30 segundos para aparecer, mas apenas 0,20 ou 0,25 segundos
para desaparecer.
(Lembre-se, no entanto, de que as janelas pop-up são problemáticas em muitos casos e não
recomendamos o uso excessivo delas.)
Atenção: utilize as informações deste manual como referência e tenha bom senso na decisão
da duração que a animação apresentará na tela.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 249 de 506
Tokens de duração
Tempo (s) Tipo Duration Token
0,10 Muito rápido --duration-very-fast
0,30 Rápido --duration-fast
0,50 Moderado --duration-moderate
0,80 Lento --duration-slow
1 Muito lento --duration-very-slow
Melhores Práticas
• Garanta a resposta do servidor para que o movimento desejado seja o suficiente,
evitando sobrecarga de páginas longas com irritantes períodos de carregamento.
• Considere os diferentes dispositivos e resoluções de tela onde os movimentos serão
apresentados, assim como as condições físicas em que o usuário acessarão o produto.
• Não permita que as animações incorporadas no layout chamem mais atenção que o
conteúdo e tampouco sejam motivos para distrações. A animação funciona bem para
direcionar a visão do usuário para um ponto relevante, portanto não utilize muitas
animações ao mesmo tempo em uma tela, mesmo que de forma sutil.
• A definição do movimento deve corresponder às características da identidade visual
planejada para o usuário.
• As animações funcionam melhor quando parecem fluidas e naturais e não devem
incomodar a experiência do usuário. Também não devem ser irrelevantes ou sem
função específica. Um movimento só deve ser utilizado se servir para aumentar a
compreensão do usuário.
• Animações sutis em ícones, ilustrações e logotipos de produtos podem adicionar
personalidade e diversão à experiência do usuário.
• Como sempre é recomendado em UX, considere o contexto e teste sempre com o
usuário. O que para você pode parecer um movimento sutil e natural no contexto do
usuário pode ser um fator de incômodo ou distração
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 250 de 506
TIPOGRAFIA
Rawline
Para a apresentação dos elementos textuais do Design, somente uma família de fonte é
utilizada: a Rawline. Sua escolha foi feita devido à diversidade de pesos da fonte que facilita
o uso e a criação de hierarquias entre os textos, bem como a compreensão dos elementos da
tela.
A utilização da Rawline tem como objetivo facilitar o reconhecimento, pelos cidadãos, dos
produtos da autarquia, juntamente com o padrão de cores e elementos gráficos definidos
no Design.
A Rawline está disponível em https://www.cdnfonts.com/rawline.font/
Princípios
Experiência Única
A variedade de estilos da Rawline torna desnecessária a utilização de outra família tipográfica.
Sendo assim, junto com os demais elementos do Design a tipografia cria um reconhecimento
mais rápido pelo usuário, na identificação dos produtos da autarquia.
Para segurança, recomendamos o uso de fallback (caso a fonte não seja carregada por algum
motivo) a fonte "Raleway" e, de forma mais genéricas, as fontes sem serifas: sans-serif.
A diversidade de pesos da Rawline facilita a definição de níveis de hierarquias entre os
elementos da tela. Isso torna a leitura mais agradável, e também fica mais claro para o usuário
o papel que esses elementos ocupam na tela.
As escalas tipográficas foram definidas para manter a harmonia e coesão dentro do texto.
Dessa forma, nenhuma fonte deve estar fora da escala definida no DS: Minor Third.
Veja Escala tipográfica para maiores detalhes.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 251 de 506
A Tabela de Estilo Padrão foi criada para manter a mesma experiência do usuário na maioria
dos dispositivos. Caso seja necessário alterar algum valor, deve-se seguir a escala tipográfica.
Além disso, os demais itens da tabela de estilo devem ser revistos mantendo a escala
proporcional, ou seja, aumentando ou diminuindo conforme a necessidade.
Acessibilidade
As interfaces devem cumprir as diferentes necessidades de acessibilidade. Sendo assim, o
tamanho da tipografia e as cores foram aplicadas prevendo-se um nível mínimo de adequação
à legibilidade.
Sempre que possível, utilize a tabela de estilo e as cores padrão para texto para manter o
conteúdo legível/acessível ao usuário.
A semântica deve ser levada em consideração ao se criar as marcações do texto dentro do

HTML para que os dispositivos de leitores de tela consigam distinguir os diferentes elementos
do texto.
Interfaces digitais da autarquia devem utilizar a família de fonte definida sempre que possível.
Havendo, entretanto, a necessidade de acrescentar ou editar a família tipográfica atual, é
necessário validar a nova proposta segundo os princípios e pela equipe de design do DS.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 252 de 506
Estilos da Fonte Rawline
Figura 141 - Estilos da fonte Rawline.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 253 de 506
Family Token
Rawline –font-family-base
Peso da fonte (Font-Weight)

Utilize os valores abaixo para representar os diferentes estilos da fonte Rawline em uma
interface web.
Font-Weight Estilo Token
100 Thin --font-weight-thin
200 Extra-Light --font-weight-extra-light
300 Light --font-weight-light
400 Regular --font-weight-regular
500 Medium --font-weight-medium
600 Semi-Bold --font-weight-semi-bold
700 Bold --font-weight-bold
800 Extra-bold --font-weight-extra-bold
900 Black --font-weight-black
Fonte Base
Em um documento com uma definição de 72 dpi (ou 72 ppi ) dentro de um software gráfico
(como Photoshop), pontos = pixels, mas isso não é verdade em um navegador (veja “Tabela
de conversão PX, PT, EM e %”). Para uma boa comunicação, sempre indique os tamanhos
em pixels para os desenvolvedores da Web que devem converter para em ou rem.
Atualmente, uma prática recomendada é permitir que um dispositivo (como navegador web)
tome as decisões baseadas no tamanho da fonte base. O padrão é que em uma janela com
visualização de 96 dpi tenha a fonte base padrão de 16px, mas dificilmente essa regra se
aplique em todos os casos (como um smart watch).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 254 de 506
No Design da autarquia optamos pela fonte base de 14 pixel por considerarmos que esse
tamanho seja aplicável na maioria dos dispositivos e situações, porém essa escolha não é
definitiva.
Definir um tamanho de uma fonte base (juntamente com a referência do uso de unidades
“em” ou “rem”) facilitará a hierarquia entre os textos, otimizando o efeito cascata (veja escala
tipográfica).
Escala Tipográfica
O estabelecimento de uma escala tipográfica é uma forma de determinar tamanhos
tipográficos. A escala é importante porque estabelece a hierarquia e melhora a legibilidade
criando harmonia e coesão entre os textos.
Existem muitas escalas diferentes, mas dentro do Design da autarquia foi escolhida a
escala Minor Third (1,2) já que permitem números que possuem contraste necessário para
enriquecer e flexibilizar a hierarquia de uma interface.
O tamanho fonte base é de 14px (1em) e peso da fonte normal (400). A unidade em é uma
medida relativa que permite que o usuário altere o tamanho de exibição do texto na interface.
Com exceção da fonte base, utilize a unidade em para todos os outros valores da escala.
Assim, caso o valor do tamanho base padrão seja alterado, toda a interface se adapta ao novo
valor.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 255 de 506
Figura 142 - Tamanho fonte base

em px Token
3.583 50.16 --font-size-scale-up-07
1 14 --font-size-scale-base
0.833 11.67 --font-size-scale-down-01
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 256 de 506
Dica: utilize alguma calculadora Type Scale (como o site Modular Scale) para calcular os
tamanhos dentro da escala.
Caso o tamanho não atenda sua interface, utilize um valor diferente para a fonte base, porém,
a escala deve se manter a mesma (ou seja, com a mesma proporção entre os estilos).
Cuidado: manter um valor de fonte base muito alto ou muito pequeno, pode atrapalhar na
legibilidade do conteúdo. Utilize um valor base diferente do recomendado somente em casos
que justifique seu uso.
Ampliando a Escala Tipográfica

Caso haja necessidade, os valores da escala tipográfica podem ser ampliados, além dos valores
demonstrados na tabela acima, crescendo ou reduzindo na mesma proporção Minor Third
(1,2). Por exemplo:
• Crescendo: 41,80px, 50,16px, 60,19px, 72,23px, …
• Reduzindo: 8.10px, 6,75px, 5,62px, 4.68px, …
Quando reduzir ou ampliar a escala tipográfica, fique atento às questões de legibilidade.
Line-height (entrelinha)
Para utilizar corretamente o valor do entrelinhamento é preciso trabalhar com valores em
porcentagem ou relativos (como rem ou em), pois o valor vai depender do tamanho da fonte
que ele está sendo aplicado. Por padrão, utilize entrelinha de 1.45 para valores até a fonte
base, após isso, utilize o valor de 1,15.
Obs: para trabalhar com softwares que trabalham com unidades em pixel (como Adobe XD),
multiplique o valor do tamanho da fonte pelo valor da entrelinha da tabela. Exemplo: No H1
a line-height é 1.15 do valor de 41.8px (size), logo o valor da final será 48,07px.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 257 de 506
Line-Height (em) Token

1.15 --font-lineheight-low
1.45 --font-lineheight-medium
1.85 --font-lineheight-high
Tabelas de Estilos
Utilize a tabela de estilo para determinar o visual de cada estilo de tipografia utilizada. Todos
os estilos são elementos nativos do HTML.
Lembre-se, o valor line-height (entrelinhamento) não se refere ao fonte base, e sim ao valor
final da escala do próprio elemento textual. Exemplo: No H1 a line-height 1.15, ou seja, 115%
do valor de 2,986em (--font-size-scale-up-06).
Atenção: As informações apresentadas nas tabelas para Grid de 4 Colunas exibem apenas as
propriedades que diferem do padrão 12 e 8 colunas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 258 de 506
H1
Figura 143 - Exemplo do Estilo H1 com fundo claro e escuro e na Grid de 4 colunas.
Propriedade Token / Valor

Size --font-size-scale-up-06
Weight --font-weight-light
Line-height --font-line-height-low
Color --gray-80
Color (dark) --pure-0
Margin-bottom --spacing-scale-4x
Grid 4 colunas
Weight --font-weight-medium
Margin-bottom --spacing-scale-2xh
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 259 de 506
H2

Weight --font-weight-regular
Color --gray-80
Margin-top --spacing-scale-3xh
Grid 4 colunas
Weight --font-weight-semi-bold
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 260 de 506
H3

Color --gray-80
Grid 4 colunas
Weight --font-weight-bold
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 261 de 506
H4

Color --gray-80
Grid 4 colunas
Margin-top --spacing-scale-2x
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 262 de 506
H5

Color --gray-80
Text-transform uppercase
Grid 4 colunas
Size --font-size-scale-base
Weight --font-weight-extra-bold
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 263 de 506
H6

Weight --font-weight-extra-bold
Color --gray-80
Text-transform uppercase
Grid 4 colunas
Size --font-size-scale-down-01
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 264 de 506
Figura 149 - Exemplo do Estilo Parágrafo com fundo claro e escuro e na Grid de 4 colunas.

Line-height --font-line-height-medium
Color --gray-80
Grid 4 colunas
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 265 de 506
Label
Figura 150 - Exemplo do Estilo Label com fundo claro e escuro.

Color --gray-80
Margin-bottom --spacing-scale-half
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 266 de 506
Input
Figura 151 - Exemplo do Estilo Input com fundo claro e escuro.

Color --gray-80
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 267 de 506
Placeholder
Figura 152 - Exemplo do Estilo Placeholder com fundo claro e escuro.

Font-style italic
Color --gray-80
Margin-top --spacing-scale-half
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 268 de 506
Legend
Figura 153 - Exemplo do Estilo Legend com fundo claro e escuro.

Color --gray-80
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 269 de 506
Mark
Figura 154 - Exemplo do Estilo Mark.

Color --gray-80
Background --red-warm-vivid-10
Code
Figura 155 - Exemplo do Estilo Code no formato Inline e Bloco.

Font-family monospace (Utilize uma fonte monoespaçada)
Color --gray-80
Background --gray-5
Padding (Inline) --spacing-scale-half
Padding (Bloco) --spacing-scale-2x
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 270 de 506
Observação: O valor estipulado em SIZE é considerado padrão nos elementos

de Legend mark e code. O valor padrão é recomendado sempre que utilizar o estilo, porém,
ele pode ser alterado caso queira aplicar algum tipo de hierarquia.
Exemplo: Ter vários Fieldset+Legend aninhados (ordenadas) criando uma estrutura

hierárquica em um formulário, pode ser interessante utilizar um SIZE (dentro da escala)
diferenciado para cada Legend….
Unidades de Espaçamento entre caracteres (Letter Spacing)

Em alguns softwares (como da Adobe), o espaçamento de um bloco de texto (tracking) e o
ajuste de espaço entre caracteres adjacentes (Kerning) são medidos em 1/1.000em, uma
unidade de medida que é relativa ao tamanho atual da face de tipos. Em uma fonte de 6
pontos, 1em é igual a 6 pontos; em uma fonte de 10 pontos, 1em é igual a 10 pontos. Ou seja,
são estritamente proporcionais ao tamanho da face de tipos utilizado.
Para calcular o valor do espaçamento entre os caracteres utilize o seguinte fórmula:

LetterSpacing(px) = tamanho da fonte(pt ou px) * tracking da Adobe / 1000.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 271 de 506
Tabela de conversão PX, PT, EM e %

A tabela a seguir, tem como referência resolução de 96dpi com fonte base equivalente a 14px.
Onde 1 pixel = 0,75 pontos e 1 ponto = 1,33333 pixel.
Ponto Pixel Em Porcentagem

6 pt 8 px 0.57 em 57 %
6,75 pt 9 px 0.64 em 64 %
7,5 pt 10 px 0.71 em 71 %
8,25 pt 11 px 0.785 em 78,5 %
9 pt 12 px 0.85 em 85 %
9,75 pt 13 px 0.92 em 92 %
10,5 pt 14 px 1 em 100 %
11,25 pt 15 px 1,07 em 107 %
12 pt 16 px 1,14 em 114 %
12,75 pt 17 px 1,21 em 121 %
13,5 pt 18 px 1,28 em 128 %
14,25 pt 19 px 1,35 em 135 %
15 pt 20 px 1,42 em 142 %
15,75 pt 21 px 1,5 em 150 %
16,5 pt 22 px 1,57 em 157 %
17,25 pt 23 px 1,64 em 164 %
18 pt 24 px 1,71 em 171 %
18,75 pt 25 px 1,785 em 178,5 %
19,5 pt 26 px 1,85 em 185 %
20,25 pt 27 px 1,92 em 192 %
21 pt 28 px 2 em 200 %
21,75 pt 29 px 2,07 em 207 %
22,5 pt 30 px 2,14 em 214 %
23,25 pt 31 px 2.21 em 221 %
24 pt 32 px 2,28 em 228 %
24,75 pt 33 px 2,35 em 235 %
25,5 pt 34 px 2,42 em 242 %
26,25 pt 35 px 2,5 em 250 %
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 272 de 506
PADRÕES
AJUDA E COMUNICAÇÃO
O recurso de ajuda é uma maneira de fornecer respostas às dúvidas ou anseios dos usuários,
visando esclarecer os meios pelos quais estes poderão concluir suas tarefas, ou acessar algum
conteúdo. Já o recurso de comunicação possibilita o envio de Feedback do usuário, como
dúvidas, caso o usuário não encontre a informação desejada no conteúdo de ajuda, além de
ter a possibilidade de enviar sugestões, comentários ou relatar bugs.
Figura 156 - Exemplo de Ajuda e Envio de Feedback do Usuário
Quando usar ajuda e comunicação para o usuário:

• Sempre utilize o recurso de ajuda. Além de ser uma heurística fundamental a ser
seguida no quesito de usabilidade, nunca se sabe quando o usuário precisará dela;
• Para usuários novatos, experientes ou especialistas, se possível ofereça ajuda
direcionada a cada tipo de usuário em seus diferentes níveis de experiência;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 273 de 506
• Para colher informações relevantes a respeito da usabilidade de seu produto e

implementar futuras melhorias nele.
Ajuda
Iconografia
Dentro do imaginário coletivo dos usuários de sistemas, aplicativos, e sítios web, já existe uma
forte referência iconográfica que representa um contexto de ajuda, a representação
iconográfica do símbolo de interrogação, por exemplo: question ou question-circle. É
importante seguir esta referência dentro do contexto Design FACAPE, desta forma pode-se
deixar bem claro aos usuários o acesso à ajuda apenas com o uso de ícone, sem necessidade
de textos explicativos adicionais. Evite utilizar outras simbologias que trazem dúvidas ao
usuário com relação a informação semântica.
Figura 157 - Utilize o question ou question-circle como iconografia padrão de ajuda
Importante! Em situações de ajuda contextual pode-se usar o ícone de

informação info ou info-circle como uma alternativa, pois além ser uma prática bastante
comum neste tipo de situação, faz parte o padrão estabelecido na documentação
de Formulários.
Figura 158 - Utilize info ou info-circle como padrão alternativo para ícone de ajuda contextual
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 274 de 506
Tipos de Ajuda
Global
Ajuda global compreende todo conteúdo de ajuda disponível para o usuário em um sistema.
Em suma, é o manual de instruções de uso de seu produto. Tem o objetivo de auxiliar o usuário
em todos os aspectos e deve oferecer desde instruções básicas até as mais avançadas,
abordando todas as questões de uso do produto. Abaixo seguem algumas formas de como
estruturar este conteúdo:
• Disponibilize uma seção de ajuda: O conteúdo deve ser estruturado em uma tela ou
seção do sistema. Deve ficar claro para o usuário onde encontrar o conteúdo de ajuda.
Certifique-se de que o acesso ao conteúdo de ajuda esteja presente em todas as telas
de forma visível e fácil de achar;
• Organize o conteúdo: Organize o conteúdo de ajuda em tópicos, categorias e assuntos
recorrentes. Se possível, utilize um menu próprio para o conteúdo de ajuda ou uma
busca com autocomplete nesta seção;
• Apresente informações relevantes: Exiba apenas informações que sejam realmente
importantes dentro do contexto tratado no tópico de ajuda. Evite dar detalhes que
fogem ao assunto;
• Simplifique a leitura: Utilize uma linguagem simples e objetiva, evitando o uso de
termos técnicos e mantendo a explicação mais curta possível;
• Formate o conteúdo: Formatar o texto torna a leitura mais agradável. Separe os blocos
de informações com títulos de destaque e sempre que possível e necessário, utilize
listas, tabelas, rótulos em negrito, espaçamentos entre parágrafos etc;
• Utilize imagens: O uso de imagens facilita a compreensão do usuário durante a leitura;
• Utilize Audiovisual: O conteúdo pode ser oferecido de forma textual ou audiovisual. O
objetivo principal é tornar o entendimento mais didático e de fácil compreensão pelo
usuário;
• Chatbot: Se possível, ofereça o recurso de chatbot para auxiliar o usuário na busca
pela informação;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 275 de 506
Contextual
A ajuda contextual é uma forma de apresentar ao usuário um fragmento do conteúdo de ajuda
relacionado ao conteúdo, elementos ou telas com os quais o usuário está interagindo. É
bastante útil, pois evita que o usuário perca tempo procurando um tópico de ajuda específico
dentro do conteúdo de ajuda global.
COMO USAR
1. Utilize um acionador Dropdown ou Collapse: Recomenda-se seguir o

padrão Dropdown ou Collapse para exibir ou ocultar o conteúdo de ajuda contextual;
Figura 159 - Exibindo o conteúdo de ajuda contextual com padrão Dropdown
Figura 160 - Exibindo o conteúdo de ajuda contextual com padrão Collapse
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 276 de 506
2. Posicionamento: Posicione o ícone padrão de ajuda próximo ao elemento referência

da ajuda.
Figura 161 - Posicionamento da Ajuda Contextual - Próximo ao elemento de referência da

ajuda contextual
3. Escrita: Apresente um texto curto, direto e contextual a respeito da ajuda solicitada;
Figura 162 - Exemplo de texto objetivo em ajuda contextual
USO DE DROPDOWN COM MODAIS E TOOLTIPS
Os componentes Modal e Tooltip são os mais adequados para exibição do conteúdo de ajuda
contextual, pois são elementos flutuantes na interface e facilitam a apresentação ou ocultação
deste. Dependendo do formato ou riqueza de detalhes apresentado na ajuda contextual,
pode-se optar pelo uso do Tooltip ou Modal. Veja as diferenças a seguir:
DROPDOWN COM MODAIS

Quando a necessidade exigir um conteúdo de ajuda contextual mais elaborado, contendo
texto com formatação, imagens, vídeos etc, faz-se necessário usar o componente Modal, pois
este permite maior espaço, além de oferecer rolagem interna.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 277 de 506
Figura 163 - Utilize Modais quando houver necessidade de um conteúdo de ajuda contextual
maior ou mais rico em recursos
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 278 de 506
DROPDOWN COM TOOLTIPS

Para situações que exijam um conteúdo textual simples, com número de caracteres reduzidos,
é recomendado o uso de Tooltips. Neste caso, evite utilizar um texto muito grande ou uso de
imagens. É muito usado para oferecer pequenas dicas ao usuário ou auxiliar no
preenchimento de campos de formulário.
Figura 164 - Dê preferência ao uso de tooltips e uma informação mais enxuta
ACESSANDO MAIS DETALHES

Caso seja necessário fazer uma referência à algum conteúdo relacionado ou um detalhamento
maior da ajuda, pode-se usar um hiperlink de acesso ao conteúdo de ajuda global. Este deve
estar localizado dentro do Tooltip ou Modal ao final do conteúdo de ajuda contextual.
Figura 165 - Quando necessário, utilize Hiperlink de acesso a mais detalhes
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 279 de 506
Ajuda Não Solicitada

Este recurso é bastante útil quando o usuário interage com o sistema pela primeira vez ou
quando o sistema traz alguma novidade decorrente de novas atualizações. Geralmente é
exibido em forma de passo a passo, utilizando recursos textuais ou apontando detalhes na
interface onde estão presentes as novidades. O Padrão Onboarding detalha este tipo de
situação de forma mais completa.
Figura 166 - Ajuda Não Solicitada seguindo o Padrão de Onboarding
Comunicação
De forma geral, os recursos de comunicação são a principal forma pela qual o usuário poderá
fornecer um feedback do uso do sistema. Este feedback pode ser qualquer tipo de comentário
que expresse um sentimento do usuário em relação ao sistema no qual ele interage.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 280 de 506
Iconografia
Com relação à semântica do ícone de envio de feedback, pode-se usar a representação de um
balão de comentário como padrão, como comment ou comment-alt, fazendo referência ao
ato de se comunicar unilateralmente. Porém, evite o uso do balão duplo, como comments-
alt ou comments, pois rementem a uma ideia de bate-papo, que não é caso aqui.
Figura 167 - Utilize comment ou comment-alt como iconografia padrão para Envio de
Feedback
Tipos de Feedback do Usuário

O sentimento ou comentário do usuário pode se enquadrar em um dos determinados tipos
abaixo:
1. Sugestões de Melhoria: Este tipo comentário é muito comum vindo de usuários
frequentes ou especialistas e trazem um conteúdo de grande utilidade para melhorias
e evolução do produto;
2. Críticas: Talvez seja um dos tipos de feedback mais comuns. Podem ser críticas
negativas ou construtivas, mas as duas situações trazem importantes insumos para
análise e futuras atualizações do produto;
3. Elogios: É um tipo menos comum, porém um bom indicador do nível de satisfação do
usuário sobre a qualidade de sua interface ou funcionalidades desenvolvidas;
4. Dúvidas de Uso: Geralmente este tipo de feedback ocorre quando o usuário já tentou
de todas as maneiras solucionar sua dúvida dentro do sistema, mas sem sucesso. Pode
indicar com clareza o quanto a usabilidade de sua interface pode estar comprometida,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 281 de 506
ou também pode indicar uma pobreza de detalhes no conteúdo de ajuda de seu

produto;
5. Relatos de problemas, erros ou bugs: Este tipo de feedback é bastante útil e
necessário dentro do ciclo de vida de um sistema ou aplicativo e fornece insumos para
um backlog de atualizações futuras.
Como Coletar Feedback do Usuário

A coleta de feedback do usuário é de suma importância para análise da qualidade do produto
desenvolvido. Pode ser usada para avaliar o lançamento de um novo produto, uma mudança
no design da interface, um novo fluxo de navegação ou uma nova funcionalidade. Abaixo
seguem algumas formas para coleta dessas informações.
Feedback Automático por Opção de Escolha do Usuário (Feature Toggle)

Consiste em oferecer ao usuário a possibilidade de alternar entre uma característica nova ou
antiga do sistema ou da interface. Desta forma o sistema coleta automaticamente
informações a respeito dos usuários optantes, tanto em número como em opção, e fornece
insumos para avaliar a preferência do público-alvo no uso desta nova característica.
É bastante útil quando se pretende lançar uma nova funcionalidade, propor um novo redesign
do sistema ou propor um novo aspecto de usabilidade.
Figura 168 - Por exemplo, pode-se usar o componente Switch ou Checkbox no menu de opções
para avaliar o lançamento de um novo dashboard no sistema
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 282 de 506
FORMULÁRIOS
ABERTOS
Talvez seja a forma mais tradicional de coleta de dados. Consiste em oferecer ao usuário uma
caixa de texto onde ele possa preencher e enviar suas dúvidas, sugestões ou críticas. Esta
forma de coleta de dados pode ser exibida em uma tela específica, em uma janela ou painel
flutuante.
Neste formato é importante que seja oferecido ao usuário um combo de seleção onde ele
possa definir o motivo de seu contato. Também é interessante solicitar, de forma opcional, o
e-mail deste usuário caso seja possível um contato mais personalizado.
Figura 169 - Exemplo de Caixa de Comentários
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 283 de 506
QUESTIONÁRIOS
Consiste em disponibilizar um questionário mais amplo e detalhado, com questões mais
específicas a respeito das características do produto. Este formato exige mais tempo dos
usuários, sendo portanto mais difícil obter grande adesão destes. Apesar disso, é bastante útil
para se obter um feedback mais rico em detalhes.
Figura 170 - Exemplo de formulário para pesquisa de satisfação do usuário
Escala de Satisfação (Rating Scales)

É uma forma mais rápida ou pontual para se obter o nível de satisfação do usuário com relação
à algum aspecto da interface ou características funcionais. Consiste numa escala visual, com
indicadores de satisfação que variam em gradações entre “Muito Insatisfeito” e “Muito
Satisfeito”. Pode ser posicionada juntamente com a nova característica a ser avaliada e
utilizada de várias formas, como nos exemplos abaixo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 284 de 506
Figura 171 - Exemplo de Escala de Satisfação utilizando componente Slider e indicadores de

satisfação
Figura 172 - Exemplo de Escala de Satisfação utilizando componente Slider e indicador em

percentual
Figura 173 - Exemplo de Escala de Satisfação com classificação em estrelas
Melhores Práticas
Localização
O acesso ao conteúdo de ajuda deve estar localizado em uma região de fácil visualização na
interface e que seja acessível a partir de qualquer tela de sua aplicação. Geralmente os locais
mais apropriados para o acesso a este tipo de conteúdo
são Cabeçalhos, Rodapés ou Menus de navegação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 285 de 506
Figura 174 - Exemplo de Ajuda no Cabeçalho
Figura 175 - Exemplo de Ajuda e Envio de Feedback no Rodapé
Figura 176 - Exemplo de Ajuda e Envio de Feedback no Menu
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 286 de 506
Em aplicações mobile, os recursos de ajuda e envio de feedback poderão ser acessados a partir
de um menu flutuante.
Figura 177 - Exemplo de Ajuda no Menu Flutuante
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 287 de 506
Acesso Imediato
Após acionar o botão de ajuda, é importante que o usuário seja conduzido imediatamente ao
conteúdo de ajuda. Evite exibir um conteúdo intermediário, como menus de opções que
trazem tópicos não relacionados à ajuda.
Figura 178 - Acesso Imediato - Conduza o usuário imediatamente ao conteúdo de ajuda
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 288 de 506
DENSIDADE
Densidade é a especificação dos espaçamentos vazios que compõem a tela ou os
componentes de interface, e pode ser ajustada dentro de uma escala de intensidade, de forma
a atender diferentes objetivos no projeto de layout ou implementação.
Figura 179 - Exemplo de Uso de Densidades
Utilize Densidade para:

• otimizar a visualização de grandes quantidades de informação em tela, como grandes
listas ou tabelas extensas;
• otimizar a diagramação de elementos em espaços reduzidos, como dispositivos
móveis, por exemplo;
• otimizar espaços em componentes que são utilizados dentro de outros componentes,
como por exemplo, um botão dentro de uma linha de tabela;
• tornar mais amplos os espaços em tela e reduzir a sobrecarga de informação;
• focalizar a atenção do usuário em elementos ou componentes na tela. Por exemplo,
um campo de texto ou botão que precisa de maior destaque;
Não utilize Densidade:

• reduzindo os espaços muito restritos de leitura de informação, de forma a dificultar a
legibilidade;
• reduzindo os espaços muito restritos em elementos interativos, de forma a dificultar
o acionamento pelo usuário;
• reduzindo espaços em elementos que precisam de destaque em tela;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 289 de 506
Tipos de Densidade
Os tipos de densidade são recomendações, presentes em cada componente, que determinam
o espaçamento utilizado dentro de uma escala, seja ampliando ou reduzindo estes.
Densidade Padrão
É a especificação de espaçamento ou dimensão padrão, recomendada para um determinado
componente. E a definição deste valor na escala, é concebida com base nas características do
componente. Em suma, é a forma esteticamente mais adequada.
Figura 180 - Exemplo Densidade Padrão
Densidade Alta
A densidade alta compreende uma redução das dimensões ou espaçamentos dentro da escala
de densidade, tendo como ponto de partida a especificação da densidade padrão. Neste tipo,
decrementa-se um nível na escala de densidade.
Este tipo é mais adequado para situações onde há a necessidade de otimização de espaços
em telas ou elementos.
Figura 181 - Exemplo Densidade Alta
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 290 de 506
Densidade Baixa
A densidade baixa compreende um aumento das dimensões ou espaçamentos dentro da
escala de densidade, tendo como ponto de partida a especificação da densidade padrão.
Neste tipo, incrementa-se um nível na escala de densidade.
Este tipo é mais adequado para tornar os elementos ou diagramação de tela mais amplos e
confortáveis, reduzindo a sobrecarga cognitiva. Também é útil para focar a atenção do usuário
em determinados elementos.
Figura 182 - Exemplo Densidade Baixa
Como Usar Densidade

A seguir, pode-se observar algumas orientações que podem auxiliar projetistas de interface a
entender quando e como utilizar densidades, de forma a melhorar a experiência dos usuários.
Dimensões e Espaços Internos

Existem duas formas de ajustar a densidade em componentes Design FACAPE:
• através do ajuste nos espaços internos (padding) ao componente;
• através do ajuste nas dimensões (width e/ou height) do componente.
Espaços Internos
Neste modo, o ajuste é feito nos espaços internos ao componente. Referem-se aos espaços
entre o conteúdo interno e os limites da superfície do componente e podem ocorrer no topo,
base, direita e esquerda. Observe os exemplos abaixo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 291 de 506
Figura 183 - Exemplo de Ajuste de Densidade nos Espaços Internos
Importante! É importante salientar que os espaços internos podem ser ajustados nas quatro
direções (topo, base, direita e esquerda), mas também podem ser ajustados escolhendo-se
apenas duas direções opostas, como direita e esquerda apenas ou topo e base apenas.
Dimensões
Esta forma consiste em realizar o ajuste nas dimensões do componente, ou seja, largura e
altura. Da mesma forma, como nos espaçamentos internos, pode-se realizar o ajuste em
ambas as dimensões (largura e altura) ou em apenas uma das dimensões. Observe abaixo.
Figura 184 - Exemplo de Ajuste de Densidade nas Dimensões
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 292 de 506
Escala de Densidade
A escala de densidade é uma gradação de valores que varia de 4px em 4px e pode crescer ou
diminuir sem limites, de acordo com a necessidade. O valor X é a referência padrão para
densidade em um determinado componente. Quanto maior o grau da escala, mais baixa é a
densidade, e quanto menor o grau da escala, mais alta é a densidade.
Figura 185 - O Valor X é a referência padrão de densidade. Incrementando de 4 em 4px no

valor X, reduz-se a densidade, enquanto que decrementando de 4 em 4px no valor X aumenta-
se a densidade.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 293 de 506
Como Usar a Escala de Densidade

Como visto anteriormente, cada componente determina sua densidade padrão mais
adequada, e a partir desta densidade padrão, são definidos quantos níveis serão
incrementados ou decrementados na escala para se aplicar às densidades alta e baixa.
Figura 186 - No componente X foi definido o valor de 8px para densidade padrão; também foi
definido o incremento e decremento de um nível na escala de densidade, logo as densidades
alta e baixa ficaram com 4px e 12px respectivamente;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 294 de 506
Figura 187 - No componente Y foi definido o valor de 16px para densidade padrão; também
foi definido o incremento e decremento de dois níveis na escala de densidade, logo as
densidades alta e baixa ficaram com 8px e 24px respectivamente;
Outros Tipos de Densidades

Geralmente os três tipos de densidades (Padrão, Alta e Baixa) já atendem a maioria das
necessidades no projeto de interface. Porém, além desses valores especificados, é possível
definir outras densidades mais altas ou mais baixas, para atender casos extremos. Para isto,
deve-se seguir os incrementos ou decrementos especificados na escala de forma a seguir o
mesmo padrão e lógica, além de se observar as restrições de uso.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 295 de 506
Restrições Mínimas
É importante salientar algumas restrições no que diz respeito a áreas mínimas de leitura e
ação.
Área Mínima de Leitura

Para evitar o desconforto visual, e proporcionar melhor legibilidade, mantenha a densidade
mínima de 4px entre o conteúdo interno ao componente e os limites de superfície deste.
Figura 188 - Área Mínima de Densidade - Forma certa e errada
Área Mínima de Ação

Em elementos interativos, existe uma necessidade de maior área de toque na superfície
desses elementos. Portanto, mantenha uma densidade de no mínimo 24px na superfície de
elementos interativos que necessitam de interação através do cursor do mouse, e 40px na
superfície de elementos interativos que necessitam de interação através de toque/touch. Caso
não seja possível manter os elementos nestas dimensões, mantenha a área mínima de ação
ultrapassando suas dimensões. Observe abaixo.
Figura 189 - A - Área Mínima de densidade em superfície para uso com cursor do mouse; B -
Área Mínima de densidade em superfície para uso com toque/touch;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 296 de 506
Figura 190 - C - Área de Ação ultrapassando as dimensões da superfície para uso com cursor
do mouse; D - Área de Ação ultrapassando as dimensões da superfície para uso com
toque/touch;
Melhores Práticas
• Dimensões e espaçamentos apenas: Não altere outras características do componente
que não sejam relevantes para o ajuste da densidade;
• Mantenha a consistência: Mantenha os alinhamentos e diagramações internas ao
componente em seu formato original, ao ajustar a densidade;
• Mantenha a coerência: Quando utilizar vários componentes semelhantes, próximos
uns aos outros, mantenha o mesmo tipo de densidade neles, sempre que possível;
• Mantenha o destaque: Não aumente a densidade em componentes que pedem a
atenção o usuário, como alertas ou mensagens que necessitam de destaque;
• Não dificulte a experiência do usuário: Evite utilizar densidade alta em elementos que
necessitam de uma interação frequente ou de rápida leitura;
CONTENT OVERFLOW
Também conhcido como Densidade Informacional, são recursos ou técnicas para otimizar a
organização do conteúdo na tela exibindo ou ocultando partes do mesmo conforme a
prioridade da informação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 297 de 506
Figura 191 - Exemplos de uso da content overflow.
Utilize técnicas de content overflow para:

• organizar melhor o conteúdo nos espaços determinados pela tela ou pelo
componente;
• acrescentar informações complementares a um conteúdo;
• ocultar informações menos relevantes;
• deixar o layout mais limpo e fácil de ser assimilado.
Não utilize técnicas de content overflow:

• quando for possível simplificar o conteúdo para que caiba no espaço determinado a
ele;
• quando se tratar de conteúdo essencialmente relevante ao usuário;
• em cabeçalhos de página, títulos, menus, rótulos de botões, mensagens de erro,
mensagens de validação ou notificações.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 298 de 506
Técnicas para otimizar o Content Overflow

Antes de tudo é preciso organizar o layout considerando a hierarquia do conteúdo.
Disponibilizar na tela todo o conteúdo de uma vez pode acarretar em uma sobrecarga
cognitiva e consequentemente dificultar a assimilação ou gerar desinteresse do público.
Agrupe conteúdos em blocos considerando a função e a semelhança das informações.
Figura 192 - A imagem acima demonstra o uso da técnica de agrupamento de hyperlinks e

ícones com funções semelhantes.
Todo o conteúdo deve ser cuidadosamente analisado e revisado. É importante ter em mente
que o usuário se encontra em uma página para resolver um problema ou necessidade
específica. Portanto, ele não espera ser “bombardeado” por conteúdos inúteis ou pouco
relevantes.
A primeira tarefa a ser realizada é a hierarquização do conteúdo. Deixe de forma nítida e

objetiva as informações essenciais. As informações complementares funcionam como apoio
às informações essenciais e podem estar ocultas ou parcialmente ocultas na tela e disponíveis
por meio de recursos acionáveis pelo próprio usuário. Por fim, as informações adicionais (e
menos importantes) podem estar localizadas fora da tela e indicadas por meio hyperlinks e
botões.
Apresentamos a seguir algumas técnicas e recursos úteis agrupados de acordo com a

hierarquia da informação, a fim de auxiliar a organização do conteúdo dentro dos produtos
Design FACAPE de forma prática e eficiente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 299 de 506
1. Informações essenciais
São informações imprescindíveis para o usuário conseguir executar uma tarefa de forma
assertiva e devem estar fácil e diretamente visíveis na tela.
Considere as orientações de posicionamento e agrupamento da informação e utilize a rolagem

para acessar todo o conteúdo disponível na tela.
A- Rolagem
É a maneira mais básica e usual de tratar grandes quantidades de conteúdo essencial. Pode
ser utilizado tanto em conteúdos gerais de uma página quanto em conteúdo específico de
certos componentes.
Utilize a barra de rolagem para indicar visualmente que o conteúdo se estende por áreas não
visíveis na tela.
Figura 193 - Exemplo do uso da barra de rolagem na página e no componente card.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 300 de 506
Rolagem automática
Trata-se da rolagem promovida pelos navegadores. Geralmente as pessoas já estão
habituadas com esse tipo de funcionalidade e é recomendado não alterar o padrão visual já
amplamente conhecido.
Rolagem interna
Alguns componentes podem apresentar uma barra de rolagem interna para melhor organizar
o conteúdo. Neste caso, o conteúdo rolante é apenas o interno ao componente e deve rolar
sob as margens do mesmo, enquanto a tela continua estática.
Para auxiliar o entendimento do usuário de que há mais informação a ser vista, as margens
que ocultam o conteúdo rolante devem elevar a camada em um nível e apresentar a sombra
correspondente. Confira o documento do fundamento visual elevação para entender melhor
o uso de sombras.
Uma boa dica para tornar ainda mais intuitiva a ocorrência do conteúdo rolante é deixá-lo
com uma parte visível, insinuando que há mais para ser visto. A imagem abaixo ilustra essa
técnica.
Figura 194 - Exemplo das três etapas do conteúdo sendo rolado para cima em um componente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 301 de 506
Atenção: não exagere na quantidade de elementos na tela com rolagem. Muitos elementos
com barras de rolagens podem confundir os usuários. É possível utilizar outros métodos
juntamente com a rolagem para oferecer um layout mais rico.
Rolagem horizontal
Sabemos, por meio de testes, que usuários desaprovam a rolagem horizontal. Esse fato, por
si só, já é suficiente para evitá-la, porém existem ainda duas outras boas razões:
• Na web, os usuários esperam a rolagem vertical. Como acontece com todos os
elementos-padrão, é melhor atender às expectativas do usuário do que surpreendê-
los;
• Quando as páginas apresentam rolagem vertical e horizontal, os usuários precisam
mover sua janela de visualização em duas dimensões, o que torna difícil cobrir todo o
espaço. Para pessoas com poucas habilidades de visualização espacial, é
especialmente desafiador planejar movimentos ao longo de dois eixos em um plano
invisível. Ao contrário, a rolagem unidimensional é uma maneira simples de mover-se
pelo conteúdo sem planejamento prévio.
Dispositivo móvel
Nesses dispositivos a rolagem é entendida como gesto de arrasto vertical ou horizontal. Por
apresentar menos espaço na tela, é esperado que haja mais rolagens. Porém, nesses casos,
prefira a rolagem da tela ao invés de rolagens internas dos elementos.
É importante lembrar que, em um ambiente móvel, onde os elementos rolam infinitamente,

o conteúdo acima da dobra, ou seja, antes da rolagem da tela, pode fazer a diferença. Por isso,
é recomendado ter pelo menos parte do conteúdo antes da dobra. Isso mostra aos usuários
que há um motivo para rolar a tela, fazendo com que permaneça o desejo em continuar
querendo ver o que se produto tem a oferecer.
Atenção: em dispositivos móveis, a barra de rolagem geralmente é dispensável, mas

preocupe-se em deixar pistas de que há conteúdo adicional.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 302 de 506
Outro aspecto interessante a se considerar é a existência de “áreas seguras” no layout para

que o usuário possa arrastar a tela sem o risco de toques acidentais.
Usabilidade
Considere as seguintes diretrizes de usabilidade quando utilizar recursos de rolagem:
• Oculte as barras de rolagem se todo o conteúdo estiver visível. Se as pessoas virem
uma barra de rolagem, presumem que há conteúdo adicional e ficarão frustradas se
não conseguirem rolar;
• Use barras de rolagem que se parecem com barras de rolagem. Evite personalizar e
descaracterizar as barras de rolagem;
• Evite a rolagem horizontal nas páginas e sempre que possível, minimize-a nos
componentes;
• Exiba todas as informações importantes acima da dobra da página, isto é, na área
visível da tela sem a necessidade de rolagem. Os usuários geralmente decidem se
querem ficar ou sair do site com base no que podem ver nessa área da tela;
• Sempre que possível, evite rolagens demasiadamente longas. Em qualquer caso, todas
as informações relevantes devem estar visíveis na tela inicial, pois a rolagem pode
causar problemas de acessibilidade;
• Considere também que a rolagem pode ser difícil para usuários com deficiências
motoras. Os usuários com baixo nível de alfabetização não podem readquirir
facilmente sua posição no conteúdo depois que ele é movido. Usuários idosos
costumam ter problemas para chegar ao ponto certo em menus de rolagem e outros
itens de rolagem pequenos.
A seguir, confira algumas das principais técnicas para lidar com as informações
complementares.
2. Informações complementares
São informações que complementam as informações essenciais e podem acrescentar valor ao
entendimento da tarefa. Para muitos usuários podem ser eventualmente necessárias, porém,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 303 de 506
para outros, podem ser fundamentais para que o entendimento se torne completo. Por não
se tratar de informação essencial, pode estar localizada estrategicamente na tela de forma
oculta ou parcialmente oculta.
2.1 Conteúdo oculto

Conteúdo oculto é todo aquele que não está originalmente visível e necessita de uma ação do
usuário para ser visualizado.
Oculte conteúdos quando:

• não existe relevância ou espaço suficiente para deixá-lo visível na tela;
• se tratar de informação complementar a um conteúdo já disponível na tela.
Dominar a técnica de ocultar conteúdo pode ser uma ótima maneira de organizar a
informação de maneira limpa e consistente tornando o conteúdo mais facilmente consumível.
É recomendado recorrer a técnicas de collapse e dropdown para tratar cada caso específico.
Analise os respectivos documentos para mais detalhes sobre esses comportamentos:
• Collapse;
• Dropdown.
A seguir, analisamos alguns casos mais recorrentes utilizando os

comportamentos collapse e dropdown:
A- Expansão
Expandimos e retraímos conteúdo utilizando o comportamento collapse quando é necessário
ocultar informação na tela e disponibilizá-la de uma só vez quando um elemento for acionado.
Quando abertos, eles empurram o conteúdo seguinte o suficiente para preencher a tela com
o novo conteúdo disponibilizado. Veja a imagem abaixo:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 304 de 506
Figura 195 - Comportamento de expansão/retração do conteúdo com uso do padrão collapse.

Note que o conteúdo seguinte é empurrado para baixo.
Esse recurso de collapse é bastante utilizado em menus e listas e economiza bastante espaço
na tela.
B- Informação complementar
Alguns elementos possuem conteúdo ocultos que podem ser acessados apenas repousando
o ponteiro do mouse sobre o elemento acionador (mouse over) ou em alguns casos, por meio
de clique e toque. Essa técnica de dropdown é útil para descrever um elemento ou fornecer
informações complementares.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 305 de 506
Tooltip é o componente mais indicado para esses casos. Utilize-o sempre que houver
necessidade de:
• agregar mais detalhes informativos a elementos da interface;
• alguma informação que, em um primeiro momento, não necessita estar visível para o
usuário.
Figura 196 - Apresentação de conteúdo complementar com uso de tooltip.
Atenção: sempre que um elemento não for facilmente compreendido pelo usuário,
use tooltips para melhor descrevê-lo.
Confira todos os detalhes do componente tooltip.
Nos casos mais específicos outros elementos podem acomadar as informações

complementares.
Figura 197 - Exemplo de técnica utilizando um elemento com a informação complementar.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 306 de 506
Atenção: considere a utilização de um elemento visual para indicar a existência do

comportamento dropdown.
C- Menu suspenso
Menus suspensos com caráter contextual devem ser utilizados para conferir opções
de hyperlinks que não necessitam estar originalmente disponíveis na tela. É uma excelente
forma de agrupar ações em comum deixando o layout da tela ou do componente mais limpo
e organizado.
Figura 198 - Exemplo de menu suspenso.
Pode ser aplicado diretamente na tela ou dentro de componentes, como tables, cards,
avatares, modais etc. e geralmente são acionados por buttons ou hyperlinks.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 307 de 506
Figura 199 - Tabela com menu suspenso. Esse recurso evita que a tabela fique sobrecarregada
com todos os itens visíveis.
2.2 Conteúdo parcialmente oculto

Ao contrário do que foi apresentado anteriormente, o conteúdo parcialmente oculto é
caracterizado por apresentar apenas uma parte da informação, possibilitando ao usuário
optar em acessar o restante do conteúdo.
Esse recurso é mais comumente utilizado para expandir/recolher uma grande quantidade de
informação (geralmente textos). O conteúdo na íntegra pode ser acessado pelo usuário por
meio de um elemento acionador que faz com que o conteúdo apresente o
comportamento collapse e se expanda mostrando o conteúdo em sua totalidade.
A- Botão expansor
O componente button, e suas variações, pode funcionar como acionador de conteúdos
parcialmente escondidos. Uma das opções mais utilizadas é o botão “Mostrar Mais”, que pode
ser utilizado quando há uma quantidade significativa de conteúdo excedente. Implementar
um botão “Mostrar Mais” dá ao usuário a capacidade de ver o conteúdo em partes mais
digeríveis, ao invés de tudo de uma vez.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 308 de 506
Figura 200 - Variações de botões “Mostrar Mais”.
Um botão “Mostrar mais” é usado no lugar de rolagem, pois são mais proeminentes e
acionáveis e ao ser clicado o conteúdo é expandido. Se necessário, um “Mostrar Menos” pode
ser utilizado para ocultar novamente o conteúdo.
Figura 201 - Comportamento de expansão/retração com uso do componente button.
“Mostrar Mais” também pode ser apresentado como “Carregar Mais” nos casos em que o
desempenho é uma preocupação ou simplesmente por meio de ícone que sugira a ação
esperada.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 309 de 506
B- Truncamento
Truncamento é a técnica de interrupção brusca de um texto, como um parágrafo ou uma frase
longa, que exceda o tamanho de uma área determinada na tela. É normalmente utilizado em
textos estáticos ou hyperlinks. Note que nas imagens do item anterior (botão expansor) o
texto foi truncado para transmitir a ideia de que o conteúdo continua.
Figura 202 - Exemplos de truncamento de texto em um parágrafo e em um componente.
O truncamento deve ser utilizado para substituir caracteres em uma palavra e/ou para
substituir palavras inteiras e são sinalizados por reticências (…). Quando possível evite deixar
um ou dois caracteres, de uma palavra truncada, visíveis.
Figura 203 - Em um truncamento, evite deixar menos de três caracteres representando uma
palavra.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 310 de 506
Atenção: considere caracteres apenas letras e números.

Textos truncados devem disponibilizar uma forma de apresentar a versão completa do texto.
Uma boa maneira de se conseguir isso é por meio do componente tooltip.
Figura 204 - Utilize o componente tooltip para apresentar ao usuário a versão completa do
texto truncado.
Atenção: as exceções são os parágrafos truncados que não necessitam de tooltip.
Falaremos mais sobre o uso de tooltip mais adiante neste documento.
O truncamento também pode ser aplicado a uma série de elementos que ultrapassem uma
determinada área reservada da tela, tais como:
• Breadcrumbs;
• Pagination;
• Hyperlink longo;
• Parágrafo;
• Redução de um nome de um item longo (itens de tabelas, por exemplo).
Atenção: o truncamento não deve ser utilizado em cabeçalhos de página, títulos, menus,
rótulos de botões, mensagens de erro, mensagens de validação ou notificações.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 311 de 506
Variações de truncamento
Existem três maneiras de truncar um texto:
• Inicial: usado no início de uma sequência de texto para indicar que o mesmo é
continuado;
• Intermediário: usado quando várias strings de texto têm inícios e/ou terminações
diferentes, mas exatamente os mesmos caracteres do meio. Também pode ser usado
para encurtar uma frase quando o final não pode ser truncado por reticências;
• Final: usado no final de uma sequência de caracteres ou parágrafo para indicar que há
mais conteúdo para ser visto ou para encurtar uma longa sequência textual.
Figura 205 - Variações de truncamento de textos.
3. Informações adicionais
Informações adicionais são aquelas menos importantes e por isso não necessitam estar
presentes na tela de origem. Geralmente estão localizadas em outras páginas, modais ou até
mesmo em outros websites. A maneira mais comum de acessá-las é por meio de botões
ou hyperlinks.
A- Modal
Se a informação adicional estiver de alguma forma vinculada conteúdo original, mas for
extensa o suficiente para ser tratada na mesma tela, prefira o recurso de uma modal, uma
janela de tamanho flexível para o desenvolvimento de informações adicionais.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 312 de 506
Modais têm a característica de criar um “intervalo” no fluxo de navegação principal, e pode

trazer um aviso, uma funcionalidade ou formulário extra. Após consumir esse conteúdo, o
usuário pode retornar normalmente ao fluxo principal.
Atenção: tenha em mente que o exagero no uso de modais pois pode se tornar extremamente
inconveniente para a navegação. Considere sempre se o conteúdo da modal tem um vínculo
estreito com a ação de origem.
Confira o documento modal para maiores detalhes desse componente.
B- Página interna
Nos casos em que a informação adicional seja extensa ou não possui vínculos estreitos com o
conteúdo original, prefira direcionar o usuário para uma nova página.
Atenção: direcionar o usuário para novas páginas interrompe o fluxo original de navegação.
Evite nos casos em que essa interrupção seja prejudicial para a realização da tarefa.
C- Página externa
Muitas vezes é interessante oferecer ao usuário conteúdos externos ao seu website que, de
alguma forma, pode lhe ser útil. Geralmente trata-se de conteúdo de websites de referência
ou legislações com informações específicas para o público interessado no aprofundamento do
tema abordado.
Atenção: use esse artifício com extrema cautela. Ao direcionar o usuário para páginas
externas corre-se o risco de haver abandono do seu conteúdo, portanto utilize-o somente em
casos especiais que tragam valor real para o seu conteúdo.
Sempre que direcionar um usuário para fora do seu website, sinalize com o ícone abaixo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 313 de 506
Figura 206 - Deixe claro para o usuário quando o hyperlink direcionar para uma página
externa.
Melhores práticas
• Evite conteúdos extensos: muito conteúdo não é necessariamente a melhor solução.
Essa prática implica em maior tempo de leitura e aprendizado pelo usuário. A
informação deve ser absorvida de forma rápida pelo leitor;
• Agrupe conteúdos semelhantes: Organizar as informações na tela agrupando itens
semelhantes ajuda o usuário a entender melhor o conteúdo e a encontrar com mais
rapidez a informação que está buscando;
• Mantenha a consistência: situações semelhantes de content overflow devem possuir
o mesmo padrão em todo o produto;
• Não exagere: técnicas de content overflow são úteis e devem ser utilizados sempre
que possível, porém, não substitui um bom planejamento de conteúdo. Utilize-as
somente quando o conteúdo excedente realmente é necessário e acrescenta valor ao
usuário;
• Combine: as técnicas e recursos apresentados são intercambiáveis e podem ser
utilizados em conjunto para proporcionar a melhor experiência possível para o usuário
DROPDOWN
O padrão Dropdown ocorre quando uma superfície flutuante surge sobre a tela, de forma
temporária, a partir de um elemento acionador. Esta superfície pode conter informações
adicionais com características voltadas para coleta de dados, seleção de opções ou apenas
texto informativo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 314 de 506
Figura 207 - Exemplos de Dropdown - Menu Suspenso, Painel de Notificação e Campo de

Seleção
Utilize o padrão Dropdown quando:

• existir a necessidade de apresentar informações extras de forma temporária, sem a
necessidade de navegar para uma nova tela ou ocupar espaço útil dentro da interface;
• houver a necessidade de exibir itens de seleção ou múltipla escolha ao usuário de
forma contextual e temporária;
Não utilize o padrão Dropdown:

• quando uma lista suspensa possuir apenas duas opções de escolha. Nesse caso,
recomenda-se usar botões de opção, switches ou outro componente que permita o
usuário selecionar sua opção diretamente na interface;
• para exibir informações excessivamente complexas. Neste caso, utilize hiperlinks para
outras páginas;
• aninhando muitos elementos Dropdown em cascata. Mantenha os elementos
flutuantes organizados da forma mais simples possível, dentro do possível.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 315 de 506
Anatomia
1. Acionador
2. Identificador de Estado
3. Superfície Flutuante
Figura 208 - Anatomia do Dropdown
Detalhamento dos Elementos

1 - Acionador
O Acionador poderá ser qualquer elemento interativo no qual o usuário irá executar a ação de
exibir ou ocultar a Superfície Flutuante.
Geralmente o Acionador é utilizado como Button, porém é possível usar outros elementos
como acionadores. Por exemplo, superfícies, hiperlinks ou componentes. Veja os exemplos
abaixo:
Figura 209 - Exemplo de Acionadores - Botões, Componente Avatar, Select e Texto Interativo
como Acionador
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 316 de 506
2 - Identificador de Estado
O Identificador de Estado é um elemento iconográfico que representa o estado visível/oculto
da Superfície Flutuante. Também serve para identificar se determinado elemento possui o
padrão Dropdown.
Figura 210 - Exemplo de Identificador de Estado
• O Identificador de Estado é representado pelos ícones:

o A. caret-down;
o B. caret-up;
o C. caret-right;
o D. caret-left.
Figura 211 - Ícones do Identificador de Estado
OBS: Consulte detalhes do comportamento do Identificador de Estado em Comportamentos >

Uso do Identificador de Estado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 317 de 506
3 - Superfície Flutuante
A Superfície Flutuante é o elemento que será exibido ou ocultado na interface através
do Acionador. Esta deve aparecer flutuando sobre o conteúdo da interface, com ênfase e
contraste. Veja mais detalhes em Comportamento > Ênfase.
• A. Superfície Flutuante;
• B. Conteúdo da Tela.
Figura 212 - Superfície Flutuante
Observe alguns exemplos de Superfície Flutuante utilizada em alguns Componentes:
Figura 213 - Exemplo de Superfície Flutuante no Menu
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 318 de 506
Figura 214 - Exemplo de Superfície Flutuante no Notification
Figura 215 - Exemplo de Superfície Flutuante no Select
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 319 de 506
Comportamento
1. Ênfase
O elemento Dropdown, por se tratar de um elemento flutuante, precisa se destacar do
restante do layout. Para isto, é utilizado o conceito de elevação, que faz uso da sombra em
diferentes intensidades de acordo com a elevação em que a Superfície Flutuante se encontra.
Para elementos flutuantes, como Dropdown, usa-se o padrão de Elevação na Camada 2, como
demonstrado na figura abaixo.
Figura 216 - Exemplo de Sombras em Diferentes Intensidades e Dropdown na Camada 2 de

Elevação
OBS: Consulte mais detalhes em Fundamentos > Elevação.
Apesar de se utilizar a sombra como um elemento obrigatório para destaque da Superfície

Flutuante, nem sempre seu uso é suficiente para agregar contraste entre a superfície e a tela.
Para proporcionar mais ênfase e contraste, é possível utilizar algumas características opcionais
provenientes do conceito de Superfície, como Borda, Cor ou Overlay. Veja abaixo:
• A - Borda: Outra propriedade opcional da superfície que pode agregar a ideia de
elevação;
• B - Cor: Também pode-se adicionar a cor para produzir o contraste na superfície;
• C - Overlay: Pode-se utilizar outros recursos, caso seja prioritário a atenção do usuário.
Como por exemplo, o uso de Overlay em uma camada inferior ao Dropdown.
Importante! Note que esses elementos opcionais devem ser usados juntamente com a
sombra.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 320 de 506
Figura 217 - Exemplos de Ênfase com características opcionais - Borda, Cor e Overlay
Importante! Quando for utilizado o recurso de Overlay com a finalidade de proporcionar

contraste ao elemento Dropdown, os elementos interativos abaixo da camada Overlay devem
permanecer bloqueados a qualquer tipo de interação pelo usuário, tanto através do mouse
como através de navegação por teclado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 321 de 506
Figura 218 - Exemplo de Overlay - Elementos interativos abaixo da camada Overlay

permanecem bloqueados
OBS: Consulte as especificações de sombra em Especificação > Sombra.
2. Responsividade
Os elementos Dropdown não tem a necessidade de seguir as regras da Grid, pois como são
elementos flutuantes, não recebem influência desta.
Figura 219 - Exemplo de Lista Dropdown sem interferência da Grid
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 322 de 506
Figura 220 - Exemplo de Menu Dropdown sem interferência da Grid
Grid de 4 Colunas
Porém, é comum que em Grid de 4 colunas, os elementos Dropdown ocupem 100% da largura
na tela, se adequando à Grid. Observe a seguir.
Figura 221 - Exemplo de Select se adequando à Grid de 4 colunas
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 323 de 506
Atenção! Deve-se estar atento aos Breakpoints, afim de propor soluções diferenciadas para
as dimensões da Superfície Flutuante.
3. Posicionamento
A Superfície Flutuante deve ser posicionada próxima ao Acionador ou centralizada na tela, no
caso de dispositivos móveis. Por padrão, a Superfície Flutuante aparece logo abaixo
do Acionador. Caso não tenha espaço para exibir o elemento Dropdown, este poderá surgir
em outras direções (direita, esquerda, acima) opostas ao limite da tela. Observe abaixo.
• A. Por padrão, a Superfície Flutuante abre abaixo do Acionador;
• B. A Superfície Flutuante abre abaixo e à direita do Acionador próximo ao limite da
tela;
• C. A Superfície Flutuante abre abaixo e à esquerda do Acionador próximo ao limite da
tela;
• D. A Superfície Flutuante abre acima do Acionador próximo ao limite da tela;
• E. Limite visível da tela.
Figura 222 - Limites da Tela e Posição do Dropdown
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 324 de 506
Importante: o elemento flutuante deve sempre utilizar o espaço útil disponível na tela, não
podendo criar espaços extras. Dessa forma, evitamos comportamentos inesperados, como
surgimento de uma barra de rolagem por exemplo.
4. Uso do Identificador de Estado

O Identificador de Estado é o elemento iconográfico padrão para representar a abertura ou
fechamento da Superfície Flutuante. Ele deve funcionar com o comportamento toggle,
alternando a representação do ícone, cada vez que a Superfície Flutuante é exibida ou
ocultada.
Forma Iconográfica
• Por padrão, a forma iconográfica utilizada é:
o A. caret-down quando a Superfície Flutuante está oculta;
o B. caret-up quando a Superfície Flutuante está visível;
Figura 223 - Comportamento Toggle do Identificador de Estado
• Em raras situações é possível abrir o elemento Dropdown horizontalmente. Neste caso

se utiliza a seguinte iconografia:
• A. caret-right quando a Superfície Flutuante está oculta e vai abrir horizontalmente;
• B. caret-left quando a Superfície Flutuante está visível e vai fechar horizontalmente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 325 de 506
Figura 224 - Exemplo de Painel Retrátil com Identificador de Estado na Horizontal

Posicionamento
• Por padrão, deve-se usar o Identificador de Estado à direita do Acionador e
centralizado verticalmente, com o intuito de identificá-lo como elemento Dropdown.
Figura 225 - Exemplo de Identificador de Estado
Uso Opcional
Algumas situações desobrigam o uso do Identificador de Estado, quando o Acionador já possui
uma representação iconográfica ou semântica forte o suficiente para representar o
padrão Dropdown, deixando claro ao usuário esta ideia.
Figura 226 - Exemplo de Acionadores sem Identificador de Estado - Já representam fortemente

o conceito Dropdown
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 326 de 506
Mesmo nestas situações, o uso do Identificador de Estado é opcional. Caso haja o desejo de
reforçar mais ainda a semântica do Dropdown pode-se utilizar o Identificador de Estado.
Figura 227 - Caso haja necessidade, pode-se usar o Identificador de Estado para tornar mais
claro o padrão Dropdown
5. Uso do Acionador
É recomendado, sempre que possível, que a área de clique tenha abragência por toda
superfície do Acionador, incluindo o Identificador de Estado.
Figura 228 - Área de Clique do Acionador incluindo o Identificador de Estado
Persistência do Estado
Utilize a Persistência de Estado para representar a abertura ou fechamento da Superfície
Flutuante.
O importante é que fique claro para o usuário que foi ele quem executou a ação. A melhor
forma de indicar isso, é utilizar o estado persistente do momento da interação. Por exemplo,
se o usuário acionar com pressed ou com hover, o Acionador deverá manter esses estados
enquanto o elemento Dropdown estiver sendo exibido na tela. Veja o exemplo abaixo:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 327 de 506
Figura 229 - O usuário utilizou o hover para abrir o Dropdown. O Acionador mantém o estado
hover até o Dropdown fechar
Figura 230 - O usuário utilizou o Clique para abrir o Dropdown. O Acionador mantém o estado
pressed até o Dropdown fechar
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 328 de 506
OBS: A Persistência de Estado é um recurso opcional e também pode ser utilizada juntamente
com o Identificador de Estado.
6. Fechamento da Superfície Flutuante

A Superfície Flutuante é um elemento temporário, logo precisa desaparecer da interface, ou
seja, precisa ser fechada. Abaixo seguem as formas mais comuns utilizadas para fechamento
da Superfície Flutuante:
• Acionador: o próprio elemento que acionou a Superfície Flutuante pode ser utilizado
para fechá-la. Caso tenha sido acionado por clique ou toque, basta clicar ou tocar
novamente no Acionador para fechá-la. Se tiver sido acionado por um hover, retire o
ponteiro do mouse sobre o Acionador;
Figura 231 - Fechamento pelo Próprio Acionador
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 329 de 506
• Botão Fechar: o Botão Fechar com ícone times (x) é a forma mais comum utilizada.
Recomenda-se posicionar o ícone na parte superior direita da Superfície Flutuante;
Figura 232 - Fechamento pelo Botão Fechar
• Clique fora da superfície: clicando fora da Superfície Flutuante, é outra forma bastante
usada para fechar elementos Dropdown, independentemente se está ou não sobre
um Overlay;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 330 de 506
Figura 233 - Fechamento com clique fora da superfície
• Concluir objetivo: após a conclusão do objetivo para o qual foi solicitado o

elemento Dropdown. Esse objetivo pode ser por uma escolha/seleção, preenchimento
de um formulário ou até finalizando o carregamento de algum conteúdo.
Figura 234 - Fechamento com conclusão de objetivo
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 331 de 506
Importante: Os comportamentos acima podem ser utilizados separadamente, mas a

recomendação é que eles sejam utilizados em conjunto, desde que façam sentido no contexto
da interface.
7. Conteúdos
• Em algumas situações, o conteúdo exibido na Superfície Flutuante pode ser
relativamente grande, como é o caso de alguns painéis de filtros ou painéis retráteis.
Neste caso, a recomendação é ter cautela neste tipo de uso. Se o conteúdo for
realmente muito extenso a ponto de criar barra de rolagem na área visível da tela,
prefira usar hiperlink para uma nova tela;
Figura 235 - Exemplo de Conteúdo em Dropdown
Figura 236 - Exemplo de Conteúdo Muito Extenso em Dropdown - Prefira utilizar hiperlinks
para um nova página
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 332 de 506
• Recomenda-se utilizar o conteúdo de um Dropdown sempre contido (ou

particialmente contido) dentro da Superfície Flutuante. Caso contrário, poderá gerar
confusão por parte do usuário.
• O conteúdo deve ser apresentado de forma mais simples e sucinta possível. Sem
desvio de atenção.
• Pode haver a necessidade de múltiplos elementos Dropdown aninhados em cascata,
porém, utilize com muita cautela para que o usuário não se perca dentro de diversos
níveis. Como padrão, mantenha no máximo 3 níveis de Dropdown.
Figura 237 - Exemplo de Boa Prática - Elementos Dropdown aninhados em cascata
Figura 238 - Exemplo de Mau Uso - Elementos Dropdown aninhados em cascata
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 333 de 506
8. Acessibilidade
• O padrão WAI ARIA define algumas regras específicas para cada elemento/conteúdo
utilizado. O Dropdown do Design FACAPE é um comportamento genérico que pode ser
aplicado a uma variedade de situações e estruturas. Por esse motivo, não será
especificado regras de atributos ARIA necessários (a não ser nos componentes
do Design FACAPE que utilizam este comportamento). Os autores terão que incluir por
contra própria esses atributos mais específicos, dependo do que for utilizado na sua
estrutura Dropdown;
• No entanto, é importante permitir a navegação entre os elementos interativos em
um Dropdown sejam feitos pela tecla TAB. Neste caso, utilize o estado foco nos
elementos durante a navegação;
Figura 239 - Exemplo de Uso do Teclado para Navegação em Dropdown - Tecla Tab
• e em alguns casos, o uso de Teclas de Navegação (cima, baixo, direta, esquerda);
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 334 de 506
Figura 240 - Exemplo de Uso do Teclado para Navegação em Dropdown - Teclas de Navegação
• Em caso de navegação a partir do teclado, o fechamento do Dropdown deve ser feito

com uso da tecla ESC;
Figura 241 - Exemplo de Uso do Teclado para Navegação em Dropdown - Fechamento com
Tecla Esc
• Em caso de navegação a partir do teclado, o acionamento pode ser feito com a

tecla Enter ou Espaço.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 335 de 506
Figura 242 - Exemplo de Uso do Teclado para Navegação em Dropdown - Acionamento com
Tecla Enter ou Espaço
Especificação
Iconografia
Name Estado Ícone Size Class (Font
Awesome)
Indicador de Estado (Visível) – --icon-size- .fa-caret-up
base
Indicador de Estado (Oculto) – --icon-size- .fa-caret-down
base
Indicador de Estado (Visível – --icon-size- .fa-caret-left
Horizontal) base
Indicador de Estado (Oculto – --icon-size- .fa-caret-right
Horizontal) base
Sombra
Camada Inner Shadow Offset * Blur Color Color Opacity
2 none 3 ou -3 6 --pure-100 --surface-opacity-xs
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 336 de 506
FORMULÁRIO
Formulário é um grupo de controles de entrada relacionados que permite que os usuários
forneçam dados ou configurem opções. Os formulários podem ser simples ou complexos e
podem ser apresentados como páginas dedicadas, painéis laterais ou diálogos, dependendo
do caso de uso e da situação.
Figura 243 - Exemplo de estrutura de um formulário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 337 de 506
Usa-se formulários para que usuários:

• façam cadastros;
• inscrevam-se em eventos;
• registrem-se em serviços;
• configurem opções;
• façam pesquisas;
• Compre produtos;
• enviem respostas.
Anatomia
Geralmente os formulários são compostos pelos seguintes elementos:
1- Título e Subtítulo
Os títulos e subtítulos do formulário são textos que descrevem o objetivo do formulário e
devem ter o maior tamanho de texto entre todos os elementos do formulário.
Se o formulário for o único elemento da página o título do formulário deve ser o próprio título
da página. O título também pode ser seguido por um subtítulo que ajuda a descrevê-lo.
Faça com que títulos e subtítulos sejam os mais breves e específicos possíveis. Pode-se
adicionar um subtítulo com uma breve descrição se necessário.
Os subtítulos devem complementar a informação do título, descrever o objetivo do formulário
e/ou oferecer alguma informação relevante ao usuário. As diretrizes sobre o corpo do texto e
peso estão descritas em Fundamentos > Tipografia.
Figura 244 - Utilize títulos e subtítulos com ênfase bem diferenciada dos demais textos do
formulário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 338 de 506
2- Componentes de Entrada de Dados

Os componentes de entrada de dados permitem que o usuário faça registros no formulário.
Estes componentes são úteis para registrar textos livres ou pré-determinados, imagens,
vídeos, áudios ou quaisquer outros tipos de dados necessários.
Entre os componentes de entrada de dados mais usuais estão:
• Input;
• Textarea;
• Checkbox;
• Radio;
• Switch;
• Select;
• Upload.
Os componentes de entrada de dados são estruturados por pelos seguintes elementos:
Rótulos
São textos breves que acompanham os campos de entrada de dados e especificam o valor do
dado que será coletado.
Figura 245 - Exemplo de rótulos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 339 de 506
Para boas práticas na elaboração dos rótulos:

• Utilize rótulos concisos e que auxiliem os usuários a entender quais informações estão
sendo solicitadas.
• Considere apenas a letra inicial da sentença maiúscula.
• Embora possam ser formatados de maneira diferente, todos os componentes de
entrada precisam de rótulos.
• Mantenha os rótulos sempre visíveis e precisos. Nunca os substitua
por placeholders ou elementos que se desloquem pela página.
• Seja sucinto: utilize o mínimo de termos possíveis para transmitir a mensagem de
forma clara.
• Mantenha a consistência: se optar pelos dois pontos “:” no final do rótulo mantenha
esse padrão em todos os formulários do sistema.
• Posicione os rótulos sempre próximos aos campos que os descrevem. Nos
componentes de entrada de texto (input, textarea, etc.), é recomendável que os
rótulos estejam localizados na parte superior do campo.
Figura 246 - Evite distanciar os rótulos dos campos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 340 de 506
CAMPOS OBRIGATÓRIOS/OPCIONAIS
Prefira criar formulários cujos os campos de entrada sejam obrigatórios. Utilize o subtítulo do
formulário para deixar esta decisão clara para o usuário.
Caso seja necessário oferecer campos opcionais, sinalize-os com um texto entre parênteses
ao lado direito do texto de cada rótulo.
Figura 247 - Exemplo de indicação de campo opcional.
Em certos casos pode ser necessário ressaltar os campos obrigatórios, ao invés dos opcionais.
Neste caso, utilize a mesma regra anterior, substituindo o termo “Opcional” por “Obrigatório”.
Figura 248 - Exemplo de indicação de campo obrigatório.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 341 de 506
Evite o excesso de campos de entrada opcionais/obrigatórios. Se necessário, considere

dedicar um grupo inteiro de campos opcionais/obrigatórios a fim de evitar repetições
desnecessárias.
Figura 249 - Atenção: não utilize as regras acima concomitantemente; isto é, evite sinalizar ao
mesmo tempo os campos obrigatórios e opcionais.
Entradas de Dados
As entradas de dados permitem que os usuários insiram textos, arquivos ou um conjunto de
opções pré-determinadas.
Siga as recomendações:
• O primeiro campo de entrada obrigatório do formulário deve receber o estado de foco.
• Quando pertinente, utilize o comportamento “autocomplete“ para auxiliar o
preenchimento dos campos de entrada.
• A largura dos campos de entrada não deve ser alterada conforme o tamanho do texto
inserido. Caso o texto de entrada seja muito longo, considere técnicas de truncamento.
• Os campos de entrada de texto devem sugerir um tamanho compatível com a entrada
esperada. O usuário fica extremamente suscetível a erros quando não consegue ver
sua entrada completa.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 342 de 506
• Caso um campo só possa ser inserido um tipo de informação, pode ser importante
limitar ou utilizar campos voltados ao assunto da entrada. Por exemplo, um campo
voltado a entrada de números poderia ficar indisponível qualquer caractere que não
seja número, como letras e alguns caracteres especiais.
Figura 250 - Campos muito grande ou pequeno em relação a previsão de entrada de dados,
podem gerar problemas para o usuário durante o preenchimento.
SENHAS
As senhas permitem autenticar usuários em uma determinada interface, muitas vezes
concedendo privilégios específicos e permitindo acesso a informações personalizadas.
• Disponibilize componentes de anonimização de senhas. É recomendável utilizar uma
alternativa para que o usuário visualize e oculte o conteúdo durante o preenchimento.
• Durante a definição de uma senha, sempre confirme a senha que será cadastrada com
um outro campo similar e mostre o usuário que existe um erro entre duas senhas caso
exista algum problema durante o processo.
• Oriente o usuário que sua senha ou chave é segura. Adicione um feedback visual e
textual com níveis de segurança como Baixa, Média e Alta. Não deixe de dar dicas
para criar senha com segurança alta, tais como:
o Ter pelo menos seis a oito caracteres;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 343 de 506
o Incluir números, letras maiúsculas e minúsculas e caracteres especiais;

o Não conter seu nome de usuário, nome real ou da empresa, ou uma palavra
completa;
o Ser bastante diferente das senhas anteriores;
• Sempre forneça a opção de alterar ou recuperar a senha. Essas opções devem estar
visíveis e de fácil acesso para o usuário.
• Caso o usuário tenha mais de uma opção para se autenticar em uma interface
(certificado digital, senha…), agrupe as opções de forma simples e compreensível para
o usuário.
Figura 251 - Preenchimento de senhas com opção de visualizar o conteúdo.
EDIÇÃO
Há situações em que dados de entrada já enviados para o servidor precisam ser editados ou
retificados. Nestes casos, informe claramente essa funcionalidade para o usuário.
• Insira um elemento identificador (ícone, texto, etc.) próximo à informação editável que
deixe claro que a informação pode ser editada.
• O acionador é o elemento interativo que executa a ação editável. Pode ser o próprio
identificador ou outro elemento adicional.
• Forneça possibilidades para cancelar e salvar as alterações.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 344 de 506
Figura 252 - 1- Caso alguns campos possam ser editáveis, é importante informar quais podem
ser editáveis, caso todos sejam editáveis não é necessário indicar. 2- Pode-se utilizar o próprio
indicador para acionar a edição de forma individual, ou ter um acionador “g
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 345 de 506
Atenção: o acionador deve ser compatível com a informação a ser editada; isto é, select para
casos de dados pré-determinados, input, para casos de textos livres e assim por diante.
Caso tenha muitos dados para serem editados (ou com possibilidade de edição), talvez seja
melhor apresentar o conteúdo por um fluxo de etapas (como um componente wizard) ou
agrupados por abas (como um componente Tab). Veja melhores práticas de agrupar campos
na área de Layout e Estrutura.
Orientações de Preenchimento
Insira elementos auxiliares que facilitem o usuário a preencher corretamente os campos de
entrada de dados, como:
1. Placeholder;
2. Máscara;
3. Texto auxiliar;
4. Ícone Ajuda;
5. Mensagem contextual.
Figura 253 - Exemplo de placeholder, texto auxiliar, ícone de ajuda e mensagem contextual
como elementos auxiliares/suporte ao usuário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 346 de 506
Os elementos auxiliares podem ser muito úteis para fornecer explicações adicionais aos
campos de entrada de dados que o usuário não tenha familiaridade.
Atenção: explique claramente quaisquer requisitos de entrada ou formatação. Se um campo

de entrada de dados exigir um formato ou tipo específico de entrada, indique as instruções
exatas. O mesmo se aplica às regras de sintaxe, como pontuação ou espaçamento para
números de telefone ou cartões de crédito.
1- PLACEHOLDER
Placeholders fornecem dicas e exemplos sobre o dado correto a ser inserido. Geralmente é
grafado em itálico.
Prefira utilizar exemplos genéricos como placeholder.
Considere utilizar placeholders quando o usuário não estiver familiarizado com a informação
solicitada ou a formatação do texto for um fator crítico de validação, por exemplo, DD-MM-
AAAA para formato de datas.
Figura 254 - Exemplos de Placeholders.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 347 de 506
Atenção: não utilize Placeholders no lugar de rótulos.
2- MÁSCARA
Sempre que o dado de entrada requerido possuir um padrão de escrita, recomenda-se utilizar
máscaras de formatação. Geralmente estes tipos de dados, são números, códigos, protocolos
ou textos com tamanho padronizado e podem vir acompanhados de caracteres específicos,
como pontos, parêntesis ou caracteres especiais.
Sendo assim, a utilização de máscaras auxilia o usuário na digitação e padronização do texto

de entrada.
Fique atento para as seguintes dicas:

• É recomendado que a máscara funcione dinamicamente no momento da digitação e
também ao “colar” o texto no campo input.
• Não divida o input em campos separados, isso aumenta o custo de interação do
usuário, além de causar problemas para usuários internacionais, visto que utilizam
padrões diferenciados. Por exemplo, o formato do telefone nos EUA é bem diferente
do brasileiro: +1 (xxx) xxx-xx-xx.
• Em caso de internacionalização, forneça o seletor de código do país. O seletor deverá
utilizar o padrão dropdown e oferecer ao usuário a possibilidade de escolher o código
de cada país, além de permitir a implementação do padrão de máscaras de cada
localidade específica.
• A máscara deverá oferecer espaçamentos e separadores específicos para cada trecho
do número, código ou protocolo digitado. Esta prática oferece ao usuário uma melhor
visualização do texto, além de prevenir possíveis erros de digitação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 348 de 506
3- TEXTO AUXILIAR
Utilize texto auxiliar com a finalidade de prevenir erros.
Figura 255 - Exemplo de texto auxiliar.
Atenção: textos auxiliares devem ser compactos e objetivos.
4- ÍCONE AJUDA
Utilize o ícone Ajuda somente para os casos que a informação complementar não precisa estar
visível em um primeiro momento.
Costuma ser utilizado para esclarecer questões legais ou para justificar a coleta de
determinados dados.
Para acionar esse componente deve ser utilizado um botão de ênfase terciária com um ícone
ou texto indicando sua finalidade, posicionado na mesma linha á direita a uma unidade de
espaçamento mínimo do rótulo do campo a ser preenchido.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 349 de 506
Figura 256 - Exemplo do uso do ícone de ajuda.
Atenção: não use este recurso para obter informações vitais para a conclusão da tarefa,
instruções ou outras informações diretamente acionáveis, como requisitos de campo. Os
usuários não devem precisar desse tipo de ajuda para concluir sua tarefa.
5- MENSAGEM CONTEXTUAL
Utilize mensagens contextuais para informar erros que usuário possa cometer no
preenchimento do formulário ou para chamar a atenção do usuário em relação ao dado
inserido.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 350 de 506
Figura 257 - Exemplo de uso da mensagem contextual.
Consulte o documento do componente Message para mais detalhes.
3- Botões
Botões permitem que o usuário execute algum tipo de ação sobre o formulário.
No Design FACAPE existe o componente Button que pode ser utilizado na maioria das ações
dos formulários, e o Magic Button que pode ser usado para fortalecer o início ou encerramento
de fluxos relevante de um formulário.
Os Botões devem estar posicionados preferencialmente abaixo e à direita do formulário ao

qual se referem e devem respeitar as diretrizes de alinhamento e espaçamento previstas para
o componente button.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 351 de 506
Figura 258 - Exemplo de hierarquia dos buttons.
Formulários podem exigir botões com até três ênfases:

1. Use ênfase primária para ações mais importante do formulário como, por exemplo,
“Incluir Registro” ou “Enviar Formulário”.
2. Use ênfase secundária para ações secundárias como “Cancelar” ou “Salvar Rascunho”.
3. Use ênfase terciária para ações menos importantes, como “Exibir Informações
Adicionais” ou “Documentos Acessórios”.
Quando utilizar mais de um botão, o elemento com ênfase primária deve estar
necessariamente posicionado à direita dos botões de ênfase secundária e estes sempre mais
à direita dos botões de ênfase terciária. Estes podem alinhados à esquerda do formulário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 352 de 506
Figura 259 - *Ordem da hierarquia das ênfases: primária (1), secundária (2) e terciária (3).*
Quando a disposição da tela permitir que os botões sejam posicionados apenas verticalmente,
o botão de ênfase primária deve estar posicionado mais abaixo.
Figura 260 - Ordem dos buttons em uma distribuição vertical.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 353 de 506
Atenção: evite botões do tipo “Redefinir” e “Limpar Formulário”.
Consulte o documento do componente button para mais detalhes sobre o seu uso.
Layout e Estrutura
Formulários podem ser tão simples, como um formulário de login com dois campos de
entrada (login e senha) ou extremamente complexos com enorme quantidade de diferentes
tipos de campos de entradas. Para estes casos é recomendável agrupar os campos por
afinidades. Essa prática facilita a organização das informações na tela e auxilia cognitivamente
o usuário a preencher o conteúdo diminuindo a ocorrência de erros.
Considere a Semântica
Ao se projetar um formulário, considere a ordem lógica e previsível do preenchimento dos
campos de entrada. Por exemplo, pergunte primeiro o nome e depois o sobrenome. Considere
ainda priorizar a ordem de preenchimento dos campos de entrada mais importantes e
frequentes.
Figura 261 - Ordem lógica para o usuário
Tenha em mente que há diversas formas de agrupar os campos de um formulário (explicadas

a seguir). Encontre a melhor forma e, se possível, valide com o usuário por meio de testes de
usabilidade.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 354 de 506
1- Grid (Colunas e Linhas)

Prefira diagramar os campos de entrada do formulário em uma única coluna, exceto os
campos complementares. Campos complementares são todos aqueles que complementam a
informação do campo anterior (ex.: Data de início/Data de término ou Estado/Cidade).
Formulários são melhores preenchidos em campos dispostos na vertical (uma coluna). Há
casos, porém, em que é necessária uma grande quantidade de campos gerando formulários
bastante complexos havendo a necessidade de dispor campos lado a lado. Para cada caso,
analise a melhor diagramação dos campos pensando sempre na experiência do usuário.
Figura 262 - Exemplo de uso se colunas dentro do formulário. Para formulários curtos é
preferível dispor os campos em uma única coluna. Formulários mais complexos podem exigir
um estudo mais detalhado na distribuição dos campos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 355 de 506
Atenção: nos formulários ou nos agrupamentos de campos de entrada em que é possível

dispor todos os campos de entrada em uma única linha, é importante manter a consistência
entre as larguras dos campos e as larguras das colunas.
Considere que os campos do formulário podem sofrer alterações de acordo com a resolução
ou mesmo com a orientação do dispositivo utilizado (celulares, por exemplo). Teste se a lógica
de preenchimento faz sentido em todas as resoluções e orientações dos dispositivos previstos.
2- Fieldset e Legend
Para auxiliar o usuário a entender a diagramação de formulários complexos é possível agrupar
os elementos com características comuns (com uso de Fieldset) e nomeá-los com o uso
de legend.
Fieldsets servem para agrupar elementos de formulários, muito parecido com o Label, porém,
ele necessita de um elemento textual (não obrigatório) para representá-lo como rótulo:
o legend.
Legends funcionam como títulos de agrupamentos e antecipam o tipo de informação que o

usuário poderá encontrar naquele grupo de campos de entrada. Seu tamanho deve ter menos
ênfase do que o título do formulário e deve manter a consistência sem variação no tamanho
do corpo de texto em todo o formulário, a menos que tenha conceitos de hierarquia
envolvidos (veja “4- Indentação e Subagrupamentos”).
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 356 de 506
Figura 263 - Agrupamentos com fieldset melhoram a acessibilidade.
Os agrupamentos podem ser apresentados na forma contraída (padrão collapse). Neste caso,
mantenha a área da legend como ativador conforme a diretriz do padrão collapse.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 357 de 506
Figura 264 - Agrupamentos apresentados emcollapsecom uso de fieldset e legend.
Importante: dentro do Design FACAPE, o Fieldset é usado somente como um elemento

semântico dentro de um formulário, não tendo nenhum tipo de estilização visual (delimitação
de uma borda visual). Portanto, deve-se utilizar o legend para aumentar sua acessibilidade.
Nas imagens acima, o uso de bordas no fieldset é feito apenas por questões didáticas.
Estilização do Fieldset
Property Value/Token
border --surface-width-none
margin-bottom --spacing-scale-5x
3- Indentação e Subagrupamentos
Subagrupamentos são agrupamentos dentro de agrupamentos. Para tornar mais clara e
hierarquizada a informação utilize indentação evidente para os subagrupamentos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 358 de 506
Utilize a escala de layout definida no fundamento Espaçamento para indentar os

subagrupamentos. Utilize um valor que fique claro este comportamento tendo como
referência o agrupamento que o contêm.
Atenção: tenha cautela na utilização de subagrupamentos. Recomenda-se apenas um

nível de subagrupamento por agrupamento.
Figura 265 - Indentação dentro de um formulário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 359 de 506
4- Outras Formas de Agrupamento

Há inúmeras maneiras de agrupar e organizar os elementos do formulário. A seguir, listamos
as mais recorrentes:
Por Espaçamento
Elementos de formulário podem ser agrupados por aproximação. Utilize valores de
espaçamento maiores para diagramar os agrupamentos. Com essa técnica, os espaços entre
os agrupamentos criam a ilusão de “blocos” de informações facilitando a interpretação do
conteúdo.
Figura 266 - Utilize espaçamento necessário para caracterizar a separação entre os

agrupamentos. No exemplo foram criados 3 tipos de agrupamento com o uso de
espaçamentos consistentes.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 360 de 506
SEPARANDO ENTRADAS, AÇÕES E GRUPOS

Os espaços em branco também são importantes para leitura, pois criam espaços onde o olhar
do leitor pode descansar, e por fim manter o fluxo de leitura.
Como regra geral, é recomendado que se utilize:

• um espaço maior entre os agrupamentos assim como um maior afastamento entre a
última entrada e os buttons.
• um espaçamento intermediário entre o título e a primeira entrada;
• um espaçamento menor entre os campos de entrada de dados, texto ou opções.
Esses espaçamentos devem ser constantes para uma mesma função, em toda a tela e em todo
o produto. (Veja mais no fundamento Espaçamento.)
Figura 267 - Exemplo de espaçamentos entre as áreas do formulário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 361 de 506
Consulte o documento Fundamentos Visuais > Espaçamento para conferir os espaçamentos

possíveis.
Por Divider
Pode-se utilizar o componente divider para criar agrupamentos de elementos de formulário
nos casos em que há falta de espaço na tela.
Figura 268 - Grupos de elementos separados por um divider.
Por Cor
Outra possibilidade para se criar agrupamentos é por meio do uso do recurso de cor. Crie uma
superfície com uma cor diferenciada de background para agrupar elementos. Considere
sempre questões de legibilidade ao escolher a cor para o fundo.
Atenção: o recurso de agrupamentos por cores pode funcionar também para dar destaque a
um agrupamento específico.
Para mais informações, consulte o documento Fundamentos Visuais > Cores
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 362 de 506
Figura 269 - Agrupando elementos com uma superfície com cor diferente.
Outros Componentes
Formulários muito longos e complexos podem ser mais bem compreendidos pelo usuário com
a utilização de componentes que auxiliam na organização de conteúdo na tela,
como tab, wizard e outros.
Figura 270 - Exemplo do uso de tabs para organizar conteúdos de formulário em abas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 363 de 506
Recomendação Geral
Tenha em mente que todas as recomendações descritas acima são baseadas em boas práticas
comumente aceitas e validadas com usuários em diversas pesquisas. Porém, é impossível
prever todas as possibilidades e cada caso possui suas próprias peculiaridades. Portanto, o
mais importante é sempre buscar soluções pensando no que é o melhor para seus usuários e
confirmar suas hipóteses por meio de testes. Sinta-se livre para buscar novas alternativas.
Lei Geral de Proteção de Dados

Respeite a Lei Geral de Proteção de Dados e outros regulamentos de privacidade, solicitando
o mínimo de informações absolutamente necessárias.
• Todo dado, para ser coletado pelo formulário, precisa ter uma finalidade clara. Isso
significa que a coleta precisa ter um propósito conhecido e informado, e não
subentendido ou meramente genérico para armazenamento e uso futuro.
• Exiba sempre explicações sobre o motivo da coleta dos dados, principalmente dados
pessoais e sensíveis.
• Nos campos de entrada opcionais deixe claro qual o benefício que será oferecido para
quem preenchê-los.
• Organize ou agrupe o conteúdo e sua apresentação para facilitar a compreensão do
usuário de acordo com seu perfil.
• Exiba os campos de opção de consentimento sem marcação prévia.
• Sempre que possível dê a opção ao usuário de optar como seus dados serão utilizados.
• Ofereça explicações de como o usuário pode retirar seu consentimento, quando for o
caso.
• Disponibilize recursos de anonimização de senhas e dados pessoais sensíveis.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 364 de 506
Figura 271 - Exemplo de utilização de Ajuda, Mensagens e Placeholders para adequação do

formulário à LGPD.
Dados Sigilosos e Dados Anonimizados

Para exibição de campos de formulários em que os dados foram anonimizados,
principalmente em adequação à LGPD, utilize uma mensagem do sistema (como o
componente message) informando que o dado foi anonimizado. Pode-se ainda acrescentar
um ícone ou ilustração para reforçar esta condição.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 365 de 506
Figura 272 - *Exemplo de Input anonimizado utilizando um identificador (2) e o componente

message (1).*
Caso o componente não esteja preparado para gerar um feedback relacionado ao tema, pode-
se utilizar uma ilustração que faça a referência à anonimização em conjunto com a mensagem
do sistema.
Figura 273 - Após do rótulo do campo, pode-se utilizar uma ilustração além de uma mensagem
textual para representar os dados anonimizados.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 366 de 506
Boas Práticas de LGPD em Políticas de Privacidade

• Use termos simples e de fácil entendimento a um número maior de usuários.
• Evite termos técnicos e “juridiquês”.
• Ofereça opções de consentimento de forma granular para que o usuário possa decidir
de forma individual quais dados e de que forma ele poderá ser armazenado, divulgado
ou compartilhado. É recomendável a utilização dos componentes checkbox, switch ou
equivalente posicionados imediatamente junto ao texto do questionamento sobre o
consentimento.
• Apresente o conteúdo de forma visual. Divida o conteúdo por assunto, tornando-o
mais compreensível e escaneável para facilitar a assimilação do conteúdo.
Melhores Práticas
• Todos os campos de entrada dos formulários devem obedecer às regras de
acessibilidade da WCAG.
• Verifique se os usuários conseguem inserir os dados em resoluções de tela menores.
• Garanta que usuários que utilizam o teclado ou outras formas de tecnologia assistiva
consigam navegar pelos campos de entrada de dados do formulário corretamente.
• Esteja atento aos gerenciadores de senhas e aos recursos do browser que preenchem
dados para os usuários.
• Procure elaborar formulários curtos e objetivos. Elimine campos desnecessários, evite
solicitar informações que podem ser adquiridas de outra maneira, coletadas
posteriormente ou simplesmente omitidas. Se preciso exiba progressivamente
informações adicionais.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 367 de 506
Figura 274 - Exemplo de organização do conteúdo utilizando agrupamentos e iconografia.
Figura 275 - Exemplo de uso de Informações Adicionais.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 368 de 506
Figura 276 - Exemplo de formulário com exibição progressiva.
• As recomendações desta diretriz devem funcionar para todos os dispositivos nos quais
os formulários serão disponibilizados (desktop, mobile, etc.).
• Permita que os usuários decidam a forma que preferem navegar entre os campos de
entrada, seja por meio do teclado, seja por meio do mouse e que eles possam alternar
no momento que desejarem.
• Informe qualquer situação em que o usuário tenha que aguardar o sistema processar
um comando, realizar verificações ou carregar dados. Utilize os
componentes loading ou mesmo o componente message para informar a situação
geral do sistema.
Figura 277 - Exemplo do Componente Loading
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 369 de 506
GRÁFICO
Os gráficos são representações visuais de dados e informações numéricas que servem para
facilitar sua visualização, bem como para torná-los mais claros e informativos.
Figura 278 - Exemplo de gráfico
Utilize gráfico para demonstrar padrões, tendências ou comparar informações qualitativas e

quantitativas em um determinado espaço de tempo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 370 de 506
Anatomia
Geralmente os gráficos são compostos pelas seguintes áreas:
1. Área de Cabeçalho (opcional);
1.1. Título;
1.2. Subtítulo (opcional);
2. Área Principal;
2.1. Dados Gráficos;
3. Área de Rodapé (opcional);
3.1. Descrição (opcional);
3.2. Fonte (opcional).
Figura 279 - Anatomia do gráfico.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 371 de 506

Áreas
Podemos dividir a superfície do gráfico em três áreas distintas. Estas áreas podem ser, de
acordo com a necessidade, intercambiáveis, ou seja, a ordem das áreas poderão ser
modificadas. Sendo:
1- Área cabeçalho (Opcional)

Área definida para exibição do título, subtítulos.
Figura 280 - Exemplo do uso da área cabeçalho.
1.1- Título
Presente na maioria dos gráficos, o título tem o objetivo de orientar e ajudar o usuário a
interpretar o gráfico.
1.2. Subtítulo (opcional)

Informação opcional que tem por finalidade complementar as informações apresentadas no
título.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 372 de 506
2- Área principal
Área definida para apresentação dos dados gráficos, todos os tipos de gráficos poderão ser
apresentados nessa área. Busque mais informações na seção “Tipos de Gráficos”.
2.1- Dados gráficos

Refere-se ao gráfico em si. A definição do tipo de gráfico, sua dimensão e uso de legendas,
dependerá dos direcionamentos de cada projeto e da percepção do designer. É aconselhável
a realização de testes de legibilidade e usabilidade com alguns usuários, para validar o nível
de leitura, diagramação e ergonomia informacional dos dados. Tanto para gráficos estáticos
quanto para gráficos dinâmicos, onde as informações são constantemente atualizadas.
Caso haja necessidade, o gráfico poderá fazer uso de elementos, ações e recursos de
navegação que o auxilie na apresentação das informações, tais como: tootip, barra de
rolagem, seletores, links, filtros de dados, além de ações para expandir, aproximar ou afastar
sua visualização, etc.
Figura 281 - Exemplo do uso do tooltip em um gráfico do tipo Mapa Geográfico na área
principal.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 373 de 506
Outros recursos igualmente importante e que poderão ser utilizados em gráficos dinâmicos,
são os valores definidos no fundamento movimento, tais como: transições, easing e a
duração.
Não existe uma forma única de apresentá-los, geralmente os gráficos podem ser apresentados
através dos dados com a utilização de eixos (x,y), legendas, linhas de grade, títulos dos eixos,
etc. Sua apresentação e organização dependerá da necessidade ou da limitação da ferramenta
utilizada para sua criação e exibição.
3- Área de rodapé (opcional)

A área de rodapé se destina a conter informações textuais sobre o gráfico, tais como: a
descrição do gráfico e a fonte que originou seus dados.
3.1- Descrição (opcional)

Visa apresentar um texto descritivo detalhando as informações apesentadas no gráfico,
buscando facilitar, desta forma, o entendimento dos dados apresentados para pessoas que
possuem algum tipo de décifit de atenção ou que possua alguma dificuldade em interpretar
com facilidade as informações apresentadas. Maiores informações na área de Acessibilidade
em “Uso de Descrições”.
Figura 282 - Exemplo do uso da descrição do gráfico.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 374 de 506
3.2- Fonte (opcional)

É a descrição textual da origem da informação apesentada no gráfico, ou seja, de onde as
informações foram retiradas. Mesmo sendo de uso opcional, o ideal é que, sempre que
possível, a fonte esteja na Área de Rodapé, próximo ao gráfico que o ilustra, fornecendo
informações sobre onde ele foi originalmente publicado.
O ideal, sempre que possível, é obter a permissão do autor(a) dos dados para reproduzi-los.
Caso não seja possível, algumas ações de boas práticas deverão ser tomadas, tais como:
• Apresentar data, ano, número da tabela;
• Informar a editora ou local de publicação;
• Descrever os direitos autorais do titular da informação;
• Utilizar link direto para endereço eletrônico (site), onde o usuário poderá ter acesso
aos dados originais ou a informações complementares.
Figura 283 - Exemplo do uso da fonte de um gráfico.
Tipos de gráficos
É importante entender as motivações ou os “porquês” para fazer a melhor escolha do tipo de
gráfico que será utilizado, evitando confusões e problemas na interpretação dos dados, por
isso é preciso saber qual tipo de gráfico é mais indicado em cada situação específica. Segue
abaixo a descrição de alguns dos principais tipos de gráficos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 375 de 506
Gráficos de colunas e barras

Costumam ser utilizados para comparar quantidades, apresentando variações que mostram a
intensidade de determinado fenômeno, em comparação com um período de tempo, por
exemplo.
Gráfico de colunas
Nos gráficos de colunas, são utilizados retângulos paralelos e verticais com larguras iguais,
porém,o comprimento é diretamente proporcional à frequência dos elementos apresentados.
As colunas devem ser igualmente espaçadas. Este tipo de gráfico faz uma comparação prática
entre as frequências dos elementos.
Figura 284 - Exemplo de Gráfico de Colunas.
Gráfico em barras
É similar ao gráfico de colunas, mas com os valores dos dados dispostos na posição horizontal,
enquanto as informações comparativas aparecem na vertical. Os gráficos de barra são
perfeitos para criar um ranking comparativo, como uma lista dos cinco melhores, por
exemplo. Ele é recomendado quando é preciso trabalhar com rótulos de dados muito longos,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 376 de 506
ou quando os eixos utilizados estão relacionados ao tempo empregado em determinada

situação.
Figura 285 - Exemplo de Gráfico em Barras.
Quando usar
• São especialmente eficazes quando você tem dados que podem ser divididos pelos
elementos de uma Dimensão (ex: elementos da Dimensão UF: AC, Al, CE…) bem como
destacar diferenças, mostrar tendências, outliers e revelar rapidamente os altos e
baixos históricos;
• Também é utilizado quando for preciso exibir a soma ou quantidade agrupada por uma
Dimensão de modo a identificar os maiores e os menores valores;
• O gráfico de barras horizontais, por exemplo, são recomendados para dados em que o
texto da dimensão seja longo, evitando assim que o texto do eixo fique ilegível devido
ao tamanho;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 377 de 506
• Caso tenha dados positivos e negativos a comparar a utilização deste tipo de gráfico
destaca tendências e elementos atípicos.
Quando não usar
• Caso a variação entre os valores dos dados seja pequena, pois a altura/comprimento
do gráfico de barras irá variar pouco e não haverá destaque significativo da diferença
entre os dados.
Boas práticas
• Mostrar, se possível, o valor de cada coluna ou barra;
• Sempre que possível, ordenar as colunas ou barras em ordem crescente ou descrente
para adicionar uma dimensão extra de informação facilmente identificável pelo
usuário;
• O espaçamento entre as colunas ou barras do gráfico deve ser pelo menos metade do
tamanho da barra, isso aumenta a legibilidade;
• Sempre nomear os eixos para que o usuário seja contextualizado;
• Evitar usar muitas cores “efeito arco-íris”. Usar uma única cor ou alguns tons da mesma
cor é uma prática muito melhor. Você pode destacar uma barra em particular se essa
for a mensagem que você deseja transmitir;
Gráfico de pizza e rosca

Também conhecidos como Gráfico Torta ou de Setores, este modelo servem para mostrar um
número estático e como as categorias representam parte de um todo. Ele deve representar
seus valores em percentuais e a soma de todas as categorias, precisa ser igual a 100%.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 378 de 506
Gráfico de pizza
Figura 286 - Exemplo de Gráfico em Pizza.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 379 de 506
Gráfico de rosca
Figura 287 - Exemplo de Gráfico de Rosca.
Quando usar
• Um conjunto de dados gráficos de pizza são eficientes para categorizar e comparar um
conjunto de dados;
• Os gráficos de pizza não podem exibir zeros e podem ser confusos ao trabalhar com
valores negativos;
• Use sete ou menos categorias, pois fica cada vez mais fácil perceber o tamanho relativo
de cada segmento, ao trabalhar com mais de sete categorias fica mais difícil e não é de
forma alguma indicado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 380 de 506
Quando não usar

• Sempre que possível evite usar este tipo de gráfico, pois o mesmo não é muito
representativo;
• Se temos um gráfico de pizza com pequenas diferenças entre as fatias, não
conseguimos percebê-las muito bem. Desta forma, simplesmente, a informação não
será captada. Se usarmos um gráfico de barras ou colunas para a mesma informação,
seremos capazes de perceber as menores variações entre os valores;
• Se os dados forem ordinais ou sequenciais este gráfico não deve ser usado, por
exemplo, uma pesquisa em que temos: concordo totalmente, concordo parcialmente,
discordo parcialmente e discordo totalmente, representado em um gráfico empilhado
mostra diretamente as faixas;
• Se os dados forem de séries temporais o gráfico de pizza/rosca não mostrará a
evolução da série e pode induzir a insights errados;
• Não use vários gráficos de pizza/rosca para comparações, a informação se dificulta a
interpretação do usuário, por exemplo, a comparação entre quatro empresas quanto
ao percentual de funcionários por gênero, um gráfico de barras ou uma variação do
mesmo é mais indicado.
Boas práticas
• Um motivo para não usar este tipo de gráfico é porque nossos olhos têm mais
dificuldade de identificar ângulos e de comparar áreas;
• Outro motivo para não usar este tipo de gráfico é porque quando, por exemplo, você
tem muitas categorias, as que têm valores abaixo de 5% ficam literalmente escondidas;
• Quando você tem muitas categorias, você precisa de cores para salientar essas
diferenças, entretanto é difícil escolher cores de forma eficiente por conta do
posicionamento das categorias no gráfico. Um fato importante: 8% da população
masculina é daltônica ou sofre de algum tipo de dificuldade em perceber cores. Você
vai arriscar usar um gráfico que depende tanto assim de cores?;
• Perceber rapidamente a diferença entre valores próximos (ex.: 38% vs 33%) é bem
complicado num gráfico de pizza. Faça um teste: remova os labels de um gráfico de
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 381 de 506
pizza e tente adivinhar o percentual. E fica pior quando você quer comparar dados de
muitas categorias em momentos diferentes;
• Se tiver que usá-lo use, pelo menos, o gráfico de rosca; o espaço em branco dentro
dele pode ser usado para exibir mais informações.
Gráfico em linhas e áreas

Gráfico de linhas
Os gráficos de linhas têm a função de revelar tendências e progressos ao longo do tempo.
Você deve usá-los quando estiver traçando um conjunto de dados contínuos.Este tipo de
gráfico, em geral, funciona muito bem,mesmo quando você estiver trabalhando com muitas
categorias diferentes de dados.
Figura 288 - Exemplo de Gráfico em Linhas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 382 de 506
Gráfico de áreas
Também chamado de Gráfico de Segmento, serve para apresentar valores (numéricos) em
determinado espaço-tempo. Mostra as evoluções e diminuições de determinado fenômeno.
Figura 289 - Exemplo de Gráfico de Áreas.
Quando usar
• Este deve ser utilizado quando as análises forem QUANTITATIVAS, exemplo:
Faturamento anual; custo médio mensal; despesas trimestrais, etc.;
• Na comparação de dados desde que os eixos sigam as mesmas escalas.
Quando não usar

• Caso tenha mais de um atributo e mais de uma métrica ele ficará muito confuso;
• Quando seus dados não possuem um intervalo ou período contínuo.
Boas práticas
• Ideal para análise ao longo do tempo;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 383 de 506
• Evite usar mais de 3 a 4 linhas por gráfico, pois isso torna o gráfico mais confuso e mais
difícil de ler.
Histograma
A diferença do histograma para o gráfico de colunas está no fato do primeiro não apresentar
espaço entre as barras verticais.
Figura 290 - Exemplo de Gráfico em Histograma.
Obs.: Exitem diferentes modelos de gráficos do tipo histograma. São eles: simétricos,
assimétricos, desempenho, dois picos, achatado e pico Isolado.
Quando usar
• Verificar o número de produto não-conforme;
• Determinar a dispersão dos valores de medidas em peças;
• Em processos que necessitam ações corretivas;
• Para encontrar e mostrar através de gráfico o número de unidade por cada categoria;
• Para mostrar a simetria de um conjunto de dados;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 384 de 506
• Para mostrar qual o valor mais comum em um conjunto;

• Para verificar a existência de um ou mais picos no conjunto de valores;
• Verificar a existência de tendências de alguns valores estarem presentes ou ausentes;
• Para resumir uma variedade de dados graficamente (população muito grande).
Quando não usar

• Fica ilegível quando se necessita a comparação de muitas sequências em simultâneo;
• Quanto maior o tamanho de (n) maior o custo de amostragem e teste;
• Para um grupo de informações é necessário a confecção de vários gráficos de modo a
conseguir uma melhor compreensão dos dados contidos no histograma;
• Quando é necessário relacionar o tempo com os dados, por exemplo, não sei se todos
os dias bons aconteceram na mesma época ou se eles estão dispersos aleatoriamente
no processo;
• Quando há dois picos de alta frequência, sugerimos a separação em dois histogramas.
Boas práticas
• Para uma amostra confiável e significativa tenha pelo menos de 50 a 100 dados;
• Determine o número de classes, não há uma quantidade certa, porém é preciso um
meio-termo, ou seja, não deve ser muito pequeno, para não descaracterizar o
histograma, e nem muito grande, para espalhar muito os dados;
• Procure utilizar uma única cor no histograma, más, caso necessite de algum destaque,
utilize entre duas a três cores;
Gráfico de dispersão e bolhas

São gráficos que analisam a relação entre duas ou mais variáveis. Pode ser empregado para
identificar onde estão as causas dos problemas ou para avaliar ações que estão dando certo
para um determinado negócio.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 385 de 506
Gráfico de dispersão
O diagrama de dispersão é conhecido como uma das principais ferramentas da qualidade que
podem ser utilizadas em uma empresa.
Trata-se de uma representação gráfica que analisa a relação entre duas variáveis quantitativas
— uma de causa e uma de efeito. Quando você tem uma hipótese do que causou algo, mas
ainda deseja comprová-la por meio de uma análise mais aprofundada.
Esse tipo de diagrama traz números simultâneos das duas variáveis, deixando visível se o que
acontece em uma variável causou interferência na outra. Ao estudar a correlação, você tem
uma variável dependente Y (efeito), que se relaciona a variáveis independentes X (causas).
Permitindo verificar se essas variáveis estão posicionadas em uma relação de causa e efeito.
O modelo hipotético seria, portanto, y = f (x).
Figura 291 - Exemplo de gráfico de dispersão.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 386 de 506
Os Diagramas de Dispersão são classificados quanto a relação entre as variáveis, se é negativa,

positiva ou nula, e quanto à intensidade da relação entre elas, que pode ser fraca, forte ou
perfeita. Dessa forma, você pode se perguntar: o que acontece com determinada variável
quando a outra se altera?
• Positiva: quando os pontos se unem em uma linha crescente. Isso quer dizer que,
assim que uma variável aumenta, a outra também cresce;
• Negativa: quando os pontos se unem em uma linha decrescente. O que significa que,
à medida que uma variável aumenta, a outra diminui;
• Nula: quando os pontos estão bem dispersos e, portanto, indica que não há correlação
aparente entre as duas variáveis;
• Forte quanto menor for a dispersão dos pontos, maior será a correlação entre os
dados. Com isso, podemos identificar como forte quando os dados estão bem
próximos, altamente concentrados;
• Fraca quanto maior for a dispersão dos pontos, menor será o grau de correlação entre
os dados, ou seja, eles quase não possuem uma correlação;
• Perfeita quando não há uma grande dispersão entre os pontos, a correlação será total
entre os dados, independente da tendência, seja ela positiva ou negativa.
Figura 292 - Exemplo de diagramas de dispersão.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 387 de 506
Gráfico de bolhas
É uma representação visual de objetos de dados em três dimensões de dados numéricos (os
dados do eixo X, os dados do eixo Y e os dados representados pelo tamanho da bolha). Esse
tipo de gráfico é frequentemente usado nos negócios para comparar e visualizar os
relacionamentos, por exemplo, entre projetos ou alternativas de investimento em várias
dimensões, como custo, valor e risco.
Há uma ligação forte entre os gráficos de dispersão e bolha, mas apesar das diversas
similaridades o detalhe que torna o gráfico de bolha ímpar é a utilização de uma terceira
variável. Enquanto no de dispersão temos as tradicionais relações entre as variáveis x e y, no
gráfico de bolha temos a variável z que representa o tamanho ou área da bolha. Na imagem
a seguir temos um exemplo característico deste tipo de gráfico.
Figura 293 - Exemplo de uso do gráfico de bolhas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 388 de 506
Quando usá-los
• Para visualizar uma variável com outra e o que acontece se uma alterar;
• Para verificar se as duas variáveis estão relacionadas, ou se há uma possível relação de
causa e efeito;
• Para visualizar a intensidade do relacionamento entre as duas variáveis, e comparar a
relação entre os dois efeitos;
• Para mostrar as relações entre dois valores numéricos;
• Para plotar dois grupos de números como uma série de coordenadas X e Y;
• Para usar em vez de um gráfico de linhas quando desejar alterar a escala do eixo
horizontal;
• Para transformar o eixo horizontal em uma escala logarítmica;
• Para exibir os dados da planilha que incluem pares ou conjuntos de valores agrupados;
• Para mostrar padrões em grandes conjuntos de dados, por exemplo, mostrando
exceções, clusters e tendências lineares ou não lineares;
• Para comparar grandes números de pontos de dados sem preocupação com o tempo.
Quanto mais dados você incluir em um gráfico de dispersão, melhores serão as
comparações que você poderá fazer;
• Utilize o gráfico de bolhas para comparar e mostrar os relacionamentos entre círculos
categorizados, usando posicionamento e proporções.
Quando não usá-los

• Quando só existir uma variável ou mais de uma dimensão.
• Quando as variáveis não afetam uma à outra.
Boas práticas
• Os gráficos de bolhas permitem comparar mais dados, mas o número de categorias
que você pode “mapear” é limitado. Muitas bolhas em um gráfico podem parecer
caóticas. Lembre-se, menos é mais. Mostrar apenas as categorias que são importantes;
• Bolhas demais podem dificultar a leitura do gráfico, portanto, os gráficos de bolhas
têm uma capacidade de tamanho de dados limitada. Isso pode ser um pouco
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 389 de 506
remediado pela interatividade: clicar ou passar o mouse sobre bolhas para exibir
informações ocultas, tendo a opção de reorganizar ou filtrar categorias agrupadas;
• Torne o gráfico mais legível mantendo as bolhas transparentes para tornar visíveis as
bolhas “ocultas” e ajudar a detectar o centro de cada círculo;
• Os tamanhos dos círculos precisam ser desenhados com base na área do círculo, não
em seu raio ou diâmetro. Não só o tamanho dos círculos mudará exponencialmente,
mas isso levará a interpretações erradas pelo sistema visual humano;
• Sempre que possível, não utilize cores diversas, mas sim variações de um mesmo tom
ou uma faixa de degradê, por exemplo de vermelho a azul, desta forma você
conseguirá destacar os extremos e as variações serão pertinentes a esses extremos;
Outros tipos de gráficos

Além dos gráficos apresentados, existem uma grande variedade de gráficos, todas com
características e aplicações próprias. Alguns gráficos podem representar visualmente com
eficiência as informações apresentadas, facilitando a interpretação e visualização dos dados.
Caso a escolha não tenha sido apropriada, o gráfico pode agir de forma completamente oposta
ao desejado. Por isso é muito importante conhecer os principais tipos e suas características
de uso.
Figura 294 - Exemplo de outros tipos de gráficos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 390 de 506
Como escolher um gráfico?

Escolher um gráfico, mesmo entendendo os tipos existentes, pode ser uma tarefa bastante
complicada. Entender o seu problema pode ser a chave para a escolha de um gráfico
adequado. Neste ponto, alguns fatores devem ser levantados, tais como:
• Qual informação deseja transmitir através do gráfico?
• Quantas variáveis, itens ou categorias seu gráfico irá mostrar?;
• Quem é o público que vai ler os seus gráficos?.
Com estes dados em mente ficará mais fácil chegar no gráfico ideal para o seu projeto.
O fluxograma abaixo simplifica todos estes passos:
Figura 295 - Fluxograma para auxiliar na escolha do gráfico.
Faça sua escolha considerando o seu objetivo, ou seja, o que você pretende mostrar, mas
também, o entendimento de quem vai ler o gráfico. Afinal, não basta que a informação esteja
disponível, ela precisa ser entendida para ser útil. Lembre-se também que muitas informações
(variáveis, itens ou categorias) podem enriquecer o gráfico, mas também podem fazer você
pecar pelo excesso de informação. Gráficos poluídos dificultam a leitura e compreensão da
informação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 391 de 506
Quais tecnologias poderão ser utilizadas e como utilizá-las?

Existem diversas opções disponíveis no mercado, desde as mais simples e manuais até
softwares online que, automaticamente geram alguns gráficos para você, porém, o Design
FACAPE não limita quais tipos de ferramentas deverão ser utilizadas. O Design FACAPE, através
desta documentação, busca oferecer diretrizes e regras de boas práticas de uso para que os
gráficos sejam consistentes e possam ajudar os usuários no entendimento dos dados
propostos.
Acessibilidade
Sua interface deve permitir que todos os usuários possam ter acesso e compreender
informações exibidas, independente se possuem ou não alguma limitação. Para gráficos,
infográficos ou mapas essa premissa também é verdade.
Experiências equivalentes para todo o seu público deve ser considerada. É preciso fornecer
recursos de acesso e compreensão para todos os usuários, em todos os seus dispositivos.
Em geral, não se deve confiar em apenas uma única maneira de transmitir uma ideia. É
necessário adicionar representações redundantes para as informações visuais que são
consideradas mais relevantes.
Vejamos alguns exemplos de uso para reflexão:

• Caso esteja usando cores para destacar informações, pense em como você pode
transmitir as mesmas distinções para pessoas que, apesar de serem videntes, não
conseguem fazer a identificação adequada de cores (daltonismo);
• Apresentando tabelas de dados como alternativa para apresentação de gráficos?
Pense em como as pessoas com baixa visão, e também como as pessoas totalmente
videntes, se beneficiam mais de visualizações nítidas e com um bom contraste;
• Usando animação? Considere as pessoas com epilepsia, neurotípicas, TDAH ou
deficiências cognitivas e disponibilize para eles a opção de controle da animação;
• Utilizando em sua apresentação metáforas e símbolos? Considere como as pessoas
com deficiências cognitivas interpretarão as suas informações;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 392 de 506
• Usando sons? Como sonorização dos dados gráficos, aspectos de textos falados, pense
nas pessoas com deficiência auditiva.
Como dito antes, não confie em um único canal de informação para disponibilizar as
mensagens visuais mais importantes, a verdadeira acessibilidade significa contar a sua história
de dados para todos.
Recomendações para apresentação de dados visuais

Criar gráficos acessíveis pode ser um trabalho subjetivo, que pode depender de muitos
fatores: como a análise dos dados apresentados ou até do tipo de gráfico (ver Tipo de
Gráficos). Porém, alguns cuidados gerais podem ser levados em consideração para elevar o
acesso dos gráficos aos usuários.
1- Uso de descrições
Inclua textos com descrições eficazes para apresentar os gráficos, infográficos e mapas.
Pessoas com deficiência visual (não videntes), fazem uso de leitores de tela (softwares que
leem os textos presentes na tela), portanto se houver algo na tela que não seja texto, ficará
oculto para este aplicativo. As imagens precisam de descrições de texto, também chamada de
“texto alternativo“.
Imagens mais complexas como gráficos, infográficos ou mapas precisam de descrições de

texto eficazes (descrições longas), tanto para ser utilizado através de um leitor de tela,
facilitando a compreensão dos dados pelo usuário com necessidades especiais, quanto para
pessoas, que possuam dificuldades cognitivas ou de interpretação dos gráficos.
Com as descrições longas, adicione informações descrevendo o tipo de gráfico, tipo de dado e
o propósito do gráfico.
• Tipo de gráfico: É útil para que pessoas com visão limitada saibam qual o tipo de
gráfico está sendo usado. Isso dá contexto para que se entenda o restante do visual;
Exemplo: Gráfico de Linha
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 393 de 506
• Tipo de dado: Qual tipo de dado é apresentado no gráfico? As legendas dos eixos x e
y podem ajudar você a descrever isso;
Exemplo: Número de carros vendidos por mês no último ano.
• Propósito do gráfico: Pense por que você está incluindo esse elemento visual. O que
ele mostra de significativo.
Exemplo: Os meses de verão apresentam mais vendas de carros
Segue abaixo, exemplo de como utilizar uma descrição longa para garantir que um gráfico seja
ainda mais acessível:
Figura 296 - Exemplo de gráfico com o uso da descrição longa.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 394 de 506
Como no exemplo acima, pode se utilizar um hiperlink para a base de dados original, de modo
que qualquer usuário possa acessar os dados em seu programa de preferência (Excel,
OpenOffice Calc, etc). Essa alternativa permite que pessoas possam clicar em um link para
observar melhor os dados e se aprofundar neles. Essa condição provê transparência sobre o
seu recurso e permite às pessoas explorar os dados.
Quando utilizar links, mantenha se atendo a associar o link de forma semântica a imagem. No
HTML5 os elementos figure e figcaption podem ser usados para agrupar imagens e vincular
semanticamente. Adicionar role="group" à imagem mantém a compatibilidade com
navegadores da web que não oferecem suporte à semântica nativa do elemento figure.
A- TEXTO ALTERNATIVO EM GRÁFICOS

Por padrão, o texto alternativo é inseridos pelo atributo alt do código html, permitindo sua
transcrição por leitores de telas, transmitindo de forma oral as informações contidas no
gráfico, garantido desta forma, que as informações se torne acessíveis.
<img src="chart.png"alt="Gráfico de barras mostrando visitantes mensais e totais no primeiro

trimestre de 2014.">
Recomendações para o uso de textos alternativos em gráficos, infográficos, tabelas e mapas:

• Adicione textos alternativos focando na informação significativa na imagem;
• Inclua um texto sucinto e consistente descrevendo o tipo de gráfico e o tipo de dado;
• Muitos leitores de tela cortam textos alternativos em 125 caracteres, então mantenha
seu texto alternativo o mais enxuto quando for possível.
B- DESCRIÇÕES LONGAS EM GRÁFICOS

As descrições longas podem ser utilizadas em conjunto com o texto alternativo. Uma descrição
longa em gráfico, infográfico, tabela e mapa apresenta as seguintes vantagens:
• Compreensão adequada de cada elemento visual por pessoas cegas ou com baixa visão
que fazem uso de leitores de tela;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 395 de 506
• Ajuda pessoas com deficiência intelectual, neurotípicos ou pessoas não deficientes que
não estão acostumadas a interpretar gráficos, tabelas, infográficos ou mapas.
O World Wide Web Consortium (W3C), oferece orientações em como descrever textos longos
para imagens complexas contendo exemplos para linguagem HTML 5.
Em resumo, o texto descritivo pode ser inseridos pelo atributo longdesc ou aria-describedby.
<img src="chart.png"alt="Gráfico de barras apresentando o percentual dos 5 maiores tributos

arrecadados no Brasil em 2018."longdesc="#chart-longdesc"><div id="chart-longdesc">
O gráfico de barras representa o percentual dos maiores tributos arrecadados nas empresas
em 2018, onde cinco deles concentram 71% da arrecadação. Em ordem decrescente temos:
ICMS (21%), IR (18%), Cofins (16%), Contra. à previdência (11%), Contra. ao FGTS (5).</div>
2- Uso de rótulo por legendas diretas

Rotule os dados diretamente com legendas diretas ao invés de utilizá-las de forma separada.
Desta forma, conseguimos perceber as informações independentemente das cores, além de
ser uma maneira de reduzir a carga cognitiva sobre os usuários.
Isso é especialmente útil para usuários daltônicos ou deficientes visuais que podem ter
dificuldade em combinar as cores do gráfico com as da legenda. Também diminui o trabalho
de varredura para frente e para trás, tentando combinar a legenda com os dados, para os
usuários videntes.
Figura 297 - À esquerda, um gráfico de pizza com três séries representadas com cores
parecidas e legendas à parte. Á direita, um gráfico de pizza com três séries representadas com
cores parecidas e legendas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 396 de 506
3- Uso de cores
Esteja atento ao uso da cores e contrastes. Não dependa apenas da cor para conectar os dados
ao seu significado, considerar as pessoas com daltonismo e garanta que exista um contraste
de cor adequado, pois nem todo mundo enxerga as cores da mesma maneira, e é preciso levar
isso em conta na hora de criar a sua solução para visualizações de dados, como gráficos,
tabelas, infográficos e mapas.
O principal motivo para isso é que existem diferentes tipos de daltonismo (dificuldade na
identificação e distinção de cores):
• Protanopia: Dificuldade de visualizar o espectro “vermelho”;
• Deuteranopia: Dificuldade de visualizar o espectro “verde”;
• Tritanopia: Dificuldade de visualizar o espectro “azul”.
As cores também podem variar de acordo com o modo de acesso a informação visual: como
um leitor digital de livros em preto e branco(como um e-Book), uma tela de computador com
configuração de cor alterada, ou mesmo uma impressão em preto e branco ou de má
qualidade.
Por isso, é importante buscar estratégias que facilitem o entendimento de nossas

visualizações de dados, independentemente das cores escolhidas para serem utilizadas na
solução de visualização.
CUIDADOS AO ESCOLHER AS CORES
É importante deixar claro que a cor não é imprescindível. Não devemos confiar unicamente
na cor para passar alguma informação importante. Utilize ícones, texto e até mesmo textura
para deixar uma informação clara, veja o tópico “5- Uso de Elementos Visuais” para maiores
informações.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 397 de 506
Para deixarmos a visualização da apresentação dos dados visuais mais acessível, utilize as
paletas de cores encontradas no nosso Fundamento Visual Cores e observe as seguintes
orientações:
3.1- GARANTA UM BOM CONTRASTE ENTRE CORES E ELEMENTOS

Leve em consideração o tamanho dos elementos, fontes e o contexto de seu uso. É importante
escolher as cores que tenham contraste suficiente para atender o máximo possível de pessoas,
sejam elas deficientes ou não.
Podemos dizer que um contraste entre os elementos de 4,5:1 pode resolver a maioria dos
situações, Porém, quando tratamos de assuntos relacionados a problemas visuais (como o
daltonismo), seria interessante trabalhar com contraste a partir de 10:1.
Em geral, devemos evitar combinações entre:
1- Vermelho e Verde;
2- Verde e Marrom;
3- Verde e Azul;
4- Verde e Cinza;
5- Verde e Preto;
6- Azul e Cinza;
7- Azul e Roxo.
Figura 298 - Exemplo de combinações de cor que devem ser evitadas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 398 de 506
3.2- EVITE O USO EXCESSIVO DE CORES

Utilize poucas famílias de cores para criar sua paleta.
A maior parte dos erros na elaboração dos gráficos diz respeito ao uso das cores em excesso.
Esse erro traz uma atmosfera de desorganização e “confusão visual”. Tudo o que for excessivo
sai do escopo da visão centralizada e atrapalha a interpretação da informação por parte do
usuário. As cores certas podem ajudar a chamar a atenção do leitor e a fazer um argumento
mais forte.
Figura 299 - Exemplo de uso excessivo de cores em um gráfico
3.3- ESCOLHA AS CORES QUE SE ASSEMELHAM AO SEU SIGNIFICADO

Sempre que possível, opte por utilizar cores que sejam facilmente associados,
psicologicamente, aos tópicos abordados no gráfico, como por exemplo: Barras azuis
representando os oceanos e rios e verdes para representar as florestas e marrom para terra,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 399 de 506
respectivamente. A exploração dessas associações pode tornar seus gráficos mais eficientes.
Figura 300 - Exemplo do uso de cores em gráficos associando-os com as cores do mundo real
Obs.: Para facilitar na escolha dos tons que serão utilizados, sugerimos uma pesquisa prévia
sobre o tema “Psicologia das Cores”.
3.4- CUIDADO AO USAR CORES VIBRANTES

Evite misturar dois tons quentes e predominantes na aparência geral de um painel de gráficos.
É importante equilibrar cores de tons quentes com cores em tons frios. Por exemplo, se você
estiver criando um gráfico de pizza, use cores diferentes nas seções próximas.
Caso opte por uma cor quente, use-a para dar destaques a elementos que reforçarão as
informações importantes de cada gráfico.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 400 de 506
Figura 301 - Exemplo de uso de cor vibrante para ressaltar uma informação importante
3.5- CUIDADOS AO USAR CORES MONOCROMÁTICAS

Utilizar uma grande quantidade de variação para uma mesma cor, pode acarretar alguns
problemas, tais como:
• Dificuldade em hierarquizar os dados;
• Dificuldade em encontrar um bom contraste, tornando as opções de escolha muito
limitada.
Esses problemas tendem a se agravar conforme o número de dados apresentados forem

aumentando.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 401 de 506
Figura 302 - Imagem de um círculo e mapa com cores monocromáticas
Obs.: Utilize esse modo de cor com cautela, pois, mesmo quando utilizado em conjunto com
famílias de cores alternativas ou de famílias de cores com matizes próximas, pode acarretar
os mesmos tipos de problema.
3.6- NÃO TENHA MEDO DE TESTAR

As cores podem ter diversos impactos na apresentação, o que você vai perceber é que muitas
vezes vai estar confortável com uma paleta de cores e depois não a quer mais. Mude, veja o
que cabe melhor para seu estilo de apresentação e dados.
Para auxiliar na escolha, varie entre as famílias de cores disponíveis no Design FACAPE. Estude
sobre a utilização de aplicação de esquemas de cor, utilizando-se do círculo cromático, tais
como:
• Cores Complementares;
• Cores Análogas;
• Cores Tríades;
• Cores Complementares Divididas;
• Cores Compostas em Tétrades;
• etc.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 402 de 506
Figura 303 - Imagem de círculos cromáticos com 5 esquemas de cores diferentes.
Essas técnicas fazem uso do círculo cromático através de esquemas de cores pré-definidas.
Desta forma será possível utilizar as cores para enfatizar algumas descobertas e começar a
criar narrativas. Recomendamos seu uso na definição das melhores combinações de cor,
obtendo um melhor rendimento visual.
A boa aplicação desses esquemas, tende a ajudar o usuário na escolha das cores de forma
consciente. É importante conhecê-los, suas vantagens e desvantagens de uso para uma
correta aplicação.
O Design FACAPE disponibiliza uma extensa gama de cores para a utilização em todos os seus
gráficos. Estes deverão ser utilizados sempre for que possível. Todas as cores estão disponíveis
para uso no Fundamento Cor.
4- Uso de elementos visuais

SÍMBOLOS EM TABELAS
As tabelas são usadas para mostrar informações detalhadas. Se usamos apenas cores, as
informações podem se perder. Quando usamos símbolos em tabelas, conseguimos perceber
as informações independentemente das cores.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 403 de 506
Figura 304 - Á esquerda, uma tabela com símbolos em tons de verde, vermelho e amarelo que
sinalizam se os valores subiram (seta para cima), caíram (seta para baixo) ou se mantiveram
estáveis (sinal de igual). Á direita, uma tabela com círculos em tons de verde, ve
PADRÕES E TEXTURAS
Um alternativa às cores pode ser o uso de texturas e padrões, como listras de diferentes
posições.
Figura 305 - À esquerda, um mapa da Europa com regiões destacadas em tons de verde e
vermelho, cada uma com padrão de listras em direções opostas. À direita, um mapa da Europa
com regiões destacadas em tons de verde e vermelho.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 404 de 506
ESPAÇO EM BRANCO
Mesmo com legendas diretas, nem sempre é possível perceber a diferença entre as séries de
um gráfico. Podemos incluir espaços em branco entre as séries para facilitar a distinção.
Figura 306 - À esquerda, um gráfico de colunas que mostra o percentual de três séries com
cores parecidas, separadas por um contorno branco. À direita, um gráfico de colunas que
mostra o percentual de três séries (X,Y,Z) com cores parecidas.
VARIE OS TRAÇOS E USE FORMAS (GRÁFICOS DE LINHA)

Usamos gráficos de linha para mostrar a variação de séries ao longo do tempo. Se distinguimos
as séries apenas por cor, as informações podem se perder. Podemos variar os traços e usar
formas para facilitar a distinção.
Figura 307 - Á esquerda um gráfico de linhas com três séries representadas por cores
parecidas; cada série tem um padrão de traço e formas nos pontos (quadrado, losango,
triângulo). Á direita um gráfico de linhas com três séries representadas por cores parecidas e
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 405 de 506
FORMAS (GRÁFICOS DE DISPERSÃO)

Gráficos de dispersão são usados para mostrar a relação entre variáveis. Se distinguimos as
séries apenas por cor, as informações podem se perder.
Podemos usar formas para facilitar a distinção.
Figura 308 - Á esquerda, um gráfico de dispersão com três séries representadas por cores
parecidas e formas diferentes (quadrado, losango, triângulo). Á direita, um gráfico de
dispersão com três séries representadas por cores parecidas e círculos idênticos.
5- Use um simulador de condições visualização por tipo de deficiência para testes

Para garantir que seus gráficos não estejam apresentando problemas de acessibilidade visual,
sempre que possível, que simulem as opte por realizar testes com ferramentas que simulem
as condições de visualização por tipo de deficiência para corrigi-los.
Existem várias ferramentas para realização dessa tarefa, no entanto, sugerimos o uso da
extensão NoCoffee no navegador Google Chrome. Basta escolher o tipo de condição visual
que você quer observar para que as páginas web apresentem as condição de visualização
escolhida. Ele simula condições de baixa visão, catarata, máculas, daltonismos entre outras
deficiências visuais.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 406 de 506
As recomendações aqui descritas não esgotam todas os detalhes para o desenvolvimentos de

visualização de dados com Acessibilidade por meio de gráficos, tabelas, Infográficos ou Mapas
no entanto permite aos Designs e Desenvolvedores, quando devidamente observadas, tornar
as suas soluções de apresentação visual de dados minimamente Acessíveis.
Observação: Atualmente existem soluções no mercado que torna a visualização de dados em

condições completas de Acessibilidade, permitindo a exploração de gráficos através de
navegação por teclado, uso natural com leitores de tela, visualização para pessoas com visão
subnormal, comandos de visualização por voz, exportação tátil, sonificação, acessibilidade
cognitiva, entre outras funcionalidades.
Organizando gráficos
O componente card poderá ser utilizado para organizar a apresentação de todos os tipos de
gráficos, auxiliando sua consistência e organização em tela. Esta forma de exibição poderá ser
utilizado em todos os tipos de interface, mantendo ao máximo a consistência visual definida
para o Design FACAPE.
Alguns comportamentos adicionais podem ser utilizados diretamente no card, deixando-o

muito mais consistente e flexível a novas funcionalidades, tais como:
• O título e subtítulo do card poderão ser utilizados como título e subtítulo do gráfico,
respectivamente;
• Adição de algum acionador para expansão e retração do card e conteúdo;
• inclusão de componentes para filtragem de dados, comandos que façam a função de
ampliar e reduzir os detalhes das informações do gráfico;
• Uso de legenda para apresentação das fontes de dados e em alguns casos, visando
facilitar a acessibilidade e o entendimento das informações. No exemplo abaixo,
destacamos a retirada da “Área de Ações” e a adição da informação da fonte dos dados
em forma de legenda.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 407 de 506
Como descrito em acessibilidade, uma boa prática é fazer uso do texto descritivo, podendo
ser adicionado ao card para facilitar o entendimento do gráfico e dos dados apresentados
para pessoas que possuem alguma forma de déficit de atenção ou alguma dificuldade em
interpretar com facilidade as informações apresentadas.
Figura 309 - Exemplo do uso de gráfico no componente card.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 408 de 506
Painel de gráficos ou dashboard

Um painel de gráficos (dashboard) é uma área destinada a centralizar vários tipos de gráficos,
permitindo uma comunicação clara dos principais objetivos e métricas apresentadas.
Figura 310 - Wireframe exemplificando um painel de gráficos
Os painéis precisam ser consistentes, organizados e deverão apresentar as informações pelo

seu grau de importância. Segue abaixo algumas dicas importantes para atingir este objetivo:
Como projetar um painel de gráfico agradável

1- Tenha objetivos claros
A primeira etapa corresponde em definir claramente as motivações para a apresentação dos
seus gráficos. Tais como:
• Qual o seu objetivo?
• Público-alvo?
• Qual será o seu diferencial?
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 409 de 506
Com essas informações, será mais fácil projetar um painel de gráficos organizados e assertivos.
2- Inclua apenas o que for essencial

Todas os métricas apresentadas deverão estar relacionadas ao propósito principal do painel.
Se os gráficos exibirem informações desnecessárias, ou seja, não apresentarem apenas o que
for útil e essencial, sua compreensão será prejudicada, deixando os dados relevantes mais
difíceis de encontrar, não importando como estes estarão organizados.
Ao adicionar qualquer métrica em seu painel, certificar-se de que:

• O propósito esteja bem definido;
• Seja de fácil entendimento;
• Tenha atualizações constantes;
• Haja variedade de informações para que o usuário consiga detectar tendências com
facilidade.
•
Obs.: Caso seja indispensável organizar um conteúdo extenso, provavelmente será necessário
a criação de mais de um painel.
Figura 311 - Exemplo de uma melhor organização de um dashboard
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 410 de 506
3- Crie hierarquia através de tamanho e posicionamento

Use o tamanho e a posição para enfatizar as informações importantes, ajudando a criar
padrões e fluxo visual, reduzindo ao máximo a atenção do usuário sobre as métricas que
precisarão ser examinados com menos frequência.
Em termos de posicionamento, o canto superior esquerdo do seu painel é o melhor local, pois
é onde seus olhos são naturalmente atraídos primeiro. Não tenha medo do espaço vazio. É
melhor sair uma lacuna do que fazer algo maior apenas para preenchê-la.
Figura 312 - Exemplo hierarquia por tamanho e posicionamento em um dashboard.
4- Dê contexto aos seus números

Sempre que possível, incluía dados complementares dando contexto ao valor apresentado,
mostrando como a métrica é acompanhada por um período mais longo. Tais como:
• Inclua a mesma métrica apresentada no dia anterior;
• Adicionar um gráfico de linha ou de coluna mostrando como a métrica é acompanhada
por um período mais longo;
• Incluir uma meta e seu progresso atual;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 411 de 506
• Adicionar avisos para quando uma métrica estiver acima ou abaixo de um determinado
limite para facilitar a localização de problemas.
Figura 313 - Exemplo contexto numérico em um painel de dashboard
5- Agrupe as métricas que estejam relacionadas

Posicionar as informações em seu painel de forma logica é essencial. Agrupar por proximidade
de métricas relacionando uns com os outros, torna-os mais fáceis de encontrar, além de deixar
o design do seu painel mais atraente.
Existem muitas maneiras diferentes de agrupar, por exemplo: por métrica, produto, marca,
campanha, região, equipe ou até mesmo tempo período. Você pode precisar experimentar
com quais é o mais apropriado para seu dashboard. Atribuir um título aos grupos torna-os
mais fáceis de identificar.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 412 de 506
Figura 314 - Exemplo agrupamento de elementos em um dashboard.
6- Seja consistente
Com muitos painéis, você descobrirá que poderá existir elementos em repetição, por
exemplo, você pode estar mostrando o mesmo conjunto de métricas para várias coisas. Seu
painel será muito mais fácil de ler se você usar as mesmas visualizações e layouts entre os
grupos. Ele também parecerá muito mais agradável, portanto, evite a tentação de usar
gráficos diferentes em painés que fazem as mesmas coisas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 413 de 506
Figura 315 - Exemplo layout consistente em um dashboard.
7- Utilize rótulos claros e diretos

Utilize rótulos claros e auto explicativos. Ao mesmo tempo, você deve tentar mantê-los o mais
curto possível para evitar bagunçar seus painéis e atrapalhar os dados apresentados.
A utilização de abreviações também podem ser úteis, contanto que seu público possa
entendê-los. Por exemplo:
• “7d” ao invés de “7 dias”;
• Símbolos como “%” podem substituir a palavra “porcentagem” por extenso;
• Utilizar uma definição mais curta para uma métrica se as pessoas já estiverem
familiarizadas com ela.
8- Faça aproximação numérica
Opte por fazer simplificações númericas, utilizando 3 (três) casas decimais ou aproximando
seu valor excedente para o centavo mais próximo. Valores muito extensos criam distrações
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 414 de 506
ao usuário, além disso, incluir muitos detalhes desnecessários podem transformar um

pequeno detalhe em um grande problema.
Figura 316 - Exemplo arredondamento de números em um dashboard.
9- Evolua seus painéis

Depois de criar seu painel, não o abandone. Obtenha feedback da sua equipe e dos usuários
sempre que possível, tentando entender:
• O que eles procuram com mais frequência ou consideram mais útil e por quê?;
• O que eles nunca olham ou consideram menos útil, e por quê?;
• Se há algo faltando que eles considerem útil?.
Outros comportamentos
1- Ação de expandir painel de gráfico (opcional)
Este recurso tem por finalidade ampliar todas as dimensões do gráfico (Area de Cabeçalho,
Área Principal e Área de Rodapé), expandindo sua composição e facilitando sua visualização e
entendimento geral dos dados. Este comportamento poderá ser utilizado em: links, botões,
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 415 de 506
ícones, etc. Em alguns casos, a utilização desta funcionalidade será indispensável em situações
onde haja uma quantidade excessiva de informação em alguns tipos de gráficos.
Ao acionar essa funcionalidade, automaticamente as informações contidas no gráfico serão

expandidas e exibidas de forma ampla em tela. Para facilitar esse comportamento, deve-se
recorrer a componentes que o auxiliem nessa tarefa, tais como: card, modal, pop-ups, uma
nova página, etc.
Devem aparecer, de preferência, alinhados no centro da tela, apresentando o mesmo gráfico,

porém em um tamanho maior e com uma melhor legibilidade.
Figura 317 - Exemplo do uso da funcionalidade da expansão de um card.
2- Ação de ampliar e reduzir visualização interna (opcional)

Esta funcionalidade visa ajudar o usuário, ampliando a visualização interna do conteúdo da
Área Principal, permitindo que o usuário tenha uma visão mais detalhada das informações,
sem alterar suas dimensões externas (altura e largura).
Este recurso, também conhecido como zoom é muito utilizado, por exemplo, na utilização de
gráficos do tipo “mapa geográfico”, onde as informações visuais tendem a ser densas e
pequenas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 416 de 506
Entre os vários tipos de componentes que podem ser utilizados para esse objetivo, podemos,
por exemplo, associar esta funcionalidade à botões, links, ícones, etc., com a funcionalidade
de aproximação ou afastamento na busca de uma melhor visualização das informações.
Figura 318 - Gráfico do Card sendo ampliado.
3- Filtragem de dados (opcional)

É importante que, em alguns tipos de gráficos, se permita a filtragem das informações,
permitindo que o usuário tenha total controle da apresentação dos dados através de um filtro
ativo que facilite sua navegação e seu retorno ao estado anterior conforme seu interesse
imediato.
Esta funcionalidade, normalmente, está diretamente relacionado ao tipo de gráfico e

informação que se possa segmentar e navegar.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 417 de 506
Figura 319 - Exemplo de filtragem de dados através de um componente select.
4- Uso do loading para gráficos dinâmicos

Caso utilize gráficos dinâmicos, onde as informações são atualizadas em tempo real, sempre
que os dados dos gráficos demorarem para atualizar, opte pelo uso do
componente loading como resposta temporária de feedback do sistema, evitando que o
usuário fique em dúvidas quanto a atualização da informação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 418 de 506
ONBOARDING
Consiste em um padrão para guiar o usuário durante um tutorial, apresentação ou processo
de aprendizado simples.
Figura 320 - Exemplo de Onboarding
Utilize o Onboarding quando:

• precisar demonstrar para usuários novatos, aspectos de uso em interfaces;
• precisar apresentar novidades ou pequenas atualizações em seu produto;
• precisar guiar o usuário em pequenos tutoriais;
• precisar oferecer pequenas demonstrações como tópico de ajuda.
Não utilize o Onboarding:
• para fins de envio de formulários ou funcionalidades inerentes às regras de negócio do
produto;
• em fluxos muito longos ou complexos. Neste caso, elabore um conteúdo de ajuda mais
completo e disponibilize na seção de ajuda;
Tom e Voz
Dependendo do contexto e conteúdo a ser demonstrado, o tom e voz pode variar bastante
em sua proposta. Como exemplo, pode-se utilizar o tom e voz:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 419 de 506
• adequado ao ensino;
• adequado ao marketing ou publicidade;
• ou técnico
Anatomia
O Onboarding é constituído por:
1. Componente Tooltip;
2. Componente Carousel;
3. Superfície Overlay;
Figura 321 - Anatomia do Onboarding
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 420 de 506
Detalhamento dos Itens

1 - Componente Tooltip
O componente Tooltip é utilizado especificamente no tipo de Onboarding com ênfase na
interface. O objetivo dele é exibir informações referentes aos elementos da interface que são
apresentados durante o tutorial.
Figura 322 - Utilize o Tooltip para exibir informações em pontos de destaque na interface
2 - Componente Carousel
O componente Carousel servirá como elemento básico para o controle do Onboarding.
Através dele o usuário poderá avançar ou retroceder na navegação, pular etapas e visualizar
a progressão nas etapas. O Carousel poderá ser customizado para atender as necessidades
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 421 de 506
no Onboarding. Veja abaixo o padrão de customização a partir do modelo tradicional

do Carousel.
• A: Modelo tradicional do componente Carousel;
• B: Customização do Carousel para o Onboarding com Ênfase Textual;
• C: Customização do Carousel para o Onboarding com Ênfase na Interface;
Figura 323 - Exemplos de customização do componente Carousel a partir do modelo tradicional
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 422 de 506
CONTROLES DE NAVEGAÇÃO DO CAROUSEL

• Buttons: Para avançar ou retroceder na navegação utilize o
componente Button interno ao Carousel. Estes podem ser customizados na versão
pílula, com ênfase primária para avançar e ênfase secundária para retroceder.
o A: Button tipo pílula com ênfase secundária para retroceder;
o B: Button tipo pílula com ênfase primária para avançar;
Figura 324 - Buttons como controles de navegação
Nas telas em Grids de 4 colunas ou no tipo de Onboarding com ênfase textual, recomenda-se
utilizar a versão circular dos Buttons, seguindo o mesmo padrão de ênfase primária e
secundária.
Figura 325 - Buttons Circulares como controles de navegação - Grid de 4 colunas e Onboarding
com ênfase textual
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 423 de 506
• Hiperlinks: O hiperlink servirá como opção aos usuários que desejam “pular” ou “sair”
do Onboarding.
Figura 326 - Hiperlink usado como atalho ao usuário que deseja pular o tutorial
• Step: O componente Step tem função dupla. Servirá para indicar a progressão ao
usuário durante as etapas no Onboarding e também como controle para navegar entre
as etapas. Ele pode ser usado tanto no tipo simples como no tipo textual.
Figura 327 - Steps - usados para indicar progressão e controle de navegação
3 - Superfície Overlay (Scrim)

O objetivo da superfície Overlay é proporcionar contraste entre os elementos da tela e o
conteúdo exibido no Onboarding. Desta forma a atenção do usuário será direcionada para o
conteúdo de exibição, para os controles de navegação e Tooltip. Deve ser utilizada tanto
no Onboarding de ênfase textual quanto no de ênfase na interface.
É importante observar que a superfície Overlay, além de ser utilizada entre o conteúdo
do Onboarding e a tela ao fundo, também é utilizada como background nos controles de
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 424 de 506
navegação do Carousel, para proporcionar mais contraste aos elementos interativos. Observe
a seguir:
• A: Superfície Overlay entre a tela e o conteúdo do Onboarding;
• B: Superfície Overlay como background nos controles de navegação no Carousel.
Figura 328 - Uso da Superfície Overlay
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 425 de 506
Tipos
1 - Ênfase na Interface
Este tipo é utilizado quando se quer demonstrar mudanças ou novidades diretamente
relacionadas à interface. Neste modelo é necessário destacar os elementos de interface
durante as etapas do processo.
Figura 329 - Tipo - Ênfase na Interface
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 426 de 506
2 - Ênfase Textual
Nesta situação utiliza-se apenas texto, imagem e/ou ilustração. Aqui a ideia é mostrar ao
usuário alguma informação relevante, como novidades, atualizações, vantagens, campanhas
de marketing, etc.
Figura 330 - Tipo - Ênfase Textual
Estruturando o Onboarding
A seguir pode-se observar um modelo de estrutura básica para construir o Onboarding:
Tela de Boas Vindas

As telas de boas vindas exibem uma introdução do conteúdo oferecido no Onboarding. É
importante que através dela o usuário tenha clareza daquilo que será demonstrado, assim
poderá decidir de forma rápida se quer seguir com o tutorial ou sair dele.
Alguns exemplos de introdução mais frequentes são:

• Boas vindas com informações para usuários novatos;
• Boas vindas com informações a respeito de novidades;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 427 de 506
Figura 331 - Exemplo de Boas Vindas para Novidades e Usuários Novatos
OBS: Evite utilizar uma tela de boas vindas apenas como cordialidade, sem qualquer conteúdo
adicional, isto atrapalha ou chateia o usuário durante a interação com o aplicativo. Se for o
caso, pode-se combinar a mensagem de boas vindas com uma dica para cadastro do novo
usuário ou acesso ao login, dando utilidade à mensagem.
Etapas
É muito importante que o tutorial seja formatado num modelo de telas ou passos sequenciais,
além de oferecer um número de etapas reduzidas.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 428 de 506
Figura 332 - Exemplo de Etapas Sequenciais Reduzidas
Este formato oferece algumas vantagens:

• O modelo de etapas sequenciais é uma forma didática de conduzir o usuário
gradativamente até concluir a jornada de apresentação;
• O número reduzido de etapas incentiva o usuário a não abandonar o tour, visto que
estatisticamente os usuários tendem a desistir diante de uma quantidade grande de
passos;
Outra dica importante é oferecer sempre controles de navegação para o usuário avançar ou
retroceder no tutorial. Alguns usuários mais interessados podem querer voltar etapas e
revisitar este conteúdo, enquanto que outros mais apressados tendem a pular etapas.
Pulando o Tutorial
É de extrema importância que a opção “pular” ou “sair” do tutorial esteja presente durante
todo fluxo do Onboarding, desde a tela de boas vindas até a conclusão. Nem sempre o usuário
está interessado em ingressar no tour, seja por vários motivos como:
• já viu o conteúdo;
• é um usuário frequente ou experiente;
• quer acessar outra funcionalidade e está com pressa;
• ou simplesmente, falta de interesse.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 429 de 506
Como padrão, este recurso é apresentado como hiperlink e deve posicionar-se num local
visível como demonstrado na imagem abaixo.
Figura 333 - Exemplo de Hiperlink para Pular Tutorial
Desabilitando o Tutorial
Durante a fase de lançamento de novidades num sistema ou aplicativo, é comum exibir
tutoriais durante um certo espaço de tempo. Geralmente usuários que já visitaram este
tutorial ou já conhecem as novidades apresentadas vão querer “sair” ou “pular” o tour. Nesta
situação, para que o Onboarding não seja um motivo de empecilho ou obstáculo ao usuário
frequente, recomenda-se oferecer a opção para desabilitar o tutorial. Desta forma, o usuário
que já viu o conteúdo do Onboarding poderá marcar num checkbox a opção “não quero
visualizar este tour novamente”, e ficar livre do incômodo nas próximas vezes que acessar o
sistema.
Figura 334 - Exemplo de uso do Componente Checkbox para Desabilitar o Tutorial
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 430 de 506
Indicadores de Progresso
Os indicadores de progresso são formas de mostrar ao usuário as etapas completadas durante
o fluxo. Elas também servem como um motivador psicológico, estimulando no usuário o
desejo de seguir em frente e concluir a jornada.
No padrão Onboarding do Design FACAPE, o componente Step é utilizado como indicador de

progresso, tanto no formato simples como no formato textual.
Figura 335 - Exemplo de Indicador de progresso com Step Simples ou Textual
Conclusão
Ao finalizar todo fluxo do tutorial, apresente uma tela de conclusão. Utilize um texto
finalizando o tutorial e, sempre que possível, apresente os próximos passos ao usuário.
Geralmente, um Button ou hiperlink para a funcionalidade ou recurso demonstrado no
tutorial.
Figura 336 - Exemplo de tela de conclusão no Onboarding
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 431 de 506
Comportamentos
1 - Posicionamento dos Controles de Navegação
Os Controles de Navegação serão posicionados, de preferência, na base da tela, porém caso
haja a necessidade de detalhar algum elemento na base da tela, os Controles de
Navegação poderão ser posicionados ou no centro-vertical da tela ou no topo da tela,
conforme o modelo a seguir.
Aqui temos um exemplo do posicionamento padrão, na base da tela.
Figura 337 - Posicionamento Padrão - Na Base da tela
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 432 de 506
1 - Posição padrão na base da tela

2 - Posição opcional no centro-vertical da tela
3 - Posição opcional no topo da tela
Figura 338 - Posicionamento Opcional - No centro-vertical ou no topo da tela
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 433 de 506
2 - Posicionamento do Tooltip
Tendo em vista a característica do Tooltip de acompanhar os elementos a serem mostrados
na tela, este poderá ser posicionado próximo ao elemento ao qual está sendo detalhado. Sua
posição é aleatória na tela.
Figura 339 - Posicionamento Aleatório do Tooltip exibindo o Menu em destaque
Figura 340 - Posicionamento Aleatório do Tooltip exibindo o Header em destaque
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 434 de 506
Figura 341 - Posicionamento Aleatório do Tooltip exibindo o Breadcrumbs em destaque
Melhores Práticas
• Priorize a Ação Principal: Ao oferecer recurso de Onboarding, priorize demonstrar a
ação ou funcionalidade principal de seu produto ou a que proporcionará maior
engajamento dos usuários;
• Dê Dicas de Ferramentas Atalhos ou Funcionalidades: Um dos objetivos do uso
de Onboarding é também demonstrar pequenas dicas, ferramentas úteis,
funcionalidades prioritárias ou mais frequentemente usadas;
• Incentive o Usuário: Sua interface deve incentivar a interação do usuário. Quando
apresentar um tour através de Onboarding, sempre que possível, ofereça opções ou
exemplos de interação para estimular a ação do usuário;
• Seja Breve: É importante que o tutorial demonstrado pelo Onboarding tenha um
formato simplificado e bem objetivo, com um número reduzido de etapas. Geralmente
os usuários não tem paciência em percorrer tutoriais muito extensos;
• Ofereça Acesso a mais Informações: Tendo em vista o formato resumido apresentado
pelo Onboarding, durante o tour, é importante oferecer ao usuário um acesso a mais
detalhes de informações, caso se trate de um conteúdo mais complexo. Neste caso,
inclua um hiperlink de acesso para uma seção específica ou conteúdo de ajuda.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 435 de 506
Especificações
Name Property Value/Token
Superfície Overlay (Scrim) opacity --surface-opacity-md
Superfície Overlay (Scrim) - Controles de Navegação do Carousel opacity --surface-opacity-lg
COLLAPSE
O Padrão Collapse compreende um modelo para exibir ou ocultar determinado conteúdo em
tela, “empurrando” ou “puxando” os elementos adjacentes na interface.
Figura 342 - Exemplos de Collapse
Utilize o Padrão Collapse quando:

• Houver necessidade de exibir/ocultar informações adicionais a respeito de um
determinado tópico em tela;
• Houver necessidade de economizar ou “enxugar” conteúdo na interface, exibindo
apenas o que é relevante em um primeiro momento;
• Houver necessidade de criar hierarquia de tópicos, estruturas de categorias e
subcategorias, níveis e subníveis.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 436 de 506
Quando não usar o Padrão Collapse:

• Quando não houver espaço suficiente em tela para exibir um conteúdo expandido.
• Quando o conteúdo for muito extenso a ponto de ocupar o espaço de uma tela inteira
ou quase inteira. Neste caso, recomenda-se abrir este conteúdo em uma nova tela ou
janela de visualização.
• Quando o conteúdo for muito curto (aproximadamente duas ou três palavras). Neste
caso, recomenda-se utilizar o Componente Tooltip.
• Quando o conteúdo exibido/ocultado for um conteúdo de extrema prioridade ou
destaque. Neste caso, recomenda-se que conteúdos prioritários permaneçam sempre
visíveis na tela.
Anatomia
O Padrão Collapse é constituído por:
1. Acionador de Expansão/Retração;
2. Identificador de Expansão/Retração;
3. Área/Conteúdo Expansível.
Figura 343 - Anatomia do Padrão Collapse
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 437 de 506

1 - Acionador de Expansão/Retração
O Acionador de Expansão/Retração é o elemento interativo responsável por exibir/ocultar
a Área/Conteúdo Expansível. Este elemento pode ser uma área/superfície, um texto, link,
botão, etc. Em resumo, poderá ser qualquer área ou elemento interativo. Veja os exemplos
abaixo:
• A. Item de uma lista como Acionador;
• B. Botão circular como Acionador;
• C. Texto interativo como Acionador;
• D. Linha de uma tabela como Acionador;
Figura 344 - Exemplos de Acionadores
2 - Identificador de Expansão/Retração
O Identificador de Expansão/Retração é o elemento iconográfico que representa o estado,
expandido ou retraído, da Área/Conteúdo Expansível.
ICONOGRAFIA PADRÃO
Por padrão, deve-se utilizar a iconografia a seguir:

• A. Chevron-Down;
• B. Chevron-Up;
• C. Chevron-Right;
• D. Chevron-Left;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 438 de 506
Figura 345 - Iconografia Padrão do Collapse
OBS: As regras de utilização destes ícones estão descritas em Comportamento > Tamanho e
Direção da Área/Conteúdo Expansível > Direção.
OUTRAS FORMAS DE ICONOGRAFIA

Quando houver a necessidade de uma representação semântica mais forte ou mais coerente
com a regra de negócio em cada projeto, pode-se utilizar outras formas de iconografia para
representar o estado Expandido/Retraído. Desde que esta representação tenha um sentido
de compreensão mais claro para o usuário no contexto em que se aplica. Por exemplo:
• Neste caso, está sendo utilizado o ícone bars para identificar a expansão do Menu.
Aqui o ícone bars possui uma semântica mais forte referente ao conteúdo que será
expandido/retraído.
Figura 346 - Exemplos de outras formas de Iconografia
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 439 de 506
• Aqui pode-se observar um exemplo da utilização do ícone users, que possui uma
semântica mais forte referente ao conteúdo que será expandido.
Figura 347 - Exemplos de outras formas de Iconografia
OBS: Neste caso, recomenda-se utilizar o mesmo ícone para os estados expandido e retraído,
fazendo distinção apenas com o estado utilizado no momento do acionamento, ou seja, se o
acionamento foi feito através de mouseover, o acionador deverá manter o estado hover, caso
tenha sido acionado pelo clique, o acionador deverá manter o estado pressed. No exemplo
acima, ao expandir a Área/Conteúdo Expansível, o acionador manteve o mesmo ícone e o
estado pressed.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 440 de 506
POSICIONAMENTO
Por padrão, o Identificador de Expansão/Retração deverá ser posicionado à direita do
conteúdo ao qual faz referência, obedecendo a estrutura de diagramação do componente ao
qual está inserido;
Figura 348 - Posição Padrão do Identificador de Expansão/Retração à direita
EXCEÇÕES
Em alguns casos excepcionais, o Identificador de Expansão/Retração deve se posicionar de
outra forma. São situações específicas em cada componente, onde a posição dos
ícones/botões de ação já está determinada ou quando sua localização à direita é inviável.
Veja abaixo alguns exemplos de exceção.
1. No caso do Header, já existe um local definido para utilização do acionador, à esquerda
do título. Nesta situação segue-se o padrão estabelecido no Header.
Figura 349 - Identificador de Expansão/Retração posicionado à esquerda no Header

CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 441 de 506
2. No caso do Button, também já existe definido um local apropriado para utilização dos
ícones, à esquerda do rótulo, ou centralizado no caso do Button Circular.
Figura 350 - Exemplo do Identificador de Expansão/Retração no Button
3. A linha da tabela é segmentada por colunas e conteúdos diferenciados. Nesta situação,

o Identificador de Expansão/Retração torna-se mais evidente no início da linha da
tabela. Sua utilização à direita fica comprometida, tendo em vista a possibilidade de
outros botões funcionais nesta região.
Figura 351 - Identificador de Expansão/Retração posicionado à esquerda na linha da tabela
3 - Área/Conteúdo Expansível
A Área/Conteúdo Expansível compreende o elemento que será exibido/ocultado e conterá um
conteúdo que representa um adicional referente ao tópico exibido no Acionador.
• A. Tópico de conteúdo exibido no Acionador;
• B. Área/Conteúdo Expansível referente ao tópico exibido no Acionador.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 442 de 506
Figura 352 - Área/Conteúdo Expansível
Recomenda-se que a Área/Conteúdo Expansível esteja posicionada próximo ao Acionador,

deixando claro ao usuário que esta faz referência direta ao tópico de conteúdo exibido no
acionador.
Este elemento poderá conter diversos tipos de conteúdo, como textos, imagens, elementos
interativos, até mesmo pequenos blocos de formulários. Veja os exemplos abaixo:
• A. Área/Conteúdo Expansível com texto;
• B. Área/Conteúdo Expansível com formulário;
• C. Área/Conteúdo Expansível com links interativos;
Figura 353 - Exemplos de Área/Conteúdo Expansível
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 443 de 506
Comportamento
1 - Área de Clique
A área de clique é a superfície onde o usuário irá interagir para realizar a ação de
expandir/retrair, e esta deverá funcionar por toda superfície do Acionador.
• A. Por padrão, o Acionador deve ser toda área de conteúdo de destaque, como
demonstrado na figura, e esta deve conter o ícone identificador de expansão/retração
(1).
• B. O Acionador poderá ser utilizado apenas como um botão. Neste caso, a área de
conteúdo em destaque não será clicável, e o ícone identificador de expansão/retração
estará localizado no próprio botão (2).
Figura 354 - Área de Clique
2 - Tamanho e Direção da Área/Conteúdo Expansível

Tamanho
A Área/Conteúdo Expansível poderá ser dimensionada de duas formas:
• A. Por padrão, a Área/Conteúdo Expansível crescerá de acordo com seu conteúdo
interno;
Figura 355 - Área/Conteúdo Expansível cresce de acordo com o conteúdo
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 444 de 506
• B. Tendo em vista a necessidade de cada projeto, pode-se utilizar uma altura fixa
para Área/Conteúdo Expansível. Esta altura poderá ser definida livremente, desde que
a área do conteúdo interno tenha uma visualização razoável. Para esta situação, deve-
se utilizar a Barra de Rolagem;
Figura 356 - Área/Conteúdo Expansível com tamanho fixo e barra de rolagem
Atenção! É importante observar as boas práticas na utilização de barras de rolagem. Deve-se

evitar uma rolagem muito extensa dentro de uma área de visualização muito pequena.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 445 de 506
Direção
A Área/Conteúdo Expansível poderá expandir/retrair para qualquer direção (direita,
esquerda, superior e inferior), porém recomenda-se utilizar, por padrão, o sentido de leitura:
da esquerda para direita ou de cima para baixo.
Figura 357 - A - Expandindo no sentido de leitura de cima para baixo
Figura 358 - B - Expandindo no sentido de leitura da esquerda para direita
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 446 de 506
O Identificador de Expansão/Retração deverá obedecer o seguinte conceito: a seta deverá

apontar sempre para a direção na qual o conteúdo será expandido ou retraído.
Ou seja:
• A. Chevron-Down: utilize para exibir a Área/Conteúdo Expansível de cima para baixo;
• B. Chevron-Up: utilize para ocultar a Área/Conteúdo Expansível de baixo para cima;
• C. Chevron-Right: utilize para exibir a Área/Conteúdo Expansível da esquerda para
direita;
• D. Chevron-Left: utilize para ocultar a Área/Conteúdo Expansível da direita para
esquerda.
Figura 359 - Utilização da Iconografia - Direção das Setas
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 447 de 506
3 - Expansão/Retração e Conteúdo em Tela

O Padrão Collapse deverá funcionar com o posicionamento estático na tela, ou seja, a
expansão/retração terá influência sobre os outros elementos na interface. Ao expandir um
conteúdo em tela, os elementos adjacentes serão “empurrados” na direção em que o
conteúdo foi expandido. Da mesma forma, quando um conteúdo é retraído, os elementos
adjacentes são “puxados” de volta ao seu local de origem. Observe abaixo:
Figura 360 - Área/Conteúdo Expansível “empurra ou puxa” o conteúdo em tela
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 448 de 506
Figura 361 - Área/Conteúdo Expansível “empurra ou puxa” o conteúdo em tela
4 - Estruturas Hierárquicas
O Padrão Collapse é muito útil para se construir estruturas hierárquicas, organizando níveis e
subníveis ou categorias e subcategorias. Geralmente muito utilizado em Menus, Listas ou
estruturas em árvore. Deve-se porém estar atento às boas práticas neste sentido. Observe
abaixo algumas delas:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 449 de 506
Indentação
Utilize indentação para tornar mais evidentes os blocos de níveis e subníveis.
• defina o valor do incremento com base na Escala de Espaçamento - Layout. Pode-se
utilizar 2x, 3x ou 4x o valor de incremento da escala, ou até mais;
• quanto maior o valor de incremento escolhido, mais evidente torna-se a indentação;
• o valor do incremento escolhido deve ser no mínimo, 2x o valor do incremento da
escala, ou seja, no mínimo 16px. Um valor mais baixo torna a indentação muito sutil e
não será útil para o propósito em questão;
• o valor incrementado terá sempre como referência de início o item pai.
Observe o exemplo abaixo:
A. X = Duas vezes o valor do incremento da Escala de Espaçamento Layout;
B. Y = Três vezes o valor do incremento da Escala de Espaçamento Layout.
Figura 362 - Indentação em subníveis
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 450 de 506
Pesos Tipográficos
Utilize escala de pesos tipográficos (Font-Weight) diferenciados nos textos de tópicos em
níveis e subníveis:
• Como a ideia aqui é utilizar apenas variações de bold, evite utilizar outros estilos
como itálico, sublinhado, etc.
• As especificações de pesos podem variar de componente para componente,
dependendo das restrições ou regras em cada um deles;
• O uso deste recurso só é recomendado até dois ou três subníveis, pois além disto,
torna-se inviável utilizar uma escala de pesos ao extremo (Black à ExtraLight), tanto
por questões de limitação da escala, quanto por questões de estética;
Figura 363 - Peso diferenciado em nível e subnível
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 451 de 506
Escalas Tipográficas
Também pode-se utilizar a variação da escala de tamanhos tipográficos em níveis e subníveis.
• É importante lembrar que deve-se utilizar este recurso em até dois ou três subníveis.
A variação da escala tipográfica em seus extremos se torna inviável tanto por questões
de legibilidade quanto por questões de espaço;
• utilize a lógica crescente ou decrescente de tamanhos, porém mantenha a consistência
padronizando esta lógica em seu projeto.
Observe o exemplo a seguir:

A - Lógica decrescente;
B - Lógica crescente.
Figura 364 - Escala de Tamanhos Tipográficos em níveis e subníveis
Background
Outro recurso bem útil é utilizar cores diferenciadas em blocos de níveis e subníveis.
• deve-se estar atento para utilização das cores dentro do padrão Design FACAPE;
• utilize gradações de uma única tonalidade. Se optar pelo cinza, use a gradação deste
cinza;
• utilize a lógica de gradação já existente em nosso padrão de cores Design FACAPE,
como por exemplo, a gradação de cinzas presente nos tokens .color-secondary-xx, ou
as variações -darken-xx e -lighten-xx;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 452 de 506
• opte por cores neutras ou “sóbrias”. Evite utilizar cores muito “vivas” ou “gritantes”,
mesmo existentes em nosso padrão de cores Design FACAPE;
Figura 365 - Exemplo de gradação de cores em níveis e subníveis
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 453 de 506
Recursos Combinados
Se a utilização de alguns dos recursos apresentados acima não for suficiente para tornar claro
os blocos de níveis e subníveis, pode-se usar a combinação de mais de um deles. Fique atento
às boas práticas e o bom senso neste caso.
• não é recomendado utilizar todos os recursos ao mesmo tempo, opte por dois ou três
deles no máximo;
• mantenha a consistência utilizando a mesma lógica de combinação em estruturas
semelhantes;
Veja abaixo um exemplo de combinação:
Figura 366 - Exemplo de recursos combinados - Indentação, Cores e Escala Tipográfica
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 454 de 506
Navegação
• Evite utilizar estruturas muito extensas, com muitos subníveis dentro de subníveis.
Esta prática torna a navegação complexa e confusa ao usuário;
• Em vez de utilizar estruturas hierárquicas muito extensas, opte por utilizar outras
formas de organizar a informação, como link para outra página ou janela.
Figura 367 - Exemplo de link no último subitem para uma janela modal
• Em estruturas de árvore, utilize o identificador ao lado esquerdo do texto/rótulo, pois

é o local padronizado para este tipo de estrutura. Evite utilizar outros tipos de ícone,
pois podem confundir o usuário, além de poluir a estrutura em árvore.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 455 de 506
Figura 368 - Exemplo de Árvore - Como usar os ícones
5 - Combinando Múltiplos Elementos Collapse

Podem haver situações onde elementos Collapse sejam utilizados juntamente com outros em
um mesmo componente ou agrupamento, como é o caso do List, Menu, Table, etc. Neste
caso, estes elementos podem se comportar de duas formas, a depender da regra de negócio
em cada projeto ou da necessidade na usabilidade.
Expandindo Apenas um Elemento por vez

Neste caso, apenas um elemento será exibido por vez. Ao expandir cada bloco de informação,
os outros blocos que fazem parte do mesmo grupo serão ocultados, exibindo apenas o
conteúdo que foi clicado.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 456 de 506
Utilize este modelo quando a intenção for focalizar a atenção do usuário para a informação
que está sendo exibida;
Veja o exemplo abaixo:

• A. O usuário expande o elemento desejado;
• B. Ao clicar em outro elemento, os demais serão ocultados, exibindo apenas o
conteúdo do elemento clicado.
Figura 369 - Expandindo Um Elemento Por Vez
Expandindo Vários Elementos

Neste situação, o usuário poderá expandir vários elementos e fechá-los quando quiser.
Utilize este modelo quando houver necessidade do usuário consultar ou comparar

informações presentes em vários blocos expandidos.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 457 de 506

• A. O usuário expande o elemento desejado;
• B. Ao clicar em outro elemento, o conteúdo deste também será exibido, não
interferindo nos demais elementos.
Figura 370 - Expandindo Vários Elementos
Especificação
Iconografia
Name Estado Ícone Size Class (Font Awesome)
Ícone Exibir Conteúdo (Vertical) – --icon-size-base .fa-chevron-down
Ícone Ocultar Conteúdo (Vertical) – --icon-size-base .fa-chevron-up
Ícone Exibir Conteúdo (Horizontal) – --icon-size-base .fa-chevron-right
Ícone Ocultar Conteúdo (Horizontal) – --icon-size-base .fa-chevron-left
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 458 de 506
NAVEGAÇÃO
A navegação é o processo pelo qual os usuários acessam as telas e funcionalidades de um
sistema web, site ou aplicativo, permitindo que estes realizem suas tarefas, sejam conduzidos
através de fluxos de etapas ou acessem à informação desejada.
Estruturando o Processo de Navegação

Ao se iniciar um projeto de interface de um sistema ou aplicativo deve-se estar atento a alguns
conceitos e ideias que podem ajudar na construção do processo de navegação deste tipo de
produto. Abaixo pode-se observar alguns destes conceitos.
Inventário
É necessário, antes de mais nada, identificar quais usuários utilizarão seu site, sistema, ou
aplicativo e definir quais funcionalidades, tarefas ou conteúdos são mais comuns para cada
tipo de usuário.
Figura 371 - Identifique os principais usuários de sua aplicação e as atividades pertinentes a

eles
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 459 de 506
Priorização
Atribua níveis de prioridade às atividades mais comuns para cada tipo de usuário. Organize
em prioridade alta, média ou baixa e ajuste os níveis de prioridade caso as necessidades
desses usuários mudem ao longo do tempo. Ao construir a interface gráfica, dê destaque aos
elementos com alta prioridade ou aos elementos mais frequentemente acessados.
Figura 372 - Defina prioridades alta, média e baixa para as atividades de cada tipo de usuário
Sequência
Identifique quais caminhos os usuários percorrem em seu site, sistema ou aplicativo e utilize
esses caminhos para estruturar sua navegação.
Dê ênfase aos destinos frequentes utilizados em sua navegação e agrupe tarefas relacionadas
para facilitar o acesso pelos usuários.
Figura 373 - Identifique quais caminhos os usuários percorrem
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 460 de 506
Desconstrução
Divida tarefas complexas ou fluxos amplos em atividades menores, isso facilita o aprendizado
pelos usuários, tornando a compreensão do todo mais fácil. Essas atividades menores também
podem ser usadas com mais frequência pelos usuários e atender melhor seus objetivos.
Figura 374 - Desconstrução - Divida um formulário complexo em etapas menores utilizando

um Wizard por exemplo
Hierarquia
Organize seu conteúdo estruturando-o dentro de uma hierarquia. No topo desta hierarquia
devem estar os conteúdos de maior relevância e que dão acesso aos conteúdos das camadas
mais baixas desta hierarquia.
Elementos de Hierarquia na Navegação
Os elementos de hierarquia na navegação são:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 461 de 506
1 - HOME
É a entrada principal de seu site, sistema ou aplicativo e deve exibir o conteúdo de
apresentação deste, assim como um componente principal de navegação que dará acesso às
outras camadas hierárquicas.
Figura 375 - A partir da home o usuário tem acesso as outras camadas hierárquicas
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 462 de 506
2 - PAIS E FILHOS
O nível superior na hierarquia de navegação é chamado de “pai” enquanto que o(s) nível(is)
inferiores são chamadas de “filhos”. É importante manter sempre presente acesso de
navegação entre nível pai e filhos.
Figura 376 - Pais e Filhos - Mantenha sempre o acesso entre elementos pais e filhos
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 463 de 506
3 - FLUXO
É o caminho pelo qual os usuários transitam entre níveis pais e filhos, entre níveis irmãos ou
qualquer outra localidade dentro de uma hierarquia. Através do fluxo pode-se determinar o
tipo de navegação a ser utilizada. Por exemplo, no fluxo de pai para filho utiliza-se a navegação
descendente, enquanto que no fluxo de filho para pai utiliza-se a navegação ascendente.
Figura 377 - Exemplo de Fluxo - Navegação Ascendente e Descendente
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 464 de 506
4 - IRMÃOS
Os níveis que possuem o mesmo pai são chamados de “irmãos”. Geralmente são atividades
ou tarefas que possuem a mesma prioridade e contextos semelhantes. A navegação entre
irmãos é chamada de Navegação Lateral.
Figura 378 - Exemplo de navegação lateral (entre irmãos)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 465 de 506
5 - HIPERLINKS
Os hiperlinks são recursos que permitem os usuários acessar rapidamente os níveis na
hierarquia, mesmo que não sejam adjacentes à sua navegação. Seja de pai para filho, irmão
para irmão ou qualquer outra localidade desejada. Os hiperlinks cruzados levam os usuários a
qualquer lugar dentro do site, sistema ou aplicativo. Já os hiperlinks externos levam os
usuários a fontes externas.
Figura 379 - Os hiperlinks acessam qualquer localidade dentro ou fora de sua aplicação
Boas Práticas
• Navegação Fácil: Uma boa navegação deve ser fácil, intuitiva e previsível. Tanto
usuários novos como experientes devem ser capazes de aprender com rapidez e
facilidade a navegação proposta;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 466 de 506
• Relacionamentos e Contexto: Ofereça opções relacionadas ou contextuais, isso ajuda

o usuário encontrar temas semelhantes àqueles que está buscando;
• Guie o Usuário: Quando a necessidade for a conclusão de um fluxo, tarefa ou jornada,
induza o usuário pelo caminho correto, não deixando dúvidas a respeito de qual botão
ou link a ser clicado ou caminho a ser percorrido;
• Focalize a Atenção: Personalize a navegação de seu aplicativo, sistema ou site dando
destaque aos elementos que conduzem a conteúdos e tarefas mais importantes para
o usuário;
Tipos de Navegação
O ato de se mover por telas ou seções de uma aplicação pode ser realizado por determinados
tipos de navegação. E para cada tipo de navegação existem componentes ou comportamentos
de navegação mais adequados. São eles:
• Navegação Lateral;
• Navegação Progressiva;
• Navegação Reversa.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 467 de 506
Navegação Lateral
Compreende no movimento entre telas ou seções da aplicação de um mesmo nível
hierárquico (níveis irmãos), podendo oferecer também acesso a itens relacionados em um
conjunto.
Figura 380 - Ilustração - Navegação Lateral
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 468 de 506
Figura 381 - Exemplo de navegação lateral com Menu - O usuário pode navegar entre níveis
irmãos
Figura 382 - Exemplo de navegação lateral com Tabs - O usuário pode navegar entre níveis
irmãos
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 469 de 506
Componente Utilize para

Menu Principal Destinos de nível superior
Lists Qualquer nível de hierarquia
Tabs Qualquer nível de hierarquia
Carousel Qualquer nível de hierarquia
Boas Práticas na Navegação Lateral

• Componentes de navegação lateral que contém os principais níveis de hierarquia
devem permanecer sempre visíveis em qualquer tela da aplicação. Desta forma o
usuário terá acesso imediato às principais telas do sistema ou aplicativo;
• Em dispositivos móveis, quando utilizar recursos de collapse ou dropdown para
componentes como Menu, reforce a ênfase visual no ícone ou button de acesso deste
componente, assim o usuário terá certeza de onde encontrar seu componente
principal de navegação;
• Evite utilizar Menus, Tabs ou Lists com uma quantidade muito extensa de itens. Neste
caso, tente organizar sua estrutura principal de navegação de forma inteligente,
oferecendo ao usuário o que realmente importa.
Navegação Progressiva
Consiste na movimentação entre telas de níveis consecutivos na hierarquia ou em sequência
de etapas em um fluxo. E podem funcionar de três formas:
Navegação Descendente
Se aprofunda nos níveis mais baixos da hierarquia, se locomovendo de telas de nível superior
“pai” para telas de níveis mais inferiores “filhos”. Em essência uma navegação descendente.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 470 de 506
Figura 383 - Exemplo de Navegação com Cards em telas de Dashboard - Acessando níveis
inferiores na camada de hierarquia
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 471 de 506
Navegação Sequencial
Consiste em se locomover através de um fluxo ou jornada com telas sequencialmente
ordenadas, por exemplo, etapas de um Wizard (Assistente).
Figura 384 - Exemplo de Navegação Sequencial com Wizard - O Usuário navega por etapas
sequenciais
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 472 de 506
Outro exemplo muito comum é a utilização do Componente Pagination, organizando uma

navegação sequencial entre itens ordenados.
Figura 385 - Exemplo de Navegação Sequencial com Pagination - O Usuário navega por
agrupamento de itens ordenados em lote
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 473 de 506
Navegação Direta
Refere-se a navegação de uma tela para qualquer outra da aplicação, podendo deslocar o
usuário da tela inicial para outra tela mais profunda na hierarquia. Por exemplo, uma
navegação por busca.
Figura 386 - Exemplo de Navegação Direta - O usuário acessa um conteúdo específico através
de pesquisa
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 474 de 506
Abaixo pode-se observar alguns componentes mais adequados para Navegação Progressiva:
Componente Tipo de Navegação
Cards Navegação Descendente
Janelas Modais Navegação Descendente
Magic Button Navegação Descendente
Wizards Navegação Sequencial
Steps Navegação Sequencial
Pagination Navegação Sequencial
Hiperlinks Navegação Direta
Tags Interativas Navegação Direta
Inputs de Pesquisa Navegação Direta
Sign-In Navegação Direta
Boas Práticas na Navegação Progressiva

• Em navegações descendentes, utilize recursos visuais como ícones que podem auxiliar
o usuário a perceber um acesso a um nível inferior na hierarquia;
• Para navegações sequenciais, fortaleça a ênfase visual em botões que são
responsáveis por guiar o usuário em etapas futuras de uma jornada;
• Em navegações diretas, mantenha sempre presente nas interfaces outros
componentes que auxiliem o usuário retornar ao ponto de partida ou que deixem claro
o caminho percorrido;
Navegação Reversa
Refere-se em navegar retrocedendo cronologicamente entre as telas da aplicação ou
retrocedendo em uma navegação ascendente dentro dos níveis hierárquicos.
Navegação Cronológica
Este tipo de navegação consiste em retroceder cronologicamente através do histórico de
navegação recente do usuário. É possível deslocar o usuário dentro de uma aplicação ou até
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 475 de 506
mesmo entre aplicações diferentes. Um exemplo bem comum é o Button “Voltar” do

navegador.
Figura 387 - Exemplo de Navegação Cronológica utilizando o button Voltar do Navegador
Apesar de ser bem comum este tipo recurso na barra do Navegador, recomenda-se utilizar,
em alguns casos, o button “Voltar” dentro da própria tela da aplicação, auxiliando o usuário
retornar em etapas sequenciais cronologicamente. Como o caso do Wizard ou em telas
específicas, por exemplo.
Figura 388 - Navegação Cronológica com Wizard
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 476 de 506
Navegação Ascendente
A Navegação Ascendente permite que o usuário navegue pelas telas subindo através dos
níveis hierárquicos da aplicação, até alcançar a tela inicial.
Uma boa recomendação é utilizar o componente Breadcrumbs como elemento de Navegação

Ascendente. Neste componente o usuário tem uma visão clara de todo fluxo hierárquico e
pode navegar retrocedendo na hierarquia até chegar ao nível principal.
Figura 389 - Fluxo Reverso com Navegação Ascendente e Breadcrumbs
Neste caso, também é muito usado o recurso do button “Voltar” dentro da aplicação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 477 de 506
Figura 390 - Fluxo Reverso com Navegação Ascendente e Button Voltar
Componentes mais adequados para Navegação Reversa:
Componente Tipo de Navegação

Button Voltar (Navegador) Navegação Cronológica
Button Voltar (Aplicação) Navegação Cronológica
Breadcrumbs Navegação Ascendente
Boas Práticas na Navegação Reversa

• Sempre que possível, retorne o usuário para tela anterior, exibindo-a em seu estado
original e posição da barra de rolagem;
• Forneça ao usuário mensagens claras, caso a tela anterior não esteja mais disponível.
Pode-se usar nestes casos os padrões de Empty State, Telas de Erro ou Componente
Message;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 478 de 506
• Indique claramente ao usuário o relacionamento entre as telas “pais” e telas “filhas”.

É importante que o usuário consiga identificar o acesso à tela “pai” facilmente e
retroceder na navegação.
Padrões de Navegação
Padrões de navegação são formas de organizar e utilizar um ou mais componentes de
navegação para atender diversas necessidades na interface gráfica, nos diferentes tipos de
navegação e em contextos diferentes de hierarquia.
Organizando Padrões de Navegação

Os padrões de navegação devem ser aplicados para atender melhor as necessidades dos
usuários da aplicação. Geralmente, sistemas ou aplicativos com um modelo de hierarquia
muito complexo ou profundo tem requisitos de navegação diferentes de aplicações mais
simples com poucas camadas de visualização. É importante estar atento e utilizar os padrões
mais adequados para sua interface, sendo possível também combiná-los de forma a obter
melhor resultado na usabilidade.
Abaixo seguem alguns padrões que podem ser úteis na estruturação de uma navegação
eficiente.
Navegação Embutida
Navegação Embutida é um padrão onde os componentes de navegação fazem parte do
próprio conteúdo exibido em tela. Geralmente são usados em sistemas ou aplicativos com
uma navegação muito simples, com uma forte visualização primária.
Este modelo é recomendado para:

• aplicativos ou sistemas com poucos níveis hierárquicos;
• aplicativos que usam na visão primária as tarefas mais comuns ou todas as tarefas;
• aplicativos ou sistemas que possuem uma forte visualização primária e poucas
visualizações alternativas;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 479 de 506
• aplicativos ou sistemas usados com pouca frequência.
Figura 391 - Exemplo de Navegação Embutida em um App de música - Os controles de

navegação funcionam em uma forte visualização primária
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 480 de 506
Navegação Aninhada
A Navegação Aninhada é um padrão onde se estrutura os componentes de navegação de
forma a deixar claro ao usuário os níveis hierárquicos de sua aplicação. A ideia neste modelo
é fortalecer o aprendizado do usuário na sequência de caminhos, grupos e subgrupos.
Geralmente muito comum em estruturas de Menus ou Listas. Neste caso, recomenda-se

aninhar os itens de níveis “irmãos” abaixo dos itens “pais”.
Este tipo de padrão é adequado para:

• Modelos de Navegação Lateral;
• Estruturas de navegação muito profundas ou complexas;
• Acessar itens de primeiro nível em visualizações não relacionadas.
Figura 392 - Exemplo de Navegação Aninhada utilizando agrupamentos de pais e filhos no

Menu
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 481 de 506
NAVEGAÇÃO ANINHADA COM COLLAPSE OU DROPDOWN

O padrão de Navegação Aninhada com Collapse ou Dropdown possui o mesmo objetivo da
Navegação Aninhada, aprimorando a exibição do conteúdo nos espaços da interface. Neste
modelo utiliza-se estruturas de Collapse ou Dropdown incorporadas aos componentes de
navegação.
Desta forma pode-se otimizar melhor os espaços na tela e oferecer maior área de conteúdo
visível para o usuário. É bastante útil para:
• Recursos de responsividade;
• Aplicações Mobile;
• Aplicações Desktop com pouco espaço em tela.
Figura 393 - Exemplo de Navegação Aninhada com Collapse - Permite melhor otimização do
espaço vertical
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 482 de 506
Figura 394 - Exemplo de Navegação Aninhada com Dropdown - Adequado para aplicações
mobile ou espaços bastante reduzidos
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 483 de 506
NAVEGAÇÃO ANINHADA EM CASCATA

O padrão de Navegação Aninhada em Cascata possui a mesma utilidade da Navegação
Aninhada com Collapse ou Dropdown. Os objetivos em usabilidade são os mesmos. A
diferença é que este tipo possui um comportamento diferenciado, exibindo os itens “filhos”
lateralmente aos itens “pais” e não abaixo. Observe o exemplo a seguir:
Figura 395 - Exemplo de Navegação Aninhada em Cascata
Em dispositivos mobile, com espaços mais restritos, cada bloco em cascata é visualizado
individualmente, ocultando a visualização dos demais. Veja o exemplo abaixo:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 484 de 506
Figura 396 - Exemplo de Navegação Aninhada em Cascata Mobile - Cada bloco em cascata é
visualizado individualmente pelo usuário
Navegação Gestual
O padrão de Navegação Gestual é o modelo no qual utiliza-se recursos de toque por parte do
usuário durante a navegação na interface, em determinados dispositivos.
A Navegação Gestual permite que os usuários utilizem o dedo para deslizar entre os itens de
navegação. Geralmente esses itens são irmãos em termos de nível de hierarquia. Esses
recursos são mais presentes em aplicações para dispositivos móveis e devem ser considerados
ao se projetar este tipo de interface. São mais comumentes utilizados em ações de rolagem
vertical da tela, rolagem horizontal em componentes do tipo carrossel, galeria de imagens e
ações de touch em elementos interativos por exemplo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 485 de 506
A Navegação Gestual é recomendada para:

• Itens relacionados e ordenados naturalmente, como páginas ou elementos em
sequência;
• Visualizações com poucos itens filhos;
• Visualizações com conteúdos semelhantes.
Os recursos de Navegação Gestual mais comuns são:

• Deslizar horizontalmente (direita e esquerda);
• Deslizar verticalmente (cima e baixo);
• Tocar em elementos interativos;
• Ampliar ou reduzir a visualização da tela (com dois dedos).
Abaixo pode-se observar alguns exemplos de Navegação Gestual.
Figura 397 - Exemplo de Navegação Gestual Horizontal - O usuário desliza o dedo

horizontalmente navegando sobre uma lista de músicas em um aplicativo
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 486 de 506
Figura 398 - Exemplo de Navegação Gestual Vertical - O usuário desliza o dedo verticalmente
navegando sobre uma lista em um aplicativo
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 487 de 506
Figura 399 - Exemplo de Navegação Gestual com Touch - O usuário aciona elementos
interativos com o toque
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 488 de 506
Figura 400 - Exemplo de Navegação Gestual com Zoom - O usuário utiliza dois dedos para
ampliar ou reduzir a visualização do elemento ou da tela
Padrões Combinados
Padrões Combinados são formas de harmonizar diferentes padrões de navegação com o
objetivo de resolver necessidades específicas na interface e oferecer melhor experiência de
usabilidade ao usuário. No entanto, deve-se estar atento aos princípios e boas práticas de
design e combinar estes recursos com cautela.
Abaixo pode-se observar algumas combinações mais comumente usadas:
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 489 de 506
Figura 401 - Exemplo Combinado de Menu e Tabs - Neste exemplo foi utilizado dois
componentes adequados para navegação do tipo Lateral. O Menu possui uma navegação
lateral entre níveis “pais”, enquanto que os Tabs possuem navegação lateral entre itens
“filhos”.
Figura 402 - Exemplo Combinado de Menu Aninhado e Tabs - Neste exemplo foi reforçado mais
ainda um modelo de navegação aninhada e navegação lateral. Enquanto o componente Menu
já possui aninhamento com itens “filhos” utiliza-se o componente Tabs para exibir itens
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 490 de 506
EMPTY STATES
São situações que ocorrem dentro de uma aplicação nas quais não há dados a serem exibidos
para o usuário. Geralmente são visualizados quando um usuário interage pela primeira vez no
sistema, quando os dados foram excluídos ou simplesmente esses dados não estão mais
disponíveis.
Empty States quase sempre são tratados como uma inclusão tardia no projeto de interface,
porém esta é uma visão errônea sobre o tema. Quando são projetados de forma cuidadosa
desde o início do projeto, oferecem uma experiência de usabilidade clara e amigável ao
usuário.
Figura 403 - Exemplo de Empty State
Utilize Empty States para:

• Informar e orientar o usuário durante uma situação de ausência de dados inesperada
dentro do sistema ou aplicativo;
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 491 de 506
• Tornar claro para o usuário o que exatamente está ocorrendo e como contornar este
problema;
• Reforçar uma boa impressão sobre seu produto: empty states oferecem uma imagem
mais humana e amigável da interface, fortalecendo a empatia e melhorando o
aprendizado do usuário.
Boas Práticas Gerais

• Seja claro e direto: Mantenha uma relação clara entre a situação que esta ocorrendo
e o conteúdo apresentado ao usuário;
• Evite conteúdos extensos: Muito conteúdo não é necessariamente a melhor solução.
Essa prática implica em maior tempo de leitura e aprendizado pelo usuário. A
informação deve ser absorvida de forma rápida pelo leitor.
• Eduque os usuários: Empty States são uma ótima oportunidade para ensinar seus
usuários utilizarem seu produto. Utilize a mensagem para orientar tomadas de decisão
do usuário, não apenas para informá-lo sobre o ocorrido;
• Mantenha a consistência: Situações semelhantes em Empty States devem possuir o
mesmo padrão na ilustração e informação textual;
• Agrade o usuário: Fortaleça um laço de empatia com seu público-alvo e reforce uma
boa impressão sobre seu produto, utilizando uma comunicação humana e amigável
nas ilustrações e mensagens textuais.
Anatomia
A anatomia do padrão Empty States é composta pelos seguintes elementos:
1. Imagem (Opcional);
2. Título;
3. Corpo da Mensagem;
4. Elementos Interativos (Opcional);
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 492 de 506
Figura 404 - Anatomia do Empty State
1 - Imagem (Opcional)
Pode ser uma foto ou ilustração que represente semanticamente o contexto da situação
apresentada em tela. É uma forma de comunicação visual usada para reforçar a empatia e
aprendizado pelo usuário no contexto da informação.
2 - Título
É uma declaração curta e objetiva usada para resumir a mensagem. É importante utilizá-lo
sempre de forma positiva. Por exemplo, em vez de “Você não tem dados ativos”, pode-se
usar “Insira ativos de dados para visualizar”.
3 - Corpo da Mensagem
É uma breve explanação sobre o contexto. Deve ser descrito de forma clara e direta, sugerindo
ao usuário qual ação deve ser tomada para contornar a situação.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 493 de 506
4 - Elementos Interativos (Opcional)

Nesta área utiliza-se elementos interativos, como Buttons ou Hiperlinks. Estes devem ser
usados quando houver a possibilidade de uma tomada de ação imediata pelo usuário. Caso
haja a necessidade de mais de uma tomada de ação, utilize o Button (Ênfase Secundária) para
ação principal e, para uma ação menos prioritária, utilize um hiperlink, por exemplo, para
visualizar um detalhamento ou consultar alguma documentação. Posicione estes elementos
logo abaixo do Corpo da Mensagem.
Tipos Comuns de Empty States e como Usá-los

Empty States ocorrem por diversos motivos diferenciados e devem ser tratados de forma
específica em cada uma destas situações. A seguir pode-se observar alguns tipos de
abordagens para Empty States e como elas podem atender às necessidades dos usuários em
cada situação.
Ausência de Dados
É o tipo mais básico e comum de Empty State. Deve informa ao usuário que tipo de dado
estará disponível na tela ou elemento quando os dados forem inseridos. Também deve
orientar o usuário a respeito do próximo passo caso o usuário queira preencher o espaço
vazio.
Figura 405 - Exemplo de Ausência de Dados em Galeria de Imagens

CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 494 de 506
Como Ocorre Objetivo Quando Usar

Durante a primeira O usuário deve entender que os Em situações mais
utilização do sistema dados estarão disponíveis na tela simples ou com
pelo usuário, quando quando forem inseridos por ele ou prioridade secundária
ainda não existem dados outrem. A mensagem deve orientar o onde são requeridos
a serem exibidos. usuário quanto a inserção dos dados. poucos dados.
Boas Práticas
• Utilize este tipo em situações simples ou em recursos menos prioritários, quando a
quantidade de informação a ser exibida for pequena;
• Não use termos técnicos ou desconhecidos pelo usuário;
• Use poucas palavras para que o usuário entenda e atue de forma rápida;
• Ofereça opções de soluções ao usuário. Evite deixá-lo num beco sem saída.
• Caso haja ação a ser tomada pelo usuário, inclua um botão ou link para tal e oriente o
usuário sobre o que fazer;
• Não induza o usuário a resolver vários problemas. Oriente sobre o ponto mais
importante a ser resolvido;
• Seja claro sobre qual tipo de dado será exibido quando a informação for inserida;
• Seja contextual. Não relacione conteúdos de outras áreas da aplicação;
Ausência de Dados por Ação do Usuário

Este tipo é exibido em decorrência de uma interação do usuário no sistema, como uma
mensagem informando que não há dados de pesquisa. Ofereça uma informação clara sobre o
ocorrido e oriente a respeito das seguintes etapas, como configuração de parâmetros ou
filtros de pesquisa para realização de uma nova busca. Opções para “Limpar Filtros” ou
“Consultar Documentação” podem ser oferecidas ao usuário.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 495 de 506
Figura 406 - Ausência de Dados por Ação do Usuário em uma Pesquisa
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 496 de 506
Este modelo também é usado em casos onde não seja possível exibir próximas etapas.
Figura 407 - Ausência de Dados por Ação do Usuário em Próximas Etapas

Durante um feedback do O usuário deve entender que Quando houver a
sistema com base em alguma poderá configurar os parâmetros necessidade de
ação do usuário. Como um ou filtros de pesquisa para fornecer feedback ao
resultado de pesquisa vazio ou visualizar a informação desejada. usuário com base em
confirmação na conclusão de Ou deve entender que concluiu sua interação.
algum processo. com sucesso algum processo.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 497 de 506
Gerenciamento de Erros em Empty States

Nesta situação os dados não são exibidos por causa da inexistência deles, mas por algum
impedimento específico. Este tipo de Empty State requer uma comunicação com maior
especificidade e detalhamento do problema para que o usuário seja capaz de resolvê-lo.
Figura 408 - Gerenciamento de Erros em Empty States - O usuário tenta realizar upload de um
arquivo não compatível. A mensagem de Empty State ocorre no local onde deveria aparecer o
dado do arquivo enviado.

Em casos de ausência de O usuário deve entender qual Quando algo deu errado
configuração necessária, tipo de problema ocorreu e caso durante o fluxo de jornada
erros no sistema ou haja necessidade de tomada de do usuário ou quando
problemas relacionados a ação corretiva, o usuário deve algum tipo de intervenção
permissão do usuário. ser orientado sobre como agir. deve ser tomada.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 498 de 506
Abaixo pode-se observar alguns dos erros mais comuns e como tratá-los:
Tipo de Erro Explique a ausência dos Explique ao usuário o que fazer
dados
Problema no “Problema XPTO está Oriente sobre as etapas necessárias
Sistema impedindo que os dados para contornar o problema
sejam exibidos”
Ação não “O arquivo não é compatível Deixe claro ao usuário quais tipos de
suportada para upload” arquivos são suportados
Problema de “O usuário não tem Oriente sobre as etapas necessárias
Permissão permissão para visualizar os para solicitar o acesso
dados”
Configuração “Configure os parâmetros XYZ Forneça ao usuário uma explicação
Necessária para visualizar os dados” pontual sobre como iniciar a
configuração necessária
Empty States x Templates de Erro

É importante salientar que existem tipos de erros que possuem uma origem além da aplicação,
como por exemplo, erros provenientes do protocolo HTTP (404, 403, 408, 500 … entre outros).
Para este tipo de erro deve-se seguir os padrões especificados na documentação Template de
Erro.
Boas Práticas
• Se houver ações corretivas oriente sobre como executá-las e inclua um link ou botão
para acioná-las;
• Use linguajar claro e conciso;
• Evite linguagem petulante, respeite o usuário;
• Seja contextual. Evite usar conteúdo relacionados a outras situações;
• Utilize ilustrações adequadas ao contexto do erro;
• Ofereça opções de soluções ao usuário;
• Caso haja várias etapas a seguir, conduza o usuário à etapa inicial.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 499 de 506
Onde Usar Empty States

Para garantir a coerência e boa usabilidade, os Empty States devem ser exibidos na mesma
localidade onde deveriam ser apresentados os dados contextuais ausentes. Isto pode ocorrer
em qualquer espaço de sua interface gráfica, desde uma página inteira, painéis laterais, tabela
de dados, cards ou painéis.
Deve-se estar atento para usar a melhor abordagem de layout em cada uma dessas situações.
Sendo assim, observe algumas orientações e boas práticas de utilização em espaços amplos
ou pequenos.
Utilizando Empty States em Espaços Pequenos

Alinhamento
Por padrão todos os elementos do Empty State devem ser alinhados à esquerda dentro do
espaço onde são exibidos. Caso o espaço seja bastante pequeno, utilize apenas a ilustração
centralizada, enquanto que o conteúdo textual permanece à esquerda. Desta forma, a
imagem centralizada chama a atenção do usuário, evitando confundir a ideia de Empty
State com o conteúdo real. Observe os exemplos abaixo.
Figura 409 - Exemplos de alinhamento de Empty States em espaços reduzidos. Imagem

centralizada ou alinhada à esquerda.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 500 de 506
Uso da Ilustração
TAMANHO E PROPORÇÃO
Fique atento à utilização do tamanho de sua imagem. Esta deverá seguir um tamanho
proporcional adequado dentro do espaço de exibição do Empty State. Porém, não exagere
com dimensões muito grandes, a imagem deve ser proporcional tanto ao espaço quanto ao
conteúdo textual exibido.
Figura 410 - Exemplo de Tamanho das Ilustrações (Certo e Errado)
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 501 de 506
APENAS TEXTO
Se o espaço de exibição do Empty State for bastante reduzido, utilize apenas a informação
textual. Desta forma evita-se problemas relacionados à legibilidade ou responsividade.
Figura 411 - Exemplo de Empty States em espaços muito reduzidos (Certo e Errado)
SEMÂNTICA
Também é importante observar a semântica utilizada na imagem. Relacione uma imagem
coerente que esteja fortemente relacionada com a mensagem textual.
Figura 412 - Semântica em Ilustrações (Certo e Errado)
Usando Vários Empty States

Em algumas situações pode haver a necessidade de se utilizar vários Empty States na mesma
tela. Geralmente isto ocorre em telas de Dashboard ou com bastantes painéis de informação.
Quando isto acontecer evite poluir a tela com diversas ilustrações muito coloridas ou excesso
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 502 de 506
de botões de ação primária ou secundária. Em vez disso, use imagens sóbrias com tons
discretos ou utilize apenas textos. Também pode-se utilizar botões de ação terciária ou links.
Figura 413 - Utilizando Vários Empty States - Forma Errada
Figura 414 - Utilizando Vários Empty States - Forma Correta
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 503 de 506
Utilizando Empty States em Espaços Amplos

Alinhamento
Com espaço de exibição maior, a informação de Empty State deve chamar a atenção do
usuário na tela. Para isto, utilize uma margem lateral maior ou bloco centralizado na
horizontal, assim como alinhamento vertical na tela.
Figura 415 - Alinhamento do Empty State - Margem lateral maior
Figura 416 - Alinhamento do Empty State - Bloco Centralizado
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 504 de 506
POSICIONAMENTO E CONTEÚDO
Use Empty States substituindo os elementos que deveriam aparecer. Por exemplo, Empty
States de uma tabela deve substituir toda sua estrutura, Cabeçalho, Rodapé, Linhas e Colunas.
Desta forma evita-se que o usuário perca tempo lendo alguma informação irrelevante.
Figura 417 - Exemplo de Empty State em Tabelas - Forma Errada - Exibe conteúdo irrelevante
Figura 418 - Exemplo de Empty State em Tabelas - Forma Correta - Oculta conteúdo irrelevante
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 505 de 506
Uso da Ilustração
Aqui segue-se as mesmas regras e orientações descritas em espaços menores:
• Utilize imagens relacionadas ao conteúdo;
• Mantenha a proporção entre ilustração, espaço e conteúdo;
ARRANJOS DIFERENCIADOS
Com espaços mais amplos, existe maior flexibilidade para composição de um layout em Empty
States. Utilize arranjos diferenciados entre imagem e texto da seguinte forma:
• Para imagens horizontais ou amplas, posicione-as acima do texto;

• Para imagens verticais é mais adequado mantê-las à esquerda do bloco textual.
Figura 419 - Imagens amplas ou horizontais acima do texto e imagens menores ou verticais à
esquerda do texto.
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237
Página 506 de 506
ACESSIBILIDADE NAS ILUSTRAÇÕES

As ilustrações utilizadas em Empty States devem possuir o objetivo meramente decorativo,
tendo em vista que podem ser despercebidas por indivíduos com necessidades especiais ou
programas leitores de tela. Portanto evite incluir conteúdo visual informativo neste tipo de
ilustração. Toda informação importante para o usuário deve estar contida no Título e Corpo
da Mensagem.
A WCAG orienta:
• Utilize a tag alt="" (vazia) em imagens decorativas;
• Evite utilizar a tag role="presentation" para imagens decorativas, pois ainda é um
atributo pouco reconhecido pelos principais navegadores do mercado;
Petrolina,_____ de __________________ de 2022
_____________________________________________
Maria Auxiliadora Siqueira
CNPJ Nº 37.338.077/0001-86
(87) 98837-8237

Produto 6 - Escopo Funcional de Propriedade Digital

Enviado por

Dados do documento

Descrição original:

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

Produto 6 - Escopo Funcional de Propriedade Digital

Enviado por

Direitos autorais:

Formatos disponíveis

Página 1 de 506

PRODUTO 6 - ESCOPO FUNCIONAL DE PROPRIEDADE DIGITAL

O Escopo Funcional traz a descrição do funcionamento de uma propriedade digital, para

Orange Warm ................................................................................................................ 68

Violet Warm Vivid ........................................................................................................ 101

Fundo vs primeiro plano .............................................................................................. 124

Evitar estado selecionado ............................................................................................ 139

Detalhamento dos itens ................................................................................................... 155

4- Tipos e complexidade .............................................................................................. 184

Elevação ....................................................................................................................... 214

Melhores Práticas ............................................................................................................ 249

Tipos de Ajuda ............................................................................................................. 274

Anatomia ......................................................................................................................... 315

Áreas ............................................................................................................................ 371

Pulando o Tutorial........................................................................................................ 428

Organizando Padrões de Navegação............................................................................ 478

INDICE REMISSIVO DAS FIGURAS

Figura 1 - Pontos de Aderência .............................................................................................. 40

Figura 29 - Exemplo de Escala .............................................................................................. 118

Figura 110 - Exemplo para a configuração de bordas no Adobe XD..................................... 210

Figura 179 - Exemplo Densidade Alta .................................................................................. 289

Figura 196 - Exemplo de menu suspenso. ............................................................................ 306

Figura 281 - Exemplo do uso da fonte de um gráfico. .......................................................... 374

Figura 323 - Buttons Circulares como controles de navegação - Grid de 4 colunas e

Figura 351 - Exemplos de Área/Conteúdo Expansível .......................................................... 442

Figura 378 - Ilustração - Navegação Lateral ......................................................................... 467

Figura 414 - Alinhamento do Empty State - Bloco Centralizado .......................................... 503

ESCOPO DETALHADO DO PROJETO:

É, portanto, responsabilidade da administração pública oferecer ao cidadão a melhor

Os Padrões Web são recomendações de boas práticas com o objetivo de aprimorar a

Priorizar atenção ao usuário, no lugar do foco na tecnologia: é preciso entender a

Compreensão e Compatibilidade: os serviços devem ser compreensíveis tanto para usuários

PADRÃO VISUAL DIGITAL

Figura 1 - Pontos de Aderência

Adote as boas práticas para criar formulários

Figura 3 - Boas práticas para criar formulários

10. Cabeçalho e Rodapé

Priorizar atenção ao usuário, no lugar do foco na tecnologia: é preciso entender a

Compreensão e Compatibilidade: os serviços devem ser compreensíveis tanto para usuários

O contraste varia entre 1 a 21 (geralmente descritos 1:1 a 21:1).

Elementos gráficos e componentes da interface (como ícones e bordas) seguem as mesmas

O Design da autarquia trabalha com nível de conformidade mínima de AA (na taxa de

Família de Cores Alternativas

Figura 6- Círculo cromático (padrão)

Figura 7 - Círculo cromático vivid (alternativo) - cores mais saturadas.

Famílias de Cinza: Gray, Gray-Cool e Gray-Warm.

Função das Cores

Figura 8 - Exemplo de Indicação - Cor Principal

Figura 9 - Exemplo de Indicação - Cor Alternativa

Fundo Claro Vs Fundo Escuro

Obs: Cada função está ligada a um ou mais fundamentos. Procure as documentações

Figura 10 - Cor Superfície - Família Pure para Fundos Claros

Figura 11 - Cor Superfície Alternativa - Família Gray para Fundos Claros

2. Função Leitura (Tipografia e Iconografia)

Figura 13 - Cor Leitura - Família Gray para Fundos Claros

Figura 14 - Cor Leitura - Família Pure para Fundos Escuros

3. Função Feedback (Estados)

Cor Interativa - Família Blue Warm Vivid para Fundos Claros

Cor Interativa - Família Blue Warm para Fundos Escuros

Figura 15 - Cor Feedback Informação - Família Blue Warm Vivid

Figura 16 - Cor Feedback Sucesso - Família Green Cool Vivid

Figura 17 - Cor Feedback Alerta - Família Yellow Vivid