精選 · 開放 · 免費
Empower Me
一個大膽、高對比的金融科技平台,運用巨量字體與影像敘事,解碼信用與財務潛力。
FintechBold TypographyDark ModeCleanApp UI
01
設計氣質 DNA
大膽賦能無障礙現代值得信賴
一位身著時髦深色西裝、配戴亮黃口袋巾,大膽且賦能的金融顧問。
02
色彩
#E4E24EAccent
#FFFFFFInk
#171616BG
#F7F5EFBG soft
#FDFDF6BG quiet
#64635CMuted
rgba(16,15,15,1.0)Line
以單一鮮明、近似霓虹的黃綠色強調色點綴高對比深色模式,引導視覺聚焦於主要操作。
03
字型
geometric-sans · grotesque-sans
- display
96px · 900 - heading
48px · 900 - body
16px · 400
大型標題使用緊湊字母間距(-0.6px 至 -1px) · 導覽與小型標籤使用大寫追蹤(+1.2px) · 結合幾何感的展示字型與更簡潔的 grotesque 字型用於介面元素
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
主要內容區塊周圍提供充裕 padding,主視覺區塊內部則有大量留白。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 16px
lg · 24px
pill · 99999px
以細長、高對比的 2px 邊框分隔深色主視覺與淺色區段。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬深色主視覺區域過渡至明亮、置中的內容區,並配有三欄特色功能網格。
07
動效與互動
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 與 focus 狀態的流暢色彩過渡
按鈕與連結的背景色彩平滑過渡。 · 立即回應並帶有細膩緩動效果。
08
組件
- button 藥丸形狀,採用鮮明黃綠色背景、深色文字,並搭配粗體大寫追蹤。
- card 明亮、圓角的卡片,內部 padding 充裕,並採用俏皮的手繪插畫風格。
- chip 小型浮動徽章,帶有圖示與文字,通常為藥丸形狀。
- hero 巨大的深色區塊,包含超大白色標題,以及由人像攝影拼貼構成的浮動、不對稱佈局,並點綴小型數據徽章。
09
文案語氣與禁用清單
- 語氣 賦能、直接且無障礙,將複雜的金融概念轉化為簡單易懂的語言。
- 標題風格 極其粗體、簡潔且以利益為導向,常使用商標符號以強化品牌。
- 按鈕文案 強而有力、以行動為導向的祈使動詞,採用全大寫並搭配鮮明色彩。
- 請勿使用纖細、精緻的字體——截圖中顯示的是巨大、粗重的字體排印。
- 請勿使用複雜、多彩的調色盤——截圖中顯示的是嚴謹的深色/白色/黃綠色方案。
- 請勿使用尖銳、方正的圓角——截圖中顯示的是高度圓角、藥丸形的按鈕與卡片。
- 請勿使用小型、細膩的行動號召——截圖中顯示的是大型、高對比的黃色按鈕。
- 請勿使用密集、文字擁擠的佈局——截圖中顯示的是寬裕的留白與大型圖片。
- 請勿使用襯線字體作為主要文字——截圖中僅使用粗體無襯線展示字型與 grotesque 內文字型。
- 避免: 過度技術性的術語
- 避免: 被動語態
- 避免: 泛泛的企業用語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個金融科技平台設計系統,採用深色模式美學,並以單一鮮明的黃綠色強調色(#E4E24E)引導使用者注意力至主要操作。字型定義為巨大、粗體的幾何無襯線標題,搭配更簡潔的 grotesque 無襯線內文。佈局特色包括充裕的留白、高對比的區段過渡,以及寫實攝影與俏皮圓角介面元件的結合。關鍵禁忌:請勿使用多種競爭性的強調色;避免標題使用纖細精緻的字型;並切勿在按鈕或卡片上使用尖銳方正的圓角。此系統透過直接的語言與具衝擊力的視覺層級,優先體現大膽、賦能的語調。
en · zh-CN · zh-TW · ja · ko