Square Cloud 设计系统
我们的视觉识别、品牌指南以及供开发者和合作伙伴使用的资源。
我们的品牌
了解反映我们价值观的含义和标识。
两个方块
Square Cloud 的标志由两个以特定角度放置的方块组成，形成一个让人联想到 Docker 容器的结构。
象征意义
坚固与可靠
这两个方块代表了坚实稳固的基础。
灵活性与可扩展性
容器的形状象征着适应能力和增长。
主标志
我们标志的主要版本。请在您的项目和交流中使用它。
适用于深色背景
用于深色或中性背景
适用于浅色背景
用于白色或浅色背景
下载主标志
提供多种格式。选择 .svg 以获得最大的可缩放性，或选择 .webp 以获得更好的压缩效果。
标志图标（无名称）
紧凑版本，非常适合网站图标 (favicons)、小头像和空间有限的应用场景。
适用于深色背景的图标
仅图标，无文字
适用于浅色背景的图标
仅图标，无文字
下载
提供多种格式。选择 .svg 以获得可缩放性，或选择 .png 以获得更好的兼容性。
特殊变体
圆形标志
非常适合头像、应用程序图标和需要圆角的平台。
全圆角
100% 圆角
半圆角
轻微圆角
正确使用指南
遵循这些准则以保持 Square Cloud 品牌的完整性
应该做
最小间距
始终保持标志周围的最小空间
矢量文件
始终使用原始的 SVG 或 WEBP 版本
官方颜色
严格遵守定义的品牌颜色
原始比例
始终保持标志的原始比例
避免做
不要更改颜色
无论出于何种原因，都不要更改标志颜色
不要变形
不要拉伸、压缩或旋转标志
无特效
不要添加阴影、渐变或特效
足够的对比度
不要在低对比度的背景上使用
调色板
我们精心挑选的调色板，旨在创造一致的视觉体验。
主色
Blue 700
#1d4ed8
Cor primária principal
Blue 800
#1e40af
Hover states
Blue 400
#60a5fa
Links e accents
Blue 900
#1e3a8a
Fundos especiais
背景色
Square 950
#07080a
Background principal
Square 900
#0c0d12
Background secundário
Square 800
#0b0e13
Cards e modais
Square 700
#11151b
Elementos elevados
语义色
Green 700
#15803d
Success
Red 600
#d52d37
Error / Danger
Yellow 600
#ca8a04
Warning
Indigo 600
#4f46e5
Info
文本色
Square 50
#f0f0f2
Texto primário
Square 100
#d1d2d6
Texto secundário
Square 300
#8e9097
Texto muted
排版
一般文本使用 Inter，代码使用 Fira Code。
Inter (无衬线体)
用于标题、段落和 UI 元素
Aa Bb Cc Dd Ee Ff
1234567890
Fira Code (等宽字体)
用于代码和技术元素
const hello = 'world';
<> {} [] () => != === ++
排版比例
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.875rem徽章与资源
可直接用于您的项目、代码库和文档的资源。
Powered by Square Cloud
显示您的项目托管在 Square Cloud 上的徽章。
横幅
用于 GitHub 仓库和其他平台的多功能横幅。推荐使用 background.webp 以获得最佳质量。若需更紧凑的尺寸，请使用 github-readme.png
background.webp (推荐)
用于仓库和文档的高质量图片
README.md
