厳選・オープン・無料

Linear

開発者ツール向けの、ダークで精度重視の SaaS デザインシステム。

01

デザイン DNA

ソフトウェアチーム向けの高級時計instrument——ダーク、精密、装飾なし。

02

カラー

フォーカスのための極端なコントラスト、微細なノイズと半透明レイヤーで深みを生み出す。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display64px · 400
• body16px · 400
• mono13px · 400

大型見出しにはタイトなネガティブトラッキングを使用する。 · 本文にはウェイト400を維持し、インターフェースを軽く保つ。 · 技術的な参照や識別子にはモノフォントのみを使用する。

04

余白

厳密な 4px グリッドとタイトなコンポーネント間隔。

05

サーフェス (角丸 / 影 / 罫線)

1px solid rgba(255,255,255,0.08)

0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)

06

レイアウト

Dense な、フルワイドのダークキャンバスにネストされた浮き上がりパネル。

07

モーションとインタラクション

hover 時の微妙なフェードインとフィルター遷移。 · スムーズな背景色のシフト。 · カーソルと focus 状態のマイクロインタラクション。

明るさのわずかな増加または背景の不透明度シフト。 · スケールや色のフィードバックを伴う、即座の状態変化。

08

コンポーネント

• button 透明な背景と細いボーダーを持つ、ピル型またはやや角丸の長方形。
• card 微妙な 1px 内側ボーダーと柔らかいドロップシャドウを持つ、浮き上がりダークパネル。
• chip タグやステータス表示に使用される、小さな角丸長方形。
• input ダークで半透明の背景フィールド、最小限のボーダースタイリング。
• hero 巨大な太字サンセリフ見出しと、クリーンなサブヘッダー、大きな製品モックアップの組み合わせ。

09

文体と禁止事項

• トーン 技術的、精密、かつ自信に満ちた。
• 見出し 直接的、アクション指向、かつ権威のある。
• CTA ミニマリストで明確。しばしばシンプルなテキストリンクまたは低演出のボタンのみ。

• 高彩度カラーを使用しない — スクリーンショットは厳密なグレースケール/ホワイトパレットを示している。
• 丸みを帯びた遊び心のある形状を使用しない — スクリーンショットはシャープまたは非常に控えめに角丸の角を示している。
• セリフ体や装飾的なフォントを使用しない — スクリーンショットはクリーンで幾何学的なサンセリフを示している。
• 明るくカラフルなグラデーションを使用しない — スクリーンショットはダークでフラットな、グレインテクスチャの背景を示している。
• 太く重いボーダーを使用しない — スクリーンショットはヘアラインの 1px 区切りを示している。
• 複雑な、多層のシャドウを使用しない — スクリーンショットは微妙な、低不透明度のドロップシャドウのみを示している。
• 避ける: マーケティングの冗長な表現
• 避ける: 曖昧または不明確な用語
• 避ける: 過度な感嘆符
• 避ける: おしゃれまたはカジュアルな言葉遣い

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko