厳選・オープン・無料
Refero
プロダクトのスクリーン、フロー、パターンのキュレーション型デザインライブラリ兼検索エンジン。
designgallery
01
デザイン DNA
デザインリサーチキュレーションAIエージェントリファレンスライブラリヒューマンセントリック
洗練された、空気感のあるデザインアーカイブであり、スマートなリサーチアシスタント。
02
カラー
#000000Ink
rgba(2,18,73,0.38)Ink soft
#F7F8FBBG
#EEF0F6BG soft
#FFFFFFBG quiet
#9FA5BAMuted
明るく空気感のあるクールグレーバックグラウンドに、高コントラストのタイポグラフィ（ブラック）を配置。多彩なカラーパレットは、浮遊するUIアセットにのみ使用。
03
タイポグラフィ
transitional-serif · humanist-sans
- display
80px · 400 - body
20px · 400 - label
16px · 500
ディスプレイ用書体にはトランジショナル・セリフ体を採用し、エレガントで権威ある見出しを実現。 · 本文およびUIテキストには、クリーンなヒューマンサン・セリフ体を使用。 · タイポグラフィは、weight 500を多用し、モダンで中程度の重み感を表現。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
十分な余白がレイアウトを定義し、息ののびるギャラリーのようなリズムを生み出す。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 8px
lg · 20px
pill · 999px
1px solid rgba(2,18,73,0.38)
0px 0px 0px 2px #F7F8FB inset · 0px 0px 0px 2px rgba(45, 49, 63, 0.2) · 0px 1px 3px 0px rgba(12, 41, 126, 0.09) · 0px 3px 8px 0px rgba(12, 41, 126, 0.09) · 0px 8px 16px 0px rgba(12, 41, 126, 0.07)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
十分なマージンを持つ、ゆったりとした中央揃えコンテナ。クリーンで空気感のあるグリッド構造。
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover状態の滑らかなトランジション（box-shadow、opacity、border-radius） · ヒーローセクションの装飾用UIアセットに対する、浮遊またはスケールアニメーション。
box-shadowとopacityの調整による、控えめな高さの変化。 · スケールや色の変化による即座のレスポンス。
08
コンポーネント
- button ソリッドブラック背景にホワイトテキストのピル型プライマリボタン、およびソフトグレー背景のセカンダリボタン。
- card ソフトシャドウを持つライトグレーコンテナ。UIアセットや浮遊するグリッドエレメントを表示。
- chip UI要素やページタイプを分類するための、小さな丸みのあるピル型タグ。
- input 角丸でソフトなグレーボーダーを持つ、クリーンな検索バー。
- hero 浮遊する多彩なUIアセットプレビューに囲まれた、中央揃えの大きなテキストエリア。
09
文体と禁止事項
- トーン プロフェッショナルで有益、かつ権威はあるが親しみやすい。
- 見出し ヒューマンとAIの協働を強調する、直接的でアクション指向の文言。
- CTA 'Start Exploring' や 'Log In or Sign Up' のような、明確でアクション指向のラベル。
- フラットなサンセリフ見出しを使用しない — スクリーンショットはエレガントな、高コントラストのトランジショナル・セリフ体のディスプレイ書体を示しています。
- 単一のモノクロマティックなブランドカラーパレットを使用しない — スクリーンショットは浮遊する多彩なUIアセットのアレイを示しています。
- デフォルトで重く暗いコンテナやダークモードを使用しない — スクリーンショットは主にホワイトとライトグレーの空気感のあるバックグラウンドを示しています。
- すべての要素にシャープな4px角丸を使用しない — スクリーンショットは8px、20px、完全な丸みのあるピル型の組み合わせを示しています。
- 密集したレイアウトを使用しない — スクリーンショットは十分な余白と息ののびるギャラリー構造を示しています。
- プライマリボタンに不快なほど明るいアクセントカラーを使用しない — スクリーンショットはソリッドブラックのピル型ボタンを示しています。
- 避ける: 専門用語の多用
- 避ける: 営業的または過度にプロモーショナルな言葉
- 避ける: 攻撃的なCTA
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 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Referoは、ヒューマンとAIの両方に向けたキュレーションされたプロダクトスクリーン、フロー、パターンを提供するデザインリサーチツールおよびギャラリーです。デザインは、ソフトなクールグレー（#F7F8FB、#EEF0F6）、深いブラック（#000000）のタイポグラフィ、そして浮遊するUIアセットプレビューにのみ見られる多彩なアクセントカラーを特徴とする、明るく空気感のあるカラーパレットで構成されています。タイポグラフィは、ディスプレイ用にクラシックなトランジショナル・セリフ体を、本文用にモダンなヒューマンサン・セリフ体を組み合わせています。重要なデザインルールは以下の通りです：十分な余白と息ののびるレイアウトを優先すること；重く密集したコンテナは絶対に使用しないこと；ブラックテキストと明るいバックグラウンドの間に高いコントラストを確保すること。インターフェースは、控えめな高さの変化と滑らかなマイクロインタラクションに依存し、洗練されたプレミアム感を実現しています。
en · zh-CN · zh-TW · ja · ko