精選 · 開放 · 免費
Merci-Michel
一個高端創意工作室網站，以大膽的襯線字體排版搭配沉浸式動態背景為特色。
studiocreative
01
設計氣質 DNA
遊戲化創意體驗式品牌趣味性
一個高端創意機構網站，結合優雅的襯線字體排版與沉浸式、多彩的3D及電影感背景來展示其作品。
02
色彩
#ffffffInk
#000000BG
rgba(255,255,255,0.2)Line
高對比度且具沉浸感，在全螢幕、動態、深色或多彩背景上使用白色文字。
03
字型
didone-serif · monospace
- display
70px · 400 - display-italic
64px · 400 - body
16px · 400 - caption
12px · 400 - micro
11px · 400
所有文字採用大寫並搭配寬鬆的字間距，用於導覽與內文。 · 標題字體混合使用標準的迪多內襯線體與斜體變體。 · 內文使用等寬字體，營造技術感與結構感。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
靈活，由全螢幕區塊與置中內容區塊驅動。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用細薄、半透明白色線條作為分隔線與底線。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全螢幕主視覺區塊搭配置中文字內容，常與動態背景重疊。
07
動效與互動
300msmicro
500mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
頁面元素採用流暢的淡入與變形過渡。 · 背景影像或3D元素採用類似視差的效果。 · 文字與介面元件採用錯落動畫。
細微的透明度變化或流暢過渡。 · 即時回應，搭配流暢的狀態變換。
08
組件
- button 純文字按鈕，通常為大寫並帶有字間距，有時帶有垂直線分隔符。
- card 全螢幕背景卡片或影像疊層。
- hero 一個全視野區塊，包含大型襯線標題、等寬字體描述與行動呼籲連結，設定於動態或3D背景之上。
09
文案語氣與禁用清單
- 語氣 自信、創意且專業。
- 標題風格 大膽、優雅的襯線字體排版，常混合風格化斜體。
- 按鈕文案 低調、大寫的等寬字體文字連結。
- 不要使用無襯線字體作為標題——截圖顯示優雅的迪多內襯線展示字體。
- 不要使用明亮、單色的背景顏色——截圖顯示深色、電影感或豐富插畫的背景。
- 不要在介面元件上使用圓角——截圖顯示銳利邊角或完全圓形的膠囊造型。
- 不要在內文中使用小寫——截圖顯示廣泛使用大寫並搭配字間距。
- 不要使用多欄位的重格線佈局——截圖顯示置中、全寬的內容區塊。
- 不要使用狹窄、擁擠的間距——截圖顯示寬裕的留白與全視野區塊。
- 避免: 響亮或霓虹色彩
- 避免: 趣味性的圓角無襯線字體
- 避免: 複雜的格線佈局
- 避免: 繁雜或凌亂的背景
- 避免: 明亮、平面的介面元件
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個高端創意工作室網站，專為數位遊戲化機構設計。其特色在於高對比度美學，在沉浸式、深色與多彩的3D背景上使用白色文字。字體排版混合使用優雅的迪多內襯線體作為展示字體，以及等寬字體作為內文。佈局置中且寬敞，聚焦於大型全螢幕主視覺區塊。關鍵色彩為 #000000 與 #ffffff，背景媒體中帶有豐富的藍色、紅色與粉色。關鍵避免事項：不要使用無襯線字體作為標題，不要使用單色明亮背景，不要使用圓角，不要使用小寫文字，不要使用重格線佈局，不要使用狹窄間距。
en · zh-CN · zh-TW · ja · ko