Modal
暗いサーバー室にある蛍光端末 ― 唯一の光源は鮮やかな緑色
モーダルは、暗いサーバー室にある蛍光端末のように機能します。ほぼ黒のキャンバス、淡い緑色の文字、そしてLEDステータスインジケーターとして機能する鮮やかなライムグリーンのアクセントが1つあります。デザイン言語は開発者に焦点を当てており、信号機ドット付きの等幅コードウィンドウ、特徴的な緑色のアイソメトリック3Dアイコン、そして各セクションの1つの要素が光るように十分な余白が設けられています。タイポグラフィは、見出し用のカスタムフォント（Goga）とすべてのUI要素用の可変フォント（Inter）に分かれており、どちらも狭いネガティブトラッキングが設定されています。色は均等に分布しており、ほとんどの画面は無彩色で、鮮やかなライムグリーンは主要なアクション、ロゴ、3Dイラスト、強調したい場面にのみ表示されます。コンポーネントはフラットでフレームレスであり、影ではなく、微妙な緑色の境界線と背景のぼかしによって奥行きが表現されています。
モーダルは、コンテンツを表示するために最大幅 1280px の全幅ダークレイアウトを使用しています。ヒーローウィンドウは中央に配置され、タイトル (ライムグリーンの最初の文)、サブ見出し、2 つのコールトゥアクション、および視覚的なアンカーとしての単一の 3D オブジェクトが、レイアウトとサイドバーを分離することなく表示されます。コンテンツセクションは、眉タグ (大文字、Moss 70) → Goga タイトル → 控えめな本文、その後、機能の説明 (テキスト + コード/ビジュアル カード) を含む 2 列レイアウト、またはカードの 3 列グリッドのいずれかという、均一なリズムに従います。セクション間のガターは 80px と広くなっています。ページは、濃い空白 (#000000) とやや明るい背景 (#181818) のストライプが交互に表示され、ページの中央に視覚的な息抜きとして 1 つの明るいセクション (#def0dd) が表示されます。ナビゲーションは、ぼかされた背景を持つ単一の固定トップバーで構成され、サイドバーやメガメニューはありません。フッターはコンパクトでダークなデザインで、リンクカラムは落ち着いたグリーンです。テキスト密度は快適で、各セクションには十分なスペースが確保され、カードグリッドは最大でも3カラムまでしか使用されていません。
Modal のビジュアル言語は、3D の光る製品レンダリングと暗いコード ウィンドウのモックアップの 2 つのモードに分かれています。焦点は、マーケティング グラデーション (ライム グリーンからエメラルド) を使用してレンダリングされた単一の 3D キューブで、空いているスペースを緑色の光で照らす放射状のグラデーション ハロー内に配置されています。これはブランドのシグネチャー ビジュアル スタイルです。ワークロード カードには、暗い背景に同じライム グリーンでレンダリングされたアイソメトリック 3D アイコン (ワイヤー フレーム キューブ、ソリッド 階段、レイヤー) が含まれています。コードとベンチマークの結果は、信号機のドット、蛍光色のパレットでの等幅構文強調、および控えめな緑色の境界線を備えたターミナル ウィンドウ カードとして表示されます。これらは、実際のコマンドライン インターフェイスのスクリーンショットに似ています。クライアント ロゴは、単一の低コントラストの行に彩度の低い緑灰色のラベルとして表示され、視覚的な競合なしに信頼を示します。全体的な密度は低く、ほとんどのページは主にテキストで構成され、画像は写真のグリッドではなく個々の焦点として表示されます。写真はありません。視覚システム全体が、レンダリングされ、幾何学的で、輝かしい。
パレット
ブランド
- Lime Pulse
#7fee64— 企業アイデンティティの主な要素は、ロゴ、主要な行動喚起（CTA）、タグの塗りつぶし、アクティブ状態、およびイラストの基本色です。
中性
- Phosphor White
#ddffdc— メインテキスト、タイトルの色、アイコンの輪郭、塗りつぶされたボタンテキストが、主な読み取り面となります。 - Void Black
#000000— ページキャンバス、最も深い背景レイヤー - Ground Iron
#181818— メインボタンの塗りつぶし、カード表面の暗い部分、ユーザーインターフェースのベース表面。 - Carbon Veil
#212525— 高台、ナビゲーションの背景、地面よりやや明るい色。 - Circuit Border
#485346— アウトライン／ゴーストアクションフレーム、つまり主要なインタラクティブな細い線は、くすんだ緑がかった灰色です。 - Phosphor Blue-Black
#1f2a33— 濃い縞模様の間の線を区切る、細い二次的なマーキング線。
タイポグラフィ
12～64ピクセル・8段階
- Goga — 交換： Inter Tight or Space Grotesk · 概要 400, 500 · 見出しと小見出しのフォント – すべての H1 ～ H4 見出しとカードに使用されます。Goga は、開口部が狭く、終端がわずかに角ばったカスタムの幾何学的サンセリフ フォントです。中程度のウェイト (500) はカードレベルの見出しを強調するために予約されており、通常のウェイト (400) はヒーローとセクションの見出しに使用されます。Modal のアイデンティティを定義する代替グリフ形状にアクセスするには、スタイル セット「ss01」を有効にする必要があります。負の文字間隔は、48px で -0.007em から 21px で -0.017em まで徐々に減少します。
- Inter Variable — 交換： Inter · 概要 400, 500 · ユーザーインターフェースと本文 – ナビゲーション、ボタン、本文、ラベル、フッター。インタラクティブ要素とナビゲーションにはデフォルトで中程度の太さ（500）が使用され、段落には標準（400）が使用されます。文字間隔は小さいサイズでも顕著に狭められ（14pxで-0.026em、16pxで-0.022em）、インターフェースに凝縮された終末密度を与えます。代替句読点には「cv11」文字バリアントを含める必要があります。12pxのすべて大文字のラベルは、本文の密度とのバランスを取るために+0.05emの文字間隔を使用します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 20px |
| ボタンの半径 | 12px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1280px |
AI がModalスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Slash — 金箔の帳簿が付いた真夜中の金庫
- AgentQL — 夜間、ターミナル上空に浮かぶオーロラ
- GitHub — 生物発光制御ポイントを備えた宇宙空間の司令パネル――暗く雰囲気のある作業空間で、たった一つの緑色の光が進むべき方向を示す。
- Doppler — 真夜中の金庫室は紫色の照明に照らされている。ほぼ黒色のキャンバスには、薄紫色の信号灯と緑色の確認灯が一つずつ灯り、あらゆる表面が掴めるほどに湾曲している。
- Basedash — マットなフォントが使われた真夜中のデータ端末。暗い観測所では、計測値が紫と緑に光り、セリフ体の見出しが雑音の上に浮かび上がり、柔らかな黒い表面に囲まれた部屋の中で、白い錠剤型のボタンだけが明るく輝いている。
- Superwhisper — オーロラが真夜中のガラスの上に溶け込む
- Better Stack — ミッドナイトSREコンソール
- Langbase — ミッドナイト・ノーザンライツ・コンソール
- Astro — 星雲から放たれる紫色の光が一つだけ見える深宇宙ミッションコントロール
- Wayfinder — 黒い映画画面に、かろうじて聞こえるタイトルがライブイラストの上に浮かんでいる。操作インターフェースは、コントロールパネルではなく、明るさ調整スライダーだ。
- HashiCorp — 真夜中の紫色のネオンに照らされた制御室は、暗く技術的な空間であり、光り輝く六角形の立方体が唯一の色の基準となっている。
- Umbrel — 夜間のサーバー室にある居心地の良い焚き火台――薄暗い部屋の中で、桃色の光が一つだけ、本当に大切なものを際立たせる。