Square Cloud Design System
La nostra identità visiva, le linee guida del brand e le risorse per sviluppatori e partner.
Il nostro brand
Scopri il significato e l'identità che riflettono i nostri valori.
I due quadrati
Il logo di Square Cloud è composto da due quadrati posizionati a un angolo specifico, formando una struttura che evoca la forma di un container Docker.
Simbolismo
Solidità e affidabilità
I due quadrati rappresentano una base solida e robusta.
Flessibilità e scalabilità
La forma del container evoca adattabilità e crescita.
Logo primario
La variante principale del nostro logo. Usalo nei tuoi progetti e nelle tue comunicazioni.
Per sfondi scuri
Usa su sfondi scuri o neutri
Per sfondi chiari
Usa su sfondi bianchi o chiari
Download del logo primario
Disponibile in più formati. Scegli .svg per la massima scalabilità o .webp per una migliore compressione.
Logo Icon (Senza testo)
Versione compatta ideale per favicon, avatar di piccole dimensioni e applicazioni dove lo spazio è limitato.
Icon per sfondi scuri
Solo il simbolo, senza testo
Icon per sfondi chiari
Solo il simbolo, senza testo
Download
Disponibile in più formati. Scegli .svg per la scalabilità o .png per una migliore compatibilità.
Varianti speciali
Loghi arrotondati
Ideali per avatar, icone di app e piattaforme che richiedono bordi arrotondati.
Completamente arrotondato
Angoli arrotondati al 100%
Semi-arrotondato
Angoli leggermente arrotondati
Guida all'uso corretto
Segui queste linee guida per mantenere l'integrità del brand Square Cloud
Cosa fare
Spaziatura minima
Mantieni sempre uno spazio minimo intorno al logo
File vettoriali
Usa sempre le versioni SVG o WEBP originali
Colori ufficiali
Rispetta esattamente i colori definiti del brand
Proporzione originale
Mantieni sempre la proporzione originale del logo
Cosa evitare
Non alterare i colori
Non cambiare i colori del logo per nessun motivo
Non distorcere
Non allungare, comprimere o ruotare il logo
Nessun effetto
Non aggiungere ombre, gradienti o effetti
Contrasto sufficiente
Non usare su sfondi a basso contrasto
Palette di colori
La nostra palette di colori scelta con cura per creare un'esperienza visiva coerente.
Colori primari
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
Colori di sfondo
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
Colori semantici
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
Colori del testo
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
Tipografia
Usiamo Inter per i testi generali e Fira Code per il codice.
Inter (Sans-serif)
Per titoli, paragrafi ed elementi dell'interfaccia
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (Monospace)
Per il codice e gli elementi tecnici
const hello = 'world';
<> {} [] () => != === ++
Scala tipografica
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.875remBadge e risorse
Risorse pronte all'uso per i tuoi progetti, repository e documentazione.
Powered by Square Cloud
Badge per mostrare che il tuo progetto è ospitato su Square Cloud.
Banner
Banner versatile da usare nei repository GitHub e su altre piattaforme. Migliore qualità con background.webp. Per dimensioni più compatte, usa github-readme.png
background.webp (Consigliato)
Alta qualità per repository e documentazione
README.md
