Cocoon（コクーン）のボックス表示一覧
| ①：アイコンボックス | アイコンを用いて直感的に内容を伝えるボックス |
| ②：案内ボックス | 背景色によって内容を直感的に伝えるボックス |
| ③：白抜きボックス | コンテンツを囲むだけのブランクボックス |
| ④：付箋風ボックス | 付箋風のボックス |
| ⑤：タブボックス | タブ付属のボックス |
①：アイコンボックス表示例
アイコンボックス：テキスト/背景色を変更した表示例
アイコンボックス：タイポグラフィ
②：案内ボックス
プライマリー（濃い水色）
セカンダリー（濃い灰色）
インフォ（薄い青）
サクセス（薄い緑）
ワーニング（濃い黄色）
デンジャー（濃い赤色）
ライト（白色）
ダーク（暗い灰色）
案内ボックス：テキスト/背景色を変更した表示例
サンプル
サンプル
案内ボックス：タイポグラフィ
タイポグラフィ（S）
タイポグラフィ（M）
タイポグラフィ（L）
タイポグラフィ（XL）
③：白抜きボックス
サンプル
白抜きボックス：ボーダー色を変更した表示例
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
白抜きボックス：ボーダー/背景色/テキスト色を組み合わせた表示例
サンプル
サンプル
サンプル
サンプル
白抜きボックス：タイポグラフィ
タイポグラフィ（S）
タイポグラフィ（M）
タイポグラフィ（L）
タイポグラフィ（XL）
④：付箋風ボックス
灰色
黄色
赤色
青色
緑色
付箋風ボックス：テキスト/背景色を組み合わせた表示例
サンプル
赤色
付箋風ボックス：タイポグラフィ
タイポグラフィ（S）
タイポグラフィ（M）
タイポグラフィ（L）
タイポグラフィ（XL）
⑤：タブボックス
チェック
コメント
ポイント
ティップス
ヒント
ピックアップ
ブックマーク
メモ
ダウンロード
ブレイク
Amazon
OK
NG
GOOD
BAD
プロフィール
タブボックス：テキスト/背景色を組み合わせた表示例
サンプル
チェック
チェック
タブボックス：タイポグラフィ
タイポグラフィ（S）
タイポグラフィ（M）
タイポグラフィ（L）
タイポグラフィ（XL）
コメント