Guia de Estilos - harmonização 2023

Guia de Estilos - Novo Facelift

NEWS

Painel

borderColor	#FFFFFF
bgColor	#FFFFFF

Section

Informações

icon	false

Deck of Cards

id
width	100%

page
effectType	fade

ICON

Card

id
default	true

icon
label	Conceito

Section

Column

width	50%

Image Removed

Image Added

Column

width	50%

Ícones minimalistas

O novo conceito de ícones minimalistas tem sido cada vez mais popular nos últimos anos. Os novos ícones apresentam um design limpo e moderno, com cores sólidas e monocromáticas, que conferem um visual mais uniforme e organizado ao produto. Além disso, esses ícones têm o objetivo de facilitar o reconhecimento das funcionalidades dos aplicativos de forma rápida e intuitiva.

Para criação de novos ícones, poderão ser utilizados os ícones disponíveis na biblioteca PO-UI ou os ícones desenvolvidos no projeto de harmonização. Caso não exista ícone disponível, um novo ícone poderá ser criado respeitando as devidas medidas dos atuais, com as cores apresentadas

na aba "Paleta de Cores" deste

nas respectivas abas de cada tipo de ícone abordados neste documento.

TOOLBAR

Card

id

toolbar
label	Ícones de Toolbar

DESABILITADO

Section

Ícones de Toolbar

Os ícones

desenhados

para toolbar devem manter o formato de largura 28 pixels e altura 27 pixels para garantir uma aparência uniforme e organizada na barra de ferramentas. Além disso, é importante salvá-los em formato PNG para manter a qualidade da imagem e sem perda de dados.

Os botões possuem dois estados, habilitado e desabilitado, que devem ser identificados visualmente por meio de paletas de cores diferentes. As cores adequadas para cada estado estarão disponíveis abaixo.

warning

Informações
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir.

Section

Column

width	50%

Estado

colour	Green
title	HABILITADO

HTML
<html> <head> <style> .

boxmenu

box {
        width:

50px

70px;
        height:

50px

70px;
        background-color:

#164659

#F2F0CE;

display: inline-block;

        margin-

left

right:

20px

10px;
      }

margin-right: 20px;

 .blue{

margin

background-

bottom

color:

20px

#164659;
      }
	.boxen {
		width: 70px;
		height: 70px;
		background-color: #F2F0CE;
		margin-right: 10px;
		display: inline-block;
	}      
	.

boxenable

label {

width

display:

50px

inline-block;

height

vertical-align:

50px

top;
      }
    </style>

background-color: #f2f0ce;

</head>
  <body>
<div class="box blue"></div>
    <div

display: inline-block; margin-left: 20px;

class="label"><b>Cor de Fundo<br>RGB:</b> 22  70  89<br><b>HEX:</b> #164659</div>
    <br>
    <br>

margin-right: 20px; margin-bottom: 20px; }

<div class="boxen"></div>
    <div class="label"><b>Cor do Ícone<br>RGB:</b> 153  152  130<br><b>HEX:</b> #F2F0CE</div>
      </body>
</html>

Column

width	50%

Estado

colour	Red
title	DESABILITADO

HTML
<html> <head> <style> .

boxdisable

box {
        width:

50px

70px;
        height: 70px;
        display:

50px

inline-block;
        background-color:

#999882

#000000;

display

margin-right:

inline-block

10px;
      }

margin-right: 20px;

    .blue {
        background-color: #164659;
      }

margin-bottom: 20px

   .disable {
        background-color: #999882;
      }

text

