精選 · 開放 · 免費
Josephmark Studio
一個大膽、深色主題的數位工作室作品集，以巨型排版和極簡的高對比美學為特色。
AgencyBold TypographyDark ModeCleanPortfolio
01
設計氣質 DNA
工作室代理機構設計大膽極簡
如同一家高端建築事務所：線條簡潔、聲明自信，並著重於結構的清晰度。
02
色彩
#FFFFFFInk
#666666Ink soft
#000000BG
#F4F5EFBG soft
rgba(255, 255, 255, 1)Line
高對比度深色模式，使用中性的米白色與灰色作為次要元素。
03
字型
grotesque-sans
- display
60px · 300 - h1
36px · 300 - body
16px · 300 - small
12px · 300
所有文字均使用 Scto Grotesk A 字體，預設字重為 300 (light)。 · 在展示級別與標題尺寸上，一致套用負字間距。 · 僅在標籤與分類標記上謹慎使用大寫字母。
04
間距
4px
8px
12px
16px
24px
28px
32px
43px
48px
64px
96px
112px
主要區塊之間採用寬裕的垂直內距 (96px-112px) 以強調尺度感。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
極簡的 1px 邊框，通常使用白色或灰色，主要應用於標籤與 UI 元素。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血、垂直堆疊的佈局，包含大型排版區塊與圖片容器。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
滑鼠懸停時平滑的透明度與變換過渡效果。 · 色彩與背景變更時使用標準的 0.3s 過渡。
互動元素在懸停時有細微的透明度或色彩變化。 · 標準的滑鼠指標互動。
08
組件
- button 帶有細邊框的膠囊形狀標籤（例如「品牌」、「數位產品」）與純文字連結。
- card 以大型圖片為主的專案展示，搭配左對齊的排版文字與下方的膠囊形狀類別標籤。
- chip 帶有細邊框的小型膠囊形狀類別標籤。
- hero 全視口深色區塊，展示大型、左對齊的淺色排版文字。
09
文案語氣與禁用清單
- 語氣 自信、直接且具雄心。
- 標題風格 大型、聲明式的標題，採用輕字重。
- 按鈕文案 極簡且不突兀，通常為純文字連結或細微的標籤。
- 不要使用厚重的字重 — 截圖顯示其一致使用輕字重 (300)。
- 不要使用明亮、飽和的強調色 — 截圖顯示其嚴格使用中性米白色的單色調色板。
- 不要使用置中的文字對齊 — 截圖顯示所有主要文字區塊均為左對齊。
- 不要使用複雜的投影效果 — 截圖顯示其完全使用無陰影的平面表面。
- 不要使用緊湊的垂直間距 — 截圖顯示區塊間採用寬裕的內距 (96px 以上)。
- 不要使用標準的矩形按鈕 — 截圖顯示其使用膠囊形狀標籤與帶細邊框的標籤。
- 避免: 過度裝飾的元素
- 避免: 明亮、衝突的強調色
- 避免: 資訊密集的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Josephmark 是一家高端的數位設計工作室。他們的網站採用大膽、極簡的深色主題，使用嚴格的單色調色板（黑色 #000000 與白色 #FFFFFF）。排版採用 Scto Grotesk A 字體，這是一款 grotesque-sans 字體，一致使用輕字重 (300)，並帶有顯著的負字間距。佈局以大型左對齊標題為主。不要使用厚重的字重、明亮的強調色或置中文字。避免密集的佈局；應使用寬裕的垂直內距 (96px 以上) 與簡約的 UI 元素，如帶細邊框的膠囊形狀標籤。整體感覺應是自信、具建築感且克制的。
en · zh-CN · zh-TW · ja · ko