精選 · 開放 · 免費
Luma
一個用於建立、舉辦和發現社交活動的現代化平台。
eventsrefinedproduct
01
設計氣質 DNA
活動社群日曆主辦消費者
一份為現代社交聚會精心設計的數位邀請函
02
色彩
#F31A7CAccent
#131517Ink
#64666AInk soft
#F7F8F9BG
#FFFFFFBG soft
#444648Muted
rgba(19, 21, 23, 0.1)Line
淺色、中性的畫布,讓活潑的 3D 圖像和鮮豔的粉紅色強調色更加突出。
03
字型
system-ui
- display
64px · 600 - body-lg
20px · 400 - body
16px · 400 - caption
14px · 400
展示級字體採用緊湊的負字距 · 系統字體堆疊以優化效能 · 展示標題字重為 600,內文字重為 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以一致的 4px 基礎網格為基底,搭配寬鬆的間距,創造開闊、通透的佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 15px
lg · 16px
pill · 100px
使用 rgba(19, 21, 23, 0.1) 的細微 1px 實線邊框
0 2px 8px rgba(0,0,0,0.04)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
雙欄主視覺佈局,左側為文字,右側為大型 3D 插圖。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 和 focus 狀態採用流暢的 0.3 秒過渡效果 · 順序元素採用級聯動畫
細微的背景色或透明度變化,過渡時間為 0.3 秒。 · 提供即時視覺回饋,伴隨輕微的縮放或透明度變化。
08
組件
- button 高對比度的藥丸形號召行動按鈕(深灰色背景、白色文字),帶有細微的 hover 過渡效果。
- card 帶有細微圓角的容器,搭配細微邊框或陰影。
- chip 用於次要資訊的小型藥丸形標籤。
- input 乾淨、圓角的輸入欄位,帶有細微邊框。
- hero 分割式佈局,包含粗體標題和一個大型的圓形 3D 插圖。
09
文案語氣與禁用清單
- 語氣 友善、鼓舞人心且輕鬆自如。
- 標題風格 簡短、有力的短語,混合使用中性與鮮豔的色彩。
- 按鈕文案 直接且以行動為導向,例如「建立您的首個活動」。
- 請勿為主視覺使用深色背景 — 螢幕截圖顯示的是淺色、通透的背景。
- 請勿為標題使用襯線字體 — 螢幕截圖顯示的是乾淨、幾何感的無襯線字體堆疊。
- 請勿在所有元素上使用銳利的 90 度角 — 螢幕截圖顯示了 8px、15px 和藥丸形的混合運用。
- 請勿使用單調或單色調的配色方案 — 螢幕截圖包含鮮豔的粉紅色強調色和多彩的 3D 插圖。
- 請勿為主視覺圖片使用標準的矩形佈局 — 螢幕截圖顯示的是一個大型的圓形 3D 構圖。
- 請勿使用複雜的導覽列 — 螢幕截圖顯示的是極簡、乾淨的右上角導覽。
- 避免: 過於正式或企業化的語言
- 避免: 大段的文字區塊
- 避免: 複雜的術語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Luma 是一個精緻、現代化的平台,用於舉辦社交活動。設計採用淺色中性背景 (#F7F8F9),搭配乾淨的系統字體堆疊。鮮豔的粉紅色強調色 (#F31A7C) 為簡約的畫布增添了活潑氣息。關鍵的禁忌事項:絕對不要為主視覺區域使用深色背景;避免使用襯線字體;不要在所有 UI 元素上套用銳利的方形圓角。主視覺採用一個大型的圓形 3D 插圖,增加了深度和視覺趣味,而字體則透過緊湊的字距調整,營造出粗體、當代的感受。
en · zh-CN · zh-TW · ja · ko