Logo e marchio Square Cloud
Logo in SVG e PNG, simbolo, badge Powered by Square Cloud, colori e tipografia ufficiali, con le regole per usare ciascuno.
Scheda del marchio
- Nome
- Square Cloud: due parole, con S e C maiuscole, uguale in tutte le lingue
- Ragione sociale
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- Colore principale
- Blu #1447E6 (blue-700), su pulsanti e azioni principali
- Font
- Inter nell’interfaccia e Fira Mono nel codice, entrambi su Google Fonts
- Simbolo
- Due quadrati sfalsati in diagonale, sempre di un solo colore: bianco o nero
- Logo in SVG
- https://cdn.squarecloud.app/assets/logo.svg
Il simbolo
Due quadrati sfalsati in diagonale che insieme richiamano la forma di un container. Dove si incrociano, il quadrato anteriore taglia quello posteriore.
Logo
Usa il logo completo ogni volta che c’è spazio. Il simbolo da solo è per favicon, avatar e spazi ridotti.
Logo completo
Per sfondi scuri
Per sfondi chiari
Simbolo
Versioni senza il nome, comprese quelle ad angoli arrotondati per avatar e icone di app.
Per sfondi scuri
Per sfondi chiari
Arrotondato
Semi-arrotondato
Regole d’uso
Rispetta lo spazio libero e la dimensione minima, e usa il simbolo esattamente com’è.
Uso corretto
Allungare o schiacciare
Ruotare
Cambiare il colore
Ombre o effetti
Affollarlo con un altro nome
Ridisegnare il nome
Sfondo a basso contrasto
Le regole per scrivere il nome e per l’uso commerciale del marchio sono nelle Linee guida sul marchio.
Badge Powered by Square Cloud
Mostra che il tuo progetto è ospitato su Square Cloud. Il testo del badge è sempre in inglese, qualunque sia la lingua del tuo sito.
Scuro
Chiaro
Blu
Solo simbolo, scuro
Solo simbolo, chiaro
Solo simbolo, blu
Come incorporarlo
Punta al file ufficiale invece di copiare il badge. Per un’altra variante, sostituisci powered-by.svg con il nome del file che hai scaricato.
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>Colori
Questi sono i token nel codice. L’interfaccia usa i nomi semantici (--background, --primary…), che cambiano valore tra il tema scuro e quello chiaro.
Brand
--primary
Pulsanti e azioni principali
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
Focus nel tema chiaro
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
Link nel tema scuro
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
Tema scuro
--background
Sfondo della pagina
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
Card e pannelli
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
Evidenziazione al passaggio del mouse
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
Superfici tenui
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
Bordi e divisori
square-600 · #111417
oklch(0.189 0.008 248.23)
--foreground
Testo principale
square-50 · #e2e6ea
oklch(0.923 0.007 247.87)
--muted-foreground
Testo secondario
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
Successo
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
Avviso
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
Errori e azioni distruttive
red-500 · #e84b54
Tema chiaro
--background
Sfondo della pagina
light-50 · #ffffff
oklch(1 0 0)
--card
Card e pannelli
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
Superfici tenui
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
Bordi e divisori
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
Testo secondario
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
Testo principale
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
Successo
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
Avviso
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
Errori e azioni distruttive
red-600 · #d52d37
Tipografia
Inter in tutta l’interfaccia e Fira Mono per codice, comandi e valori tecnici.
--font-inter
Inter
Titoli, testo e interfaccia.
Aa Bb Cc
400500600700
--font-fira
Fira Mono
Codice, comandi e numeri tecnici.
0123456789
{ } [ ] ( ) => != === 512 MB
Banner
Per la parte alta di README e documentazione. background.webp ha qualità superiore; github-readme.png è un file più leggero.
background.webp (consigliato)
github-readme.png (compatto)
Domande frequenti
Cosa si chiede di più su logo, colori e uso del marchio.
Posso usare il logo di Square Cloud nel mio progetto?
Sì, per indicare che il progetto è ospitato su Square Cloud o si integra con essa, senza modificare il logo. Altri usi commerciali richiedono un’autorizzazione scritta. Le regole complete sono nelle Linee guida per l’uso del marchio.
Dove scarico il logo di Square Cloud in SVG?
Nella sezione Logo di questa pagina: SVG e PNG per sfondi scuri e chiari, il logo completo con il nome in WEBP e versioni con angoli arrotondati per avatar e icone di app.
Qual è il colore di Square Cloud?
Il blu #1447E6, il blue-700 di Tailwind (oklch(0.488 0.243 264.376)), usato su pulsanti e azioni principali. Il simbolo non usa questo colore: appare solo in bianco o in nero.
Quale font usa Square Cloud?
Inter in tutta l’interfaccia e Fira Mono per codice, comandi e valori tecnici. Entrambi sono gratuiti e disponibili su Google Fonts.
Come mostro che il mio progetto è ospitato su Square Cloud?
Con il badge Powered by Square Cloud. Incorpora https://cdn.squarecloud.app/assets/powered-by.svg con altezza di 36 px e un link a squarecloud.app. Sono disponibili versioni scura, chiara, blu e solo simbolo.
Come si scrive il nome del marchio?
Square Cloud, in due parole, con S e C maiuscole, uguale in tutte le lingue. Grafie come SquareCloud, Squarecloud o abbreviazioni non sono il nome del marchio.