Mural

黑板转为白板——同样的手法,同样的权威,但地面完全不同。
Mural 的视觉效果如同明亮工作室中的一块黑板——首屏区域以全黑开场,搭配超大尺寸、接近衬线风格的展示字体从一侧延伸到另一侧,随后页面迅速切换至临床级纯白,同样充满自信。双字体系统是其标志性设计:STK Bureau(仅300字重)负责所有展示类与标题内容,采用紧密的负字间距(-0.04 至 -0.05em),而 ABC Social 则以人文主义风格处理从图注到正文的一切内容。电光玉绿色(#00c27a)是唯一的色彩锚点——出现在所有行动号召按钮和关键链接上,无论背景是黑色还是白色,均传递出相同的紧迫感。卡片设计处于无边框、无阴影的环境中,内容的边界感完全来自背景色的切换(#eeeeee、#ffffff),而非深度营造。Mural 标志的彩虹色谱身份被严格隔离于页面配色之外——产品本身采用单色系,仅以电光玉绿色作为唯一的视觉调剂。
查看原始网站使用规范
建议采用
- 所有展示和首屏标题必须使用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用作文本颜色——它仅作为边框和分隔线使用。