Moxie 网站预览
Moxie 网站预览

Moxie

深色基底、衬线字形与非对称构图。

页面以深色为基底,搭配暖白色文字。字体采用 IBM Plex Serif、IBM Plex Sans。视觉特点包括衬线字形、非对称构图、居中构图、网格布局。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有部分标题和首屏标题使用IBM Plex Serif 300字重,字号范围为43-55px——轻盈的字重是编辑语调的不可妥协要素
  • 应用斜体薰衣草蓝强调模式:在每个标题中选取一个关键短语,使用IBM Plex Serif斜体,颜色设为#84acfb,以形成字体节奏
  • 所有按钮和交互标签使用1000px圆角(完整胶囊形)
  • 卡片边框设为1px #f4efd4,无填充也无阴影——结构由线条和间距构成,而非通过层高实现
  • 保持黑色(#000000)作为唯一页面背景——绝不使用灰调或细微渐变来淡化它
  • 次要正文使用IBM Plex Sans 300字重,按钮标签和说明文字使用500字重,以建立清晰的文本层级
  • 各部分之间使用80-120px的垂直间距,让深色画布和衬线字体得以呼吸

建议避免

  • 任何元素都不使用阴影——该系统刻意无阴影,依赖边框和间距来构建结构
  • 不要在大面积背景或装饰性区块中使用#84acfb——它是一种精准的强调色,而非表面填充色
  • 不要将标题设置为 IBM Plex Sans —— 无衬线/衬线字体的划分是系统中的关键设计选择;标题必须始终使用 Plex Serif
  • 不要为标题使用600-700字重——轻盈的300字重是标志性的风格;更重的字重会破坏编辑语调
  • 不要引入额外的强调色——该系统为单色加一种薰衣草蓝;增加第二种色彩会削弱整体信号
  • 不要在任何元素上添加渐变、发光或模糊效果——平面性是核心
  • 不要使用方形或小圆角按钮作为主要操作——所有交互元素应为胶囊形(1000px半径)