精選 · 開放 · 免費
Consumedinkey
一個為音樂合作案打造的極簡、充滿氛圍的網站，運用強烈對比與攝影元素。
EditorialPhotographicMonochromeRestraintCalm
01
設計氣質 DNA
極簡主義前衛音樂性抽象沉浸式
一個為音樂專案打造的、冷峻而充滿氛圍的藝廊展覽。
02
色彩
#ffffffInk
#000000BG
rgba(0,0,0,1.0)Line
高對比單色調色板，運用純黑與純白營造冷峻、專注的氛圍。
03
字型
humanist-sans
- display
64px · 400 - body
16px · 400
使用 HelveticaLT 或類似的人文無襯線字體。 · 字重始終保持在 400。 · 為所有文字套用細微的正向字距調整。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的內邊距與一致的間隔，創造出開放、可呼吸的佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
銳利、生硬的邊緣。無 border-radius。內容彷彿漂浮於空間中。
06
版面
1920container
16pxgutter
768breakpoints
全出血的英雄區域，後接深色內容區域，中央為視覺焦點，兩側為文字欄。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
所有元素皆具備全域過渡屬性，暗示互動時的平滑狀態變化。
具備指標游標的元素會改變狀態，可能透過顏色或透明度變化。 · 標準指標點擊行為。
08
組件
- button 純文字操作，搭配簡潔的分隔線（例如：「聆聽 | 購買」）。
- card 不使用。視覺呈現為沉浸式的、邊到邊影像。
- chip 不存在。
- input 不存在。
- hero 全螢幕、充滿氛圍的黑白攝影英雄區，疊加文字。
09
文案語氣與禁用清單
- 語氣 冷靜、克制且神秘。
- 標題風格 簡潔、陳述式，使用專輯標題與藝術家名稱。
- 按鈕文案 極簡且直接，使用直線符號分隔操作。
- 不要為任何元素使用 border-radius — 截圖顯示所有角落皆為完美銳角。
- 不要引入鮮豔的強調色 — 截圖嚴格限定為黑白單色。
- 不要使用裝飾性或襯線字體 — 截圖使用乾淨、幾何感的人文無襯線字體 (HelveticaLT)。
- 不要添加陰影或方塊陰影 — 元素看似平貼於背景之上。
- 不要使用複雜的背景圖案或漸層 — 背景為純色或全出血影像。
- 不要使用多種字重 — 截圖顯示全程使用一致、均勻的字重 (400)。
- 避免: 避免使用驚嘆號或過度熱情的語言。
- 避免: 避免複雜的句子或段落。
- 避免: 避免明亮、飽和的色彩。
- 避免: 避免裝飾性字體或過度的字重變化。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為音樂合作案 'Consumed In Key' 打造的極簡、充滿氛圍的網站。它運用純黑 (#000000) 與純白 (#ffffff) 的冷峻、高對比單色調色板，並搭配單一充滿氛圍的黑白攝影元素。字體採用乾淨、幾何感的人文無襯線字體 (HelveticaLT)，字重始終為 400，並帶有細微字距調整。佈局沉浸且開放，使用充裕的內邊距與全出血影像。關鍵設計限制：1) 維持絕對的色彩克制，不使用任何強調色。2) 使用銳利、生硬的邊緣，所有元素的 border-radius 均為零。3) 保持字體極簡、字重均勻，並帶有細微間距。避免任何裝飾性元素、複雜的元件或高能量的互動。目標是創造一個冷靜、專注且神秘的視覺體驗，以襯托音樂內容。
en · zh-CN · zh-TW · ja · ko