デザイン

このサイトは YuTheme エコシステムに属しています。Yuri のプロダクト群で 使われる、暖かみのあるダークパレット、Geist タイプ、ヘアラインの境界線、 抑制されたモーション、編集的な明快さを共有しつつ、独自のアイデンティティを 持っています。

アイデンティティ

Ella のマークは、角ばった金色の「E」（ヘッダーとファビコンで使用）と、 eyebrows の前に繰り返し現れる金色のダイヤモンドです。アバターも、顔も、 マスコットもありません。アイデンティティはタイポグラフィ、構成、色、 小さなグラフィックディテールの中に生きています。

トークン

正準の YuTheme 値。apps/web/src/app/[locale]/globals.css で定義:

• canvas #1a1813、surface #191811、raised #1f1d17
• テキスト プライマリ #f4f1e8、セカンダリ #b8b2a4、ターシャリ #827c70
• アクセントゴールド #d6a84f、ホバー #e0b760
• 暖色アルファ境界: faint 0.06、subtle 0.08、デフォルト 0.14、強 0.22
• 角丸 4/6/8px、トランジション 160ms cubic-bezier(0.2, 0, 0, 1)

正準トークンが存在するのに、近似色を追加しないでください。

タイポグラフィ

• 本文は Geist Variable。ラベルとメタデータは Geist Mono Variable。
• Hero の h1: clamp(2.25rem, 5vw, 3.25rem)、ウェイト 400、 レタースペーシング -0.03em、イタリックのゴールド「Ella」。
• セクションタイトル: clamp(1.5rem, 3vw, 2.25rem)、ウェイト 500。
• Eyebrows: モノ、11px、大文字、字間あり、金色ダイヤモンドとセクション 番号（01、02...）。

構成

• ヘッダーは 64px 固定。スクロールスパイがアクティブセクションを金色で マーク。
• Hero はデスクトップで2カラムグリッド。左にコピー、右にターミナル カード。モバイルでは縦に積み重なる。
• エディトリアルセクションは 1fr / 1.4fr グリッドで、かすかなトップ ボーダーと余裕のあるパディング。900px 未満で1カラムに折りたたむ。
• ターミナルカードは、点滅する金色のカーソル付きで Ella のステータス ラインを表示します。デザイン要素であり、実際のターミナルでは ありません。

モーション

静かで機能的:

• Hero の名前、プライマリボタン、ヘッダーマーク、フッターシグネチャの シャイマー;
• ゆっくり漂う環境背景のグロー;
• IntersectionObserver による小さなスタッガー付きのスクロールリビール;
• すべて prefers-reduced-motion: no-preference の背後にゲート。Reduced motion では全エフェクトが無効になり、コンテンツは見えたままである 必要がある。

Reduced-motion の経路なしに、装飾的なモーションを追加しないこと。

アンチパターン

SaaS のクローム、ネオンパープル、ありきたりなアニメ風スタイル、過剰な グラデーション、無料のグラスモーフィズム、ダッシュボード、カードの壁、 機能のない装飾を避ける。