精選 · 開放 · 免費
Majacerar
一個精緻的設計作品集，展示高端產品與品牌設計作品
PortfolioEditorialCleanRefinementTypography
01
設計氣質 DNA
極簡編輯式專業簡潔
一個注重版面與負空間的精緻畫廊式作品集
02
色彩
#111111Ink
#ffffffBG
#bb1111Muted
rgba(17, 17, 17, 0.1)Line
高對比的單色調，並策略性使用柔和色調
03
字型
geometric-sans
- display
56px · 400 - body
19px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
垂直節奏基於主要區塊之間 48px 的間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 64px
pill · 999px
1px solid rgba(17, 17, 17, 0.1) 水平分隔線
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
三欄式頁頭版面，單欄式專案區塊搭配寬裕留白
07
動效與互動
220msmicro
400mssmall
900msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
元素進入視窗時，平滑的 0.9s ease-out 過渡效果
互動元素上細膩的指標游標 · 即時回應並搭配平滑過渡
08
組件
- button 極簡的文字式導航，帶有 hover 過渡效果
- card 專案展示卡片，採用大尺寸圖片與最小化文字覆蓋
- hero 寬敞的頁頭，包含簡介文字與專案分類
09
文案語氣與禁用清單
- 語氣 專業、精緻且低調
- 標題風格 簡潔、直接且具資訊性，無裝飾
- 按鈕文案 極簡的文字式連結，無傳統按鈕樣式
- 勿使用飽和顏色 — 螢幕截圖顯示白色背景的單色調色盤
- 勿添加陰影 — 螢幕截圖顯示完全扁平的設計
- 勿使用粗體字重 — 螢幕截圖顯示整體一致的 400 字重
- 勿建立密集的版面 — 螢幕截圖顯示元素之間寬裕的間距
- 勿在主要元素上使用圓角 — 螢幕截圖僅在特定元素上顯示 64px 圓角
- 勿使用多種強調色 — 螢幕截圖顯示無主要強調色
- 避免: 刺眼的顏色
- 避免: 複雜的動畫
- 避免: 裝飾性元素
- 避免: 過載的版面
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個精緻的設計作品集，屬於 Maja Cerar，一位常駐舊金山的設計師，專長於品牌識別與數位產品設計。設計採用單色調色盤，背景為 #ffffff，文字為 #111111，使用幾何無襯線字體，內文字號 19.2px，字重 400。關鍵特徵包括寬裕的留白、56px 的大型展示字體搭配緊湊的字距，以及最小化的視覺元素。版面採用三欄式頁頭結構與單欄式專案區塊，並使用水平分隔線。關鍵設計規則包括避免使用飽和顏色、所有字重維持 400、區塊之間保持大間距（48px），以及僅使用文字式導航，無傳統按鈕元件。整體美學簡潔、專業且具畫廊感，並搭配平滑的 0.9 秒過渡效果。
en · zh-CN · zh-TW · ja · ko