精选 · 开放 · 免费
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（细体）。 · 展示型标题与大号标题均统一应用负字间距。 · 大写字母仅用于标签与标记，且使用克制。
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 边框，常为白色或灰色，主要用于标签及界面元素。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
通栏垂直堆叠布局，包含大块文字区域与图像容器。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的透明度与位移变换过渡。 · 色彩与背景变化采用标准的 0.3 秒过渡。
交互元素呈现细微的透明度或色彩变化。 · 标准指针交互。
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（一种怪诞无衬线字体），统一采用细体（300），并带有显著的负字间距。版面以巨大、左对齐的标题为主导。不要使用粗重字重、明亮的强调色或居中对齐的文本。避免密集布局；应采用充足的垂直内边距（96px+）与极简的UI元素（如细边框的胶囊形标签）。整体感觉应自信、具有建筑感且克制。
en · zh-CN · zh-TW · ja · ko