精选 · 开放 · 免费
Cthdrl
一个采用深色主题、运用大尺寸排版和monospace细节来传达策略性精妙感的bold设计机构作品集。
AgencyBold TypographyMonochromeEditorialStudio
01
设计气质 DNA
机构文化数字化系统策略
一家为数字品牌打造的高端建筑工作室。
02
色彩
#E7DED1Ink
#000000BG
rgba(231,222,09,0.3)Line
严格的高对比度单色系，以温暖的灰白色墨迹搭配深邃的黑色背景。
03
字体
grotesque-sans · monospace
- display
121px · 400 - body
11px · 400 - caption
32px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的水平和垂直padding，定义清晰的内容区域。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
纤细的1px边框，仅谨慎地用于顶部标题和下划线。
06
布局
1920container
12columns
30pxgutter
768 / 1024breakpoints
不对称分屏和多列网格布局。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
页面加载时的微妙opacity渐变和transform滑入。
最小的视觉变化，主要是色彩过渡或opacity变化。 · 标准的链接行为。
08
组件
- button 极简的文本链接，大写，有时带下划线。
- card 无传统卡片；内容以模块化网格排列。
- chip N/A
- input N/A
- hero 全宽的大尺寸排版，搭配几何背景线条图形。
09
文案语气与禁用清单
- 语气 权威、理性且富有前瞻性。
- 标题风格 全大写、高度紧凑或紧密字距的巨型字体。
- 按钮文案 克制的大写文本链接，有时呈现monospace外观。
- 不要使用圆角——截图显示为锐利的、零radius的边缘。
- 不要使用明亮、饱和的强调色——截图显示为严格的单色系配色。
- 不要使用传统首字母大写的正文文案——截图显示了大量大写文本的使用。
- 不要依赖小而密集的段落——截图使用了巨大、独立的排版陈述。
- 不要使用高度装饰性或手写体字体——截图严格使用结构化的grotesque和monospace字体。
- 不要使用复杂的UI组件如卡片或按钮——截图依赖于简洁、模块化的排版。
- 避免: 陈词滥调
- 避免: 营销性术语
- 避免: 非正式语言
- 避免: 俏皮色彩
- 避免: 厚重的UI元素
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端创意机构的作品集，采用大胆、建筑感的排版和严格的单色系配色设计。背景为深黑色(#000000)，搭配温暖的灰白色墨迹(#E7DED1)。版式包含巨型的展示标题(grotesque-sans)和小型、结构化的文本(monospace)。关键设计约束：不使用鲜艳的强调色；不使用圆角或柔和的UI元素；不使用首字母大写的文本；保持极端的排版尺度对比；确保版式感觉是结构化的网格，而非流动的文档。
en · zh-CN · zh-TW · ja · ko