厳選・オープン・無料
Clickhouse
技術的な精度のために構築された、ダークでハイコントラストなインターフェースを持つ高性能開発者プラットフォーム。
Developer ToolsBold TypographyDark ModeCleanPremium
01
デザイン DNA
データベースアナリティクスリアルタイムインフラストラクチャ
高性能データ操作のために構築されたコマンドセンターのダッシュボード。
02
カラー
#faf569Accent
#ffffffInk
#a0a0a0Ink soft
#151515BG
#1f1f1cBG soft
#131313BG quiet
#dfdfdfMuted
rgba(65, 65, 65, 0.8)Line
可読性を優先し、鮮やかなイエローのアクセントに注意を集中させる、ハイコントラストのダークテーマ。
03
タイポグラフィ
humanist-sans · monospace
- display
72px · 500 - headline
36px · 500 - body
16px · 400 - small
14px · 400
humanist-sansファミリー内で強調にはboldウェイトを使用する · ディスプレイ向けタイポグラフィにはタイトな行間を維持する · テキストと背景の間に高いコントラストを確保する
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
セクション間隔にはより大きな倍数を使用する、一貫した4pxベースグリッド
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(65, 65, 65, 0.8)
0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 20px 25px -5px rgba(0, 0, 0, 0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えのコンテンツを持つフルワイドヒーローセクションと、構造化レイアウトのための12カラムグリッド
07
モーションとインタラクション
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素上的な色と背景のスムーズな遷移 · 微細なhover状態の変化
ボタンとリンクでの色と背景色の遷移。 · 微妙なopacityまたはtransform変化による即時視覚フィードバック。
08
コンポーネント
- button 黒いテキストと微妙な角丸を持つ、ソリッドプライマリイエローボタン。セカンダリボタンはボーダー付きの透明背景を使用。
- card 微細なボーダーと角丸を持つダークサーフェスカード。統合アイコンを含むことが多い。
- chip 主要にフィーチャーされていません。
- input スクリーンショットでは主要にフィーチャーされていません。
- hero 明確な階層とデュアルコール・トゥ・アクションボタンを持つ、ダーク背景にセンター配置のスケールの大きなタイポグラフィ。
09
文体と禁止事項
- トーン 自信に満ち、技術的で、率直。
- 見出し パフォーマンスとスケールを強調する、大胆で簡潔なステートメント。
- CTA 「無料クラウドトライアルを開始」のような明確な価値提案を持つ、行動志向。
- 角丸を12px以上にしない — スクリーンショットでは微細で機能的な角丸が示されている
- 複数のアクセントカラーを使用しない — スクリーンショットでは単一の支配的なイエローアクセントが示されている
- ライトモードや白い背景を使用しない — スクリーンショットではダークモードデザインが示されている
- 装飾的なセリフフォントを使用しない — スクリーンショットではすべてのディスプレイおよび本文テキストにhumanist-sansが使用されている
- 雑然としたテクスチャやパターンを使用しない — スクリーンショットではクリーンでフラットなサーフェスが示されている
- 低コントラストのテキストを使用しない — スクリーンショットではダーク背景上のハイコントラストな白とイエローが示されている
- 避ける: 曖昧なマーケティング用語
- 避ける: 過度にカジュアルな言葉
- 避ける: 文脈のない複雑な技術的説明
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
これは、リアルタイムデータベースClickHouseのプレミアム開発者ツールインターフェースです。デザインはダークモードパレットを使用し、ほぼ黒の背景と、プライマリアクション用のハイクロマイエローアクセントが特徴です。タイポグラフィはクリーンなhumanist-sans-serifで、ディスプレイ用にはboldウェイトを使用しています。主要なカラーコードは、#151515（背景）、#faf569（アクセント）、#ffffff（インク）です。重要な注意点：ライトモードは決して使用せず、複数のアクセントカラーは使用せず、装飾的なセリフは使用しないこと。レイアウトは12カラムグリッドとセンタリングされたヒーローコンテンツで、ゆとりのある空間を確保しています。
en · zh-CN · zh-TW · ja · ko