精選 · 開放 · 免費

N26

一個簡潔、自信的金融科技使用者介面，運用標誌性的 teal 綠色引導使用者執行單一主要操作。

01

設計氣質 DNA

一個現代、友善且隨身攜帶的銀行分行，優先考量清晰度與信任感。

02

色彩

溫暖的米白色背景搭配主導的 teal 綜色，為金融操作創造值得信賴、易於存取的對比效果。

03

字型

geometric-sans

• display58px · 500
• heading32px · 400
• body18px · 400
• small14px · 400

04

間距

標準 4px 基礎網格，搭配寬裕的內邊距以保留呼吸空間

05

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

細微的 1px 邊框用於結構分隔與互動元素

rgba(0, 0, 0, 0.2) 0px 4px 8px 0px

06

版面

置中容器，章節間留有寬裕的垂直留白

07

動效與互動

互動元素在 background-color、transform 與 scale 上的平滑轉場

背景色或文字色彩轉變，搭配平滑過渡效果 · 縮放或位移的 transform 效果，提供即時回饋

08

組件

• button 圓角膠囊形狀的行動呼籲按鈕，具有高對比度，可採用浅色背景搭配 teal 綠色，或 teal 綠色背景搭配白色
• card 用於媒體與內容的大型圓角容器，通常具有 24px 的邊框半徑
• hero 全版面 teal 綠色或圖片背景的區域，中央配置大型字體與單一主要行動呼籲

09

文案語氣與禁用清單

• 語氣 友善、令人安心且高度專業
• 標題風格 直接、強調效益的陳述，採用第一人稱觀點
• 按鈕文案 以行動為導向且清晰，聚焦於主要目標

• 不要使用純白色 (#FFFFFF) 作為主要背景——截圖顯示使用的是溫暖的米白色 (#FAF8F5)。
• 不要使用多種相互競爭的強調色——截圖顯示僅使用單一主導的 teal 綠 (#088177) 作為主要強調色。
• 不要使用裝飾性或書法字體——截圖顯示所有使用者介面文字皆使用簡潔的自訂幾何無襯線字體。
• 不要為主要容器使用銳利的方形邊角——截圖顯示媒體卡片使用寬大的圓角 (24px)。
• 不要使用細而淺的邊框進行分隔——截圖顯示使用非常細微的淺灰色 (#E9E9E9) 作為水平分隔線。
• 不要將深色模式作為預設設定——截圖主要展示的是淺色、明亮的介面搭配 teal 綠色強調。
• 避免: 避免使用複雜的金融術語
• 避免: 避免使用過於強勢的銷售語言
• 避免: 避免使用密集、令人畏懼的大段文字
• 避免: 避免使用雜亂的版面或過度的視覺干擾
• 避免: 避免使用冷淡、純粹企業化的訊息傳遞

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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