精選 · 開放 · 免費
Gretel
一個由鮮明對比、大量留白與大尺寸排版所定義的高端設計工作室portfolio。
brandstudio
01
設計氣質 DNA
清晰策略設計工作室高端
一座極簡主義的畫廊，讓作品得以呼吸並自我述說。
02
色彩
#1D1D1DInk
#FFFFFFBG
rgba(29, 29, 29, 0.1)Line
嚴格的單色調，確保攝影與排版獲得最大專注度。
03
字型
humanist-sans
- display
75px · 400 - heading
39px · 400 - body
16px · 400
大型展示文字使用緊湊的負字距調整。 · 小型內文保持高行高（1.7）以確保可讀性。 · 避免使用粗體；依賴單一字體家族的尺寸與粗細變化。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 8px 為基準節奏，主要區塊間保留大量垂直邊距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
無可見的 UI 邊框；區隔完全透過留白處理。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱網格，搭配左對齊的文字欄位與右對齊的全出血或內嵌圖片。
07
動效與互動
100msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
透明度淡入 · 細微的位移變換 · 流暢的懸停過渡
連結與圖片上細微的透明度降低。 · 即時回饋，無厚重的彈跳效果。
08
組件
- button 極簡的文字連結，帶有細微的透明度或色彩過渡效果。
- card 畫廊風格的專案卡片，搭配大尺寸排版與邊到邊的圖片。
- hero 大尺寸左對齊的排版聲明，佔據大部分視窗，並帶有充足的上下內距。
09
文案語氣與禁用清單
- 語氣 自信、權威，並帶有詩意。
- 標題風格 宣言式的陳述，搭配緊湊的字距與句子式大寫。
- 按鈕文案 低調的文字連結，無顯眼的按鈕容器。
- 不要使用陰影——截圖顯示完全平坦的表面，無任何抬升效果。
- 不要添加裝飾性邊框——截圖顯示區隔完全透過留白處理。
- 不要將大型內文置中對齊——截圖顯示強烈的左對齊閱讀引力。
- 不要使用彩色強調色——截圖顯示嚴格的黑白調色盤。
- 不要使用圓角——截圖顯示銳利的 90 度角或邊到邊的圖片。
- 不要使用粗體字重——截圖顯示常規字重（400）主導整個 UI。
- 避免: 過多的驚嘆號
- 避免: 行銷術語
- 避免: 雜亂的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為 Gretel 所設計的高端設計工作室portfolio，強調策略性清晰度與高端美學。設計 DNA 由嚴格的單色調色盤（#FFFFFF 背景，#1D1D1D 墨色）與單一人文無襯線字體（Akkurat）所定義，以大尺寸與緊湊的負字距調整使用。佈局採不對稱，特點為大型左對齊文字區塊搭配邊到邊的攝影。關鍵的禁忌包括：絕不使用陰影或抬升表面，絕不將大型文字區塊置中對齊，且絕不引入裝飾性色彩。互動僅限於使用 cubic-bezier 緩動的細微透明度與變換過渡，維持一個冷靜且精緻的使用者體驗，優先呈現作品。
en · zh-CN · zh-TW · ja · ko