Square Cloud デザインシステム
開発者とパートナーのためのビジュアルアイデンティティ、ブランドガイドライン、リソースです。
私たちのブランド
私たちの価値観を映し出す意味とアイデンティティをご紹介します。
2つのスクエア
Square Cloudのロゴは特定の角度で配置された2つの正方形で構成され、Dockerコンテナの形を想起させる構造を成しています。
シンボリズム
堅牢さと信頼性
2つの正方形は、堅固で揺るぎない基盤を表しています。
柔軟性とスケーラビリティ
コンテナの形は、適応力と成長を想起させます。
プライマリロゴ
ロゴのメインバリエーションです。プロジェクトやコミュニケーションでご利用ください。
ダーク背景用
暗い背景やニュートラルな背景で使用
ライト背景用
白や明るい背景で使用
プライマリロゴのダウンロード
複数のフォーマットで利用できます。最大限のスケーラビリティには.svgを、より高い圧縮率には.webpを選んでください。
ロゴアイコン（テキストなし）
ファビコン、小さなアバター、スペースが限られた用途に最適なコンパクト版です。
ダーク背景用アイコン
シンボルのみ、テキストなし
ライト背景用アイコン
シンボルのみ、テキストなし
ダウンロード
複数のフォーマットで利用できます。スケーラビリティには.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
