Linear はモダンなプロダクト開発のためのプロジェクト・課題管理ツールで、スピード、精度、クラフトマンシップを重んじます。UI は #08090a 一族のダークな階層と、唯一のインディゴパープルのアクセントカラー #5E6AD2 で構成され、Inter Variable の幾何学的な代替字形と Display 級の負のトラッキングが組み合わさり、冷静で抑制の効いた気質を生みます。SaaS プロダクトのためにプロフェッショナルで精度の高いダーク UI を設計するのに適しています。
Linear生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Linear-inspired interface. - Dark-mode-native: #08090a marketing background, #0f1011 panel background, #191a1b elevated surfaces; - Inter Variable with "cv01", "ss03" globally — geometric alternates for a cleaner aesthetic; - Signature weight 510 (between regular and medium) for most UI text; - Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px); - Brand indigo-violet: #5e6ad2 (bg) / #7170ff (accent) / #828fff (hover) — the only chromatic color in the system. Colors: #010102, #08090a, #0f1011, #191a1b with #010102 accent. Typography: (.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Linear aesthetics. Use Linear color identity with #010102 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Linear style. Use Linear color identity with #010102 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Linear design language. Use Linear color identity with #010102 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Linear visual identity. Use Linear color identity with #010102 accents. Compelling, conversion-focused.
使用例
Linear アプリ
WebBuild a web app with Linear design language and #010102 color system.
Linear ダッシュボード
ダッシュボードCreate a dashboard using Linear style with data visualization and ( typography.
✅ 適した用途
- SaaS 製品
- プロジェクト管理と協業ツール
- 効率を追求するミニマルなワークスペース
❌ 適さない用途
- 情報密度が極めて高いレポートシステム
- ポップなイラスト調のマーケティングページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。