デザイン

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

アイデンティティ

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

トークン

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

• canvas #000000、window/surface #0b0b0a、raised #151514
• テキスト プライマリ #f4f1e8、セカンダリ #b3ad9f、ターシャリ #8e887c
• アクセントゴールド #d6a84f、ホバー #e0b760
• ニュートラル アルファ境界: faint 0.08、subtle 0.13、デフォルト 0.2、強 0.32
• 角丸 4/8/12px、ウィンドウ 14px、トランジション 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 の名前とフッターシグネチャのシャイマー;
• Hero 列のブラーイン入り (yu-rise);
• ターミナルの背後の控えめなフォーカス グロー;
• IntersectionObserver による小さなスタッガー付きのスクロールリビール;
• すべて prefers-reduced-motion: no-preference の背後にゲート。Reduced motion では全エフェクトが無効になり、コンテンツは見えたままである 必要がある。

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

アンチパターン

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