厳選・オープン・無料
Evidence
データダッシュボードをコードとして扱い、開発者ワークフローとクリーンでプロフェッショナルなUIを組み合わせるビジネスインテリジェンスプラットフォーム。
databi
01
デザイン DNA
分析開発者バージョン管理データプロダクト
開発者向け分析ツールのモダンなドキュメントサイト
02
カラー
#1D4ED8Accent
#111827Ink
#4B5563Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F3F4F6BG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
技術的な精密さのための、単一のブルーアクセントを持つニュートラルグレー
03
タイポグラフィ
transitional-serif · humanist-sans · geometric-sans
- display
56px · 500 - heading
36px · 500 - body
16px · 400 - caption
14px · 400 - micro
12px · 500
大文字のマイクロテキストには letter-spacing 0.4px を使用 · 大きなディスプレイ見出しには letter-spacing -1.5px を使用 · 16pxの本文テキストには line-height 1.5 を維持 · 本文中の強調には weight 600 を使用 · インタラクティブ要素には weight 500 を使用
04
余白
4px
8px
12px
16px
20px
24px
32px
48px
64px
一貫した4pxのベースグリッドと、セクション間の十分な垂直スペース
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
1px solid #E5E7EB
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
十分な水平パディングと明確なビジュアルヒエラルキーを持つ中央揃えコンテンツ
07
モーションとインタラクション
200msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover状態での滑らかな色と透明度のトランジション · モーダルやドロップダウンの出現時の控えめなフェードイン
透明度の変化を伴う滑らかな200msの色のトランジション · 標準的なボタン押下状態による即座の視覚的フィードバック
08
コンポーネント
- button 角丸のピル形状で高いコントラスト。黒塗りのプライマリ、白枠のセカンダリ
- card 控えめな影と1pxボーダーを持つ白い背景
- chip 大文字のマイクロテキストを持つ小型のピル-shapedタグ
- input 控えめな影を持つクリーンなボーダーフィールド
- hero セカンダリサブタイトルと2つのCTAボタンを持つ、中央揃えの大きな見出し
09
文体と禁止事項
- トーン プロフェッショナルで、技術的で、自信に満ちた
- 見出し 明確で簡潔、行動を促す。強いタイポグラフィヒエラルキー
- CTA 直接的で命令的。「Get started」や「Book a demo」のような動詞を使用
- ダークモードを使用しない — スクリーンショットはダークテキスト (#FFFFFF背景、#111827インク) の明るい背景を示している
- 重いドロップシャドウを使用しない — スクリーンショットは控えめな1pxボーダーと最小限の高さを示している
- 本文に装飾的なセリフフォントを使用しない — スクリーンショットはすべての読み可能なテキストにサンセリフを使用
- マルチカラーアクセントを使用しない — スクリーンショットは単一のブルーアクセント (#1D4ED8) とニュートラルグレーを示している
- ボタンに角丸長方形を使用しない — スクリーンショットはフルラウンドのピル-shapedボタンを使用
- すべてのテキストに大文字を使用しない — スクリーンショットはマイクロラベルのみに大文字を予約
- プライマリコンテンツにグラデーション背景を使用しない — スクリーンショットはフラットな白いサーフェスを示している
- 避ける: 過度にカジュアルまたは会話的な言葉遣い
- 避ける: 文脈のない技術用語
- 避ける: 過度の感嘆符
- 避ける: 曖昧または抽象的な価値提案
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Evidence.devは、ビジネスインテリジェンスをコードとして提示する開発者向け分析プラットフォーム。デザインはクリーンな白い背景 (#FFFFFF) とプライマリの黒いテキスト (#111827)、単一のブルーアクセント (#1D4ED8) を使用。タイポグラフィは、ヒーロー見出しにはトランジショナルセリフ、本文にはヒューマニストサンスを組み合わせ、プライマリフォントファミリーとしてGeistを使用。レイアウトは十分なホワイトスペース、中央揃えコンテンツ、控えめなカードの高さ（軽いボーダーによる）を特徴とする。重要な禁止事項：ダークモードは絶対に使用せず、コンテンツ領域に重い影やグラデーションを避け、技術コンテンツに装飾フォントは使用しない。インターフェースは、データプロダクトを構築する技術者オーディエンスのための読みやすさとプロフェッショナルな信頼性を優先する。
en · zh-CN · zh-TW · ja · ko