The Fascination The Fascination 网站预览
The Fascination The Fascination 网站预览

The Fascination The Fascination

近白色基底、宽松留白与大幅摄影展示。

页面以近白色为基底,搭配近黑色文字。字体采用 Graphik、Qwitcher Grypen。视觉特点包括宽松留白、大幅摄影展示、产品图像展示、网格布局。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 仅将电蓝色(#2ea3f2)用作描边链接/边框颜色和交互文本——从不作为填充按钮背景使用
  • 保持温暖的奶油色底板(#fbfbf7)作为所有页面的基础;仅在需要时引入羊皮质感(#efe8dc)以实现卡片表面的微妙抬升
  • 将Qwitcher Grypen手写体脚本与Graphik无衬线字体搭配用于板块标题——手写体与几何体的对比是编辑风格的标志性特征
  • 在首屏/展示文本中使用96px字号、100字重的Graphik无衬线字体——在极端尺寸下采用极致纤细的字重,营造出编辑性的戏剧感
  • 保持所有卡片和图像的角落为方形(0px圆角)——仅交互元素(按钮、链接、输入框)获得6px圆角
  • 统一使用8px为基准单位:8/16/24/32/48px用于所有内边距、外边距和间距
  • 让摄影成为视觉氛围的主体;避免在图片上叠加厚重的图层、渐变或装饰性金属效果

建议避免

  • 不要将电蓝色(#2ea3f2)用作填充按钮背景——该系统中蓝色仅作为描边/边框强调色
  • 不要将Qwitcher Grypen手写体用于功能性UI文本、导航、按钮或表单标签——它仅作为装饰性元素存在
  • 不要为卡片添加阴影、投影或立体效果——该系统依赖表面色彩对比和细线边框,而非阴影深度
  • 不要为交互元素引入新的色彩——仅使用蓝+紫二色强调系统已完整
  • 不要在图片、卡片或内容容器上使用圆角——表面为0px圆角,交互元素为6px圆角,是刻意设计
  • 不要使用深色模式图案或深色表面作为内容背景——奶油色底板是品牌标识,而非主题变体
  • 不要将装饰性色彩(Marigold、鼠尾草绿、Sky Mist)与功能性UI混用——它们仅为编辑装饰,从不用于交互状态