精選 · 開放 · 免費

Uniswap

一款活潑且無障礙的去中心化交易平台，採用簡潔的高對比度設計。

01

設計氣質 DNA

簡潔、友善的金融科技介面，如同現代銀行應用程式，但帶有加密貨幣原生美學。

02

色彩

以簡潔淺色為基礎，搭配鮮明洋紅色強調與高對比度文字。

03

字型

Humanist Sans-Serif

• display52px · 500
• headline36px · 500
• body16px · 485
• label14px · 485
• small18px · 485

所有文字使用系統字體堆疊 (Basel, -apple-system, system-ui, sans-serif)。 · 標題展示文字大小設為 52px，字重 500。 · 內文大小設為 16px，字重 485。 · 大型展示文字使用 -1px 負字間距。

04

間距

全版使用 4px 基礎網格，常見間距為 8px、16px 與 24px。

05

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

1px solid rgba(19, 19, 19, 0.12)

rgba(19, 19, 19, 0.04) 0px 6px 12px -3px · rgba(19, 19, 19, 0.03) 0px 2px 5px -2px

06

版面

桌面版採用單欄置中佈局，行動版擴展為全寬佈局。

07

動效與互動

微互動使用 0.1s ease-in-out 過渡效果。 · 變換與透明度變化使用 0.08s ease-in-out 過渡效果。 · 互動元素使用 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 彈簧動畫。

互動元素上的細微色彩或背景透明度變化。 · 按鈕與可點擊卡片上的輕微縮放或變換效果。

08

組件

• button 圓角藥丸形按鈕，邊框半徑 32px，填充洋紅色強調色。
• card 卡片邊框半徑 20px，內邊距 12px，搭配細微陰影或淺灰色背景。
• chip 小型藥丸形標籤，淺色背景，文字顏色與其類別相符。
• input 大型圓角輸入欄位，邊框半徑 12px，淺灰色背景。
• hero 顯眼的置中首頁區域，包含大型 52px 標題與主要交換元件。

09

文案語氣與禁用清單

• 語氣 友善、無障礙且直接，讓複雜的 DeFi 概念變得平易近人。
• 標題風格 大型、粗體且清晰，常使用單句有力語句。
• 按鈕文案 行動導向且顯眼，使用洋紅色強調色吸引注意力。

• 不要使用尖銳的小邊框半徑——截圖顯示卡片與按鈕使用 12px 至 32px 半徑。
• 不要使用深色背景作為主要畫布——截圖顯示以白色 (#FFFFFF) 與淺灰色 (#F9F9F9) 為主的色盤。
• 不要使用高對比深色模式作為整體介面——截圖顯示淺色主題搭配高對比度文字。
• 不要使用細體淺色字型作為標題——截圖顯示 52px 標題使用 500 字重。
• 不要使用廣泛的主色調——截圖顯示單一主導的洋紅色 (#FF37C7) 強調色。
• 不要使用剛性、重網格且粗邊框的佈局——截圖顯示使用柔和陰影與圓角進行區隔。
• 避免: 專業術語堆砌
• 避免: 侵略性行銷語調
• 避免: 密集文字區塊

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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