精選 · 開放 · 免費
Family
一款 whimsical、以角色為驅動的加密貨幣錢包，旨在讓每個人都覺得 Ethereum 平易近人且簡單。
cryptowalletmotion
01
設計氣質 DNA
活潑平易近人信任創新清晰
一位友善的夥伴，引導你穿越複雜的加密貨幣水域
02
色彩
#0080e8Accent
#474645Ink
#7a7876Ink soft
#ffffffBG
#f2f0ecBG soft
#a0a0a0Muted
rgba(71, 70, 69, 0.2)Line
以乾淨的留白為主，點綴著充滿活力與個性的色彩
03
字型
geometric-sans · humanist-sans
- display
64px · 500 - heading-2
44px · 500 - body
16px · 400 - caption
14px · 400
標題文字使用緊湊的行高 (1.05) 與負字距 (-1.5px) · 內文維持舒適的 1.6 行高以確保可讀性 · 所有文字使用 400-500 的字重範圍，不使用粗體 · 所有尺寸的字距均略微為負值，以保持整體一致性
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以 8px 為基準單位，區塊間留有寬裕的留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 10px
lg · 16px
pill · 40px
使用細微的 1px 邊框搭配 inset shadows 來創造深度感
0px 0px 0px 1px inset rgba(242, 240, 236, 1) · 0px 3px 16px rgba(0, 0, 0, 0.1) · 0px 0px 24px rgba(0, 0, 0, 0.15)
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
置中的單欄佈局，搭配寬裕的內距
07
動效與互動
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
在 hover 狀態下進行變形與透明度的過渡 · 頁面過渡使用流暢的 cubic-bezier 緩動 · 微交互的持續時間為 0.2 秒
互動元素在 hover 時有細微的顏色變化與輕微的變形 · 透過變形縮放提供即時的視覺回饋
08
組件
- button 膠囊形按鈕，具有高對比度；主要按鈕為黑底白字，次要按鈕為幽靈按鈕並帶有邊框
- card 柔和的圓角 (10px)，在淺色背景上帶有細微的 inset 邊框陰影
- chip 小型膠囊形標籤，前方帶有圖示，文字顏色較為柔和
- input 極簡設計，預設帶有細微背景且無可見邊框
- hero 置中的標題，周圍環繞著活潑的漂浮插圖
09
文案語氣與禁用清單
- 語氣 友善、平易近人且令人安心
- 標題風格 簡短、自信的陳述，並帶有一絲 playful 的轉折
- 按鈕文案 直接且以行動為導向（「開始使用」、「觀看影片」）
- 不要使用深色背景 —— 螢幕截圖顯示以白色 (#ffffff) 與淺暖色 (#f2f0ec) 為主的表面
- 不要使用銳利的邊角 —— 螢幕截圖顯示圓形按鈕 (40px 膠囊半徑) 與卡片 (10px 半徑)
- 不要使用粗體字重 —— 螢幕截圖僅顯示 400-500 的字重，沒有 700 以上
- 不要使用擁擠的佈局 —— 螢幕截圖顯示主要區塊間有寬裕的留白 (64-96px)
- 不要使用強烈的陰影 —— 螢幕截圖僅顯示細微的 inset 邊框與柔和的投影
- 不要同時使用多種強調色 —— 螢幕截圖使用黑色作為主要操作顏色，多彩插圖作為次要裝飾
- 避免: 技術術語
- 避免: 正式的企業語言
- 避免: 驚嘆號
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
為 Family 這款平易近人的 Ethereum 加密貨幣錢包設計的設計系統。採用乾淨的白色 (#ffffff) 為基底，卡片與表面使用溫暖的米白色 (#f2f0ec)。主要文字為暖灰色 (#474645)，關鍵強調色使用藍色 (#0080e8)。字體方面，標題使用幾何無襯線體 (緊湊字距, 500 字重)，內文使用人文主義無襯線體 (400 字重)。按鈕為膠囊形狀，邊框半徑 40px。關鍵的避免事項：永遠不要使用深色背景 (網站為亮色主題)，避免銳利的邊角 (所有元素使用 10-40px 半徑)，跳過粗體字重 (最高 500)，維持寬裕的留白 (64-96px 間隔)，並且僅使用細微的陰影 (不要使用硬投影)。該設計強調 playful 的插圖與角色，讓加密貨幣感覺友善且易於接近，而不是令人生畏。
en · zh-CN · zh-TW · ja · ko