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或抬升效果;深度通过留白和细线表达,而非模糊。
- 不要以分隔线、背景或边框等视觉元素分隔导航项;圆点字符本身就是分隔符。