Inthememory 网站预览
Inthememory 网站预览

Inthememory

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 Graphik。视觉特点包括胶囊形控件、细线分隔、居中构图、宽松留白。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有按钮、导航项和交互胶囊控件都使用100px border-radius,以保持一致、有触感的几何形态。
  • #fa4e1d(Ember Orange)只留给首屏图标和装饰性时刻,绝不要用于大面积背景或正文。
  • Graphik 500只用于强调,包括标题、标签、按钮文字和卡片标题,其余全部使用Graphik 400,以保留双声部纪律。
  • 卡片边缘和分隔线采用#e9eef0的1px边框,取代阴影;系统依靠细线和表面色变化来分隔。
  • 导航、卡片和正文等结构元素保持单色,让彩色只作为功能性标点出现。
  • 展示文字设为56px和1.10行高,形成编辑式密度,而非采用更常见、会制造宽松营销标题的1.2+比例。
  • 等距线条插画置于功能卡片顶部,高度为200px+,让建筑式风格有足够呼吸空间。

建议避免

  • 不要为卡片使用阴影或抬升效果;系统通过细线边框和轻微背景变化(#f1f7f9、#e4eeff)分隔表面,绝不用投影。
  • 不要引入400和500之外的额外字重;二元语气是排版的标志性特征。
  • 不要将#0c67ff(Signal Blue)用于正文、边框或非交互元素;它只保留给公告栏、聚焦状态和激活指示。
  • 任何交互元素都不要使用0px直角;从按钮到卡片,所有元素都采用12px或100px圆角。
  • 同一组件中不要结合暖橘色与电光蓝;它们是不同的强调语气,而非同等地位的品牌色。
  • 不要给白色画布添加渐变、纹理或背景图案;表面必须保持干净、具有建筑感。
  • 正文内容不要采用20px至40px之间的font-size;字体尺度刻意从20px跳到40px,以维持编辑式语气的层级间隔。