厳選・オープン・無料
Appwrite
スピードとスケーラビリティのために設計された、オープンソースのバックエンド・ア・・サービス・プラットフォーム。
devinfra
01
デザイン DNA
オープンソースバックエンドインフラストラクチャ開発者向けプラットフォーム
モダンなアプリケーション構築のための、ダークで洗練されたコマンドセンター。
02
カラー
#fd356eAccent
#ffffffInk
#acacafInk soft
#19191cBG
#1d1d21BG soft
#202023BG quiet
#57575cMuted
rgba(172, 172, 175, 0.2)Line
ダークモードをベースとし、高コントラストの白色テキストと、プライマリアクションのための単一で鮮やかなピンクアクセントを採用。
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
64px · 500 - heading
40px · 500 - body
16px · 400
見出しテキストには、tightな字間の重めのグロテスク書体を使用。 · 本文テキストは、非常に読みやすいヒューマニスト・サンセリフをデフォルトとして採用。 · モノスペースフォントは、コードスニペットや技術的な識別子にのみ使用。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫したビジュアル密度を維持するための、厳格な4pxグリッドシステム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
rgba(172, 172, 175, 0.2)の微細な1pxボーダーが、ダークな没入感を損なうことなく、カードの境界線を定義しています。
0px 1px 3px 0px rgba(0, 0, 0, 0.05) · 0px 4px 8px 20px rgba(0, 0, 0, 0.2)
06
レイアウト
1200container
12columns
24pxgutter
768 / 1024breakpoints
ヒーローセクションには中央揃えのシングルカラムレイアウトを、フィーチャーや事例研究セクションにはマルチカラムグリッドへと移行。
07
モーションとインタラクション
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
セカンダリ要素の不透明度フェード。 · インタラクティブ状態における滑らかな色とボーダーのトランジション。
インタラクティブ要素のhover時における、微細な不透明度や背景色の変化。 · スケールや色の変化による、即座のビジュアルフィードバック。
08
コンポーネント
- button プライマリボタンは、ビビッドなピンクアクセント（#fd356e）を採用し、ピル形の角と白色テキスト。セカンダリボタンは透明で、微細なボーダー付き。
- card ダークで浮き上がりのあるパネル。微細なボーダーと適切な内部パディングを採用。
- chip 半透明背景と微細なボーダーを備えた、ピル形のタグ。
- input ダークテーマの入力フィールド。微細なボーダーと丸みのある角を採用。
- hero ビビッドなアクセントラインと高精細な製品スクリーンショットを伴う、巨大で中央揃えのタイポグラフィブロック。
09
文体と禁止事項
- トーン プロフェッショナルで直接的、かつエンパワリング。開発者の効率性とスケーラビリティに焦点を当てる。
- 見出し 太字で直接的、アクション志向。現在形の動詞を多用。
- CTA 明確でアクション志向。「プロジェクトを開始」「デモを依頼」など。
- 明るい背景を使用しない — スクリーンショットは深いダークテーマ（#19191c）を示しています。
- 見出しにセリフフォントを使用しない — スクリーンショットはクリーンでモダンなグロテスク・サンセリフを示しています。
- くすんだパステル調のアクセントカラーを使用しない — スクリーンショットは高彩度のピンク（#fd356e）を示しています。
- プライマリボタンに鋭い角を使用しない — スクリーンショットはピル形（999px radius）の角を示しています。
- カードに高コントラストの白色背景を使用しない — スクリーンショットはダークで少し浮き上がりのあるサーフェスを示しています。
- 大きな見出しに広い字間を使用しない — スクリーンショットはtightで負の字間を示しています。
- 避ける: 受動態
- 避ける: 過度に複雑な専門用語
- 避ける: 曖昧な約束
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Appwriteは、ダークで洗練されたUIを備えた、開発者向けのオープンソース・バックエンド・ア・・サービス（BaaS）プラットフォームです。プライマリカラーパレットは、深いダーク背景（#19191c）、高コントラストの白色テキスト（#ffffff）、およびプライマリコール・トゥ・アクションのためのビビッドなピンクアクセント（#fd356e）で構成されています。タイポグラフィは、見出しに太めのグロテスク・サンセリフ、本文にヒューマニスト・サンセリフを組み合わせ、クリーンでモダンな美学を維持しています。重要なデザイン制約：明るい背景やパステル調のアクセントカラーは決して使用せず、ダークサーフェス上の可読性のために常に高コントラストを維持し、プライマリアクションボタンには一貫したビジュアルを確保するためにstrictlyピル形（999px radius）の角を採用すること。
en · zh-CN · zh-TW · ja · ko