Mural

明暗对比、大字排版与紧密字距。
页面兼有浅色与深色区域。字体采用 STK Bureau、ABC Social。视觉特点包括大字排版、紧密字距、衬线字形、产品图像展示。适合参考的场景:专题展示页、项目介绍页。
查看原始网站使用规范
建议采用
- 所有展示和首屏标题必须使用STK Bureau 300字重,字间距控制在-0.04em至-0.05em之间,仅此用途。禁止在正文或UI尺寸中使用该字体。
- 仅将#00c27a用于主要CTA按钮(带有1px #000000边框)和激活链接状态。禁止用于装饰性色彩块或插图。
- 所有标签型小圆点按钮统一使用 26px 圆角,所有按钮和输入框使用 8px 圆角,大内容卡片仅保留 24px 圆角。
- 只有11-12px ABC Social大写眉题标签将字间距放宽为+0.175em,其他所有字号采用-0.02em或默认字间距。
- 通过背景色切换(#000000 → #ffffff → #eeeeee)建立区块分隔,而非使用分隔线或阴影。
- 仅使用蓝调阴影(rgba(11,41,70,0.32) 0px 0px 1px 0px, rgba(42,82,121,0.08) 0px 24px 20px 0px)叠加浮动元素,如聊天小工具。
- 卡片中的摄影需完整延伸至卡片边缘,无内部内边距——由24px的卡片圆角裁剪图像角。
建议避免
- 禁止在正文、UI标签或小于32px的内容中使用STK Bureau——小尺寸下的紧密字间距会导致内容不可读。
- 禁止在任何营销页面中使用扩展CSS令牌色值(--lavender, --flamingo, --mural-blue 等)作为背景色——这些仅限于画布内产品场景使用。
- 禁止为卡片分组或区块组织使用阴影——应通过背景色差异实现,阴影仅用于浮动叠加层。
- 禁止在白色背景上的文本链接使用#00c27a作为常规链接色——该色仅出现在黑色背景下的按钮背景或悬停状态。
- 禁止使用除8px、16px、24px、26px之外的圆角值。尤其避免在按钮上使用9999px的胶囊形状——Mural使用8px正方形按钮,而非胶囊形按钮。
- 禁止将STK Bureau与任何非300字重的字体混合使用——轻量级展示字体是刻意选择;更重的字重会破坏其与密集字间距的对比关系。
- 禁止将#dce1e5 Cool Grey用作文本颜色——它仅作为边框和分隔线使用。