Square Cloud Sistema de diseño
Nuestra identidad visual, directrices de marca y recursos para desarrolladores y socios.
Nuestra marca
Conoce el significado y la identidad que reflejan nuestros valores.
Los dos cuadrados
El logo de Square Cloud está compuesto por dos cuadrados posicionados en un ángulo específico, formando una estructura que evoca la forma de un contenedor Docker.
Simbolismo
Solidez y confiabilidad
Los dos cuadrados representan una base sólida y robusta.
Flexibilidad y escalabilidad
La forma del contenedor evoca adaptabilidad y crecimiento.
Logo primario
La variación principal de nuestro logo. Úsalo en tus proyectos y comunicaciones.
Para fondos oscuros
Úsalo en fondos oscuros o neutros
Para fondos claros
Úsalo en fondos blancos o claros
Descargar logo primario
Disponible en múltiples formatos. Elige .svg para máxima escalabilidad o .webp para mejor compresión.
Icono del logo (sin nombre)
Versión compacta ideal para favicons, avatares pequeños y aplicaciones donde el espacio es limitado.
Icono para fondos oscuros
Solo el símbolo, sin texto
Icono para fondos claros
Solo el símbolo, sin texto
Descargas
Disponible en múltiples formatos. Elige .svg para escalabilidad o .png para mejor compatibilidad.
Variaciones especiales
Logos redondeados
Ideales para avatares, íconos de aplicaciones y plataformas que requieren bordes redondeados.
Totalmente redondeado
Esquinas 100% redondeadas
Semirredondeado
Esquinas ligeramente redondeadas
Guía de uso correcto
Sigue estas directrices para mantener la integridad de la marca Square Cloud
Qué hacer
Espaciado mínimo
Mantén siempre un espacio mínimo alrededor del logo
Archivos vectoriales
Usa siempre las versiones SVG o WEBP originales
Colores oficiales
Respeta exactamente los colores definidos de la marca
Proporción original
Mantén siempre la proporción original del logo
Qué evitar
No alteres los colores
No cambies los colores del logo por ningún motivo
No lo distorsiones
No estires, comprimas ni rotes el logo
Sin efectos
No agregues sombras, gradientes ni efectos
Contraste suficiente
No lo uses en fondos con bajo contraste
Paleta de colores
Nuestra paleta de colores cuidadosamente elegida para crear una experiencia visual consistente.
Colores primarios
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
Colores de fondo
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
Colores semánticos
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
Colores de texto
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
Tipografía
Utilizamos Inter para textos generales y Fira Code para código.
Inter (Sans-serif)
Para títulos, párrafos y elementos de interfaz
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (Monospace)
Para código y elementos técnicos
const hello = 'world';
<> {} [] () => != === ++
Escala tipográfica
Heading 1
H1
text-7xl / 4.5remHeading 2
H2
text-5xl / 3remHeading 3
H3
text-3xl / 1.875remHeading 4
H4
text-xl / 1.25remLarge Body Text
LG Body Text
text-lg / 1.125remBody Text
text-base / 1remSmall Text
text-sm / 0.875remBadges y recursos
Recursos listos para usar en tus proyectos, repositorios y documentación.
Powered by Square Cloud
Badge para mostrar que tu proyecto está alojado en Square Cloud.
Banner
Banner versátil para usar en repositorios de GitHub y otras plataformas. Mejor calidad con background.webp. Para un tamaño más compacto, utiliza github-readme.png
background.webp (recomendado)
Alta calidad para repositorios y documentación
README.md
