WORKS 共通デザイン正本

HTMLプレビューの配色・部品サンプル

このフォルダにHTMLを作るときは、本ファイルの :root トークンをコピーして使う。ゴールド＋ティールの2色アクセント／コードブロックのみ暗背景。

PALETTE — カラートークン

スウォッチ

--bg #f6f2e9
--surface #fffdf8
--surface-2 #f0ead9
--ink #241f18
--ink-faint #8a7f6d
--line #e2d9c6
--accent #b9791a
--accent-ink #8a5a10
--accent-bg #f6e7cd
--teal #2f6f68
--code-bg #26221b
--code-ink #ece3d2
COMPONENTS — 部品の見本

本文・強調・コード・表

本文はこのトーン。強調はゴールドで、リンクや小見出し（kicker）はティール。インラインコードは ~/.claude/CLAUDE.md のように淡背景。

# コードブロックだけ暗背景＋明文字
bash 共有ページ/publish_share.sh --target member "ファイル.html" slug
列A列B
表ヘッダは surface-2 ＋ ゴールド文字罫線は --line
 
コピーボタン付きボックスの見本（ボタン=ゴールド→hover濃ゴールド→完了ティール）
RULES — 使い方ルール

3つの約束