# Identidade Visual da CGTI

# Logo da CGTI

<p class="callout info">A construção completa do logo pode ser acessa neste [Arquivo do Figma](https://www.figma.com/file/12CQAIiVCAzmyzfmXvCdxR/2023-04-CGTI?type=design&node-id=1128-3765&mode=design)</p>

[![file cover - 1.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/scaled-1680-/file-cover-1.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/file-cover-1.png)

### Uso incorreto

<span style="color: rgb(0, 0, 0); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">Não altere a tipografia do logo</span>

<span style="color: rgb(0, 0, 0); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/scaled-1680-/Llkimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/Llkimage.png)</span>

<span style="background-color: rgb(224, 62, 45);"><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; background-color: rgb(255, 255, 255);">Não altere as cores do logo</span></span>

[![Frame 25.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/scaled-1680-/frame-25.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/frame-25.png)

<span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">Não deforme nem corte o logo pra caber em alguma aplicação</span>

[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/scaled-1680-/DSbimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2024-08/DSbimage.png)

### Aplicações

## Download do logo

- [Horizontal Colorido ](http://arquivos.sorocaba.sp.gov.br:8080/share/s/yCa-ne_3Q9207ikdxwJP1Q)
- [Horizontal Colorido Branco](http://arquivos.sorocaba.sp.gov.br:8080/share/s/LgK9bbb6RlWjGqg9EcDrhg)
- [Horizontal Monocromático Preto](http://arquivos.sorocaba.sp.gov.br:8080/share/s/6ML62cXxRYmnEwQKsFtPyg)
- [Horizontal Monocromático Branco](http://arquivos.sorocaba.sp.gov.br:8080/share/s/KYM2ggX9TtKv6xzrCarxHg)
- [Vertical Colorido](http://arquivos.sorocaba.sp.gov.br:8080/share/s/39ps4KxiTnuLjI8WY5CdLg)
- [Vertical Colorido Branco](http://arquivos.sorocaba.sp.gov.br:8080/share/s/HMzC9DudQPqmsN89x82BWA)
- [Vertical Monocromático Preto](http://arquivos.sorocaba.sp.gov.br:8080/share/s/fs0W1-E7TqqwuW2BVwmcjA)
- [Vertical Monocromático Branco](http://arquivos.sorocaba.sp.gov.br:8080/share/s/4MQTxigMQxWvKsI7jHXv9Q)

# Tipografia

A tipografia está presente na maioria das interações do usuários com a CGTi. Ela está em nossos sistemas, páginas web e e-mails contribuindo para como a marca será percebida. Assim é importante que a escolha adequada de fontes seja utilizada.

<p class="callout info">**Destaques** - Sempre que possível utilize Space Grotesk para os cabeçalhos e peças de design gráfico.  
- Raleway e Lato serão as fontes do conteúdo do texto ou de interface.  
- Em mídias descentralizados, como e-mails ou documentos, escolha uma fonte de sistema para evitar problemas ao usuário.</p>

### Pilha de Tipos

- Space Grotesk ([link](https://fonts.google.com/specimen/Space+Grotesk))
- Noto Sans

### O Tipo para cada contexto

Estamos presentes em contextos diversos, por isso quando não houver controle sobre como nossa fonte será usada temos de nívelar pelo que o usuário possui em seu computador.

<table border="1" id="bkmrk-m%C3%ADdia-fonte-do-cabe%C3%A7" style="border-collapse: collapse; width: 100%; height: 147.172px;"><colgroup><col style="width: 19.5303%;"></col><col style="width: 23.6094%;"></col><col style="width: 23.6094%;"></col><col style="width: 33.3745%;"></col></colgroup><tbody><tr style="height: 46.5938px;"><td style="height: 46.5938px;">**Contexto**</td><td>**Fonte em Imagens  
(design Gráfico)**</td><td style="height: 46.5938px;">**Fonte do Cabeçalho**</td><td style="height: 46.5938px;">**Fonte do Texto ou UI**</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Web</td><td>Space Grotesk</td><td style="height: 29.7969px;">Space Grotesk</td><td style="height: 29.7969px;">Noto Sans</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Papelaria

</td><td>Space Grotesk</td><td style="height: 35.3906px;">Arial</td><td style="height: 35.3906px;">Arial</td></tr><tr><td>Documentos Digitais

</td><td>Space Grotesk</td><td>Arial</td><td>Arial</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">E-mail

</td><td>Space Grotesk</td><td style="height: 35.3906px;">Arial</td><td style="height: 35.3906px;">Arial</td></tr></tbody></table>

#### Alternativas do sistema

Windows:

- sem serifa: Lato ou Arial
- com serifa: Times New Roman

Android:

- Noto ou Roboto

Ecosistema Apple:

- SF Sans

#### Exemplos de Aplicações

<table border="1" id="bkmrk-exemplo-de-e-mail-ca" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/scaled-1680-/lAYimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/lAYimage.png)  
</td><td>[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/scaled-1680-/8Kwimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/8Kwimage.png)</td></tr><tr><td>**Exemplo de e-mail**

Cabeçalho, botões e rodapé são imagens que usam Space Grotesk.

Texto em Arial.

</td><td>**Exemplo de poster (desatualizado)**

Cabeçalho em Space Grotesk

Texto em Raleway

</td></tr><tr><td>  
</td><td>  
</td></tr><tr><td>  
</td><td>  
</td></tr></tbody></table>