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.

Baixar Manual

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

Baixar Assets

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>