
Linear
ミッドナイト・プレシジョン・インスツルメント
リニアデザインシステムは、ほぼ黒の表面(#08090a)の上に構築された夜間のコマンドセンターで、くっきりとした白い文字と、機能的な懐中電灯として機能する単一のライムグリーンのアクセント(#e4f222)が特徴です。このアクセントは小さく、コントラストが高く、アクションを示すために控えめに使用されます。インターフェースは、テーマではなく基盤として暗闇を扱います。テキストはくっきりとした白で、文字間隔は狭く(-0.022em)、フォントの太さは太字ではなく400~510の範囲で、境界線は極細(0.5px)で、ジオメトリが通常影が行う役割を担います。コンポーネントは精密に作られているように感じられ、半径は6pxと12px、コンパクトな8~12pxのマージン、装飾要素はほぼ完全に排除されているため、製品のUI(タスクカード、カンバンボード、AIエージェントパネル)が、それ以外は落ち着いたシステムの中で唯一の視覚的なテクスチャとなります。
レイアウトは最大幅が約1200ピクセルで中央揃え、暗い背景がビューポートの端まで広がっています。メイン要素は左揃え(64~72ピクセル)の大きな見出しで、右揃えのコールトゥアクション(CTA)と組み合わされ、その後に最大幅をわずかに超える大きな製品スクリーンショットが続きます。セクションのリズムは、左側にテキスト、右側に画像を配置した2列構成と、96ピクセルの縦方向のガターで区切られた全幅の製品表示ストリップが交互に現れます。クライアントのロゴが入ったストリップは、水平方向に1行です。このページでは、3列のカードグリッドやタイル構造は使用されていません。情報密度は低く抑えられており、ほとんどのセクションでは十分な余白が使用され、画面上の焦点となる要素は1つだけです。ナビゲーションは、左揃えのロゴと右揃えのリンクを備えた固定のトップバーで、サイドバーやメガメニューはありません。
Linearのビジュアル言語は、製品のスクリーンショットに基づいています。冒頭と各セクションのイラストは、Linearアプリのユーザーインターフェースの実際の画像で、タスクカード、カンバンボード、AIエージェントダッシュボード、コマンドパレットなど、最大限詳細にキャプチャされ、細いフレームの中に配置されています。ストックフォト、ライフスタイル画像、抽象的なイラストは一切使用していません。ロゴは、顧客向けに均一なサイズのニュートラルグレーのストライプ(#8a8f98)として表示されます。アイコンは、モノクロのグレースケールで表現されたミニマルな線形SVG画像です。ページ上部のスクリーンショットは、微妙な線形グラデーション(暗い色から明るい色へ)の上に浮かび、実際の風景を使用せずに雰囲気のある奥行きを生み出しています。すべてのビジュアル要素は、製品自体の機能要素です。
パレット
ブランド
- Acid Lime
#e4f222— メインの操作ボタンとアクティブなナビゲーションインジケーターは、単色の配色に変化を与える明るいアクセントとなっている。
中性
- Mist
#d0d6e0— 暗い表面上の副見出し、ボタンテキスト - Void
#08090a— ページキャンバス、全幅の背景画像 - デフォルトでは、すべての要素はこの背景上に配置されます。 - Carbon
#0f1011— カードの表面、ナビゲーションバーは、カード内にコンテンツを配置するためのキャンバスよりも一歩進んだものです。 - Obsidian
#161718— 隆起した表面、より深い段ボールパネル - Graphite
#23252a— 控えめな境界線、区切り線、控えめなボタンの輪郭線 – 低コントラストのテクスチャ加工されたエッジ - Smoke
#383b3f— 細い枠線は、グラファイト色のセクション区切り線よりもコントラストが高い。
タイポグラフィ
13~72ピクセル・8段階
- Inter Variable — 交換: Inter (variable) · 概要 300, 400, 510, 590 · 主要なUIおよびヘッダーフォント - ナビゲーション、本文、見出し、ボタン、カードで使用されます。
- Berkeley Mono — 交換: JetBrains Mono · 概要 400 · コードに隣接するUIテキスト - リリース識別子(ENG-2703)、キーボードショートカット、等幅フォントのメタデータ
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 8px |
| ボタンの半径 | 6px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96px |
| ページ幅 | 1200px |
AI がLinearスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact ( Next.js )上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Aaru — 真夜中の粒子場観測所
- Atlas Card — 真夜中の金庫室は、一本のサファイア色の光線が差し込む、漆黒の空間であり、そこで唯一重要なのは、深みのあるエレクトリックブルーだけだ。
- Checkly — 深宇宙ミッション管制センター
- Savee — ビジュアルキュレーターのためのブラックキャンバス
- Inngest — 暗く静かな観測所。観測機器の操作に必要な設備が整っており、琥珀色のパイロットランプが一つ灯されている。
- Dala — 黒いベルベットの上に浮かぶ星座
- Origin Financial — 静謐な豪華さを湛えた真夜中のギャラリー。静かで、ほとんど薄暗い部屋の中で、大きなセリフ体フォントと数枚の照明付きカラーパネルが、金融が丹念に作り上げられた芸術作品であるかのような感覚を生み出す。
- Hyperstudio — デザインは黒曜石に刻まれている。文字と細い線が真っ黒な白い空間を縁取り、時折金色の羅針盤の印が道を示している。
- Air — 彫刻作品「ガラス越しの真夜中の空」
- Resend — 紫のネオンカラーの黒いベルベット
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション