01
设计气质 DNA
极简主义精致专业高端简洁
一个精心规划的工作室空间,每件工具与每个项目都拥有充足的呼吸空间。
02
色彩
#000000Inkrgba(0,0,0,0.66)Ink soft#ffffffBG#f4f2f2BG soft#d1d5dbBG quietrgba(0,0,0,0.55)Mutedrgba(0,0,0,0.08)Line高对比度的单色基底,搭配温暖的米白色主色强调与微妙的灰色调以增加层次感。
03
字体
- display
72px · 500 - heading
48px · 500 - subheading
24px · 400 - body
16px · 400
大型展示文本使用紧凑的行高(1.0)。 · 正文使用适中的字间距(0.24px)。 · 在展示文本、标题与正文字号之间保持清晰的层级关系。
04
间距
4px8px16px24px32px48px56px64px80px96px160px基于4px网格系统,采用慷慨、一致的间距,版块间设置大量垂直内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
使用rgba(0,0,0,0.08)绘制细薄、微妙的边框,用于分隔线与卡片边缘。
rgba(0, 0, 0, 0.08) 0px -2px 0px 0px inset · rgba(0, 0, 0, 0.08) 0px 0px 0px 0.75px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽版块,居中内容,配备充足的垂直内边距,并以清晰的水平线分隔主要内容块。
07
动效与交互
250msmicro
300mssmall
400msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
在悬停与聚焦状态下平滑地改变透明度与变换效果。 · 交互元素的微妙阴影过渡。
微妙的透明度或变换变化,通常伴随平滑过渡。 · 即时反馈,可能是缩放或透明度变化。
08
组件
- button 极简的黑色胶囊形按钮,配以白色文字;或简洁的文字链接,带有箭头图标。
- card 简洁的卡片,带有微妙的边框或阴影,包含图片缩略图与大号文字。
- chip 极简的文字标签或徽章,例如顶部横幅中的“New”徽章。
- input 在截图中未突出展示。
- hero 大号居中文字,置于柔和的米白色背景上,配有充足的内边距,聚焦于设计师姓名与头衔。
09
文案语气与禁用清单
- 语气 专业、自信、直接。
- 标题风格 加粗、清晰、以效益为导向,使用大号、厚重的排版。
- 按钮文案 以行动为导向且具体,使用简洁的黑色按钮或带箭头的文字链接。
- 不要使用多种强调色——截图中显示的是严格的单色系配色,搭配温暖的米白色。
- 不要使用装饰性或手写字体——截图中使用的是简洁的几何无衬线体。
- 不要使用厚重的投影阴影——截图中使用的是微妙的内阴影或1px的浅阴影。
- 不要使用狭小、拥挤的间距——截图中采用了充足的内边距与较大的垂直间距。
- 不要将主标题文本左对齐——截图中将主标题居中对齐。
- 不要使用直角矩形——截图中使用的是完全圆润的胶囊形或8-12px的微妙圆角。
- 避免: 避免过于随意或冗长的语言。
- 避免: 避免使用未经解释的复杂术语。
- 避免: 避免杂乱的布局或相互竞争的视觉元素。
11
System Prompt
这是一个为产品与网站设计师打造的高端自由职业者作品集,定位为精致、专业的服务商。视觉语言是极简主义与单色系的,建立在严格的黑、白与柔和的米白色(#f4f2f2)配色方案之上,并以微妙的灰色调增加层次感。字体是简洁的几何无衬线体(Neue Montreal),并以大尺寸使用以增强冲击力。关键设计特征包括慷慨的间距、微妙的内阴影以及使用自定义cubic-bezier曲线的平滑过渡。关键禁忌:避免使用多种强调色,避免使用装饰性字体,避免使用厚重的投影阴影,避免使用拥挤的间距,以及避免主标题文本左对齐。