monopo saigon 网站预览
monopo saigon 网站预览

monopo saigon

在编辑沉默背后的液态虹彩——一个漂浮于熔融光线之上的黑白编辑画廊。

Monopo Saigon 以激进的单色纪律运行:纯黑与白,搭配几乎不可察觉的灰调,围绕着巨大的 Roobert 字体排版,贯穿整个满幅画布。标志性的对比存在于严苛的编辑克制(导航和文本链接的锐利 0px 角,充足的空白,以 4px 为节奏)与一个表达性的动作之间——全胶囊形 75px 半径按钮,如液体般漂浮于图像之上。首屏环境倾向使用虹彩、流动、色彩丰富的氛围(从绿色溶入琥珀色到深酒红);而界面本身从不引入任何色彩,营造出宛如漂浮于液态光河中的黑白编辑画廊的视觉感受。字体设定温度:78px 字重 300 的文字低语,225px 字重 400 的文字充满整个视口,11px 字重 400 的标签则以自信的极简风格统一其余内容。运动表现生动却克制——使用 cubic-bezier(0.19, 1, 0.22, 1) 的缓动曲线,变换过渡时长最长达 1.25s,让元素滑动而非突变。

查看原始网站

使用规范

建议采用

  • 将展示标题设为 225px Roobert 字重 400,并让其主导整个视口——绝不以副标题或行动号召干扰其存在
  • 仅将 75px 胶囊半径用于按钮和标签——所有其他元素(卡片、图片、输入框)保持 0px 半径,以保持锐利的编辑对比
  • 将色彩仅用于每页一个虹彩首屏背景——所有界面文本、边框和填充必须严格限定在黑/白/灰调范围内
  • 使用 78px 字重 300 用于宣言和氛围性标题,以营造低语权威——在此尺度下绝不提升至 400 以上字重
  • 在 78px 以上显示尺寸中,行高设为 0.70–0.76,使行间锁定为具有典型艺术性的排版对象
  • 所有变换与颜色过渡应用 cubic-bezier(0.19, 1, 0.22, 1) 缓动,持续时间 0.8–1.25s,以实现平稳、滑动的运动效果
  • 所有交互文本链接保持 0px 半径且无下划线——通过间距、颜色和上下文传递可用性暗示

建议避免

  • 绝不引入任何色彩 UI——黑、白、灰是界面调色板;虹彩渐变仅用于媒体展示
  • 绝不为卡片、按钮或图片添加阴影或层叠效果——系统依赖于平面表面和细线 1px 边框
  • 绝不设置边框半径在 1px 到 74px 之间——系统从锐利的 0px 突然过渡到完整的 75px 胶囊,无中间过渡
  • 绝不使用粗体或重字重(600 以上)在 45px 以上——大尺寸应以 300 字重低语,或以 400 字重表达,绝不可喧宾夺主
  • 绝不将正文在地址块、列表或项目描述中居中对齐——应左对齐,行间距为 8–14px,以实现编辑流畅性
  • 绝不为按钮、徽章或 UI 控件添加渐变——渐变仅属于首屏氛围媒体
  • 绝不使用 Raleway 作为正文或导航——它仅作为标题辅助字体,且即使在标题中也极为稀少
  • 绝不以图像填满画布——该系统以文字为主,每页仅保留一个首屏级视觉元素