Visão geral
Manual de uso das cores e tipografia do CPS Front-end e download de arquivos para designers, tais como fonts de texto ou logotipos de Etecs, Fatecs, Centro Paula Souza e Governo do Estado de São Paulo.
Conteúdo
Download
É possível baixar o manual completo é através da página de identidade visual do Centro Paula Souza. Tambem disponibilizamos para download arquivos de mídia (logos em .SVG) para designers.
Identidade Visual do Centro Paula Souza (PDF)
A Identidade Visual estabelece um padrão de aplicação do logotipo do Centro Paula Souza associado ao do Governo do Estado e traz exemplos de aplicação da marca.
Observe atentamente a data da última atualização dos arquivos, antes de utilizá-los.
Atualizado em setembro de 2015
Arquivos de mídia para designers (SVG)
Logos do Centro Paula Souza, Governo de SP, Etecs e Fatecs no formato .SVG
Tipografia
A identidade do Centro Paula Souza possui uma família de letras que forma uma linguagem específica. Nenhum outro tipo de letra deve ser usada fora as tipografias principal ou secundária.
Fonte corpo
A fonte Verdana foi utilizada para texto em geral da página.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
! ? @ # $ % ^ & * () [] {} ; < > / _ - + = ~ , .
0 1 2 3 4 5 6 7 8 9
Fonte cabeçalhos
A fonte Roboto foi utilizada para cabeçalhos de <h1>
a <h6>
. Optamos por essa família de fonte pela performace e ser idêntica a família Din, sugerida no manual de identidade visual do Centro Paula Souza.
Regular (500)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
! ? @ # $ % ^ & * () [] {} ; < > / _ - + = ~ , .
0 1 2 3 4 5 6 7 8 9
Negrito (700)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
! ? @ # $ % ^ & * () [] {} ; < > / _ - + = ~ , .
0 1 2 3 4 5 6 7 8 9
Cores
Além da cor principal, usadas em Fatecs/Etecs/CPS, criamos alguns tons de cinza para complementar a cor principal do layout. Além disso, tambem disponibilizamos cores especiais, destinada para projetos específicos, como sites promocionais.
Principal
Padronizamos uma cor principal para sites de Fatecs e Etecs.
Por padrão, já efeitamos o CPS Front-end com esta cor nos principais elementos HTML.
Principal CPS/Etec/Fatec (Vermelho)
#C21D16
Tons cinza
Esses tons são usado em todo o layout, procure não usar outra variação de cinza fora os abaixo.
Branco
branco
#FFFFFF
Cinza Claro Extra
cinza-claro-extra
#DDE4E7
Cinza Claro
cinza-claro
#94A9B1
Cinza
cinza
#688590
Cinza Escuro
cinza-escuro
#4D6269
Cinza Escuro Extra
cinza-escuro-extra
#283337
Específicas
Use essas cores em projetos específicos, como por exemplo: sites promocionais (eventos, vestibular entre outros).
teal
#00897B
cyan
#429A8A
green
#4EA26A
light-green
#7CB342
lime
#C0CA33
yellow
#F9A825
orange
#EF6C00
pink
#D81B60
brown
#6D4C41
purple
#6E5494
deep-purple
#5E35B1
indigo
#3949AB
blue
#1668B9
light-blue
#3949AB
blue-grey
#546E7A
grey
#757575
Exemplo de uso
Criamos classes CSS de ajuda para as cores. Para cor, use .palette-X-color
e para fundos .palette-X-bg
.
Lorem ipsum dolor sit amet, consectetur...
Lorem ipsum dolor sit amet, consectetur...
Lorem ipsum dolor sit amet, consectetur...
Lorem ipsum dolor sit amet, consectetur...
Lorem ipsum dolor sit amet, consectetur...
Lorem ipsum dolor sit amet, consectetur...
<!-- Principal -->
<p class="palette-red-color">Lorem ipsum dolor sit amet, consectetur...</p>
<p class="palette-red-bg" style="color:#fff">Lorem ipsum dolor sit amet, consectetur...</p>
<!-- Tom Cinza -->
<p class="palette-cinza-escuro-extra-color">Lorem ipsum dolor sit amet, consectetur...</p>
<p class="palette-cinza-escuro-extra-bg" style="color:#fff">Lorem ipsum dolor sit amet, consectetur...</p>
<!-- Especial -->
<p class="palette-blue-color">Lorem ipsum dolor sit amet, consectetur...</p>
<p class="palette-blue-bg" style="color:#fff">Lorem ipsum dolor sit amet, consectetur...</p>
Template tema
Para alterar a cor de um template promocial, use a classe CSS .site-X
substituindo o X
pela cor desejada.
Veja nosso template tema promocional
<body class="site-blue">
...
<header class="cps-page-header">
<h1>Template Promocional</h1>
</header>
...
</body>