厳選・オープン・無料

Relevance AI

ビジネスにインパクトを与えるAIエージェント、チームが管理

aiagent
Relevance AI のスクリーンショット
↓ デザインシステムをダウンロード (25 MB)OpenDesign で開く

オリジナル: https://relevanceai.com

📦 パックの中身を見る →

01

デザイン DNA

AIエージェントエンタープライズ自動化コラボレーションスケーラビリティ

近代的なエンタープライズ管制塔

02

カラー

#6056FFAccent
#0D162FInk
#6B7280Ink soft
#FFFFFFBG
#F3F4F6BG soft
#EEF2FFBG quiet
#9CA3AFMuted
rgba(229, 231, 235, 1)Line

クリーンなホワイトキャンバスに、ハイコントラストのダークテキストと、主要アクションやハイライト用の鮮やかな紫色アクセントを組み合わせ。

03

タイポグラフィ

sans-serif · monospace

ディスプレイ見出しには、密なジオメトリックsans-serifを使用。 · 本文テキストには、クリーンなヒューマニストsans-serifを使用。 · モノスペースは、技術的要素に控えめに使用。 · 文字間隔は、見出しは一般的に Tight、本文は Normal に設定。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

8pxのベースグリッドを使用し、セクションには十分な余白を確保。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid #E5E7EB

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(59, 50, 249, 0.25) 0px 1.6px 6.4px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央にヒーロー、その下にマルチカラムのロゴグリッドを配置。

07

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

150msmicro
220mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

ホバー時の滑らかな色と背景のトランジション。 · インタラクティブ要素の不透明度変化。

微細な色の変化や背景の変更。 · 軽微なスケールや色の変化による即時フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Relevance AIは、クリーンでプロフェッショナルなSaaS美学を持つエンタープライズAIエージェントプラットフォーム。デザインは、白い背景に深いネイビーテキスト(#0D162F)と、主要なCTAやハイライト用の鮮やかな紫色アクセント(#6056FF)を使用。タイポグラフィはモダンなsans-serifで、太字で大きく、 Tightなトラッキングを持つ見出し。重要なデザイン原則には、十分なホワイトスペース、可読性への厳格な焦点、ミニマルなパレットが含まれる。ダークテーマ、セリフフォント、多色グラデーションは使用しない。雑然としたレイアウトは避け、十分なパディングと明確なビジュアル階層でハイエンドなエンタープライズ感を維持。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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