精選 · 開放 · 免費

GoCardless

一個旨在簡化 B2B 收款流程的專業金融科技平台。

01

設計氣質 DNA

一個專注於建立信任、旨在簡化 B2B 收款流程的專業金融科技平台。

02

色彩

以溫暖的灰白色與深炭灰色為基底的內斂配色，並以單一高飽和度的電光黃作為點綴。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 700
• h236px · 600
• body18px · 400
• small14px · 400

標題使用粗體、幾何風格的無襯線字體，以展現強烈、現代的氣場。 · 內文使用易讀性極高的人文無襯線字體，確保舒適的閱讀體驗。 · 等寬字體僅保留用於特定技術或數據相關的內容。

04

間距

採用一致的 4px 基礎網格，並在主要頁面區塊之間維持寬裕的垂直節奏（48px/64px）。

05

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

1px solid #D4D1CD

0px 0px 0px 1px inset（按鈕邊框） · 0px 0px 1px 0px rgba(0, 0, 0, 0.1)（卡片的細微深度感）

06

版面

桌面版採用雙欄網格，內容區塊交替排列（文字在左/媒體在右，媒體在左/文字在右），以創造視覺趣味。

07

動效與互動

互動元素的背景、色彩與 box-shadow 採用快速的 0.1 秒/0.2 秒過渡動畫。 · 文字連結的底線顏色採用流暢的 0.2 秒過渡動畫。

按鈕的背景顏色填充或邊框顏色變化。 · 透過背景或邊框的更新，立即切換狀態。

08

組件

• button 膠囊形按鈕，搭配厚實的深色實心邊框；主要操作使用填充黃色，次要操作則使用透明設計。
• card 簡潔的卡片，帶有柔和的陰影與較大的圓角（24px/32px），用於呈現客戶見證與合作夥伴標誌。
• chip 未顯著使用。
• input 未顯著使用，但預期會採用簡潔的圓角邊框設計。
• hero 大膽醒目的字體排印，搭配高品質的情境照片與顯眼的影片播放覆蓋層。

09

文案語氣與禁用清單

• 語氣 專業、直接且著重於效益。
• 標題風格 粗體、全大寫且具衝擊力，以立即吸引目光。
• 按鈕文案 清晰且聚焦於行動，例如「立即註冊」與「聯絡銷售團隊」。

• 不要使用深色主題 — 截圖顯示為淺色、溫暖的灰白色主背景（#EFECE7）。
• 不要使用細緻、纖細的字體排印 — 截圖顯示為粗體、厚重的幾何無襯線字體用於展示文字。
• 不要使用低調、柔和的點綴色 — 截圖顯示為單一、高飽和度的電光黃點綴色（#F1F252）。
• 不要使用尖銳、方形的圓角 — 截圖顯示為較大的膠囊形圓角（24px/32px）用於按鈕與卡片。
• 不要使用複雜的漸層 — 截圖顯示為單色填充與簡單的攝影背景。
• 不要使用纖細、精緻的邊框 — 截圖顯示為明顯的 1px 實心深色邊框用於互動元素。
• 避免: 過於複雜的術語
• 避免: 標題使用被動語態
• 避免: 不明確的價值主張

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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