01
设计气质 DNA
公关机构品牌权威行业领军者战略传播
一本高端、自信的商业变革编辑杂志。
02
色彩
#84acfbAccent#f4efd4Ink#000000BG#333333Mutedrgba(244,239,212,0.4)Line高对比度的暗色模式,搭配一个柔和的蓝色点缀色,用于引导注意力,同时不破坏单色优雅感。
03
字体
- display
55px · 300 - heading
24px · 500 - body
14px · 300
使用过渡衬线字体作为主标题,以建立权威、编辑式的基调。 · 所有正文文本和导航使用人文无衬线字体,以确保清晰的易读性。 · 大号文本使用较轻的字重(300),使其感觉优雅而非厚重。
04
间距
4px8px16px24px32px48px64px96px宽松、不对称的间距,营造出冷静、从容的编辑式流动感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用低透明度米色的细线条边框来分隔内容区域,避免生硬的分隔线。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
主视觉区域采用干净、居中的单栏布局,服务与客户部分则转为网格布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.42, 0, 0.58, 1)easing
交互元素的背景色和边框色平滑过渡。 · UI 状态变化时,使用柔和、缓动的过渡,以保持高端感。
背景色或边框色发生细微变化,并伴有平滑、缓动的过渡。 · 即时响应,除状态变化外,视觉反馈最小化。
08
组件
- button 一个药丸形按钮,采用纯色蓝色背景和白色文字。
- card 卡片通过细微的边框线条定义,而非实色背景,以保持扁平化暗色美学。
- chip 基于文本的标签或列表项,通过宽松的垂直间距分隔。
- input 极简风格,很可能仅有底部边框,以匹配精致的美学。
- hero 一个全视口高度的暗色屏幕,由一个大型、居中的衬线体宣言和滚动播放的客户标识 ticker 主导。
09
文案语气与禁用清单
- 语气 权威、精致且冷静。
- 标题风格 关于品牌建设与权威的、大型且富有诗意的陈述。
- 按钮文案 直接且专业,例如‘成为客户’。
- 不要使用浅色背景——截图显示整个背景为深黑色(#000000)。
- 不要为标题使用粗体——截图显示标题使用非常轻的字重(300)。
- 不要使用多种点缀色——截图仅显示一个柔和的蓝色(#84acfb)搭配米色和黑色。
- 不要使用尖锐、矩形的按钮——截图显示药丸形(半径 1000px)的蓝色 CTA 按钮。
- 不要使用密集的段落——截图显示宽松的间距和居中的、诗意的标题结构。
- 不要使用厚重的边框或卡片——截图使用极细、低透明度的线条进行视觉分隔。
- 避免: 随意或俚语语言
- 避免: 过多的标点或感叹号
- 避免: 夸大其词的营销术语
- 避免: 明亮或霓虹色彩调色板
- 避免: 密集、杂乱的文本块
11
System Prompt
这是一个为 Moxie 定制的高端公关机构网站,定位为权威建设伙伴。设计 DNA 特征为高对比度暗色模式(黑色 #000000 背景,米色 #f4efd4 文本),并使用一个柔和的蓝色(#84acfb)作为 CTA 和强调色。字体依赖于轻字重的过渡衬线字体用于大型、表现力强的标题,以及干净的人文无衬线字体用于正文。关键禁忌包括:永远不要使用浅色背景,永远不要为展示文本使用粗字重,永远不要使用多种相互竞争的点缀色。布局宽松且具有编辑风格,偏好居中的文本和充足的留白,而非密集的网格。