Square Cloud のロゴとブランド
SVG と PNG のロゴ、シンボル、Powered by Square Cloud バッジ、公式のカラーとタイポグラフィ、それぞれの使い方のルール。
ブランド概要
- 名称
- Square Cloud：2 語で、S と C は大文字、すべての言語で共通
- 会社名
- SQUARE CLOUD LTDA · CNPJ 51.893.307/0001-08
- メインカラー
- ブルー #1447E6（blue-700）、ボタンと主要なアクションに使用
- フォント
- UI には Inter、コードには Fira Mono。どちらも Google Fonts で提供
- シンボル
- 対角線上にずらした 2 つの正方形。常に白または黒の単色
シンボル
対角線上にずらした2つの正方形が、合わさってコンテナの形を思わせます。重なる部分では、手前の正方形が奥の正方形を切り取ります。
ロゴ
スペースがあるときは、フルロゴを使用してください。シンボル単体は、ファビコン、アバター、小さなスペース向けです。
フルロゴ
暗い背景用
明るい背景用
シンボル
名前なしのバージョン。アバターやアプリアイコン向けの角丸も含みます。
暗い背景用
明るい背景用
角丸
小さめの角丸
使用ルール
クリアスペースと最小サイズを守り、シンボルはそのまま使用してください。
正しい使い方
伸ばす、つぶす
回転させる
色を変える
影やエフェクトを付ける
他の名前と詰めて並べる
名前を描き直す
コントラストの低い背景
名称の表記ルールとブランドの商用利用については、商標ガイドラインをご覧ください。
Powered by Square Cloud バッジ
プロジェクトが Square Cloud でホスティングされていることを示せます。バッジの文字は、サイトの言語にかかわらず常に英語です。
ダーク
ライト
ブルー
シンボルのみ、ダーク
シンボルのみ、ライト
シンボルのみ、ブルー
埋め込み方法
バッジをコピーせず、公式のファイルを指定してください。別のバリアントを使うには、powered-by.svg をダウンロードしたファイルの名前に置き換えます。
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>カラー
コード内のトークンです。インターフェースはセマンティックな名前(--background、--primary など)を使い、その値はダークテーマとライトテーマで切り替わります。
ブランド
--primary
ボタンとプライマリアクション
blue-700 · #1447e6
oklch(0.488 0.243 264.376)
--ring
ライトテーマでのフォーカス
blue-600 · #155dfc
oklch(0.546 0.245 262.881)
--text-link
ダークテーマでのリンク
blue-400 · #51a2ff
oklch(0.707 0.165 254.624)
ダークテーマ
--background
ページの背景
square-950 · #030405
oklch(0.105 0.005 244.28)
--card
カードとパネル
square-900 · #060709
oklch(0.128 0.006 262.01)
--accent
ホバー時のハイライト
square-800 · #090b0e
oklch(0.149 0.007 258.04)
--muted
控えめな面
square-700 · #0f1114
oklch(0.177 0.007 258.37)
--border
枠線と区切り線
square-600 · #111417
oklch(0.189 0.008 248.23)
--foreground
メインのテキスト
square-50 · #e2e6ea
oklch(0.923 0.007 247.87)
--muted-foreground
補助のテキスト
text-muted · #86909f
oklch(0.65 0.025 257.51)
--success
成功
green-500 · #00c950
oklch(0.723 0.219 149.579)
--warning
警告
yellow-500 · #f0b100
oklch(0.795 0.184 86.047)
--destructive
エラーと破壊的なアクション
red-500 · #e84b54
ライトテーマ
--background
ページの背景
light-50 · #ffffff
oklch(1 0 0)
--card
カードとパネル
light-100 · #fafafb
oklch(0.985 0.001 264)
--muted
控えめな面
light-200 · #f1f2f3
oklch(0.96 0.002 264)
--border
枠線と区切り線
light-300 · #e3e5e6
oklch(0.92 0.003 257)
--muted-foreground
補助のテキスト
light-700 · #565b62
oklch(0.47 0.013 257)
--foreground
メインのテキスト
square-950 · #030405
oklch(0.105 0.005 244.28)
--success
成功
green-700 · #008236
oklch(0.527 0.154 150.069)
--warning
警告
yellow-700 · #a65f00
oklch(0.554 0.135 66.442)
--destructive
エラーと破壊的なアクション
red-600 · #d52d37
タイポグラフィ
インターフェース全体に Inter、コード、コマンド、技術的な値に Fira Mono を使用します。
--font-inter
Inter
見出し、本文、インターフェース。
Aa Bb Cc
400500600700
--font-fira
Fira Mono
コード、コマンド、技術的な数値。
0123456789
{ } [ ] ( ) => != === 512 MB
バナー
README やドキュメントの冒頭用です。background.webp は高品質で、github-readme.png はファイルサイズが小さめです。
background.webp(推奨)
github-readme.png(コンパクト)
よくある質問
ロゴ、カラー、ブランドの使い方についてよく寄せられる質問です。
Square Cloud のロゴを自分のプロジェクトで使えますか？
はい。プロジェクトが Square Cloud でホスティングされている、または連携していることを示す目的で、ロゴを改変せずに使えます。それ以外の商用利用には書面による許可が必要です。詳しいルールはブランド使用ガイドラインをご覧ください。
SVG の Square Cloud ロゴはどこでダウンロードできますか？
このページの「ロゴ」セクションです。暗い背景と明るい背景向けの SVG と PNG、名称入りの完全なロゴ（WEBP）、アバターやアプリアイコン向けの角丸バージョンを用意しています。
Square Cloud のブランドカラーは何ですか？
ブルー #1447E6、つまり Tailwind の blue-700（oklch(0.488 0.243 264.376)）で、ボタンと主要なアクションに使います。シンボルにはこの色を使わず、白か黒だけで表示します。
Square Cloud はどのフォントを使っていますか？
UI 全体に Inter、コード、コマンド、技術的な値には Fira Mono を使っています。どちらも無料で、Google Fonts で入手できます。
プロジェクトが Square Cloud でホスティングされていることを示すには？
Powered by Square Cloud バッジを使います。https://cdn.squarecloud.app/assets/powered-by.svg を高さ 36 px で埋め込み、squarecloud.app へのリンクを付けてください。ダーク、ライト、ブルー、シンボルのみのバージョンがあります。
ブランド名はどう表記しますか？
Square Cloud と、2 語で、S と C は大文字、すべての言語で共通です。SquareCloud、Squarecloud、略称はブランド名ではありません。