Square Cloud Design System
Notre identité visuelle, nos directives de marque et des ressources pour les développeurs et les partenaires.
Notre marque
Découvrez la signification et l’identité qui reflètent nos valeurs.
Les deux carrés
Le logo de Square Cloud se compose de deux carrés positionnés selon un angle précis, formant une structure qui évoque la forme d’un conteneur Docker.
Symbolisme
Solidité et fiabilité
Les deux carrés représentent une base solide et robuste.
Flexibilité et évolutivité
La forme du conteneur évoque l’adaptabilité et la croissance.
Logo principal
La variante principale de notre logo. Utilisez-la dans vos projets et communications.
Pour fonds sombres
À utiliser sur des fonds sombres ou neutres
Pour fonds clairs
À utiliser sur des fonds blancs ou clairs
Téléchargement du logo principal
Disponible en plusieurs formats. Choisissez .svg pour une évolutivité maximale ou .webp pour une meilleure compression.
Icône du logo (sans texte)
Version compacte idéale pour les favicons, les petits avatars et les applications où l’espace est limité.
Icône pour fonds sombres
Symbole seul, sans texte
Icône pour fonds clairs
Symbole seul, sans texte
Téléchargements
Disponible en plusieurs formats. Choisissez .svg pour l’évolutivité ou .png pour une meilleure compatibilité.
Variantes spéciales
Logos arrondis
Idéal pour les avatars, les icônes d’applications et les plateformes nécessitant des bords arrondis.
Entièrement arrondi
Coins arrondis à 100 %
Semi-arrondi
Coins légèrement arrondis
Guide de bon usage
Suivez ces directives pour préserver l’intégrité de la marque Square Cloud
À faire
Espacement minimal
Conservez toujours un espace minimal autour du logo
Fichiers vectoriels
Utilisez toujours les versions originales SVG ou WEBP
Couleurs officielles
Respectez les couleurs exactes définies pour la marque
Proportions d’origine
Conservez toujours les proportions d’origine du logo
À éviter
Ne pas modifier les couleurs
Ne modifiez les couleurs du logo sous aucun prétexte
Ne pas déformer
N’étirez, ne compressez et ne faites pas pivoter le logo
Sans effets
N’ajoutez pas d’ombres, de dégradés ni d’effets
Contraste suffisant
N’utilisez pas le logo sur des fonds à faible contraste
Palette de couleurs
Notre palette de couleurs soigneusement choisie pour créer une expérience visuelle cohérente.
Couleurs primaires
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
Couleurs d’arrière-plan
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
Couleurs sémantiques
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
Couleurs de texte
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
Typographie
Nous utilisons Inter pour le texte général et Fira Code pour le code.
Inter (Sans-serif)
Pour les titres, les paragraphes et les éléments d’interface
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (Monospace)
Pour le code et les éléments techniques
const hello = 'world';
<> {} [] () => != === ++
Échelle typographique
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 et ressources
Des ressources prêtes à l’emploi pour vos projets, dépôts et documentation.
Powered by Square Cloud
Badge pour montrer que votre projet est hébergé sur Square Cloud.
Bannière
Bannière polyvalente à utiliser dans les dépôts GitHub et sur d’autres plateformes. Meilleure qualité avec background.webp. Pour un format plus compact, utilisez github-readme.png
background.webp (recommandé)
Haute qualité pour les dépôts et la documentation
README.md
