Home.jsで実際に使用されているデザインパターンの完全なリファレンス

VITL Design System Reference

Pattern A (Organic Material) + Pattern B (System HUD)

Pattern A: Organic Material (Chat UI)

VITL 10:23

こちらは「Aパターン」の実装デザインです。
厚みのある白い磨りガラス（Solid Frost）のような質感が特徴です。 ユーザーに安心感を与え、人格を感じさせる対話UIに使用します。

あなた 10:24

ユーザーのメッセージは「Dark Blue Liquid」で表現されます。 システム側との明確な対比を持たせています。

Input Area (くぼみ表現)

Focused State (cyanリング)

Pattern B: System HUD (解析結果)

Sample meal
1/3
Score85
GradeA
🦑イカの唐揚げ250kcal
🥗サラダ80kcal
合計
970kcal
タンパク質
80g
脂質
40g
炭水化物
70g

Pattern B: 解析ローディング (Timeline)

画像の読み込み

画像データを受信中...
ファイル形式を確認しています

画質・光量の補正

明るさを調整中
ピクセル最適化中

被写体の特定65%

画像全体の特徴をスキャン中
メインの料理を探しています...

料理・特徴の解析

Pattern A: インラインフォーム (体重入力)

66kg

NumberButton: bg: rgba(255,255,255,0.4), blur(30px), border: 0.4 opacity
DeleteButton: bg: rgba(239,68,68,0.15), border: red 0.3 opacity
CancelButton: bg: rgb(243,244,246), inset shadows for depth
SubmitButton: Dark Blue Liquid (same as userMessage)

Design Tokens (開発者向けリファレンス)

// Pattern A: Organic Material
background: rgb(249, 250, 252) + 罫線
coachMessage.boxShadow: 
  "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 2px rgba(255,255,255,0.9)..."
userMessage.backgroundColor: rgb(37, 47, 64)
inputArea.focused.border: "1px solid rgba(8, 145, 178, 0.8)"

// Pattern B: System HUD
nutritionPanel.background: rgba(20, 25, 40, 0.64)
nutritionPanel.border: "1px solid rgba(255, 255, 255, 0.12)"
detectedItem.background: rgba(10, 15, 30, 0.60)
scoreBadge.background: linear-gradient(135deg, ...)

// Loading Timeline
active: cyan系 (bg-cyan-50, border-cyan-500, text-cyan-700)
completed: emerald系 (bg-emerald-500, text-emerald-700)