精選 · 開放 · 免費
Kaleidografik
一個極簡、內容優先的獨立創意工作室作品集。
AgencyPortfolioBold TypographyEditorialStudio
01
設計氣質 DNA
創意代理商數位工作室視覺設計作品集獨立
一塊空白畫布，讓大膽的客戶作品自行發聲
02
色彩
#000000Ink
#ECEAE5BG
rgba(0,0,0,1.0)Line
嚴格的單色調畫布，搭配暖色調灰白色背景，完全依賴客戶作品來呈現色彩。
03
字型
humanist-sans · monospace
- display
120px · 400 - h1
32px · 400 - body
16px · 400
所有文字均使用 Suisse Intl Regular，字重 400 · 導覽連結使用 16px 內文尺寸，啟用狀態以下底線標示 · 大型背景浮水印文字採用極大的顯示尺寸
04
間距
4px
8px
16px
20px
24px
48px
75px
寬敞的留白，容器水平內距為 20px，底部內距為 75px
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 8px
lg · 0px
pill · 0px
容器無可見邊框，啟用狀態的導覽項目下方為 1px solid black 底線
專案卡片採用 0 4px 20px rgba(0,0,0,0.1) 的陰影
06
版面
1400container
12columns
24pxgutter
768 / 1024breakpoints
砌體式格狀佈局，卡片尺寸不一，搭配頂部導覽列與大型背景浮水印文字
07
動效與互動
150msmicro
400mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover 狀態下的透明度淡化轉場 · 導覽列的流暢透明度與變形轉場 · 互動元素的背景色轉場
導覽連結與專案卡片的透明度降低 · 導航至專案詳情頁面
08
組件
- button 極簡的文字連結，帶有底線狀態，無可見按鈕容器
- card 專案預覽卡片，採用不同長寬比，包含螢幕截圖與案例研究圖像
- chip 小型藥丸狀標籤，帶有 1px 黑色邊框，用於專案中繼資料
- input 目前檢視中未顯示
- hero 散佈的專案卡片疊加於大型淡化背景字型之上
09
文案語氣與禁用清單
- 語氣 低調、專業，讓作品自行發聲
- 標題風格 極簡、直接，專案類別使用大寫字母
- 按鈕文案 簡單的文字連結，無視覺強調
- 不要使用多種字型粗細——截圖顯示全站均使用統一的字重 400
- 不要添加裝飾性 UI 元素——截圖顯示純粹由內容驅動的佈局
- 不要使用彩色背景——截圖顯示統一的 #ECEAE5 灰白色
- 不要建立複雜的按鈕樣式——截圖顯示純文字導覽搭配底線
- 不要為主要容器添加陰影——截圖顯示平面、簡潔的卡片呈現
- 不要使用品牌強調色——截圖顯示完全的單色調方案
- 避免: 避免使用與客戶作品競爭的裝飾性元素
- 避免: 避免使用複雜的漸層或陰影
- 避免: 避免使用多種字型粗細
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Kaleidografik 是一個獨立創意工作室作品集，採用極簡、內容優先的設計。網站使用暖色調灰白色背景（#ECEAE5）與純黑文字（#000000），營造出單色調畫布，讓大膽的客戶作品提供所有視覺趣味。字型完全採用 Suisse Intl Regular，字重 400，大型背景浮水印文字是主要的裝飾元素。導覽為簡單的三項目水平列（作品、工作室、實驗室），帶有底線啟用狀態。專案卡片以不對稱的砌體式佈局展示，搭配寬敞的留白。關鍵禁忌：絕不使用多種字型粗細，絕不添加裝飾性 UI 元素，絕不引入彩色背景或強調色，絕不建立複雜的按鈕樣式，絕不為容器添加陰影，絕不使用品牌強調色。設計理念是極致克制——代理商自身的網站刻意退居幕後，將客戶作品作為視覺核心來展示。
en · zh-CN · zh-TW · ja · ko