精選 · 開放 · 免費
Simonrogers Info
具備動態文字版面的實驗性排版作品集
PortfolioTypographyEditorialCleanExperimental
01
設計氣質 DNA
TypographyEditorialExperimentalPersonal
一個實驗性版面配置與文字排列的排版作品集
02
色彩
#3366FFInk
#FFFFFFBG
rgba(51,102,255,1)Line
搭配實驗性文字排列的白色背景單色調藍色
03
字型
transitional-serif
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
透過旋轉與重疊的文字元素創造出動態間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
無可見邊框
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
實驗性的置中佈局，文字以不同角度旋轉
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文字旋轉動畫 · 游標互動
色彩過渡效果，持續 1 秒 · 互動元素使用游標指標
08
組件
- button 無可見按鈕
- card 無可見卡片
- chip 無可見標籤
- input 無可見輸入框
- hero 旋轉文字排版的主視覺
09
文案語氣與禁用清單
- 語氣 實驗性與藝術感
- 標題風格 旋轉、重疊的襯線字體排版
- 按鈕文案 無可見的行動呼籲
- 不要使用標準格線佈局 — 螢幕截圖顯示的是旋轉、重疊的文字
- 不要使用多種顏色 — 螢幕截圖顯示的是單色調藍色調色盤
- 不要使用無襯線字體 — 螢幕截圖顯示的是過渡襯線字體
- 不要建立清晰的視覺層次 — 螢幕截圖顯示的是實驗性文字排列
- 不要添加裝飾性元素 — 螢幕截圖顯示的是極簡、僅限文字的設計
- 不要使用傳統間距 — 螢幕截圖顯示的是動態、重疊的佈局
- 避免: 標準格線佈局
- 避免: 傳統排版
- 避免: 多種顏色
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是為 Simon Rogers 設計的實驗性排版作品集網站。設計採用白色 (#FFFFFF) 搭配單色調藍色 (#3366FF) 的配色方案，並使用過渡襯線字體（Wazlon, Caslon Ionic）。佈局以不同角度旋轉文字，營造出實驗性與藝術感。關鍵特徵包括：置中構圖、重疊的文字元素、hover 時 1 秒的色彩過渡，以及互動元素使用游標指標。重要禁忌：不要使用標準格線佈局，不要使用多種顏色，不要使用無襯線字體，不要建立清晰的視覺層次，不要添加裝飾性元素，不要使用傳統間距。此網站體現了作品集展示的實驗性、編輯性手法。
en · zh-CN · zh-TW · ja · ko