Square Cloud Design System
Unsere visuelle Identität, Markenrichtlinien und Ressourcen für Entwickler und Partner.
Unsere Marke
Entdecken Sie die Bedeutung und Identität, die unsere Werte widerspiegeln.
Die zwei Quadrate
Das Logo von Square Cloud besteht aus zwei in einem bestimmten Winkel angeordneten Quadraten, die eine Struktur bilden, die an die Form eines Docker-Containers erinnert.
Symbolik
Solidität und Zuverlässigkeit
Die zwei Quadrate stehen für ein solides und robustes Fundament.
Flexibilität und Skalierbarkeit
Die Containerform steht für Anpassungsfähigkeit und Wachstum.
Primäres Logo
Die Hauptvariante unseres Logos. Verwenden Sie sie in Ihren Projekten und Ihrer Kommunikation.
Für dunkle Hintergründe
Auf dunklen oder neutralen Hintergründen verwenden
Für helle Hintergründe
Auf weißen oder hellen Hintergründen verwenden
Download des primären Logos
In mehreren Formaten verfügbar. Wählen Sie .svg für maximale Skalierbarkeit oder .webp für bessere Kompression.
Logo-Icon (ohne Text)
Kompakte Version, ideal für Favicons, kleine Avatare und Anwendungen mit begrenztem Platz.
Icon für dunkle Hintergründe
Nur Symbol, ohne Text
Icon für helle Hintergründe
Nur Symbol, ohne Text
Downloads
In mehreren Formaten verfügbar. Wählen Sie .svg für Skalierbarkeit oder .png für bessere Kompatibilität.
Spezielle Varianten
Abgerundete Logos
Ideal für Avatare, App-Icons und Plattformen, die abgerundete Kanten erfordern.
Vollständig abgerundet
100 % abgerundete Ecken
Halb abgerundet
Leicht abgerundete Ecken
Leitfaden zur korrekten Verwendung
Befolgen Sie diese Richtlinien, um die Integrität der Marke Square Cloud zu wahren
Was Sie tun sollten
Mindestabstand
Halten Sie stets einen Mindestabstand um das Logo ein
Vektordateien
Verwenden Sie stets die originalen SVG- oder WEBP-Versionen
Offizielle Farben
Respektieren Sie die exakt definierten Markenfarben
Originalproportion
Behalten Sie stets die Originalproportion des Logos bei
Was Sie vermeiden sollten
Farben nicht ändern
Ändern Sie die Logofarben unter keinen Umständen
Nicht verzerren
Das Logo nicht strecken, stauchen oder drehen
Keine Effekte
Fügen Sie keine Schatten, Verläufe oder Effekte hinzu
Ausreichender Kontrast
Nicht auf Hintergründen mit geringem Kontrast verwenden
Farbpalette
Unsere sorgfältig ausgewählte Farbpalette für ein konsistentes visuelles Erlebnis.
Primärfarben
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
Hintergrundfarben
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
Semantische Farben
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
Textfarben
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
Typografie
Wir verwenden Inter für allgemeinen Text und Fira Code für Code.
Inter (Sans-serif)
Für Überschriften, Absätze und UI-Elemente
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (Monospace)
Für Code und technische Elemente
const hello = 'world';
<> {} [] () => != === ++
Typografische Skala
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 & Ressourcen
Sofort einsetzbare Ressourcen für Ihre Projekte, Repositories und Dokumentation.
Powered by Square Cloud
Badge, um zu zeigen, dass Ihr Projekt auf Square Cloud gehostet wird.
Banner
Vielseitiges Banner für GitHub-Repositories und andere Plattformen. Beste Qualität mit background.webp. Für eine kompaktere Größe verwenden Sie github-readme.png
background.webp (Empfohlen)
Hohe Qualität für Repositories und Dokumentation
README.md
