厳選・オープン・無料

Upstash

Redis、ベクトル、キューなどを統合したサーバーレスデータプラットフォーム。

01

デザイン DNA

現代の開発者のための、クリーンで高性能なデータユーティリティ

02

カラー

クリーンでハイコントラストのライトテーマに、性能と現代的なインフラストラクチャを示す鮮やかなグリーンアクセントを採用。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display72px · 600
• heading32px · 500
• body16px · 400
• caption14px · 400

ヒーローテキストと主要見出しにはジオメトリック・サンスを使用 · 本文と説明にはヒューマニスト・サンスを使用 · コードスニペットやCLIコマンドにはモノスペースを使用

04

余白

「サーバーレス」のシンプルさを反映した、豊富な余白を備えた一貫した4pxベースユニット。

05

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

1px solid #e5e7eb

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 5px 40px 0px rgba(9, 14, 21, 0.16)

06

レイアウト

センタリングされた単一カラムのヒーローから、機能向けのマルチカラムカードグリッドへと移行。

07

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

インタラクティブ要素のカラーおよびbackground-colorトランジション · UI状態変化のための滑らかなopacityおよびtransformトランジション

インタラクティブ要素の微細な色の変化または背景塗り · トランジションまたは微細なtransformによる即座のビジュアルフィードバック

08

コンポーネント

• button ソリッドグリーンの塗りとホワイトテキストを備えた、ピル型プライマリボタン。ゴーストまたはアウトラインのセカンダリバリエーション。
• card 微細なボーダーと豊富なパディングを備えたホワイトカード。製品モジュールや機能ハイライトに使用。
• chip Redis、Vectorなどの異なるプラットフォーム製品を切り替えるための、タブ型チップの水平スクロール可能な行。
• input 微細なグレーボーダーと角丸を備えた標準テキスト入力。
• hero メインヘッドラインの鮮やかなグラデーションを備えた、大規模なセンタリングタイポグラフィ。その後に簡潔なバリュープロポジションとプライマリCTAが続きます。

09

文体と禁止事項

• トーン 直接的で開発者向け、かつパフォーマンス重視
• 見出し 大胆で簡潔、かつバリュー重視のステートメント
• CTA 行動を促す明確な表現（例：「無料で始める」「データベースを作成」）

• 装飾的なセリフフォントを使用しない — スクリーンショットはクリーンなジオメトリックおよびヒューマニストサンセリフタイポグラフィを示しています。
• プライマリインターフェースとしてダークテーマを使用しない — スクリーンショットはホワイト背景の軽やかで広々としたレイアウトを示しています。
• ネオン色や過度に飽和したネオンパステルを使用しない — スクリーンショットはメインアクセントとして落ち着いたエメラルドグリーン（#047857）を使用しています。
• プライマリコンポーネントに鋭く角張ったコーナーを使用しない — スクリーンショットは十分な角丸（12px、ピル型）を示しています。
• 競合する色が多すぎてインターフェースを雑然とさせない — スクリーンショットはグリーン、ホワイト、グレーの緊密なパレットを維持しています。
• 装飾的で複雑なイラストを使用しない — スクリーンショットはシンプルで抽象的な幾何学図形とアイコンを使用しています。
• 小さく窮屈なタイポグラフィを使用しない — スクリーンショットは非常に大きく太字のヒーローフォントと豊富な行間を使用しています。
• 避ける: マーケティング用語
• 避ける: 曖昧な約束
• 避ける: 過度に複雑な文
• 避ける: 受動態

10

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

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

11

System Prompt

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