精選 · 開放 · 免費
Tomorrow Happens Studio
一個極簡主義設計工作室登陸頁,使用持續、漸隱的詩意滾動,以靜態文字「明天」為錨點。
StudioEditorialTypographyCalmRestraint
01
設計氣質 DNA
極簡詩意設計工作室反思性
一本寧靜的詩集,以單字為錨點
02
色彩
#000000Ink
#ffffffBG
#e3e3e3Muted
rgba(0,0,0,1.0)Line
高對比極簡主義,採用嚴格單色調色盤,透過不同透明度建立視覺層次。
03
字型
transitional-serif
- display
39px · 200 - body
12px · 500
04
間距
4px
8px
16px
24px
32px
48px
60px
96px
主要展示文字採用充裕留白與緊湊行高。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid black,用於精準的導覽分隔線。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
側邊欄導覽,主要內容集中於垂直滾動的文字區塊。
07
動效與互動
150msmicro
500mssmall
0msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
持續垂直滾動,單行文字帶有透明度漸隱
導覽項目透明度漸隱。 · 觸發於側邊欄與頁尾導覽連結。
08
組件
- button 純文字導覽連結,附帶「+」後綴。
- hero 全螢幕、持續的文字滾動,帶有固定的靜態錨點字。
09
文案語氣與禁用清單
- 語氣 詩意、反思、哲學性
- 標題風格 小寫、句首大寫、斷裂的陳述句,持續滾動
- 按鈕文案 極簡文字連結,附帶「+」後綴
- 避免使用鮮亮強調色——截圖顯示嚴格的黑白單色調色盤。
- 避免使用粗體字重的展示文字——截圖顯示非常纖細、優雅的襯線字體。
- 避免使用陰影或複雜3D效果——截圖顯示完全扁平的二維元素。
- 避免在按鈕或卡片上使用圓角——截圖顯示銳利、幾何且無邊框的佈局。
- 避免使用繁雜背景圖案或影像——截圖顯示乾淨、純白的背景。
- 避免使用複雜的多級導覽選單——截圖僅顯示簡單、扁平的文字連結。
- 避免: 大寫標題
- 避免: 鮮亮強調色
- 避免: 密集段落
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個極簡主義設計工作室作品集。其主要視覺識別建立在純白 (#ffffff) 與實黑 (#000000) 的單色調色盤上。大量使用纖細的過渡襯線字體,呈現其詩意、持續滾動的展示文字,並與小型無襯線字體的導覽形成對比。核心互動為垂直滾動,為文字創造漸隱效果。關鍵禁忌包括:絕不使用鮮亮強調色,絕不為展示文字使用粗體字重,絕不為元素添加陰影、複雜邊框或圓角。設計應嚴格保持扁平、通透且以字體排印為核心。
en · zh-CN · zh-TW · ja · ko