Monad 网站预览
Monad 网站预览

Monad

一份温暖羊皮纸风格的科技期刊

Monad 在其整个界面中使用温暖的羊皮纸画布(#f6f3f1),立即区别于典型的纯白色 SaaS 模板。标题采用 Untitled Serif 字体,字重 400 —— 从不加粗 —— 而正文、导航和所有 UI 文本均使用 ABC Diatype Mono,使网站呈现出技术手册般的质感,仿佛是为文学杂志排版的文档。唯一鲜明的湖蓝色(#2b59d1)用于主要操作;其余部分均处于温暖的灰度调色板中,因此淡紫色卡片表面(#cfdaf5)和柔和的粉彩渐变(珊瑚、天空、薄荷、金色)被视为有意识的强调,而非杂音。组件采用细线边框和 100px 胶囊容器,而非阴影,整体节奏保持平静且宽敞,区块间有 40px 卡片内边距和充足的纵向留白。

查看原始网站

使用规范

建议采用

  • 所有标题均使用 Untitled Serif 字重 400 —— 从不加粗;该衬线字体的笔画对比和 -0.02em 字间距在视觉上承担了分量
  • 所有正文、按钮、导航标签、徽章和功能 UI 文本均使用 ABC Diatype Mono —— 等宽字体是品牌声音本身
  • 所有按钮和标签的圆角半径设置为 100px 或 9999px —— 胶囊形状是该系统的容器语言
  • 使用 Parchment(#f6f3f1)作为页面画布 —— 从不替换为纯白色(#ffffff);温暖的色调是标志性特征
  • 将湖蓝色(#2b59d1)专用于每屏唯一的主操作;其他所有按钮使用 Off-Black 或透明描边变体
  • 所有边框和分隔线使用 1px 实线 Ash(#cecac8) —— 避免使用更粗的线宽或更深的边框颜色
  • 所有导航标签、按钮和标签文本通过等宽字体家族应用大写 + 紧凑字间距

建议避免

  • 标题从不加粗或使用 600 以上的字重 —— 所有 Untitled Serif 标题在所有尺寸下均保持 400 字重
  • 从不使用纯白色(#ffffff)作为页面背景 —— 始终使用 Parchment(#f6f3f1)以保留温暖表面
  • 从不将湖蓝色(#2b59d1)用于除单个主操作填充之外的任何用途 —— 若分散使用则会失去意义
  • 从不以无衬线字体替代等宽正文字体 —— 等宽与衬线的搭配是该设计系统的标志性排版手法
  • 永远不要为卡片添加阴影效果——应使用1px Ash边框和表面颜色对比(米色→淡紫)来实现立体感
  • 从不为卡片设置小于 16px 的圆角,或为按钮设置小于 100px 的圆角 —— 该系统为胶囊形与柔和矩形,从不锐利
  • 从不为 UI 元素引入额外的强调色 —— 柔和色系(天空、薄荷、珊瑚、金色)仅作为装饰性使用,应出现在插画和渐变渲染中