精選 · 開放 · 免費
Ilovecreatives
一個時尚的編輯平台，作為創意專業人士的數位職業學校與社群。
EditorialPortfolioTypographyProductClean
01
設計氣質 DNA
創意教育社群斜槓者職業學校
一個現代、時尚的社群中心與數位職業學校，服務於擁有多重熱情的創意工作者。
02
色彩
#489442Accent
#222222Ink
#FFFFFFBG
#757575Muted
rgba(34,34,34,0.2)Line
高對比單色調基底，搭配單一柔和綠色作為促銷橫幅的強調色。
03
字型
transitional-serif · humanist-sans · geometric-sans
- display
56px · 400 - heading
30px · 400 - body
18px · 100 - caption
13px · 100
標題字型採用高對比的過渡襯線體，字距緊湊。 · 內文字型採用輕量級的人文無襯線體。 · 按鈕使用藥丸造型，搭配全大寫或首字母大寫樣式。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 4px 基準網格，大型容器區塊內使用充裕的內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 20px
pill · 450px
1px solid #222222
rgba(121,121,121,0.17) 2px 2px 20px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全版出血的主視覺區域，過渡到結構化的多欄網格，用於產品與社群列表。
07
動效與互動
100msmicro
170mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
按鈕與連結在 hover 時，有細微的透明度與色彩過渡。 · 標準互動元素使用快速的 0.1 秒線性過渡。
背景填充為實色，或文字顏色反轉（適用於按鈕）。 · 透過狀態改變或連結導航提供立即回饋。
08
組件
- button 藥丸造型，帶有 1px 實線邊框與透明背景，hover 時變為實心。
- card 簡潔的白色卡片，帶有圓角（20px）與輕柔陰影，用於產品與職缺列表。
- chip 小型、圓潤的藥丸標籤，用於分類（例如：實體商品、服飾）。
- input 極簡的文字輸入框，帶有細微的底邊框或藥丸造型。
- hero 全版出血的攝影背景，搭配大尺寸、重疊的襯線字型與浮動的文字元素。
09
文案語氣與禁用清單
- 語氣 俏皮、友善且以社群為導向。
- 標題風格 對話式、略帶不羈且直接。
- 按鈕文案 清晰、以行動為導向，且常採用藥丸造型。
- 勿使用厚重的陰影 — 截圖顯示為最小化、柔和的陰影，例如 rgba(121,121,121,0.17) 2px 2px 20px 0px。
- 勿使用明亮、飽和的強調色 — 截圖顯示僅在特定橫幅使用柔和、大地色調的綠色（#489442）。
- 勿對內文使用粗體字重 — 截圖顯示標準文案一致使用 font-weight: 100。
- 勿對卡片或按鈕使用銳利的方形圓角 — 截圖顯示一致使用藥丸造型（radius: 450px）與大圓角（radius: 20px）。
- 勿使用複雜的漸層作為背景 — 截圖顯示為純白背景與攝影主視覺覆蓋。
- 勿使用過寬、鬆散的行高 — 截圖顯示使用緊湊、受控的行高（1.2 至 1.4），營造密實的編輯感。
- 避免: 正式的企業術語
- 避免: 未經視覺分段的大段落文字
- 避免: 冷漠或純粹交易性的語言
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
此網站是一個創意社群平台與數位職業學校，服務於「斜槓者」（擁有多重熱情的創意工作者）。視覺識別建立在乾淨的單色基底上，使用 #222222 墨水色與 #FFFFFF 背景，並以特定的柔和 #489442 綠色作為促銷橫幅的強調色。字型依賴粗體、高對比的過渡襯線體，用於大尺寸標題字型，以及輕量級的人文無襯線體（Suisse Regular，字重 100）用於內文，營造出精緻的編輯感受。關鍵禁忌：避免使用飽和或霓虹色，內文永遠不使用粗體字重，主要按鈕與標籤始終使用圓潤的藥丸造型。版面結合全版出血的攝影主視覺區域，與結構化、以卡片為基礎的產品及社群列表網格，均使用緊湊的字距與充裕的內距。
en · zh-CN · zh-TW · ja · ko