精選 · 開放 · 免費
Magdareyman
一個精緻的設計作品集，連結品牌設計與使用者介面。
PortfolioTypographyRefinementApp UI
01
設計氣質 DNA
設計師作品集UI品牌設計Magda Reyman
一個經過策展的設計作品廊，以精煉、自信的極簡主義呈現。
02
色彩
#282828Ink
#C0C0C0BG
#090909Muted
rgba(40, 40, 40, 0.2)Line
單色調色盤運用中性灰與深黑，讓作品自己說話。
03
字型
transitional-serif · humanist-sans · monospace
- display
40px · 400 - body
16px · 400 - caption
8px · 400
主要的介面與內文使用系統無襯線字體組。 · 標題與強調文字使用簡潔的過渡襯線字體。 · 標題文字保持緊湊的行高。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白，營造輕鬆的編輯感。
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 16px
lg · 32px
pill · 162px
1.4px solid #282828
0 4px 20px rgba(0,0,0,0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
簡潔的格線版面，包含突出的首頁橫幅區域與分散的專案展示。
07
動效與互動
100msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素使用透明度與變形過渡效果。
細微的色彩變化或透明度變動。 · 立即回應，回饋最小化。
08
組件
- button 膠囊形狀，可為實心背景或僅文字。
- card 乾淨呈現應用程式 UI 螢幕截圖。
- chip 用於聯絡資訊的小型大寫文字標籤。
- input 與整體無襯線風格一致的極簡樣式。
- hero 大型字體標題搭配副標題。
09
文案語氣與禁用清單
- 語氣 自信、極簡、略帶俏皮但專業。
- 標題風格 大型、簡潔的襯線或無襯線字體，間距緊湊。
- 按鈕文案 文字連結或簡潔的膠囊按鈕。
- 不要使用明亮、飽和的色彩——螢幕截圖顯示的是嚴格的單色、灰階調色盤。
- 不要使用華麗的展示字型——展示文字使用簡潔、精煉的過渡襯線字體。
- 不要建立密集的版面——螢幕截圖顯示寬裕的留白與輕鬆、開闊的結構。
- 不要使用複雜的陰影或漸層——螢幕截圖顯示平坦的表面，搭配極簡、細膩的陰影。
- 不要使用帶有銳利角落的圓角矩形——螢幕截圖顯示膠囊形按鈕與高 border-radius 的元素。
- 不要使用粗體字重——螢幕截圖顯示主要為常規（400）字重的字體排印。
- 避免: 過度裝飾的元素
- 避免: 密集的段落
- 避免: 明亮、飽和的色彩
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為 Magda Reyman 設計的極簡主義設計作品集。其設計基因包含精緻的單色調色盤，以中性灰背景（#C0C0C0）與深灰/黑色文字（#282828、#090909）為核心。字體排印精煉，內文使用人文主義無襯線字體，標題使用過渡襯線字體，常搭配緊湊的行高與寬裕的間距。版面開闊通透，強調展示的作品。關鍵禁忌：避免明亮、飽和的色彩；避免華麗或過度裝飾的字體排印；避免密集、雜亂的版面。整體風格自信、高品質，專注於高品質的 UI 與品牌設計作品。
en · zh-CN · zh-TW · ja · ko