厳選・オープン・無料

Novu

クリーンなタイポグラフィと、洗練された深宇宙をインスパイアしたカラーパレットを組み合わせた、ダークモードで開発者向けの通知インフラストラクチャプラットフォーム。

01

デザイン DNA

通知のための開発者ファーストコマンドセンター。洗練されたダークな美学とクリーンで技術的なインターフェースを融合。

02

カラー

シアンのアクセントを持つ高コントラストダークモード基盤。深みと階層感を生み出すために、ディープブルーとグレーに依存。

03

タイポグラフィ

geometric-sans · monospace

• display64px · 500
• body16px · 400

04

余白

4pxベースグリッドと一貫した垂直方向のスペーシング。

05

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

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

0 0 100px rgba(0, 213, 255, 0.15)

06

レイアウト

センタリングされたヒーローセクション、その後にマルチカラムの機能グリッドと複雑なオーバーラップUIデモ。

07

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

滑らかな背景トランジション · ホバー時のカラー変化 · インタラクティブ要素のトランスフォームスケーリング

ナビゲーションとボタンにおける、微妙なカラー変化または背景の変更。 · インタラクティブ要素のスケールトランスフォーム。

08

コンポーネント

• button ピル型のソリッドプライマリボタン（ホワイト背景にブラックテキスト）とアウトラインセカンダリボタン。
• card ダークテーマのカード。微妙なボーダーと、深みを出すためのソフトな放射グラデーション。
• chip カウント表示用のソリッド背景を持つ小さなピルバッジ（例：黄色/オレンジの「18」）。
• input ダークテーマの入力フィールド。微妙なボーダー付き。
• hero 巨大なセンタリングタイポグラフィと、オーバーラップするフローティングインターフェースコンポーネント。

09

文体と禁止事項

• トーン 技術的で、自信に満ち、開発者指向。
• 見出し 直接的で大胆。コードに近い構文を織り交えることが多い（例：'<Inbox />'）。
• CTA 明確で、大文字のアクション指向テキスト（例：'START FOR FREE'）。

• ライト背景を使用しない — スクリーンショットはディープなダークモード基盤 (#111018) を示している。
• 装飾的なセリフフォントを使用しない — スクリーンショットはクリーンで幾何学的なサンセリフタイポグラフィを示している。
• ヘッドラインでコード構文を避けるな — スクリーンショットではヒーローで '<Inbox />' が顕著に使用されている。
• くすんだ、低コントラストのカラーを使用しない — スクリーンショットはダーク背景に高コントラストのホワイトテキストと明るいシアンアクセントを示している。
• どこでも複雑で多色のグラデーションを使用しない — スクリーンショットは深みを出すための微細でダークな放射グラデーションを示している。
• シャープでボクシーな角を使用しない — スクリーンショットでは广泛的にピル型 (9999px) および12pxの角丸が使用されている。
• 避ける: 曖昧な表現
• 避ける: マーケティング用語
• 避ける: 装飾的なメタファー
• 避ける: 不必要に複雑な文章

10

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

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

11

System Prompt

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