精選 · 開放 · 免費

Egstad

一位平面設計師與網站開發者的，大膽、表現力強的個人作品集。

01

設計氣質 DNA

一位平面設計師的個人作品集，具備大膽的排版聲明與趣味的互動元素。

02

色彩

高對比度的單色調，搭配溫暖的米白色背景。

03

字型

grotesque-sans · humanist-sans · monospace

• display398px · 400
• body-lg58px · 400
• body16px · 400

運用極端的尺度變化來呈現主要品牌名稱，創造大膽的視覺聲明。 · 導覽文字採用全大寫，並搭配寬鬆的字間距。 · 內文維持簡潔、易讀的無襯線風格。

04

間距

充裕的留白，讓大膽的排版得以呼吸，導覽與頁尾元素則採用較緊湊的間距。

05

表面 (圓角 / 陰影 / 邊線)

1px solid rgba(37, 36, 34, 1)

rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px · rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px · rgba(0, 0, 0, 0.15) 0px 20px 80px 0px

06

版面

單欄的首頁區塊，後接用於個人簡介與頁尾的多欄網格。

07

動效與互動

互動元素採用緩慢、平滑的淡入與顏色過渡。 · 漂浮元素上基於變換的趣味懸停效果。

互動元素上的細微顏色變化與基於變換的移動。 · 背景與邊框顏色的平滑過渡。

08

組件

• button 膠囊造型，深色背景搭配白色文字，具備懸停過渡效果。
• card 在提供的視圖中未顯著呈現。
• chip 在提供的視圖中未顯著呈現。
• input 在提供的視圖中未顯著呈現。
• hero 一個巨大的、全寬度的排版首頁區塊，帶有一個互動式的、重疊的類 3D 漂浮元素。

09

文案語氣與禁用清單

• 語氣 自信、個人化，並略帶趣味。
• 標題風格 極度粗體、大尺度的排版，主導整個視覺區域。
• 按鈕文案 直接且簡潔，以膠囊造型按鈕呈現。

• 不要使用小而低調的標題——截圖顯示的是巨大、填滿螢幕的排版聲明。
• 不要使用複雜或鮮豔的調色板——截圖顯示的是嚴格克制的單色調與米白色方案。
• 不要在互動元素上使用尖銳的方形圓角——截圖顯示的是帶有高 border-radius 的顯著膠囊造型按鈕。
• 不要在展示時使用通用的系統預設字體——截圖顯示的是一款自訂的、高度風格化的 grotesque sans-serif。
• 不要避免留白——截圖顯示所有內容區塊周圍都有充裕的邊距與內距。
• 不要使用雜亂、擁擠的佈局——截圖顯示的是簡潔、聚焦的單欄與多欄網格結構。
• 避免: 正式的企業語言
• 避免: 小而低調的標題
• 避免: 複雜的調色板

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko