Logo et marque Square Cloud

Logo en SVG et PNG, symbole, badge Powered by Square Cloud, couleurs et typographie officielles, avec les règles pour utiliser chacun.

Fiche de la marque

Nom: Square Cloud : deux mots, avec un S et un C majuscules, identique dans toutes les langues
Raison sociale: SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
Couleur principale: Bleu #1447E6 (blue-700), sur les boutons et les actions principales
Polices: Inter pour l’interface et Fira Mono pour le code, toutes deux sur Google Fonts
Symbole: Deux carrés décalés en diagonale, toujours d’une seule couleur : blanc ou noir
Logo en SVG: https://cdn.squarecloud.app/assets/logo.svg
Badge: https://cdn.squarecloud.app/assets/powered-by.svg

Le symbole

Deux carrés décalés en diagonale qui évoquent ensemble la forme d’un conteneur. Là où ils se croisent, le carré avant découpe celui de l’arrière.

Le L bleu est le coin du carré arrière visible à travers le carré avant.

Logo

Utilisez le logo complet dès qu’il y a de la place. Le symbole seul est réservé aux favicons, aux avatars et aux petits espaces.

Logo complet

Pour fonds sombres

Pour fonds clairs

Symbole

Versions sans le nom, dont des variantes à coins arrondis pour les avatars et les icônes d’application.

Pour fonds sombres

Pour fonds clairs

Arrondi

Semi-arrondi

Règles d’utilisation

Respectez la zone de protection et la taille minimale, et utilisez le symbole exactement tel qu’il est.

Aucun texte, bordure ou autre élément n’entre dans la zone en pointillés. La valeur de x suit la taille : pour un symbole de 48 px, x ≈ 7,7 px.

Bon usage

Étirer ou écraser

Faire pivoter

Changer la couleur

Ombres ou effets

Le surcharger avec un autre nom

Redessiner le nom

Fond à faible contraste

Les règles d’écriture du nom et d’usage commercial de la marque figurent dans les Directives relatives à la marque.

Badge Powered by Square Cloud

Montrez que votre projet est hébergé sur Square Cloud. Le texte du badge est toujours en anglais, quelle que soit la langue de votre site.

Sombre

Clair

Bleu

Symbole seul, sombre

Symbole seul, clair

Symbole seul, bleu

Toutes les mesures sont relatives à la hauteur, le badge s’adapte donc à toutes les tailles sans perdre sa forme. Le texte est dessiné en contours et ne nécessite aucune police installée.

Comment l’intégrer

Pointez vers le fichier officiel au lieu de copier le badge. Pour une autre variante, remplacez powered-by.svg par le nom du fichier que vous avez téléchargé.

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>

Couleurs

Voici les tokens du code. L’interface utilise les noms sémantiques (--background, --primary…), dont la valeur change entre les thèmes sombre et clair.

Cet écran est dessiné avec les tokens eux-mêmes : changez le thème du site et il change avec lui.

Marque

--primary

Boutons et actions principales

blue-700 · #1447e6

oklch(0.488 0.243 264.376)

--ring

Focus dans le thème clair

blue-600 · #155dfc

oklch(0.546 0.245 262.881)

--text-link

Liens dans le thème sombre

blue-400 · #51a2ff

oklch(0.707 0.165 254.624)

Thème sombre

--background

Arrière-plan de la page

square-950 · #030405

oklch(0.105 0.005 244.28)

--card

Cartes et panneaux

square-900 · #060709

oklch(0.128 0.006 262.01)

--accent

Surbrillance au survol

square-800 · #090b0e

oklch(0.149 0.007 258.04)

--muted

Surfaces discrètes

square-700 · #0f1114

oklch(0.177 0.007 258.37)

--border

Bordures et séparateurs

square-600 · #111417

oklch(0.189 0.008 248.23)

--foreground

Texte principal

square-50 · #e2e6ea

oklch(0.923 0.007 247.87)

--muted-foreground

Texte secondaire

text-muted · #86909f

oklch(0.65 0.025 257.51)

--success

Succès

green-500 · #00c950

oklch(0.723 0.219 149.579)

--warning

Avertissement

yellow-500 · #f0b100

oklch(0.795 0.184 86.047)

--destructive

Erreurs et actions destructrices

red-500 · #e84b54

Thème clair

--background

Arrière-plan de la page

light-50 · #ffffff

oklch(1 0 0)

--card

Cartes et panneaux

light-100 · #fafafb

oklch(0.985 0.001 264)

--muted

Surfaces discrètes

light-200 · #f1f2f3

oklch(0.96 0.002 264)

--border

Bordures et séparateurs

light-300 · #e3e5e6

oklch(0.92 0.003 257)

--muted-foreground

Texte secondaire

light-700 · #565b62

oklch(0.47 0.013 257)

--foreground

Texte principal

square-950 · #030405

oklch(0.105 0.005 244.28)

--success

Succès

green-700 · #008236

oklch(0.527 0.154 150.069)

--warning

Avertissement

yellow-700 · #a65f00

oklch(0.554 0.135 66.442)

--destructive

Erreurs et actions destructrices

red-600 · #d52d37

Typographie

Inter pour toute l’interface et Fira Mono pour le code, les commandes et les valeurs techniques.

Mesures d’Inter : capitales à 0,73 de la taille de la police et hauteur d’x à 0,55.

--font-inter

Inter

Titres, texte et interface.

Aa Bb Cc

400500600700

--font-fira

Fira Mono

Code, commandes et nombres techniques.

0123456789

{ } [ ] ( ) => != === 512 MB

Questions fréquentes

Ce que l’on demande le plus sur le logo, les couleurs et l’usage de la marque.

Puis-je utiliser le logo Square Cloud dans mon projet ?

Oui, pour indiquer que le projet est hébergé sur Square Cloud ou s’intègre à elle, sans modifier le logo. Les autres usages commerciaux nécessitent une autorisation écrite. Les règles complètes figurent dans les Directives d’utilisation de la marque.

Où télécharger le logo Square Cloud en SVG ?

Dans la section Logo de cette page : SVG et PNG pour fonds sombres et clairs, le logo complet avec le nom en WEBP et des versions aux coins arrondis pour les avatars et les icônes d’application.

Quelle est la couleur de Square Cloud ?

Le bleu #1447E6, le blue-700 de Tailwind (oklch(0.488 0.243 264.376)), utilisé sur les boutons et les actions principales. Le symbole n’utilise pas cette couleur : il apparaît uniquement en blanc ou en noir.

Quelle police Square Cloud utilise-t-elle ?

Inter dans toute l’interface et Fira Mono pour le code, les commandes et les valeurs techniques. Les deux sont gratuites et disponibles sur Google Fonts.

Comment indiquer que mon projet est hébergé sur Square Cloud ?

Avec le badge Powered by Square Cloud. Intégrez https://cdn.squarecloud.app/assets/powered-by.svg avec 36 px de hauteur et un lien vers squarecloud.app. Des versions sombre, claire, bleue et symbole seul sont disponibles.

Comment s’écrit le nom de la marque ?

Square Cloud, en deux mots, avec un S et un C majuscules, identique dans toutes les langues. Des graphies comme SquareCloud, Squarecloud ou des abréviations ne sont pas le nom de la marque.

Prêt à faire évoluer votre projet ?

Rejoignez les plus de 500 000 développeurs qui ont utilisé Square Cloud pour héberger leurs projets.

Commencez dès maintenant sur Square CloudAccéder au tableau de bord

Tarifs prévisibles
Aucune surprise de facturation
Déployez en quelques secondes
Haute disponibilité
Évoluez en toute stabilité
Redémarrage automatique
SSL et sécurité inclus
Conteneurs isolés