01.
Translucency & Vapor
コンセプト
情報を遮断するのではなく、透かせる「すりガラス（Glassmorphism）」のUIレイヤー。
特徴
- 背景に Kamos Lavender (#F0E6FA) のグラデーションや光るオーブを配置
- UIカードは純白ではなく、
backdrop-blurを用いた半透明パネル - 濃くシャープなシャドウの代わりに、大きく拡散する広範なBlurシャドウで浮遊感と奥行きを表現
Glass Panel
02.
Brand Colors
色彩設計
知的でクリーンなベース領域に、生命感を感じさせるアクセントカラーを効果的に配置。
Kamos Foundation
Kamos Green
#10B981
主要なアクション、フォーカスを示すブランドの中核
Kamos Lavender
#F0E6FA
背景のベール、柔らかいグラデーションに使用
Vitamins
注意喚起や成功体験、通知などでのみ、ごく少量使用する高彩度なスパイス。
Yellow Glow
#FFD700
Neon Pink
#FF1493
Vibrant Orange
#FFA500
03.
R8/R12 Geometry
形状と骨格
全てのメインパネルは安定した角丸で統一し、情報の包含関係を幾何学的に整理する。
- 過剰な「丸み」を排し、規律ある四角形を保つ。外側は r12 か r8。
- 内包要素（画像やフォーム等）は r8 や r6 へと縮小し余白に平行にする。
- ボタンは rounded (4px) で硬質さ（クリック可能感）を持たせる。
Outer R12/R8
Inner Image R8/R6
Secondary R4
Primary R4
04.
Typography Hierarchy
タイポグラフィの役割
英語フォントと日本語フォントの明確な役割分担による、洗練された可読性。
Primary / Headings
Josefin Sans
英字および大見出しには幾何学的でエレガントなフォントを起用し、ブランドイメージを力強く牽引。
Secondary / Body
Noto Sans JP
日本語や長文のUIテキストに使用。ノイズが極めて少なく、あらゆる環境で高い可読性を発揮するスタンダード。
05.
Deliberate Motion
アニメーション
装飾ではなく、ユーザーの操作に対する物理的なフィードバックと視線誘導を目的とする。
- 状態の変化（ホバーなど）は
duration-300 ease-outを基本とする。スムーズで落ち着いた反応。 - 背景のオーブ等は非常に遅い周期で揺らぎ、画面全体が「呼吸」しているようなアンビエントな生命感を与える。
06.
UI Components Showcase
UIパーツカタログ
基本的なコンポーネントがどのようにレンダリングされるかの具体例。
Buttons
Inputs & Fields
Status Badges
Information Success Warning Critical Alert
Card Element
Component
Responsive Card
Elevates slightly on hover.