厳選・オープン・無料

Convex

Convexは、開発者が安心して開発を進められる統合バックエンド・ア・サービスを提供します。

01

デザイン DNA

モダンなウェブアプリケーションのための、エンタープライズグレードのエンジンブロック

02

カラー

温かみのあるクリーム色のエディトリアルエリアと、集中力のあるダークな開発環境との間の、高コントラストなスプリットデザイン。

03

タイポグラフィ

geometric-sans · monospace

• display40px · 700
• body16px · 400

見出しはきつくトラッキングされ、太字 · 本文は十分な行間で高い可読性を維持 · モノスペースフォントはコードスニペットとターミナルコマンドにのみ使用

04

余白

4pxベースグリッドと、セクション区切りに十分なパディング

05

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

1px solid #141414

0px -16px 72px -8px rgba(0, 0, 0, 0.25) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

レイアウト

テキストを左、インタラクティブなコードエディタを右に配置したスクリーン分割ヒーロー

07

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

ホバー時の滑らかな150msのカラーおよびトランスフォームトランジション · 背景グラデーションの微妙なアニメーション

滑らかなイージングを用いた、背景とテキストカラーの微妙な変化 · わずかなスケールフィードバックを伴う即座のレスポンス

08

コンポーネント

• button 白色テキストを持つ、塗りつぶしのダークなピルボーダーラジウスボタン
• card 12pxボーダーラジウスと微妙なシャドウを持つダークテーマカード
• chip 「Work」や「Other」などのカテゴリ用の、カラフルな角丸タグ
• input モノスペースフォントを使用した、ダークターミナルスタイルの入力フィールド
• hero 一方に大きなタイポグラフィ、もう一方にライブデモを配置した非対称スプリットレイアウト

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、開発者中心
• 見出し 大きく、太字で、きつくトラッキングされたジオメトリック・サンセリフ
• CTA ピル型ボタンを用いた、直接的で行動を促す

• プライマリボタンに標準的な角丸を使用しない — スクリーンショットはピル型（999px）ボーダーを示しています
• 明るいブルーまたはグリーンのアクセントを使用しない — スクリーンショットはコードシンタックスのみにカラフルなアクセントを持つ、厳格なモノクロマティックパレットを示しています
• 見出しにセリフフォントを使用しない — スクリーンショットは太字で、きつくトラッキングされたジオメトリック・サンセリフを示しています
• 細く、薄いボーダーを使用しない — スクリーンショットは明るい背景に対する1px実線のダークボーダーを示しています
• ページ全体に純粋なダーク背景を使用しない — スクリーンショットは明るいクリーム色のメインコンテンツエリアとダークコンポーネントエリアとの分割を示しています
• Helveticaなどの標準的なサンセリフフォントを使用しない — スクリーンショットは特徴的で、わずかに幅広いジオメトリック・サンセリフカテゴリを示しています
• 避ける: 軽薄または遊び心すぎる言葉
• 避ける: 散らかったレイアウト
• 避ける: 明るく、ネオン色を多用したカラースキーム

10

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

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

11

System Prompt

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