OpenDesign·你的设计资产库

网页参考

Josephmark Studio

一个大胆的暗黑主题数字工作室作品集,以巨大字体排版与极简、高对比的视觉美学为特征。

AgencyBold TypographyDark ModeCleanPortfolio
Josephmark Studio 网站截图

01

设计气质 DNA

工作室设计机构设计大胆极简

宛如一家高端建筑事务所:线条利落、表达自信、注重结构的清晰性。

02

色彩

#FFFFFFInk
#666666Ink soft
#000000BG
#F4F5EFBG soft
rgba(255, 255, 255, 1)Line

高对比度的暗黑模式,辅以中性米白与灰色作为次级元素色彩。

03

字体

grotesque-sans

  • display60px · 300
  • h136px · 300
  • body16px · 300
  • small12px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Josephmark 是一家高端数字设计工作室。其网站采用大胆、极简的暗黑主题,严格的单色调色板(纯黑 #000000 与纯白 #FFFFFF)。字体使用 Scto Grotesk A(一种怪诞无衬线字体),统一采用细体(300),并带有显著的负字间距。版面以巨大、左对齐的标题为主导。不要使用粗重字重、明亮的强调色或居中对齐的文本。避免密集布局;应采用充足的垂直内边距(96px+)与极简的UI元素(如细边框的胶囊形标签)。整体感觉应自信、具有建筑感且克制。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。