アプリUIテーマ 見本

ツール・ダッシュボード・デモアプリの画面に使うテーマ。動きがあって、収録で映えるほう。 正本＝共有ページ/アプリUIテーマ/tokens.css。LP・販売ページは秘密基地テーマ、 LINE配布の資料は暖色パーチメントと使い分ける。

色

--bg
--panel
--purple
--mint
--pink
--yellow
--blue
--coral

ボタン（押すと沈む）

カウンタ（意味のある1つだけ色を付ける）

読み込み
30
自動で仕分け
25
自分で見る
5

機械の面（ベルト）— 動きの主役

ここをカードが流れる

流れるカード ／ 落ちた1件 ／ バー

問い合わせ
払い出しが3日間ずっと失敗しています。至急なんとかしてください。
請求金額が先月の2倍に…1.00
サービスが全面的に落ちて…0.98

箱（結果が溜まる場所）

請求・支払い3
領収書の宛名を…0.92
不具合・障害9
ログインできません1.00
使い方の質問2
通知を止める設定は…1.00

この見た目の核（外すと別物になる）

要素決まり
枠と影極太の黒枠3px ＋ ぼかし無しのハード影 4px 4px 0。半端な太さ・ぼかした影にしない
書体丸ゴシック（Hiragino Maru Gothic ProN）。角ゴにすると途端に硬くなる
地白ではなく淡いラベンダー＋ドット。白地だと締まらない
暗部「機械の面」だけ（ベルト・レール・コンソール）。ページ全体を暗くしない
色原色を意味に割り当てる。飾りで足さない。7色目が要るなら設計を疑う
手触りボタンは押すと沈む（影が縮む）。ここがこのテーマの気持ちよさ

実物

使用例＝AIモデル検証アリーナの仕分け画面 http://localhost:8777/sort （画面上部の「ポップ／ミニマル」でこのテーマと秘密基地テーマを切り替えられる）。
読み方・使い分けの正本＝共有ページ/アプリUIテーマ/README.md。