Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

defaultyes
referenciaGuia de Estilos

...

borderColor#FFFFFF
bgColor#FFFFFF

Guia de Estilos - harmonização 2023

Novo FaceliftNEWS
Section
Informações
iconfalse
Deck of Cards
width100%
id
page
effectTypefade
ICON
Card
defaulttrue
id
icon
labelConceito
Section
Column
width50%
Image Removed

Image Added

Column
width50%

Í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

poderá

deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. 

Section
Column
width50%

Estado
colourGreen
titleHABILITADO


HTML
<html>
  <head>
    <style>
      .
boxmenu
box {
        width: 
90px
70px;
        height: 
90px
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: 
90px
inline-block;
        
height
vertical-align: 
90px
top;
      }
    </style>
  </head>
  
background-color: #f2f0ce; display: inline-block;
<body>
<div class="box blue"></div>
    <div class="label"><b>Cor de Fundo<br>RGB:</b> 22  70  89<br><b>HEX:</b> #164659</div>
    <br>
    <br>
    
margin-left: 90px;
<div class="boxen"></div>
    <div class="label"><b>Cor do 
margin-bottom: 20px;       }
Ícone<br>RGB:</b> 153  152  130<br><b>HEX:</b> #F2F0CE</div>
      </body>
</html>
Column
width50%

Estado
colourRed
titleDESABILITADO


HTML
<html>
  <head>
    <style>
      .
boxdisable
box {
        width: 
90px
70px;
        height:
90px
 70px;
        display: inline-block;
        background-color: 
#999882
#000000;
        
display
margin-right: 
inline-block
10px;
      }
  
margin-right: 20px;
    .blue {
        background-color: #164659;
      }
      .disable {
  
margin-bottom
      background-color: 
20px
#999882;
      }

      .
text
label {
        display: inline-block;
        vertical-align: top;
   
 
 
 
 
 
 
 
}
  
 
 
 </style>
  </head>
  <body>
    <div class="
boxmenu
box blue"></div>
    <div class="
text">RGB:
label"><b>Cor de Fundo<br>RGB:</b> 22   
70   
89<br>HEX
89<br><b>HEX:
#164659 <
</b> #164659</div>
    <br>
 
  
<div
 
class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>    <div class="boxenable"></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: 

  1. Criar um novo arquivo com 28 pixels de largura e 27 pixels de altura.
  2. Adicionar o fundo com a cor da toolbar (Código HEXADECIMAL: #164659).
    Image Added
  3. 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
  4. 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.
  5. Exportar o arquivo como PNG, para manter a qualidade da imagem e sem perda de dados.
Estado
colourRed
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
width50%

Estado
colourGreen
titleHABILITADO


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;
      
margin-right: 20px
}
      .blue{
        background-color: #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;
      }
    </style>
  </head>
  
background-color: #f2f0ce;
<body>
<div class="boxgrey"></div>
    <div class="label"><b>Cor de Fundo<br>RGB:</b> 192  192 
display
 192<br><b>HEX:
inline-block;
</b> #C0C0C0</div>
    <br>
    <br>
    
margin-left: 90px;
<div class="box blue"></div>
    <div class="label"><b>Cor do 
margin-bottom: 20px;
Ícone<br>RGB:</b> 22  70  89<br><b>HEX:</b> #164659</div>
      
  }
</body>
</html>
Column
width50%

Estado
colourRed
titleDESABILITADO


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
192  
89<br>HEX: #164659 <
192<br><b>HEX:</b> #C0C0C0</div>
    <br>
 
  
<div
 
class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>    <div class="boxenable"></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
width50%
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
  1. Criar um novo arquivo com as dimensões de altura e largura do botão.
  2. Adicionar o fundo com a cor da tela (Código HEXADECIMAL: #C0C0C0).
    Image Added
  3. 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
  4. 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.