精選 · 開放 · 免費

Refero

一個為產品畫面、流程和模式進行策展的設計圖書館與搜尋引擎。

01

設計氣質 DNA

一個精緻、明亮的設計檔案庫，同時擔任智慧的研究助理。

02

色彩

在明亮、通透的冷灰色背景上使用高對比度的黑色字體，多色調色盤僅用於浮動 UI 資源。

03

字型

transitional-serif · humanist-sans

• display80px · 400
• body20px · 400
• label16px · 500

展示型字體使用過渡襯線體，打造優雅、具權威感的標題。 · 內文與 UI 文字使用簡潔的人文主義無襯線體。 · 字體主要依賴 500 字重，營造現代、中等粗細的感覺。

04

間距

寬敞的留白定義了版面配置，創造出透氣、藝廊般的節奏。

05

表面 (圓角 / 陰影 / 邊線)

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

版面

流動式、置中的容器，具有寬鬆邊距和簡潔、通透的網格結構。

07

動效與互動

hover 狀態下的流暢轉場（box-shadow、opacity、border-radius） · 主視覺區域中裝飾性 UI 資源的浮動或縮放動畫。

透過 box-shadow 和 opacity 調整實現細微的陰影變化。 · 透過 scale 或顏色變化的即時回應。

08

組件

• button 藥丸形狀的主要按鈕，採用實心黑色背景與白色文字；次要按鈕則為柔和的灰色背景。
• card 淺灰色容器，帶有柔和陰影，常用於展示 UI 資源或浮動網格元素。
• chip 小型圓角藥丸標籤，用於分類 UI 元素與頁面類型。
• input 簡潔的搜尋欄位，具有圓角和細微的灰色邊框。
• hero 大型、置中的文字區域，周圍環繞著浮動、多彩的 UI 資源預覽。

09

文案語氣與禁用清單

• 語氣 專業、實用且具權威感，同時平易近人。
• 標題風格 直接、行動導向的陳述，強調人類與 AI 的協作。
• 按鈕文案 清晰、行動導向的標籤，例如「開始探索」或「登入或註冊」。

• 不要使用扁平、無襯線體的標題——截圖顯示的是優雅、高對比度的過渡襯線展示型字體。
• 不要使用單一、單色的品牌調色盤——截圖顯示的是多彩的浮動 UI 資源陣列。
• 不要預設使用厚重、深色的容器或深色模式——截圖顯示的是以白色和淺灰色為主的明亮背景。
• 不要對所有元素使用銳利的 4px 圓角——截圖顯示的是 8px、20px 和完全圓角藥丸形狀的混合。
• 不要使用密集、雜亂的版面配置——截圖顯示的是寬敞的留白和透氣的藝廊結構。
• 不要對主要按鈕使用刺眼、明亮的強調色——截圖顯示的是實心黑色的藥丸形按鈕。
• 避免: 術語過多的描述
• 避免: 過於銷售或促銷的語言
• 避免: 強勢的行動號召

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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