精選 · 開放 · 免費
Promlyapp
一個大膽、以攝影為導向的網站，旨在促進青年連結與倡議。
Non-profitYouthEmpowermentCleanPhotographic
01
設計氣質 DNA
賦權青年連結安全變革者
一個充滿活力的數位社區中心，專為青年倡議而設。
02
色彩
#A957FEAccent
#FFFFFFInk
#FFFFFF99Ink soft
#000000BG
#040723BG soft
#333333Muted
rgba(255, 255, 255, 0.2)Line
高對比深色模式，搭配鮮豔的紫色點綴以引發情感共鳴。
03
字型
humanist-sans · monospace
- display
60px · 300 - h2
28px · 300 - body
18px · 300
主要標題使用 Poppins，內文使用 Avenir。 · 保持寬裕的行高以提升可讀性。 · 嚴格限制字間距。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
透過大型區塊與一致的內距建立垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 20px
pill · 999px
1px 細實線 rgba(255, 255, 255, 0.5)
rgba(150, 163, 181, 0.08) 0px 4px 24px 0px · rgba(102, 77, 255, 0.2) 0px 4px 100px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
首頁區域分割文字與圖片網格；次要區塊採用全寬或卡片網格。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
按鈕與連結在 hover 時具備平滑過渡效果。
細微的色彩變化與透明度改變。 · 立即回饋，附帶視覺反饋。
08
組件
- button 實心紫色圓角矩形搭配白色文字。
- card 具備大圓角的照片卡片。
- chip 具備小圓角的徽章與標籤。
- input 具備細微邊框的標準表單。
- hero 分割式佈局，搭配大型字體與照片拼貼。
09
文案語氣與禁用清單
- 語氣 賦權、包容且具急迫感。
- 標題風格 直接且鼓舞人心。
- 按鈕文案 清晰的行動號召。
- 避免使用明亮或粉彩色調的背景——截圖顯示為深邃黑色 (#000000) 背景。
- 避免使用細長、緊縮的字體——截圖顯示為幾何風格的人文無襯線字體（Poppins/Avenir）。
- 避免使用方形圓角的圖片——截圖顯示為圓角（最大 20px）。
- 避免使用多種強調色——截圖顯示為單一主導的紫色強調色。
- 避免使用小而緊密的文字——截圖顯示為大型、易讀的字體與寬裕的行高。
- 避免使用過度網格化、生硬的佈局——截圖顯示為流動、以攝影為導向的拼貼。
- 避免: 憤世嫉俗
- 避免: 複雜術語
- 避免: 被動語態
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Promly 是一個致力於改革青年連結的非營利組織，採用大膽、高對比的深色模式美學。色調以深邃黑色 (#000000) 與鮮豔紫色 (#A957FE) 點綴為主，營造出急迫感與賦權感。字體使用人文無襯線字體（Poppins 和 Avenir），以平衡親和力與專業度。關鍵約束：永遠不要使用淺色背景或細長、緊縮的字體。始終保持寬裕的間距與圓角（20px）的圖片處理。專注於高品質攝影與直接、鼓舞人心的文案。確保設計感覺安全且 welcoming，反映組織的使命。
en · zh-CN · zh-TW · ja · ko