精选 · 开放 · 免费
Thoughtlab
品类先行 品牌+产品工作室
StudioPremiumAgencyDark ModeTypography
01
设计气质 DNA
品牌战略产品工作室品类设计旗舰体验26年
一家高端品牌咨询机构，专攻市场品类设计，并构建旗舰级数字产品以验证其理念。
02
色彩
#fc1c46Accent
#ffffffInk
#ccccccInk soft
#000000BG
#4c4c4cMuted
rgba(204, 204, 204, 0.2)Line
高对比度的单色基底，搭配单一的大胆红色强调色。
03
字体
grotesque-sans
- display
91px · 700 - h1
72px · 700 - h2
27px · 400 - body
14px · 400
在显示尺寸的文字上使用紧凑的负字距。 · 保持文字与背景之间的高对比度。 · 所有文字严格使用grotesque-sans类别字体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用一致的4px基础网格进行内边距和外边距设计，并运用大尺寸的垂直间距（如198px、288px）来创造戏剧性的章节分隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 9999px
1px solid rgba(204, 204, 204, 0.2)
rgb(128, 128, 128) 0px 0px 5px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域，文字左对齐，大型图形元素（如3D球体）占据中央/右侧空间。
07
动效与交互
220msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
用于滚动渐显的流畅透明度和变形过渡。 · 用于复杂元素的缓慢宽度/变形动画。
微妙的透明度变化或光标变形。 · 通过状态变化提供即时反馈。
08
组件
- button 高对比度色彩的胶囊形主要按钮。
- card 极简卡片，通常无边框或带有细微边框。
- chip 不适用
- input 不适用
- hero 全视口深色主视觉，包含巨大文字和居中的3D抽象元素。
09
文案语气与禁用清单
- 语气 权威、自信且高端。
- 标题风格 直接、陈述性且巨大。
- 按钮文案 简洁且以行动为导向（例如：“联系我们”）。
- 不要使用浅色背景——截图显示的是严格的深色（黑色）背景。
- 不要使用多样化的调色板——截图显示仅使用黑、白、灰及一种红色强调。
- 不要使用衬线字体——截图显示全部使用grotesque-sans字体。
- 不要使用小而细的标题——截图显示的是巨大、粗壮、紧凑字距的展示文字。
- 不要使用复杂的边框或阴影——截图显示的是平面化表面，仅有极少、微妙的边框。
- 不要过度使用圆角——截图显示大多是尖角或仅有极轻微圆角的边缘。
- 避免: 俏皮或随意的语言。
- 避免: 小而怯懦的字体排印。
- 避免: 过于复杂的导航。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端品牌与产品工作室网站，具有精致的暗色模式美学。设计依赖于黑（#000000）与白（#ffffff）的严格单色调色板，以灰色（#cccccc, #4c4c4c）增加层次感，并以单一醒目的红色（#fc1c46）作为行动号召的强调色。字体全部采用grotesque-sans类别，特点是巨大、粗壮且字距紧凑的标题，搭配干净、极简的正文。布局开阔且富有戏剧性，使用全视口章节和大尺寸的垂直内边距来营造尺度感和重要性。关键禁忌：避免浅色背景、避免使用广泛的调色板、避免使用衬线字体、避免小尺寸标题、避免复杂的UI模式，以及避免繁忙或杂乱的构图。该网站通过其极简而具冲击力的视觉语言，传达权威感和品类领导力。
en · zh-CN · zh-TW · ja · ko