Square Cloud Logo und Marke
Logo als SVG und PNG, Symbol, Badge „Powered by Square Cloud“, offizielle Farben und Schriften, mit den Regeln für ihre Verwendung.
Markensteckbrief
- Name
- Square Cloud: zwei Wörter, mit großem S und C, in allen Sprachen gleich
- Firmenname
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- Hauptfarbe
- Blau #1447E6 (blue-700), bei Buttons und wichtigen Aktionen
- Schriften
- Inter in der Oberfläche und Fira Mono für Code, beide bei Google Fonts
- Symbol
- Zwei diagonal versetzte Quadrate, immer in nur einer Farbe: Weiß oder Schwarz
- Logo als SVG
- https://cdn.squarecloud.app/assets/logo.svg
Das Symbol
Zwei diagonal versetzte Quadrate, die zusammen die Form eines Containers andeuten. Wo sie sich überschneiden, schneidet das vordere Quadrat das hintere an.
Logo
Verwenden Sie das vollständige Logo, wann immer Platz ist. Das Symbol allein ist für Favicons, Avatare und kleine Flächen gedacht.
Vollständiges Logo
Für dunkle Hintergründe
Für helle Hintergründe
Symbol
Versionen ohne Namen, auch mit abgerundeten Ecken für Avatare und App-Icons.
Für dunkle Hintergründe
Für helle Hintergründe
Abgerundet
Leicht abgerundet
Regeln zur Verwendung
Halten Sie den Schutzraum und die Mindestgröße ein und verwenden Sie das Symbol genau so, wie es ist.
Richtige Verwendung
Strecken oder Stauchen
Drehen
Farbe ändern
Schatten oder Effekte
Mit einem anderen Namen bedrängen
Den Namen neu zeichnen
Hintergrund mit geringem Kontrast
Die Regeln zur Schreibweise des Namens und zur kommerziellen Nutzung der Marke finden Sie in den Markenrichtlinien.
Badge „Powered by Square Cloud“
Zeigen Sie, dass Ihr Projekt bei Square Cloud gehostet wird. Der Text des Badges ist immer auf Englisch, unabhängig von der Sprache Ihrer Website.
Dunkel
Hell
Blau
Nur Symbol, dunkel
Nur Symbol, hell
Nur Symbol, blau
So binden Sie es ein
Verweisen Sie auf die offizielle Datei, statt das Badge zu kopieren. Für eine andere Variante ersetzen Sie powered-by.svg durch den Namen der heruntergeladenen Datei.
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>Farben
Dies sind die Tokens im Code. Die Oberfläche verwendet die semantischen Namen (--background, --primary …), deren Wert zwischen dunklem und hellem Theme wechselt.
Marke
--primary
Buttons und primäre Aktionen
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
Fokus im hellen Theme
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
Links im dunklen Theme
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
Dunkles Theme
--background
Seitenhintergrund
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
Karten und Panels
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
Hervorhebung beim Hover
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
Dezente Flächen
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
Rahmen und Trennlinien
square-600 · #111417
oklch(0.189 0.008 248.23)
--foreground
Haupttext
square-50 · #e2e6ea
oklch(0.923 0.007 247.87)
--muted-foreground
Sekundärtext
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
Erfolg
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
Warnung
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
Fehler und destruktive Aktionen
red-500 · #e84b54
Helles Theme
--background
Seitenhintergrund
light-50 · #ffffff
oklch(1 0 0)
--card
Karten und Panels
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
Dezente Flächen
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
Rahmen und Trennlinien
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
Sekundärtext
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
Haupttext
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
Erfolg
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
Warnung
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
Fehler und destruktive Aktionen
red-600 · #d52d37
Typografie
Inter für die gesamte Oberfläche und Fira Mono für Code, Befehle und technische Werte.
--font-inter
Inter
Überschriften, Text und Oberfläche.
Aa Bb Cc
400500600700
--font-fira
Fira Mono
Code, Befehle und technische Zahlen.
0123456789
{ } [ ] ( ) => != === 512 MB
Banner
Für den Anfang von READMEs und Dokumentation. background.webp hat höhere Qualität; github-readme.png ist eine kleinere Datei.
background.webp (empfohlen)
github-readme.png (kompakt)
Häufige Fragen
Was am häufigsten zu Logo, Farben und Markennutzung gefragt wird.
Darf ich das Square-Cloud-Logo in meinem Projekt verwenden?
Ja, um zu zeigen, dass das Projekt bei Square Cloud gehostet wird oder sich damit integriert, ohne das Logo zu verändern. Andere kommerzielle Nutzungen erfordern eine schriftliche Genehmigung. Die vollständigen Regeln finden Sie in den Richtlinien zur Markennutzung.
Wo kann ich das Square-Cloud-Logo als SVG herunterladen?
Im Abschnitt Logo auf dieser Seite: SVG und PNG für dunkle und helle Hintergründe, das vollständige Logo mit Namen als WEBP sowie Versionen mit abgerundeten Ecken für Avatare und App-Icons.
Welche Farbe hat Square Cloud?
Das Blau #1447E6, das blue-700 von Tailwind (oklch(0.488 0.243 264.376)), verwendet bei Buttons und wichtigen Aktionen. Das Symbol verwendet diese Farbe nicht: Es erscheint nur in Weiß oder Schwarz.
Welche Schrift verwendet Square Cloud?
Inter in der gesamten Oberfläche und Fira Mono für Code, Befehle und technische Werte. Beide sind kostenlos und bei Google Fonts verfügbar.
Wie zeige ich, dass mein Projekt bei Square Cloud gehostet wird?
Mit dem Badge „Powered by Square Cloud“. Binden Sie https://cdn.squarecloud.app/assets/powered-by.svg mit 36 px Höhe und einem Link auf squarecloud.app ein. Es gibt eine dunkle, eine helle und eine blaue Version sowie eine nur mit dem Symbol.
Wie wird der Markenname geschrieben?
Square Cloud, in zwei Wörtern, mit großem S und C, in allen Sprachen gleich. Schreibweisen wie SquareCloud, Squarecloud oder Abkürzungen sind nicht der Markenname.