byteTuto ブランドガイドライン
コンセプト : ▶_ — 動画の再生ボタンであり、端末のプロンプトでもあるシンボル。
タグライン : 「テクノロジーを、1バイトずつ学ぼう。」
ブランド名は常に byteTuto と表記します（本文中では Bytetuto、ByteTuto、BYTETUTO とは書きません）。
カラー（トークン）
| トークン | ライトモード | ダークモード | 用途 |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | ページ背景 |
| surface-raised | #FFFFFF | #171B22 | カード、コードブロック |
| ink | #0E1116 | #F2F1EC | 本文テキスト |
| ink-muted | #565B66 | #A3A8B3 | 補助テキスト |
| line | #DDDBD2 | #2A2F38 | 罫線、ドット模様 |
| byte | #B8F03C | #B8F03C | シグネチャーグリーン：タイル、主要ボタン、ベタ塗り |
| byte-ink | #3B6B00 | #B8F03C | テキストとして使うときのグリーン |
| byte-tint | #E9F9C8 | #24300F | 薄い背景色、バッジ |
| on-byte | #0E1116 | #0E1116 | byte または spark の上に置くテキスト |
| spark | #FF5A1F | #FF6B33 | 希少なアクセント：画面に1つだけ |
| tile | #0E1116 | #1E232C | 暗いベタ塗り、ヘッダーバー |
| danger | #C4320A | #FF7A5C | エラー表示のみ |
ルール：
- ライトモードの背景上で
byte（#B8F03C）をテキストに使用しない →byte-inkを使用。 byteまたはsparkの上に白いテキストを置かない →on-byteを使用。- ロゴにグラデーションやドロップシャドウを使用しない。「ネオン」の光り方はアニメーションの装飾であり、ロゴそのものではない。
- テキストと背景のコントラスト比は 4.5:1 以上。
タイポグラフィ（Google Fonts）
- Space Grotesk 700（見出し、文字間隔 -0.02em ～ -0.03em）
- IBM Plex Sans 400/600（本文）
- JetBrains Mono 500（コード、コマンド、端末風の小さなラベル）
形状
角丸：6px（バッジ）、12px（ボタン、カード）、24px（大きなブロック、ロゴタイル＝辺の23%）。
独自パターン：暗い背景上に line 色のドット模様、byte/spark のブロックが端からはみ出す。
ロゴ
ロゴタイプは描画（線幅9ユニット、角丸のモノライン）であり、フォントではありません。テキストで打ち直さないでください。
パスは site/index.html（SVG .logo）にあります。暗い背景上では「byte」を #F2F1EC、「Tuto」を #B8F03C で表示。
シンボル単体：site/favicon.svg。
トーン
「くだけた」語り口（「だ・である」調ではなく「です・ます」調でもなく、親しみやすい「だね・しよう」調）で、短い文、行動を促す動詞。説明する前に見せる。 説明なしの専門用語や過剰な約束はしない。 例：「Node を2分でインストールしよう」、「4時間溶かしたバグ」。
アクセシビリティ
新しいアニメーションはすべて prefers-reduced-motion に対応する。フォーカス可視性を確保（アウトラインは byte 色）。