精選 · 開放 · 免費
Mollie
現代企業的支付基礎設施
fintechpayments
01
設計氣質 DNA
支付歐洲成長B2B基礎設施
以規模與信任為首的歐洲版 Stripe
02
色彩
#D55A00Accent
#111111Ink
#FFFFFFBG
#F4F4F4BG quiet
#A6A6A6Muted
rgba(166,166,166,0.6)Line
高對比單色調，搭配策略性橘色點綴
03
字型
geometric-sans · humanist-sans · monospace
- display
64px · 400 - heading
48px · 400 - body
16px · 400
展示型排版使用緊湊的字距調整 · 字重範圍從 400 到 500 以建立層次 · 行高寬裕以提升可讀性
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於 4px 遞增的垂直節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 24px
pill · 999px
使用 rgba(166,166,166,0.6) 的細微 1px 邊框
0px 4px 8px 0px rgba(0, 0, 0, 0.08) · 0px 16px 32px 0px rgba(0, 0, 0, 0.08) · 0px 0px 1px 0px rgba(0, 0, 0, 0.15)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬頁首與主視覺區段，搭配受限制的內容區域
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
細微的 hover 狀態過渡 · 流暢的頁面滾動
互動元素上的細微色彩過渡 · 透過狀態改變提供即時視覺回饋
08
組件
- button 高對比主要按鈕（黑色背景、白色文字）與細微次要按鈕（灰色背景）
- card 大型圓角圖片卡片，具備寬裕內距與細微陰影
- chip 在畫面中不可見
- input 簡潔的底線式輸入框
- hero 大型排版置中於全寬生活風格影像之上，並覆蓋有 UI 卡片
09
文案語氣與禁用清單
- 語氣 專業、值得信賴且自信
- 標題風格 大型、粗體的陳述，強調規模與可靠性
- 按鈕文案 直接且以行動為導向（立即開始、聯繫業務）
- 不要使用明亮或霓虹色彩——畫面截圖顯示以黑、白、灰為主的柔和調色盤
- 不要使用裝飾性或襯線展示型字體——畫面截圖顯示標題使用簡潔的幾何無襯線體
- 不要用過多元素雜亂佈局——畫面截圖顯示寬裕的留白與聚焦的內容
- 不要使用小而擁擠的排版——畫面截圖顯示大型、易讀的字體與寬裕的行高
- 不要所有元素都使用銳利的直角——畫面截圖顯示寬裕的圓角（最高達 24px）
- 不要使用細長、薄弱的按鈕——畫面截圖顯示實心、厚實的主要按鈕，具備清晰的對比度
- 避免: 充滿術語的語言
- 避免: 過多的驚嘆號
- 避免: 過於隨意的語氣
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Mollie 是一個專為各種規模企業設計的歐洲支付處理平台。視覺系統採用高對比單色調色盤（黑、白、灰），並以策略性橘色點綴作為強調。排版採用幾何無襯線展示型字體，標題使用緊湊字距調整，內文則使用人文主義無襯線體。佈局強調寬裕的留白與大型、具衝擊力的影像。關鍵設計規則包括：絕不使用明亮的霓虹色彩、維持簡潔的幾何排版，並確保元素間有寬裕的間距。網站將自身定位為值得信賴的專業基礎設施夥伴，需要高端且克制的視覺處理方式。
en · zh-CN · zh-TW · ja · ko