Logo y marca de Square Cloud
Logo en SVG y PNG, símbolo, sello Powered by Square Cloud, colores y tipografía oficiales, con las reglas para usar cada uno.
Ficha de la marca
- Nombre
- Square Cloud: dos palabras, con S y C mayúsculas, igual en todos los idiomas
- Razón social
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- Color principal
- Azul #1447E6 (blue-700), en botones y acciones principales
- Fuentes
- Inter en la interfaz y Fira Mono en código, ambas en Google Fonts
- Símbolo
- Dos cuadrados desplazados en diagonal, siempre en un solo color: blanco o negro
- Logo en SVG
- https://cdn.squarecloud.app/assets/logo.svg
El símbolo
Dos cuadrados desplazados en diagonal que juntos evocan la forma de un contenedor. Donde se cruzan, el cuadrado frontal recorta al de atrás.
Logotipo
Usa el logotipo completo siempre que haya espacio. El símbolo solo es para favicons, avatares y espacios pequeños.
Logotipo completo
Para fondos oscuros
Para fondos claros
Símbolo
Versiones sin el nombre, incluidas las de esquinas redondeadas para avatares e iconos de aplicaciones.
Para fondos oscuros
Para fondos claros
Redondeado
Semirredondeado
Reglas de uso
Respeta el espacio libre y el tamaño mínimo, y usa el símbolo exactamente como es.
Uso correcto
Estirar o aplastar
Rotar
Cambiar el color
Sombras o efectos
Saturarlo con otro nombre
Redibujar el nombre
Fondo de bajo contraste
Las reglas para escribir el nombre y para el uso comercial de la marca están en las Directrices de marca.
Insignia Powered by Square Cloud
Muestra que tu proyecto está alojado en Square Cloud. El texto de la insignia siempre está en inglés, sea cual sea el idioma de tu sitio.
Oscura
Clara
Azul
Solo símbolo, oscura
Solo símbolo, clara
Solo símbolo, azul
Cómo insertarla
Apunta al archivo oficial en lugar de copiar la insignia. Para otra variante, reemplaza powered-by.svg por el nombre del archivo que descargaste.
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>Colores
Estos son los tokens del código. La interfaz usa los nombres semánticos (--background, --primary…), que cambian de valor entre los temas oscuro y claro.
Marca
--primary
Botones y acciones principales
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
Foco en el tema claro
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
Enlaces en el tema oscuro
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
Tema oscuro
--background
Fondo de la página
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
Tarjetas y paneles
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
Resaltado al pasar el cursor
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
Superficies sutiles
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
Bordes y 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 secundario
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
Éxito
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
Advertencia
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
Errores y acciones destructivas
red-500 · #e84b54
Tema claro
--background
Fondo de la página
light-50 · #ffffff
oklch(1 0 0)
--card
Tarjetas y paneles
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
Superficies sutiles
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
Bordes y divisores
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
Texto secundario
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
Texto principal
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
Éxito
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
Advertencia
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
Errores y acciones destructivas
red-600 · #d52d37
Tipografía
Inter en toda la interfaz y Fira Mono para código, comandos y valores técnicos.
--font-inter
Inter
Títulos, texto e interfaz.
Aa Bb Cc
400500600700
--font-fira
Fira Mono
Código, comandos y números técnicos.
0123456789
{ } [ ] ( ) => != === 512 MB
Banner
Para la parte superior de los README y la documentación. background.webp tiene mayor calidad; github-readme.png es un archivo más pequeño.
background.webp (recomendado)
github-readme.png (compacto)
Preguntas frecuentes
Lo que más se pregunta sobre el logo, los colores y el uso de la marca.
¿Puedo usar el logo de Square Cloud en mi proyecto?
Sí, para indicar que el proyecto está alojado en Square Cloud o se integra con ella, sin modificar el logo. Otros usos comerciales requieren autorización por escrito. Las reglas completas están en las Directrices de Uso de la Marca.
¿Dónde descargo el logo de Square Cloud en SVG?
En la sección Logo de esta página: SVG y PNG para fondos oscuros y claros, el logo completo con el nombre en WEBP y versiones con esquinas redondeadas para avatares e iconos de aplicación.
¿Cuál es el color de Square Cloud?
El azul #1447E6, el blue-700 de Tailwind (oklch(0.488 0.243 264.376)), usado en botones y acciones principales. El símbolo no usa ese color: aparece solo en blanco o en negro.
¿Qué fuente usa Square Cloud?
Inter en toda la interfaz y Fira Mono para código, comandos y valores técnicos. Las dos son gratuitas y están en Google Fonts.
¿Cómo muestro que mi proyecto está alojado en Square Cloud?
Con el sello Powered by Square Cloud. Incrusta https://cdn.squarecloud.app/assets/powered-by.svg con 36 px de alto y un enlace a squarecloud.app. Hay versiones oscura, clara, azul y solo con el símbolo.
¿Cómo se escribe el nombre de la marca?
Square Cloud, en dos palabras, con S y C mayúsculas, igual en todos los idiomas. Grafías como SquareCloud, Squarecloud o abreviaturas no son el nombre de la marca.