厳選・オープン・無料

Congress Kadoa

立法機関および行政機関の株式取引活動を監視するオープンソースダッシュボード

01

デザイン DNA

市民の監視のために再構想された、クリーンでデータ密集型の金融ターミナル

02

カラー

財務パフォーマンス指標のためのセマンティックなグリーン/レッドシグナルカラーを持つニュートラルキャンバス

03

タイポグラフィ

grotesque-sans · monospace

• display48px · 600
• heading24px · 600
• body16px · 450
• caption13px · 450

04

余白

標準4pxベースグリッドで、一貫したline-heightの倍数によって縦のリズムを維持します。

05

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

カードおよびテーブル行には1px solid #e5e7ebを使用し、重い影なしに繊細な境界を提供します。

カードには影を使用せず、区切りにはボーダーに依存

06

レイアウト

トップナビゲーションバーと、密なテーブルデータを含むスタックされたコンテンツセクションを持つ単一カラムデータ中心レイアウト。

07

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

色、背景、ボーダーを含むすべてのインタラクティブステータスに対する、均一な150ms transition

テーブル行やボタンなどのインタラクティブ要素に対する、微細な背景色の transition · ステータス変更による即座の視覚フィードバック。カーソルはデフォルトでポインターターに

08

コンポーネント

• button 半径9999pxのピル型で、最小限のボーダーとセマンティックな背景色
• card 主要な業績指標を含む、1pxボーダーと4px半径を持つホワイト背景
• chip ティッカーシンボルおよびステータスインジケーターのための、緑/レッド/オレンジの背景色
• input トップナビゲーションの丸みのある検索入力で、キーボードショートカットインジケーター付き
• hero 大型の左揃え見出しと補足サブタイトル、およびその下の指標カードグリッド

09

文体と禁止事項

• トーン 客観的で分析的かつ真剣で、編集的なバイアスなしに生のデータresentationに焦点を当てています。
• 見出し データカバレッジおよび特定の指標に関する、直接的で宣言的なステートメント
• CTA 「すべて見る →」や「GitHubでスター」のような機能的なナビゲーションリンク

• 重いドロップシャドウを使用しない — スクリーンショットでは1pxボーダーのみで定義されたクリーンなホワイトカードが示されています
• 中央揃えの見出しを使用しない — スクリーンショットでは全体を通じて厳密な左揃えのテキスト階層が示されています
• カードに角丸を使用しない — スクリーンショットではデータコンテナに鋭い4pxの角が示されています
• セリフ体を使用しない — スクリーンショットではすべてのテキストにクリーンなgrotesque sans-serif系が示されています
• カラフルなグラデーションを使用しない — スクリーンショットではフラットなニュートラル背景とセマンティックなカラーチップが示されています
• 複雑なマルチカラムレイアウトを使用しない — スクリーンショットではリニアな単一カラムデータストリームが示されています
• 避ける: マーケティング用語
• 避ける: 感情的な言葉
• 避ける: 誇大広告
• 避ける: 曖昧な記述

11

System Prompt

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