Tokens

app/app.css の @theme で集中管理されているデザイントークン一覧

背景 (bg)

奥から手前へ。重なるほど明度が上がる

bg-bg-0ページ最背面

bg-bg-1カード

bg-bg-2浮いた面

bg-bg-3ホバー

bg-bg-4押下

前景 (fg)

濃いほど主要、淡いほど補助

Aa あ亜

text-fg-0主要テキスト

Aa あ亜

text-fg-1本文

Aa あ亜

text-fg-2補助

Aa あ亜

text-fg-3キャプション

セマンティック

意味付きカラー

bg-accentアクセント塗り

text-accent-textアクセント文字/線

bg-danger破壊的

bg-warn警告

bg-info情報

bg-success成功

プラットフォーム

広告媒体のブランドカラー（Badge / アイコンで使用）

bg-platform-googleGoogle

bg-platform-metaMeta

bg-platform-tiktokTikTok

bg-platform-xX (Twitter)

bg-platform-yahooYahoo

文字サイズ

数値 = px。--text-N で定義

text-10あいうえお ABCabc 0123456789

text-11あいうえお ABCabc 0123456789

text-12あいうえお ABCabc 0123456789

text-13あいうえお ABCabc 0123456789

text-14あいうえお ABCabc 0123456789

text-16あいうえお ABCabc 0123456789

text-18あいうえお ABCabc 0123456789

text-20あいうえお ABCabc 0123456789

text-24あいうえお ABCabc 0123456789

text-32あいうえお ABCabc 0123456789

text-48あいうえお ABCabc 0123456789

角丸

--radius-* で定義

rounded-xs3px

rounded-sm5px

rounded-md7px

rounded-lg10px

rounded-xl14px