2本指
Aa
↑
↓
Official Brand Kit

BASECORD ロゴ

BASECORD で作ったアプリやホームページに入れる Powered by BASECORD と、その元になる正規ロゴをまとめたページです。 正となるのはこの画面の左上にあるヘッダーのロゴ（金のアナログ時計＋Cinzel の BASECORD）で、 ここに並ぶ見本はすべてその実コード（bc-header.css）と basecord.net トップの大時計から作っています。色も比率も足していません。

大時計（basecord.net トップと同一）
オフィシャルロゴ 公式ヘッダー

01標準ロゴ（ロックアップ）

時計マーク＋ワードマークの組み合わせが標準です。時計は実際に動きます（動きも含めてブランドの一部）。ヘッダー形には実時刻のデジタル表示と日付が付きますが、これは画面上の機能表示なので、他のサイトや印刷に置く静止ロゴにはマークと文字だけを使ってください。

正規版 / 濃色地既定。BASECORD ネイビー #1d2186 → #141863 の上に置く
Header form — 実時刻つき（この画面の左上と同じ）
BASECORD
00:00:00— —
Logo form — 静止ロゴの正（時刻表示なし）
BASECORD
時計マーク 74px ／ ワードマーク Cinzel 600・字送り .42em ／ 金グラデ #F4DDB2 → #C9A063 → #8C6A3A
ライト地版白・薄いグレー背景のとき。文字だけ濃い金に落とす
BASECORD
白地では明るい金が飛ぶため、文字は #C9A063 → #8C6A3A → #5A4220。時計マークは変えません（黒い文字盤がマークの identity）
1色版（モノクロ）印刷・FAX・刻印・1色印刷のとき
#1d2186 単色
BASECORD 1色ロゴ（ネイビー）
白ヌキ（濃色地に置くとき）
BASECORD 1色ロゴ（白ヌキ）
色は #1d2186 単色（黒・白でも可）。金グラデは使いません。basecord-monochrome.svg は currentColor 対応なので、インラインで貼れば親の文字色がそのまま乗ります

02アイコン単体（時計マーク）

favicon・アプリアイコン・SNS のプロフィール画像・狭い場所ではマークだけを使います。28px 未満では使わないでください（目盛りが潰れて別の丸に見えます）。

サイズ見本74 / 52 / 36 / 28 px
74px
52px
36px
28px 最小
36px 以下は目盛りを省いた assets/basecord-icon.svg の方が綺麗に出ます

03ワードマーク単体

すでに時計マークが近くにある場合や、横幅が足りない場合は文字だけを使います。

BASECORD / Cinzel 600・字送り .42em濃色地 → 明るい金 ／ 白地 → 濃い金
BASECORD
BASECORD
字送り（letter-spacing）を詰めないでください。詰めると別ブランドの字面になります

04Powered by BASECORD

BASECORD で作ったアプリ・ホームページの宣伝用に入れるバッジです。下の「コピー」を押して貼るだけで動きます （スタイルとアイコンを中に持っているので、貼る側の CSS・画像・フォント読み込みは不要）。置き場所はフッター右下または中央が標準です。

A. 標準ピル（濃色地）
既定。フッターが濃色のとき
B. 標準ピル（ライト地）
白・薄グレーのフッターのとき
C. 1行テキスト（最小）
著作表記の並びに混ぜるとき
D. 縦積み（幅が狭い場所）
スマホのフッター・サイドバー
E. 1色（親の文字色に従う）
色を使えない画面・印刷物
F. 画像1枚で済ませる
Powered by BASECORD
HTML を書けない場所（CMS 等）

貼り付け例（A. 標準ピル）


    
リンク先は https://www.basecord.ai/ を既定にしています。日本語の案内ページへ送りたい場合は https://www.basecord.net/ に差し替えてください。

  


  
  

    
05使用ルール

    

      
余白
ロゴの周囲に、時計マークの直径の 1/2 以上 の余白を空けます。他の文字・枠・写真を寄せないでください。

      
最小サイズ
ロックアップは横 160px 以上、アイコン単体は 28px 以上。それより小さい場所ではワードマークだけ、または「Powered by BASECORD」のテキスト版（C）を使います。

      
背景
推奨：BASECORD ネイビー（#1d2186 系）、黒、白、薄いグレー。
避ける：金色に近い背景、彩度の高い色、模様の細かい写真の上。写真に置く場合は濃い半透明の板を敷いてください。

      
色
金は #F4DDB2 / #E5C28B / #C9A063 / #8C6A3A / #5A4220、ネイビーは #1d2186。他の色に置き換えないでください（1色版は例外）。

      
やってはいけない
縦横比を変える／字送りを詰める／影・光彩・縁取りを足す／時計マークだけ回転させる／文字を別フォントに置き換える／マークと文字を離して別々に置く

      
フォント
ワードマーク＝Cinzel（600）、副題・日付＝Cormorant Garamond（italic）、本文＝Noto Sans JP。いずれも Google Fonts。

      
時計の動き
Web 上では動かして構いません（ベゼル30秒/周・秒針は実時刻）。印刷・静止画では 10:10 の定位置で止めます。

    

  


  
  

    
06素材のダウンロード

    
SVG（拡大しても劣化しない形式）です。右クリック→保存、または直接リンクして使えます。

    

      basecord-lockup-dark.svg標準ロゴ／濃色地・ネイビー板つき
      basecord-lockup-light.svg標準ロゴ／背景透明・白地用
      basecord-icon.svgアイコン単体（時計マーク・256px）
      basecord-wordmark.svgワードマーク単体（文字のみ）
      basecord-monochrome.svg1色版（currentColor 対応）
      powered-by-basecord.svgPowered by バッジ（画像1枚版）
    

    

      SVG の文字は Cinzel を指定していますが、<img> で読み込むと外部フォントが読めず serif に置き換わります。
      字面まで正確に出したい時は、上の「Powered by」のコピー用スニペット（Google Fonts を読む HTML 版）か、
      文字を含まない basecord-icon.svg を使ってください。
    

  


  

    BASECORD Official Brand Kit ／ 正は左上ヘッダーのロゴ（includes/bc-header.css）と basecord.net トップの大時計です。

    迷ったら色・比率を変えず、このページの見本をそのまま持っていってください。