厳選・オープン・無料

Refero

プロダクトのスクリーン、フロー、パターンのキュレーション型デザインライブラリ兼検索エンジン。

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

オリジナル: https://refero.design

📦 パックの中身を見る →

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

ディスプレイ用書体にはトランジショナル・セリフ体を採用し、エレガントで権威ある見出しを実現。 · 本文および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

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Referoは、ヒューマンとAIの両方に向けたキュレーションされたプロダクトスクリーン、フロー、パターンを提供するデザインリサーチツールおよびギャラリーです。デザインは、ソフトなクールグレー(#F7F8FB、#EEF0F6)、深いブラック(#000000)のタイポグラフィ、そして浮遊するUIアセットプレビューにのみ見られる多彩なアクセントカラーを特徴とする、明るく空気感のあるカラーパレットで構成されています。タイポグラフィは、ディスプレイ用にクラシックなトランジショナル・セリフ体を、本文用にモダンなヒューマンサン・セリフ体を組み合わせています。重要なデザインルールは以下の通りです:十分な余白と息ののびるレイアウトを優先すること;重く密集したコンテナは絶対に使用しないこと;ブラックテキストと明るいバックグラウンドの間に高いコントラストを確保すること。インターフェースは、控えめな高さの変化と滑らかなマイクロインタラクションに依存し、洗練されたプレミアム感を実現しています。

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

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

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

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