Magnetism 网站预览
Magnetism 网站预览

Magnetism

近白色基底、大幅摄影展示与大字排版。

页面以近白色为基底,搭配近黑色文字。字体采用 TT Hoves Pro Trial、NeueMontreal。视觉特点包括大幅摄影展示、大字排版、细线分隔、网格布局。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 所有展示尺度排版采用TT Hoves Pro Trial字重300;低语般轻盈的文字标志是品牌识别,不应使用粗体或中等字重。
  • 8–10px微型标签采用0.22em letter-spacing,14–16px文字采用0.10em;疏字间距是使文字具有编辑感而非纯实用感的标志。
  • 导航项用圆点字符•分隔,并采用充裕的32–64px水平内边距;不要使用竖线、斜线或垂直分隔条。
  • 摄影保持满幅,内边距为0px,border-radius为0px;图像周围任何界面装饰都会稀释画廊效果。
  • 所有UI装饰保持无彩色;页面唯一色彩应来自宣传摄影,而非按钮、边框或强调色。
  • 每页以微小眉题标签锚定,格式为'• LABEL — YEAR •',使用圆点分隔和em-dash。
  • 在页面左侧边距放置一个大型浅灰色M字符,作为连续水印;它是品牌安静而持续的存在。

建议避免

  • 不要引入彩色品牌色、CTA按钮或强调填充;系统刻意单色化,色彩会破坏编辑式约定。
  • 图像、卡片和容器不要使用border-radius;所有内容都以清晰直角置于亚麻画布上。
  • 文字标志不要使用500+字重或窄体、扩展体变体;横跨视口的极轻300字重必须保留。
  • 14px以下的句首大写正文不能缺少宽松的0.22em字间距;小字需要这一间距,才能显得有意设计而非拥挤。
  • 不要在宣传摄影上叠加文字;标签始终位于图像下方的独立一行。
  • 不要使用box-shadow、drop-shadow或抬升效果;深度通过留白和细线表达,而非模糊。
  • 不要以分隔线、背景或边框等视觉元素分隔导航项;圆点字符本身就是分隔符。