{"id":406,"date":"2022-09-12T15:18:37","date_gmt":"2022-09-12T18:18:37","guid":{"rendered":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/?post_type=v1&p=406"},"modified":"2024-07-12T18:18:44","modified_gmt":"2024-07-12T21:18:44","slug":"identidade-visual","status":"publish","type":"v1","link":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/sumario\/identidade-visual\/","title":{"rendered":"Identidade Visual"},"content":{"rendered":"\n

1 – INTRODU\u00c7\u00c3O<\/strong><\/h2>\n\n\n\n

A identidade visual promove a consist\u00eancia da institui\u00e7\u00e3o, atrav\u00e9s de especifica\u00e7\u00f5es e normas de uso dos elementos visuais, referente ao Sistema Gerais da Defensoria P\u00fablica de Minas Gerais. <\/p>\n\n\n\n

2 – FONTE<\/strong><\/h4>\n\n\n\n

As fontes do sistema Gerais, seguem crit\u00e9rios relacionados \u00e0 legibilidade, clareza da informa\u00e7\u00e3o e compatibilidade com o Google Fonts.<\/p>\n\n\n\n

2.1 – FONTE PADR\u00c3O E ALTERNATIVA<\/strong><\/p>\n\n\n\n

2.1.1 – Fonte Padr\u00e3o:<\/strong> Roboto<\/strong><\/p>\n\n\n\n

A fonte usada em todos os textos, t\u00edtulos e inputs do Sistema Gerais \u00e9 a Roboto.  <\/p>\n\n\n\n

Roboto \u00e9 uma fonte sem serifa, que facilita a distin\u00e7\u00e3o entre os caracteres. Foi classificada como uma das melhores letras para sistemas, por seu uso inteligente de espa\u00e7o em branco.  Est\u00e1 oficialmente dispon\u00edvel para download no site do Google Fonts.  <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.1.2 – Font Alternativa: Montserrat<\/strong><\/p>\n\n\n\n

A fonte alternativa \u00e9 a Montserrat. Possui como caracter\u00edstica seus tipos geom\u00e9tricos que tornam a fonte consistente, de f\u00e1cil legibilidade e otimizada para uso digital. Com 18 estilos diferentes, possibilita uma grande variedade de op\u00e7\u00f5es para compor as pe\u00e7as digitais. Est\u00e1 oficialmente dispon\u00edvel para download no site do Google Fonts.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

O Framework utilizado para desenvolvimento dos sistemas da DPMG \u00e9 o Quasar, desenvolvido sobre o Vue. Js. O layout segue os padr\u00f5es dos componentes desse framework em quest\u00e3o.  <\/p>\n\n\n\n

2.2 – Textos e T\u00edtulos<\/strong><\/p>\n\n\n\n

Textos: <\/strong><\/p>\n\n\n\n

Todos os textos seguir\u00e3o o padr\u00e3o \u201dlowercase\u201d com a primeira letra em mai\u00fascula.  <\/p>\n\n\n\n

Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

    \n
  • font-color:# 686868 <\/li>\n\n\n\n
  • font-weight: regular  <\/li>\n\n\n\n
  • font-size: 19px <\/li>\n\n\n\n
  • Font: Roboto <\/li>\n<\/ul>\n\n\n\n

    T\u00edtulos: <\/strong><\/p>\n\n\n\n

    O t\u00edtulo e subt\u00edtulo est\u00e3o dispostos da seguinte forma:\u00a0<\/p>\n\n\n\n

      \n
    • Projeto (h1) <\/li>\n\n\n\n
    • Funcionalidade (h3)\u00a0<\/li>\n\n\n\n
    • Descri\u00e7\u00e3o \/ A\u00e7\u00e3o\u00a0
      <\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

        <\/strong>Especifica\u00e7\u00f5es<\/strong> Projeto – h1:<\/strong> <\/p>\n\n\n\n

        \n
      •  font-color: #686868 <\/li>\n\n\n\n
      •  font-weight: regular <\/li>\n\n\n\n
      • font-size: 23px <\/li>\n<\/ul>\n\n\n\n

        Especifica\u00e7\u00f5es<\/strong> Funcionalidade – h3: <\/strong> <\/p>\n\n\n\n

          \n
        •  font-color: #686868 <\/li>\n\n\n\n
        • font-weight: bold <\/li>\n\n\n\n
        • font-size: 20px <\/li>\n<\/ul>\n\n\n\n

          3 – PALETA DE CORES<\/strong><\/h4>\n\n\n\n

          Para desenvolver a paleta de cores do Sistema Gerais, considerou-se a identidade visual j\u00e1 existente na institui\u00e7\u00e3o, os valores a serem transmitidos e o p\u00fablico-alvo. Junto a isso, levou-se em considera\u00e7\u00e3o conceitos de tecnologia, modernidade e inova\u00e7\u00e3o. <\/p>\n\n\n\n

          3.1 – Paleta Principal e Paleta Complementar<\/strong><\/p>\n\n\n\n

          A paleta principal \u00e9 usada em toda a plataforma do Sistema Gerais, assegurando dessa forma, a mesma identidade visual de todos os projetos e funcionalidades que comp\u00f5e o sistema. <\/p>\n\n\n\n

          A paleta complementar \u00e9 uma op\u00e7\u00e3o para ser usada em componentes espec\u00edficos dentro do sistema. Exemplos: bot\u00f5es, \u00edcones, accordions, gr\u00e1ficos, tabelas, steps, entre outros.  <\/p>\n\n\n\n

          As duas paletas podem ser combinadas entre si, possibilitando uma maior liberdade de cria\u00e7\u00e3o para atender todas as necessidades visuais do sistema.  <\/p>\n\n\n\n

          As cores tamb\u00e9m podem ser utilizadas, caso seja necess\u00e1rio,  com a varia\u00e7\u00e3o da opacidade respeitando o m\u00e1ximo de 50%.<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n

          4 – BOT\u00d5ES<\/strong><\/p>\n\n\n\n

          4.1 – Padr\u00f5es dos bot\u00f5es <\/strong><\/p>\n\n\n\n

          Os bot\u00f5es, possuem os seguintes padr\u00f5es descritos abaixo.\u00a0\u00a0<\/p>\n\n\n\n

          Especifica\u00e7\u00f5es<\/strong> dos Bot\u00f5es Principais:<\/strong> <\/p>\n\n\n\n

          ( Finalizar \/ Adicionar \/ Confirmar \/ Avan\u00e7ar \/ Novo \/ Pesquisar \/ Enviar \/ Alterar)\u00a0<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n
            \n
          • background-color:#1e8363 <\/li>\n\n\n\n
          • font-color: #ffffff <\/li>\n\n\n\n
          • font-weight: bold <\/li>\n\n\n\n
          • font-size: 14 px <\/li>\n\n\n\n
          • text-transform: Uppercase <\/li>\n\n\n\n
          • padding: 12px <\/li>\n\n\n\n
          • border-radius: 3px <\/li>\n<\/ul>\n\n\n\n

            *hover com 80% de opacidade <\/p>\n\n\n\n

            Especifica\u00e7\u00f5es<\/strong> Bot\u00f5es Secund\u00e1rios:<\/strong> <\/p>\n\n\n\n

            ( Cancelar \/ Limpar \/ Fechar \/ Voltar ) <\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n
              \n
            • background-color: #686868 <\/li>\n\n\n\n
            • font-color: #ffffff <\/li>\n\n\n\n
            • font-weight: bold <\/li>\n\n\n\n
            • font-size: 14px <\/li>\n\n\n\n
            • text-transform: Uppercase <\/li>\n\n\n\n
            • padding: 12px <\/li>\n\n\n\n
            • border-radius: 3px <\/li>\n<\/ul>\n\n\n\n

              *hover com 80% de opacidade\u00a0<\/p>\n\n\n\n

              Diferencia\u00e7\u00e3o dos bot\u00f5es CANCELAR \/ FECHAR nos fluxos das telas:<\/strong> <\/p>\n\n\n\n

              BOT\u00c3O CANCELAR<\/strong>: O bot\u00e3o cancelar volta sempre para a tela do fluxo anterior.  <\/p>\n\n\n\n

              BOT\u00c3O FECHAR: <\/strong>O bot\u00e3o fechar volta sempre para o fluxo inicial (tela principal). <\/strong>\u00c9 sempre utilizado no topo da p\u00e1gina ou dentro do accordion.  <\/p>\n\n\n\n

              Exemplos de fluxos:<\/strong> <\/p>\n\n\n\n

              Da tela principal (A) <\/strong>para a segunda tela (B)<\/strong> ser\u00e1 sempre utilizado o bot\u00e3o \u201cCancelar\u201d<\/strong>\u00a0\u00a0<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              \u00c0 partir da terceira tela (C) <\/strong>em diante, ser\u00e3o sempre utilizados os bot\u00f5es \u201cFechar\u201d e \u201cCancelar\u201d. <\/strong>Exceto se a tela for apenas de visualiza\u00e7\u00e3o, <\/strong>nesse caso, ser\u00e1 utilizado o bot\u00e3o \u201cCancelar\u201d<\/strong>\u00a0<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Quando for utilizado o componente de\u00a0 “Step\u201d <\/strong>os bot\u00f5es obedecer\u00e3o uma ordem\u00a0 particular. ( Ver 8.2 Bot\u00f5es Steps<\/strong>).\u00a0<\/p>\n\n\n\n

              Especifica\u00e7\u00f5es Bot\u00f5es Inativos:<\/strong>\u00a0<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              <\/p>\n\n\n\n

                \n
              • background-color: #1e8363 \/ #686868 <\/li>\n\n\n\n
              • opacity: 60% <\/li>\n\n\n\n
              • font-color: #ffffff   <\/li>\n\n\n\n
              • font-weight: bold <\/li>\n\n\n\n
              • font-size: 14px <\/li>\n\n\n\n
              • text-transform: Uppercase <\/li>\n\n\n\n
              • border-radius: 3px <\/li>\n<\/ul>\n\n\n\n

                Os \u00fanicos bot\u00f5es que ter\u00e3o \u00edcones ao lado das palavras ser\u00e3o: <\/p>\n\n\n\n

                ( Novo \/ Pesquisar \/ Adicionar \/ Avan\u00e7ar \/ Voltar) <\/p>\n\n\n\n

                \"\"<\/figure>\n\n\n\n

                Quando for necess\u00e1rio adicionar um bot\u00e3o diferente dos citados acima, incluir seguindo todas as especifica\u00e7\u00f5es aqui descritas.  <\/p>\n\n\n\n

                O padr\u00e3o dos espa\u00e7amentos entre os bot\u00f5es ser\u00e1 de 12px. <\/p>\n\n\n\n

                4.2 – Hierarquia dos bot\u00f5es<\/strong><\/p>\n\n\n\n

                A regra empregada sempre ser\u00e1: Bot\u00f5es principais \u00e0 direita e bot\u00f5es secund\u00e1rios \u00e0 esquerda.<\/p>\n\n\n\n

                \"\"<\/figure>\n\n\n\n

                Quando for necess\u00e1rio inserir dois bot\u00f5es no topo da p\u00e1gina. O layout ser\u00e1 conforme o exemplo da imagem abaixo: <\/p>\n\n\n\n

                \"\"<\/figure>\n\n\n\n

                <\/p>\n\n\n\n

                5 – \u00cdCONES<\/strong><\/p>\n\n\n\n

                5.1 – \u00cdcones de a\u00e7\u00e3o <\/strong><\/p>\n\n\n\n

                Os \u00edcones de a\u00e7\u00e3o, possuem o padr\u00e3o iconogr\u00e1fico demonstrado abaixo.<\/p>\n\n\n\n

                Especifica\u00e7\u00f5es<\/strong>:<\/p>\n\n\n\n

                  \n
                1. color: #686868<\/li>\n<\/ol>\n\n\n\n
                    \n
                  1. align: right <\/li>\n<\/ol>\n\n\n\n

                    Esses tipos de \u00edcones n\u00e3o possuem hover e possuem tooltip com o nome da a\u00e7\u00e3o. <\/p>\n\n\n\n

                    \"\"<\/figure>\n\n\n\n

                    Existe tamb\u00e9m a possibilidade de inserir \u00edcones nos accordions, caso seja necess\u00e1rio. <\/p>\n\n\n\n

                    Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                      \n
                    1. color: #1e8363 <\/li>\n<\/ol>\n\n\n\n
                        \n
                      1. align: right <\/li>\n<\/ol>\n\n\n\n
                        \"\"<\/figure>\n\n\n\n

                        5.2 – \u00cdcones de funcionalidades  <\/strong><\/p>\n\n\n\n

                        Os \u00edcones de funcionalidades do projeto, ficam no menu lateral e seguem o seguinte layout demonstrado na imagem abaixo, este item est\u00e1 sendo reformulado e em breve, um novo padr\u00e3o ser\u00e1 atualizado na MDS. <\/p>\n\n\n\n

                        \"\"<\/figure>\n\n\n\n

                        6 – ACCORDIONS<\/strong><\/p>\n\n\n\n

                        As estruturas dos conte\u00fados do Gerais, s\u00e3o dispostos em accordions, como no exemplo da imagem abaixo.  <\/p>\n\n\n\n

                        \"\"<\/figure>\n\n\n\n

                        6.1 – T\u00edtulos dos accordions<\/strong><\/p>\n\n\n\n

                        Cada accordion, deve conter um respectivo t\u00edtulo, os t\u00edtulos devem seguir o seguinte padr\u00e3o: <\/p>\n\n\n\n

                        Especifica\u00e7\u00f5es<\/strong> h3: <\/strong> <\/p>\n\n\n\n

                          \n
                        •  font-color: #686868 <\/li>\n\n\n\n
                        • font-weight: regular <\/li>\n\n\n\n
                        • font-size: 20px <\/li>\n\n\n\n
                        • bg-color: #f1f1f1 <\/li>\n<\/ul>\n\n\n\n

                          No cabe\u00e7alho dos accordions podem ser inseridos \u00edcones ou bot\u00f5es, caso seja necess\u00e1rio. <\/p>\n\n\n\n

                          7 – ESPA\u00c7AMENTOS<\/strong><\/p>\n\n\n\n

                          A grid dos sistemas, devem seguir os seguintes espa\u00e7amentos sinalizados na imagem abaixo: <\/p>\n\n\n\n

                          Outros espa\u00e7amentos ser\u00e3o tratados nos itens espec\u00edficos da MDS. <\/p>\n\n\n\n

                          \"\"<\/figure>\n\n\n\n

                          8 – STEPS<\/strong><\/p>\n\n\n\n

                          Os steps devem ser utilizados para demonstrar a\u00e7\u00f5es de passo a passo. S\u00e3o sempre definidos dentro de um accordion.<\/p>\n\n\n\n

                          \"\"<\/figure>\n\n\n\n

                          8.1 – T\u00edtulos  <\/strong><\/p>\n\n\n\n

                          \"\"<\/figure>\n\n\n\n

                          Especifica\u00e7\u00f5es –<\/strong> T\u00edtulo Desativado:<\/strong> <\/p>\n\n\n\n

                            \n
                          • font-color: #1e8363 <\/li>\n\n\n\n
                          • \u00cdcone: #1e8363 <\/li>\n\n\n\n
                          • font-weight: bold<\/li>\n\n\n\n
                          • font-size: 21px <\/li>\n<\/ul>\n\n\n\n

                            Especifica\u00e7\u00f5es<\/strong> – T\u00edtulo Selecionado:<\/strong> <\/p>\n\n\n\n

                              \n
                            • font-color: #1e8363 <\/li>\n\n\n\n
                            • \u00cdcone: #1e8363 <\/li>\n\n\n\n
                            • font-weight: bold <\/li>\n\n\n\n
                            • font-size: 21px <\/li>\n<\/ul>\n\n\n\n

                              8.2 – Bot\u00f5es dos Steps <\/strong><\/p>\n\n\n\n

                              O padr\u00e3o dos bot\u00f5es dos steps, obedecer\u00e1 a seguinte ordem:<\/p>\n\n\n\n

                                \n
                              • Passo 1: Fechar, Cancelar e Avan\u00e7ar, <\/strong>conforme imagem abaixo. <\/li>\n<\/ul>\n\n\n\n
                                \"\"<\/figure>\n\n\n\n
                                  \n
                                • Passo 2 em diante: e Fechar, Voltar<\/strong> e Avan\u00e7ar,<\/strong> conforme imagem abaixo.<\/li>\n<\/ul>\n\n\n\n
                                  \"\"<\/figure>\n\n\n\n
                                    \n
                                  • \u00daltimo passo: Voltar <\/strong>e Finalizar, <\/strong>conforme imagem abaixo. <\/li>\n<\/ul>\n\n\n\n
                                    \"\"<\/figure>\n\n\n\n

                                    9 – TABELAS<\/strong><\/p>\n\n\n\n

                                    Existem alguns tipos de tabelas no sistema, a seguir veremos esses padr\u00f5es.  <\/p>\n\n\n\n

                                    9.1 – Tabela \u2013 Modelo 1<\/strong> <\/p>\n\n\n\n

                                    \"\"<\/figure>\n\n\n\n

                                    Especifica\u00e7\u00f5es – Header:<\/strong> <\/p>\n\n\n\n

                                      \n
                                    •  font-color: #686868  <\/li>\n\n\n\n
                                    •  font weight: bold  <\/li>\n\n\n\n
                                    • font-size: 19px  <\/li>\n<\/ul>\n\n\n\n

                                      * padding eixo X: 19px \/ padding eixo y: 19px <\/p>\n\n\n\n

                                      Especifica\u00e7\u00f5es<\/strong> – Corpo:  <\/strong> <\/p>\n\n\n\n

                                        \n
                                      • font-color: #686868 <\/li>\n\n\n\n
                                      •  font weight: regular <\/li>\n\n\n\n
                                      •  font-size: 19px <\/li>\n<\/ul>\n\n\n\n

                                        * padding eixo X: 19px \/ padding eixo y: 17px <\/p>\n\n\n\n

                                        *hover: background-color: #d2d2d2 <\/p>\n\n\n\n

                                        9.2 – Tabela Modelo 2<\/strong> <\/p>\n\n\n\n

                                        \"\"<\/figure>\n\n\n\n

                                        Especifica\u00e7\u00f5es – Header:<\/strong> <\/p>\n\n\n\n

                                          \n
                                        •  font-color: #686868  <\/li>\n\n\n\n
                                        •  font weight: bold  <\/li>\n\n\n\n
                                        • font-size: 19px  <\/li>\n\n\n\n
                                        • background-color: #f1f1f1 <\/li>\n<\/ul>\n\n\n\n

                                          * padding eixo X: 17px \/ padding eixo y: 17px <\/p>\n\n\n\n

                                          Especifica\u00e7\u00f5es<\/strong> – Corpo: <\/strong>  <\/p>\n\n\n\n

                                            \n
                                          • font-color: #686868 <\/li>\n\n\n\n
                                          •  font weight: regular <\/li>\n\n\n\n
                                          •  font-size: 19px <\/li>\n<\/ul>\n\n\n\n

                                            * padding eixo X: 17px \/ padding eixo y: 17px <\/p>\n\n\n\n

                                            *hover: background-color: #d2d2d2 <\/p>\n\n\n\n

                                            9.3 – Tabela Modelo 3 <\/strong><\/p>\n\n\n\n

                                            \"\"<\/figure>\n\n\n\n

                                            Especifica\u00e7\u00f5es – Header:<\/strong> <\/p>\n\n\n\n

                                              \n
                                            •  font-color: #686868  <\/li>\n\n\n\n
                                            •  font weight: bold  <\/li>\n\n\n\n
                                            • font-size: 19px  <\/li>\n\n\n\n
                                            • bg-color: #d6f2de<\/li>\n<\/ul>\n\n\n\n

                                               * padding eixo X: 19px \/ padding eixo y: 17px <\/p>\n\n\n\n

                                              Especifica\u00e7\u00f5es<\/strong> – Corpo:\u00a0\u00a0<\/strong>\u00a0<\/p>\n\n\n\n

                                                \n
                                              • font-color: #686868 <\/li>\n\n\n\n
                                              •  font weight: regular <\/li>\n\n\n\n
                                              •  font-size: 19px <\/li>\n\n\n\n
                                              • bg-color: #f1f1f1 <\/li>\n<\/ul>\n\n\n\n

                                                * padding eixo\u00a0X: 19px \/ padding eixo y: 17px\u00a0<\/p>\n\n\n\n

                                                Especifica\u00e7\u00f5es:<\/strong>  <\/p>\n\n\n\n

                                                  \n
                                                • font-family: Roboto\u00a0<\/li>\n\n\n\n
                                                • font-size: 19px\u00a0<\/li>\n\n\n\n
                                                • font-color: #686868\u00a0\u00a0\u00a0<\/li>\n\n\n\n
                                                • font weight: regular\u00a0\u00a0<\/li>\n\n\n\n
                                                • bg-color: #cbf2de\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                  Hover<\/strong> <\/p>\n\n\n\n

                                                    \n
                                                  • font-family: Roboto\u00a0<\/li>\n\n\n\n
                                                  • font-size: 19px\u00a0<\/li>\n\n\n\n
                                                  • font-color: #004641\u00a0<\/li>\n\n\n\n
                                                  • font weight: bold\u00a0<\/li>\n\n\n\n
                                                  • border-right:\u00a0 #004641\u00a0<\/li>\n\n\n\n
                                                  • bg-color: #d2d2d2\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                    9.4 – Tabela Modelo 4<\/strong><\/p>\n\n\n\n

                                                    \"\"<\/figure>\n\n\n\n

                                                    Especifica\u00e7\u00f5es \u2013 Header:<\/strong>  <\/p>\n\n\n\n

                                                      \n
                                                    • \u00a0font-color: #686868<\/li>\n\n\n\n
                                                    • \u00a0font weight: medium<\/li>\n\n\n\n
                                                    • font-size: 20px<\/li>\n\n\n\n
                                                    • background-color: # cbf2de<\/li>\n<\/ul>\n\n\n\n

                                                      9.5 – Tabela Modelo 5<\/strong><\/p>\n\n\n\n

                                                      <\/p>\n\n\n\n

                                                      Especifica\u00e7\u00f5es \u2013 Header:<\/strong>  <\/p>\n\n\n\n

                                                        \n
                                                      • \u00a0font-color: #686868<\/li>\n\n\n\n
                                                      • \u00a0font weight: medium<\/li>\n\n\n\n
                                                      • font-size: 20px<\/li>\n\n\n\n
                                                      • background-color: # cbf2de\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                        10 – INPUTS<\/strong><\/p>\n\n\n\n

                                                        10.1 – Especifica\u00e7\u00f5es dos Inputs<\/p>\n\n\n\n

                                                        Especifica\u00e7\u00f5es Gerais<\/strong>:<\/strong> <\/p>\n\n\n\n

                                                          \n
                                                        • font-color: #686868 <\/li>\n\n\n\n
                                                        • font-weight: regular <\/li>\n\n\n\n
                                                        • font-size: 19px <\/li>\n\n\n\n
                                                        • border-color: #d2d2d2 <\/li>\n\n\n\n
                                                        • border- weight: 1px <\/li>\n<\/ul>\n\n\n\n

                                                          Exemplo Input-B\u00e1sico:<\/strong> <\/p>\n\n\n\n

                                                          \"\"<\/figure>\n\n\n\n

                                                          Exemplo Input-Selecionado:<\/strong> <\/p>\n\n\n\n

                                                          \"\"<\/figure>\n\n\n\n

                                                          Especifica\u00e7\u00f5es Input-Selecionado<\/strong>:<\/strong> <\/p>\n\n\n\n

                                                            \n
                                                          • font-color: #1e8363 <\/li>\n\n\n\n
                                                          • font-weight: regular <\/li>\n\n\n\n
                                                          • font-size: 16px <\/li>\n\n\n\n
                                                          • border-color: #1e8363 <\/li>\n\n\n\n
                                                          • border- weight: 1px\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                            Exemplo Input-Select \/ Anexo \/ Data :<\/strong>\u00a0<\/p>\n\n\n\n

                                                            \"\"<\/figure>\n\n\n\n

                                                            Especifica\u00e7\u00f5es Input-Select \/ Anexo \/ Data :<\/strong><\/strong><\/p>\n\n\n\n

                                                              \n
                                                            • font-color: #686868 <\/li>\n\n\n\n
                                                            • font-weight: regular <\/li>\n\n\n\n
                                                            • font-size: 19px  <\/li>\n\n\n\n
                                                            • border-color: #d2d2d2 <\/li>\n\n\n\n
                                                            • border- weight: 1px <\/li>\n\n\n\n
                                                            • border-radius: 3px <\/li>\n<\/ul>\n\n\n\n

                                                              *Cor \u00edcone: #9e9e9e <\/p>\n\n\n\n

                                                              * Fonte size textos complementares: 16px\u00a0<\/p>\n\n\n\n

                                                              Exemplo Input-Textarea:<\/strong>\u00a0<\/p>\n\n\n\n

                                                              Os itens do textarea podem ser personalizados de acordo com a necessidade do projeto, podendo ser utilizado na vers\u00e3o completa ou reduzida de acordo com a necessidade.\u00a0<\/p>\n\n\n\n

                                                              Exemplo Input-Desabilitado:<\/strong> <\/p>\n\n\n\n

                                                              \"\"<\/figure>\n\n\n\n

                                                              Especifica\u00e7\u00f5es Input-Desabilitado<\/strong>:<\/strong> <\/p>\n\n\n\n

                                                                \n
                                                              • font-color: #9e9e9e <\/li>\n\n\n\n
                                                              • font-weight: regular <\/li>\n\n\n\n
                                                              • font-size: 19px <\/li>\n\n\n\n
                                                              • border-radius: 3px <\/li>\n\n\n\n
                                                              • background-color:#f1f1f1 <\/li>\n<\/ul>\n\n\n\n

                                                                Exemplo Input-Obrigat\u00f3rio:<\/strong> <\/p>\n\n\n\n

                                                                Campos obrigat\u00f3rios devem ter o * na palavra.<\/strong> <\/p>\n\n\n\n

                                                                \"\"<\/figure>\n\n\n\n

                                                                Exemplo Input-Radio:<\/strong> <\/p>\n\n\n\n

                                                                \"\"<\/figure>\n\n\n\n

                                                                Especifica\u00e7\u00f5es Input Data<\/strong>:<\/strong> <\/p>\n\n\n\n

                                                                  \n
                                                                • font-color: #686868 <\/li>\n\n\n\n
                                                                • font-weight: regular <\/li>\n\n\n\n
                                                                • font-size: 19px <\/li>\n<\/ul>\n\n\n\n

                                                                  *Cor radio habilitado: #1e8363 <\/p>\n\n\n\n

                                                                  Exemplo Input-Switch:<\/strong> <\/p>\n\n\n\n

                                                                  \"\"<\/figure>\n\n\n\n
                                                                    \n
                                                                  • font-color: #686868 <\/li>\n\n\n\n
                                                                  • font-weight: regular <\/li>\n\n\n\n
                                                                  • font-size: 19px <\/li>\n<\/ul>\n\n\n\n

                                                                    *Cor radio habilitado: #1e8363 <\/p>\n\n\n\n

                                                                    *Cor radio desabilitado: #9e9e9e <\/p>\n\n\n\n

                                                                    Exemplo Input-Multiselect:<\/strong> <\/p>\n\n\n\n

                                                                    \"\"<\/figure>\n\n\n\n

                                                                    Especifica\u00e7\u00f5es Input-<\/strong> Multiselect<\/strong>:<\/strong> <\/p>\n\n\n\n

                                                                      \n
                                                                    • font-color: #686868 <\/li>\n\n\n\n
                                                                    • font-weight: regular <\/li>\n\n\n\n
                                                                    • font-size: 17px <\/li>\n\n\n\n
                                                                    • background-color: #dedede <\/li>\n<\/ul>\n\n\n\n

                                                                      Especifica\u00e7\u00f5es Input-<\/strong> Multiselect-Lista:<\/strong> <\/p>\n\n\n\n

                                                                      Habilitado<\/strong> <\/p>\n\n\n\n

                                                                        \n
                                                                      • font-color: #686868 <\/li>\n\n\n\n
                                                                      • font-weight: regular <\/li>\n\n\n\n
                                                                      • font-size: 19px  <\/li>\n\n\n\n
                                                                      • background-color: #dfe5d8 <\/li>\n<\/ul>\n\n\n\n

                                                                        *Cor background check: #1e8363 <\/p>\n\n\n\n

                                                                        Desabilitado<\/strong> <\/p>\n\n\n\n

                                                                          \n
                                                                        • font-color: #686868 <\/li>\n\n\n\n
                                                                        • font-weight: regular <\/li>\n\n\n\n
                                                                        • font-size: 19px  <\/li>\n<\/ul>\n\n\n\n

                                                                          * Cor borda check: #d2d2d2 <\/p>\n\n\n\n

                                                                          Exemplo Input-Descri\u00e7\u00e3o:<\/strong> <\/p>\n\n\n\n

                                                                          \"\"<\/figure>\n\n\n\n
                                                                            \n
                                                                          • font-color: #686868 <\/li>\n\n\n\n
                                                                          • font-weight: regular <\/li>\n\n\n\n
                                                                          • font-size: 16px  <\/li>\n\n\n\n
                                                                          • border-color: #d2d2d2 <\/li>\n\n\n\n
                                                                          • border- weight: 1px <\/li>\n\n\n\n
                                                                          • border-radius: 3px <\/li>\n<\/ul>\n\n\n\n

                                                                            Especifica\u00e7\u00f5es Input-Descri\u00e7\u00e3o:<\/strong> <\/p>\n\n\n\n

                                                                            11 – PESQUISAR<\/strong><\/p>\n\n\n\n

                                                                            O componente de pesquisar \u00e9 apresentado em dois modelos de layout. <\/p>\n\n\n\n

                                                                            11.1 – Modelo 01 \u2013 Pesquisa dentro de accordion <\/p>\n\n\n\n

                                                                            O layout apresenta o t\u00edtulo dentro de um accordion, com 1 ou mais inputs e os bot\u00f5es de  <\/p>\n\n\n\n

                                                                            de Limpar <\/strong>(esquerda) e Pesquisar <\/strong>(direita). <\/p>\n\n\n\n

                                                                            O retorno da pesquisa exibe uma tabela de listagem, como exemplificado na imagem abaixo. <\/p>\n\n\n\n

                                                                            Obs: (Os padr\u00f5es de cada um dos itens que comp\u00f5e o layout, est\u00e3o descritos separadamente em cada um dos t\u00f3picos da MDS.)  <\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            11.2 – Pesquisa dentro de uma tabela <\/strong><\/p>\n\n\n\n

                                                                            O layout apresenta um \u00fanico input de pesquisar e o retorno da pesquisa, exibe a tabela  <\/p>\n\n\n\n

                                                                            de listagem, como exemplificado na imagem abaixo. <\/p>\n\n\n\n

                                                                            Obs: (Os padr\u00f5es de cada um dos itens que comp\u00f5e o layout, est\u00e3o descritos separadamente em cada um dos t\u00f3picos da MDS.) <\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            12 – PAGINA\u00c7\u00c3O<\/strong><\/p>\n\n\n\n

                                                                            O padr\u00e3o de exibi\u00e7\u00e3o dos registros, ser\u00e1 sempre cinco itens por p\u00e1gina.<\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            A pagina\u00e7\u00e3o deve seguir o seguinte modelo dos elementos: <\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            \u00c9 poss\u00edvel definir a quantidade de registros por p\u00e1gina (m\u00ednimo 5 e m\u00e1ximo 50) : <\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            13 – ALERT\/INFO<\/strong>
                                                                            Hoje o sistema possui 3 tipos de mensagens de alerta e informa\u00e7\u00e3o.<\/p>\n\n\n\n

                                                                            Exemplo 1<\/strong><\/p>\n\n\n\n

                                                                            \"\"<\/figure>\n\n\n\n

                                                                            Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                              \n
                                                                            • font-color: #686868 <\/li>\n\n\n\n
                                                                            • \u00a0font weight: bold<\/li>\n\n\n\n
                                                                            • \u00a0font-size: 22px\u00a0<\/li>\n\n\n\n
                                                                            • bg-color: #ffd993<\/li>\n<\/ul>\n\n\n\n

                                                                              Exemplo 2<\/strong><\/p>\n\n\n\n

                                                                              \"\"<\/figure>\n\n\n\n

                                                                              Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                                \n
                                                                              • font-color: #ffffff <\/li>\n\n\n\n
                                                                              •  font weight: regular <\/li>\n\n\n\n
                                                                              •  font-size: 19px <\/li>\n\n\n\n
                                                                              • bg-color: #ed0000 <\/li>\n<\/ul>\n\n\n\n

                                                                                Exemplo 3<\/strong><\/p>\n\n\n\n

                                                                                Outro modelo \u00e9 o alert atrav\u00e9s de um tooltip<\/p>\n\n\n\n

                                                                                \"\"<\/figure>\n\n\n\n

                                                                                Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                                  \n
                                                                                • font-color: #686868 <\/li>\n\n\n\n
                                                                                •  font weight: regular <\/li>\n\n\n\n
                                                                                •  font-size: 19px <\/li>\n\n\n\n
                                                                                • bg-color: # ffffff\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                                                  Exemplo 4<\/strong><\/p>\n\n\n\n

                                                                                  \"\"<\/figure>\n\n\n\n

                                                                                  Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                                    \n
                                                                                  • font-color: #686868 <\/li>\n\n\n\n
                                                                                  •  font weight: regular <\/li>\n\n\n\n
                                                                                  • \u00a0font-size: 23px<\/li>\n\n\n\n
                                                                                  • bg-color: # ffffff\u00a0<\/li>\n<\/ul>\n\n\n\n

                                                                                    *Seguir as especifica\u00e7\u00f5es j\u00e1 mencionadas para as regras dos bot\u00f5es. (4 \u2013 BOT\u00d5ES)<\/strong>\u00a0\u00a0<\/p>\n\n\n\n

                                                                                    14 – CARDS DE ANEXO<\/strong><\/p>\n\n\n\n

                                                                                    Os componentes de card de anexo seguem a estrutura da imagem abaixo.  <\/p>\n\n\n\n

                                                                                    Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                                      \n
                                                                                    •  font weight: regular <\/li>\n\n\n\n
                                                                                    •  font-size: 19px <\/li>\n<\/ul>\n\n\n\n

                                                                                      *Bg cinza: # f1f1f1 <\/p>\n\n\n\n

                                                                                      *Bg dos \u00edcones: #d6f2de <\/p>\n\n\n\n

                                                                                      *Cor dos \u00edcones: ##686868 <\/p>\n\n\n\n

                                                                                      *M\u00e1ximo 4 cards por grid <\/p>\n\n\n\n

                                                                                      *Incluir Campo de Pesquisa <\/p>\n\n\n\n

                                                                                      \"\"<\/figure>\n\n\n\n

                                                                                      15 – TOOLTIPS<\/strong><\/p>\n\n\n\n

                                                                                      O tooltip dever\u00e1 ser inserido nos \u00edcones de a\u00e7\u00f5es do sistema e quando mais for necess\u00e1rio. O layout possui o padr\u00e3o exemplificado na imagem abaixo. <\/p>\n\n\n\n

                                                                                      \"\"<\/figure>\n\n\n\n

                                                                                      Especifica\u00e7\u00f5es:<\/strong> <\/p>\n\n\n\n

                                                                                        \n
                                                                                      • font-color: #ffffff <\/li>\n\n\n\n
                                                                                      •  font weight: regular <\/li>\n\n\n\n
                                                                                      •  font-size: 16px <\/li>\n\n\n\n
                                                                                      • bg-color: #686868 <\/li>\n\n\n\n
                                                                                      • padding: 12px <\/li>\n<\/ul>\n","protected":false},"featured_media":0,"parent":0,"menu_order":8,"template":"","class_list":["post-406","v1","type-v1","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/wp-json\/wp\/v2\/v1\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/wp-json\/wp\/v2\/v1"}],"about":[{"href":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/wp-json\/wp\/v2\/types\/v1"}],"wp:attachment":[{"href":"https:\/\/gerais.defensoria.mg.def.br\/metodologia-de-desenvolvimento\/wp-json\/wp\/v2\/media?parent=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}