Logo e marca da Square Cloud
Logo em SVG e PNG, símbolo, selo Powered by Square Cloud, cores e tipografia oficiais, com as regras para usar cada um.
Ficha da marca
- Nome
- Square Cloud: duas palavras, com S e C maiúsculos, igual em todos os idiomas
- Razão social
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- Cor principal
- Azul #1447E6 (blue-700), em botões e ações principais
- Fontes
- Inter na interface e Fira Mono em código, ambas no Google Fonts
- Símbolo
- Dois quadrados deslocados na diagonal, sempre em uma única cor: branco ou preto
- Logo em SVG
- https://cdn.squarecloud.app/assets/logo.svg
O símbolo
Dois quadrados deslocados na diagonal que, juntos, lembram a forma de um contêiner. Onde eles se cruzam, o quadrado da frente corta o de trás.
Logo
Use o logo completo sempre que houver espaço. O símbolo sozinho serve para favicons, avatares e espaços pequenos.
Logo completo
Para fundos escuros
Para fundos claros
Símbolo
Versões sem o nome, inclusive com cantos arredondados para avatares e ícones de aplicativo.
Para fundos escuros
Para fundos claros
Arredondado
Semiarredondado
Regras de uso
Respeite a área de proteção e o tamanho mínimo, e use o símbolo exatamente como ele é.
Uso correto
Esticar ou achatar
Girar
Trocar a cor
Sombra ou efeitos
Encostar outro nome
Redesenhar o nome
Fundo sem contraste
As regras para escrever o nome e para o uso comercial da marca estão nas Diretrizes de Uso da Marca.
Selo Powered by Square Cloud
Mostre que seu projeto está hospedado na Square Cloud. O texto do selo é sempre em inglês, em qualquer idioma do seu site.
Escuro
Claro
Azul
Só o símbolo, escuro
Só o símbolo, claro
Só o símbolo, azul
Como incorporar
Aponte para o arquivo oficial em vez de copiar o selo. Para outra variação, troque powered-by.svg pelo nome do arquivo que você baixou.
HTML
<a href="https://squarecloud.app" rel="noopener">
<img src="https://cdn.squarecloud.app/assets/powered-by.svg"
alt="Powered by Square Cloud" height="36">
</a>README (GitHub)
<a href="https://squarecloud.app"><img src="https://cdn.squarecloud.app/assets/powered-by.svg" alt="Powered by Square Cloud" height="36"></a>Cores
Estes são os tokens do código. A interface usa os nomes semânticos (--background, --primary…), que trocam de valor entre os temas escuro e claro.
Marca
--primary
Botões e ações principais
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
Foco no tema claro
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
Links no tema escuro
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
Tema escuro
--background
Fundo da página
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
Cards e painéis
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
Destaque de hover
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
Superfícies discretas
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
Bordas e divisores
square-600 · #111417
oklch(0.189 0.008 248.23)
--foreground
Texto principal
square-50 · #e2e6ea
oklch(0.923 0.007 247.87)
--muted-foreground
Texto secundário
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
Sucesso
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
Aviso
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
Erro e ações destrutivas
red-500 · #e84b54
Tema claro
--background
Fundo da página
light-50 · #ffffff
oklch(1 0 0)
--card
Cards e painéis
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
Superfícies discretas
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
Bordas e divisores
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
Texto secundário
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
Texto principal
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
Sucesso
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
Aviso
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
Erro e ações destrutivas
red-600 · #d52d37
Tipografia
Inter em toda a interface e Fira Mono para código, comandos e valores técnicos.
--font-inter
Inter
Títulos, textos e interface.
Aa Bb Cc
400500600700
--font-fira
Fira Mono
Código, comandos e números técnicos.
0123456789
{ } [ ] ( ) => != === 512 MB
Banner
Para o topo de READMEs e documentações. O background.webp tem mais qualidade; o github-readme.png é um arquivo menor.
background.webp (recomendado)
github-readme.png (compacto)
Perguntas frequentes
O que mais perguntam sobre o logo, as cores e o uso da marca.
Posso usar o logo da Square Cloud no meu projeto?
Sim, para dizer que o projeto está hospedado na Square Cloud ou se integra a ela, sem modificar o logo. Outros usos comerciais precisam de autorização por escrito. As regras completas estão nas Diretrizes de Uso da Marca.
Onde baixo o logo da Square Cloud em SVG?
Na seção Logo desta página: SVG e PNG para fundos escuros e claros, o logo completo com o nome em WEBP e versões com cantos arredondados para avatares e ícones de aplicativo.
Qual é a cor da Square Cloud?
O azul #1447E6, o blue-700 do Tailwind (oklch(0.488 0.243 264.376)), usado em botões e ações principais. O símbolo não usa essa cor: ele aparece só em branco ou em preto.
Qual fonte a Square Cloud usa?
Inter em toda a interface e Fira Mono para código, comandos e valores técnicos. As duas são gratuitas e estão no Google Fonts.
Como mostro que meu projeto está hospedado na Square Cloud?
Com o selo Powered by Square Cloud. Incorpore https://cdn.squarecloud.app/assets/powered-by.svg com 36 px de altura e um link para squarecloud.app. Há versões escura, clara, azul e só com o símbolo.
Como se escreve o nome da marca?
Square Cloud, em duas palavras, com S e C maiúsculos, igual em todos os idiomas. Grafias como SquareCloud, Squarecloud ou abreviações não são o nome da marca.