tech-green-dark-mode-modern

テックグリーン・ダークモード・モダンスキル

使用する場面

• マットブラックのサーフェス、エメラルドのシグナルアクセント、モノスペースのシステムラベル、枠付きダッシュボードカード、控えめなグローを備えた、モダンなダークモードのテクニカルデザインシステムを作成するときに使用します。

ワークフロー

適用範囲

• ページ背景、レイアウトの枠組み、カード、ナビゲーション、タイポグラフィ、データモジュール、モーションにわたって、デザインシステム全体の方向性として適用します。
• ダークな運用面をグリーンのシグナルアクセントで彩り、モダンで分析的、技術的かつプレミアムな印象を与えたいインターフェースに使用します。
• 汎用的なネオン・サイバーパンクでも、ありきたりなエンタープライズ向けダークモードでもありません。落ち着きがあり、精密で、製品として完成された印象にします。

ビジュアルの目標

• ブラックまたはそれに近い色をベースにし、ページ背景、パネル、浮き上がったサーフェスの間に、控えめなトーンの差を付けます。
• アクティブ状態、ライブインジケーター、ボーダーのディテール、フォーカス領域の主要なシグナルカラーとして、エメラルド、ミント、または彩度を抑えたテックグリーンを使用します。
• 薄いグリッド線、縦方向のガイド、コーナーブラケット、目盛り、モノスペースのシステムラベル、ユーティリティメタデータでテクニカルな枠組みを加え、ページに計器のような印象を与えます。
• カードはプレミアムでモダンな外観にします。ダークなガラスまたはマットなシェル、細いグラデーションボーダー、柔らかな内側のグロー、控えめなぼかし、精密な間隔を使用します。
• グリーンのグローは抑制し、局所的に使用します。インターフェース全体を覆うのではなく、主要なコンポーネントを際立たせるために使います。

実装ガイダンス

• 強いリズム、一貫したガター、明確に区分されたデータサーフェスを備えた、構造的なダッシュボードまたはモジュールベースのレイアウトを優先します。
• 見出しと本文にはクリーンなサンセリフ体を使い、ラベル、システム ID、タイムスタンプ、細かなメタデータにはモノスペース体を組み合わせます。
• ステータスドット、進捗バーの塗り、コーナーマーカー、控えめなグラデーション、アクティブボーダー、グラフのハイライト、小さな強調チップにグリーンのアクセントを使います。
• 背景に薄い斜線テクスチャ、テクニカルなグリッド線、または柔らかなパターンオーバーレイを加えてもかまいませんが、コンテンツが主役となるようコントラストは低く抑えます。
• フラットで汎用的な長方形の代わりに、1 ピクセルのシェル、コーナーのディテール、ダークな内側のパネルを備えた枠付きカードを使用します。
• モーションは機能的でモダンな印象にします。派手なアニメーションではなく、マスク付きの表示、ホバー時のわずかな明るさの変化、控えめなグローの変化、または緩やかなチャートの動きを取り入れます。

推奨パターン

• 柔らかなエメラルドのアンダーグロー、ダークな内側のキャンバス、小さなコーナーブラケットを備えた大型ダッシュボードカード。
• モノスペースのセクションコード、控えめな区切り線、グリッドに沿って配置した運用メタデータを備えたヘッダーレール。
• すばやく確認できるよう、アイコン、ラベル、ステータスフッターの構成を用いたコンパクトなモジュール。
• ニュートラルなベースを使い、アクティブなバー、ノード、パルス、フローインジケーターにのみグリーンを使ったデータビジュアル。
• 縦方向の境界線、照準マーク、外側のシェルブラケットで背景の枠組みを固定し、ページ全体に設計された印象を与えます。

調整項目

• グリーンの強度：シグナルカラーとして認識できる鮮やかさを保ちながら、放射性ネオンのようにならないよう抑制します。
• サーフェスの浮き上がり：ページ背景とカードのコントラストを調整し、くすんだ印象にならず、レイヤー感のあるレイアウトにします。
• テクニカルな密度：デザインにどの程度計器パネルらしさを持たせるかに応じて、ガイド、コーナーマーク、目盛り、メタデータを増減します。
• グローの半径：エッジの光の広がりを小さく抑え、UI をぼかしすぎずにフォーカスを支えます。
• テクスチャの量：空白を豊かにする場所に限って、薄い斜線またはグリッドのテクスチャを使用します。

避けること

• 画面全体を覆うグリーンのグローや、派手なネオンハッカー風の美学。
• サーフェスの階層や枠組みの設計がない、単調なブラックのレイアウト。
• テクニカルなブラケット付きシステムを考慮しない、汎用的な SaaS カード。
• グリーンのシグナル表現を薄める、無関係なアクセントカラーの多用。
• すべてのコンポーネントを明るいボーダー、モーション、グローで過剰に装飾すること。