label {
        display: inline-block;
        vertical-align: top;

 </style>
  </head>
  <body>
    <div class="

boxmenu

box blue"></div>
    <div class="

text

label"

> Cor

><b>Cor de

fundo <br> RGB:

Fundo<br>RGB:</b> 22

89 <br> HEX: #164659 <

89<br><b>HEX:</b> #164659</div>
    <br>

<div

class="boxenable"></div> <div class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div> <br>


	<br> 
    <div class="

boxdisable

box disable"></div>
    <div class="

text">RGB:

label"><b>Cor do Ícone<br>RGB:</b> 153   152

130<br>HEX

130<br><b>HEX:

#999882 <

</b> #999882</div>

<br>

 </body>
</html>

Aviso
Os ícones de toolbar deverão ser salvos em:.../progress/src/image/2023/toolbar

Como criar novos ícones de Toolbar

Para criar novos ícones utilize um editor de imagens capaz de manipular vetores, como o InkScape, e siga os seguintes passos:

Criar um novo arquivo com 28 pixels de largura e 27 pixels de altura.
Adicionar o fundo com a cor da toolbar (Código HEXADECIMAL: #164659).
Image Added
Desenhar o ícone, respeitando as seguintes medidas: 17,5 pixels de altura, 17,5 pixels de largura e 3,5 pixels de espessura, as bordas deverão estar arredondadas, utilizando a inclinação entre 35~40º.
Image Added
Após finalizar o desenho, é importante verificar se o ícone está alinhado corretamente ao centro e em proporção adequada com as dimensões da imagem.
Exportar o arquivo como PNG, para manter a qualidade da imagem e sem perda de dados.

Estado

colour

Red

title

SCREEN

Card

id

screen
label	Ícones de Tela

Section

Ícones de Tela

Os ícones de tela devem ser criados de acordo com o tamanho dos botões, para garantir uma proporção adequada e uma boa aparência na interface. Além disso, é necessário salvá-los em formato BMP (24-bits), para que a qualidade da imagem seja mantida.

Informações
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir.

Section

Column

width	50%

Estado


colour	Green
title	HABILITADO

HTML
<html> <head>

<title>Três Caixas com Cor de Fundo #CCCCCC</title>


    <style>
      .

boxmenu

box {
        width:

90px

70px;
        height:

90px

70px;
        background-color:

#164659

#F2F0CE;

  display: inline-block;

        margin-

left

right:

20px;

10px;
      }
      .blue{

margin

background-

right

color:

20px

#164659;
      }
	.boxen {
		width: 70px;
		height: 70px;
		background-color: #F2F0CE;
		margin-

bottom

right:

20px

10px;
		display: inline-block;
	}
	.boxgrey{
		width: 70px;
		height: 70px;
		background-color: #C0C0C0;
		margin-right: 10px;
		display: inline-block;
}

.boxenable


	.label {

width

display:

90px

inline-block;

height

vertical-align:

90px

top;

background-color: #f2f0ce;

}
    </style>
  </head>
  <body>
<div class="boxgrey"></div>
    <div class="label"><b>Cor de Fundo<br>RGB:</b> 192

display: inline-block;

 192  192<br><b>HEX:</b> #C0C0C0</div>
    <br>
    <br>

margin-left: 90px; margin-bottom: 20px; }

<div class="box blue"></div>
    <div class="label"><b>Cor do Ícone<br>RGB:</b> 22  70  89<br><b>HEX:</b> #164659</div>
      </body>
</html>

Column

width	50%

Estado

colour	Red
title	DESABILITADO

HTML
<html> <head> <style> .

boxdisable

box {
        width:

90px

70px;
        height:

90px

70px;

background-color

display:

#999882

inline-block;

display

background-color:

inline-block

#000000;
        margin-right:

20px

10px;

margin-bottom: 20px

}
      .blue {
        background-color: #164659;
      }

text

disable {

display

background-color:

inline-block

#999882;
      }

vertical-align: top;

.label {

font-family

display:

Courier New

inline-block;

font

vertical-

weight

align:

bold

top;

 </style>
  </head>
  <body>
    <div class="

boxmenu

boxgrey"></div>
    <div class="

text

label"

>RGB:

><b>Cor de

22

Fundo<br>RGB:</b> 192

70

89<br>HEX: #164659 <

192<br><b>HEX:</b> #C0C0C0</div>
    <br>

<div

class="boxenable"></div> <div class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>


	<br>

<br>

<div class="

boxdisable

box disable"></div>
    <div class="

text">RGB:

label"><b>Cor do Ícone<br>RGB:</b> 153   152

130<br>HEX

130<br><b>HEX:

#999882 <

</b> #999882</div>

<br>

 </body>
</html>

Column

width	50%

Aviso
Os ícones de tela deverão ser salvos em:.../progress/src/image

Como criar novos ícones de Tela

Para criar novos ícones utilize um editor de imagens capaz de manipular vetores, como o InkScape, e siga os seguintes passos:

Ícones de Tela

Os ícones de tela devem ser criados de acordo com o tamanho dos botões, para garantir uma proporção adequada e uma boa aparência na interface. Além disso, é necessário salvá-los em formato

Criar um novo arquivo com as dimensões de altura e largura do botão.
Adicionar o fundo com a cor da tela (Código HEXADECIMAL: #C0C0C0).
Image Added
Desenhar o ícone, respeitando as medidas proporcionais ao botão e 1,5 pixels de espessura, as bordas deverão estar arredondadas, utilizando a inclinação entre 35~40º.
Image Added
Após finalizar o desenho, é importante verificar se o ícone está alinhado corretamente ao centro e em proporção adequada com as dimensões da imagem.
1. Exportar o arquivo como

1. BMP (24-bits), para

que

1. manter a qualidade da imagem

seja mantida

1. e sem perda de dados.

Árvore de páginas

Versões comparadas

Versão antiga 11

Nova versão Atual

Chave

Guia de Estilos - harmonização 2023

Guia de Estilos - Novo Facelift

Ícones minimalistas

Ícones de Toolbar

Como criar novos ícones de Toolbar

Ícones de Tela

Como criar novos ícones de Tela

Ícones de Tela

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 11

Nova versão Atual

Chave

Guia de Estilos - harmonização 2023

Guia de Estilos - Novo Facelift

Ícones minimalistas

Ícones de Toolbar

Como criar novos ícones de Toolbar

Ícones de Tela

Como criar novos ícones de Tela

Ícones de Tela