Square Cloud Design System
Nossa identidade visual, guidelines de marca e recursos para desenvolvedores e parceiros.
Nossa Marca
Conheça o significado e a identidade que refletem nossos valores.
Os dois Quadrados
O logo da Square Cloud é composto por dois quadrados posicionados em ângulo específico, formando uma estrutura que evoca a forma de um contêiner Docker.
Simbolismo
Solidez e Confiabilidade
Os dois quadrados representam uma base sólida e robusta.
Flexibilidade e Escalabilidade
A forma de contêiner evoca adaptabilidade e crescimento.
Logo Primário
A variação principal do nosso logo. Use-o em seus projetos e comunicações.
Para fundos escuros
Use em backgrounds escuros ou neutros
Para fundos claros
Use em backgrounds brancos ou claros
Download do Logo Primário
Disponível em múltiplos formatos. Escolha .svg para escalabilidade máxima ou .webp para melhor compressão.
Logo Icon (Sem Nome)
Versão compacta ideal para favicons, avatares pequenos e aplicações onde o espaço é limitado.
Icon para fundos escuros
Apenas o símbolo, sem texto
Icon para fundos claros
Apenas o símbolo, sem texto
Downloads
Disponível em múltiplos formatos. Escolha .svg para escalabilidade ou .png para melhor compatibilidade.
Variações Especiais
Logos Arredondados
Ideais para avatares, ícones de aplicações e plataformas que exigem bordas arredondadas.
Totalmente Arredondado
Cantos em 100% arredondados
Semi-Arredondado
Cantos levemente arredondados
Guia de Uso Correto
Siga estas diretrizes para manter a integridade da marca Square Cloud
O que Fazer
Espaçamento Mínimo
Mantenha sempre um espaço mínimo ao redor do logo
Arquivos Vetoriais
Use sempre as versões SVG ou WEBP originais
Cores Oficiais
Respeite exatamente as cores definidas da marca
Proporção Original
Mantenha sempre a proporção original do logo
O que Evitar
Não Altere Cores
Não mude as cores do logo por nenhum motivo
Não Distorça
Não estique, comprima ou rotacione o logo
Sem Efeitos
Não adicione sombras, gradientes ou efeitos
Contraste Suficiente
Não use em fundos com baixo contraste
Paleta de Cores
Nossa paleta de cores cuidadosamente escolhida para criar uma experiência visual consistente.
Cores Primárias
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
Cores de Fundo
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
Cores Semânticas
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
Cores de Texto
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
Tipografia
Utilizamos Inter para textos gerais e Fira Code para código.
Inter (Sans-serif)
Para títulos, parágrafos e elementos de UI
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (Monospace)
Para código e elementos técnicos
const hello = 'world';
<> {} [] () => != === ++
Escala Tipográfica
Heading 1
text-7xl / 4.5remHeading 2
text-5xl / 3remHeading 3
text-3xl / 1.875remHeading 4
text-xl / 1.25remLarge Body Text
text-lg / 1.125remBody Text
text-base / 1remSmall Text
text-sm / 0.875remBadges & Recursos
Recursos prontos para usar em seus projetos, repositórios e documentação.
Powered by Square Cloud
Badge para mostrar que seu projeto é hospedado na Square Cloud.
Banner
Banner versátil para usar em repositórios do GitHub e outras plataformas. Melhor qualidade com background.webp. Para um tamanho mais compacto, utilize github-readme.png
background.webp (Recomendado)
Alta qualidade para repositórios e documentação
README.md:
Precisa de mais recursos?
Entre em contato conosco para obter assets adicionais ou esclarecer dúvidas sobre o uso da marca.