厳選・オープン・無料

Nuxtlabs

VercelによるNuxtLabs買収を告知するミニマリストダークモードの開発者ブログ記事。

01

デザイン DNA

開発者向けの、静かで自信に満ちた告知ブログ記事。

02

カラー

クールブルーの色調を持つハイコントラストダークモード。可読性と集中力を最優先。

03

タイポグラフィ

grotesque-sans · monospace

• display36px · 500
• body16px · 400

見出しと本文の両方でGeistを使用し、一貫した技術的美学を維持。 · 段落には十分なline-height（1.6）を設定し、ダーク背景上の密なテキストの可読性を確保。 · 段落内の強調にはbold（700）を控えめに使用。

04

余白

一貫した段落間隔とリスト項目のギャップにより、垂直リズムを確立。

05

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

最小限のボーダー。主に微細な区切りやリスト項目マーカーとして使用。

06

レイアウト

最大限の可読性を実現する、余裕のあるマージンを持つ中央揃えシングルカラムテキストレイアウト。

07

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

インタラクティブ要素への微細なカラーやtext-decorationのトランジション。

インタラクティブ要素へのhover時の微細なカラートランジション。 · 標準的なクリック動作。

08

コンポーネント

• button ボタンは表示されない。
• card カードは表示されない。
• chip チップは表示されない。
• input インプットは表示されない。
• hero 大きな粒状のロゴマーク、見出し、導入段落を持つテキストベースのヒーロー。

09

文体と禁止事項

• トーン プロフェッショナルで誠実、コミュニティ重視。
• 見出し 直接的で宣言的、祝福的。
• CTA テキスト内の情報提供リンク。

• ホワイト背景を使用しない — スクリーンショットはダークネイビー/ブルーブラック背景を示している。
• 本文にセリフフォントを使用しない — スクリーンショットは全体を通じてクリーンなサンセリフ（Geist）を採用。
• カラフルなアクセントや明るいボタンを追加しない — スクリーンショットはダーク背景上のモノクロの白/グレーテキストに依存。
• マルチカラムグリッドレイアウトを使用しない — スクリーンショットは中央揃えシングルカラムテキストレイアウトを示している。
• 重いドロップシャドウやガラスモーフィズム効果を追加しない — スクリーンショットはフラットでマットなサーフェスを使用。
• テキストの両揃え（justified）を使用しない — スクリーンショットは左揃えテキストを使用。
• 避ける: 営業的な言葉遣い
• 避ける: 専門用語を多用した技術的説明
• 避ける: 攻撃的な行動喚起

10

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

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

11

System Prompt

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