精選 · 開放 · 免費
Henryheffernan
一個採用粗體字型與命令列美學來展示作品的、醒目的單色互動式作品集。
PortfolioMonochromeBold TypographyExperimentalDark Mode
01
設計氣質 DNA
作品集實驗性終端機極簡互動式
數位作品集的極簡終端機開機畫面。
02
色彩
#FFFF00Accent
#FFFFFFInk
#000000BG
rgba(255, 255, 255, 1.0)Line
高對比的單色調，搭配單一霓虹色作為警示用途。
03
字型
transitional-serif · monospace
所有文字皆使用統一的等寬或襯線字型，以一致的基礎尺寸呈現。 · 字距略微加寬，以提升深色背景上的可讀性。
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
動效與互動
200msmicro
200mssmall
200msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
使用透明度與變形過渡來呈現元素。 · 透過提示框暗示打字機風格的閃爍游標效果。
游標變為指標；元素可能透過透明度或色彩反轉來回應。 · 觸發狀態變換或過渡至作品集的下一個區段。
08
組件
- button 外框式方框，內含大寫等寬文字。
- card 帶有高內邊距的邊框矩形容器。
- chip 不適用
- input 不適用
- hero 全螢幕深色畫布，中央放置一個邊框提示框。
09
文案語氣與禁用清單
- 語氣 直接、技術性且極簡。
- 標題風格 大寫等寬或粗體襯線字，置於嚴格的邊框內。
- 按鈕文案 清晰、簡單的等寬字指示，後接邊框按鈕。
- 不要使用圓角 — 螢幕截圖顯示的是尖銳、硬邊的矩形邊框
- 不要使用柔和漸層 — 螢幕截圖顯示的是平面、高對比的純色填充
- 不要使用裝飾性影像 — 螢幕截圖顯示的是純粹以文字型錄為基礎的介面
- 不要使用淺色主題 — 螢幕截圖顯示的是以黑色背景搭配白色文字為主
- 不要使用裝飾性無襯線字 — 螢幕截圖顯示的是混合使用等寬與過渡襯線字型
- 不要使用細微陰影 — 螢幕截圖顯示的是以粗邊框定義的平面元素
- 避免: 避免柔和漸層或圓角。
- 避免: 避免裝飾性插圖或複雜的背景影像。
- 避免: 避免溫暖、友善或過於隨意的語言。
- 避免: 避免使用多種相互競爭的字族或字重。
- 避免: 避免使用未經樣式處理的標準網頁元素。
- 避免: 避免使用雜亂、充滿可見控制項的佈局。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個極簡、實驗性的作品集網站，採用靈感來自終端機的美學。它被定位為一個大膽的互動式數位展示。主要色彩是醒目的黑色（#000000）與白色（#FFFFFF），並僅以明亮的黃色（#FFFF00）作為系統警示的點綴。字型主要依賴等寬與過渡襯線字族，並以統一的 16px 基礎尺寸呈現。關鍵的禁止事項：避免使用圓角，因為設計依賴尖銳的硬邊；避免使用裝飾性影像，因為焦點純粹在文字型錄；避免使用柔和漸層，因為調色盤嚴格採用單色平面填充。
en · zh-CN · zh-TW · ja · ko