Karl 网站预览
Karl 网站预览

Karl

浅色基底、扁平表面与手绘图形。

页面以浅色为基底,搭配深灰色文字。字体采用 Changa One、Arial。视觉特点包括扁平表面、手绘图形。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 使用信号黄色(#ffe600)作为每个区块的完整满幅背景——绝不被置于卡片内或置于白色背景之上。
  • 在75px字号、行高0.72的Changa One字体上用于展示标题,让文字行重叠形成叠加/重印的轮廓效果。
  • 仅使用1440px圆角来生成圆形和椭圆形的焦点表面,不作为卡片或按钮的圆角使用。
  • 导航链接使用14px Arial字重400,内边距10px/20px,通过在当前导航项下添加一条20px宽的#333333下边框来表示激活状态。
  • 将白色(#ffffff)的显示文字直接叠加在#007fff的地球表面和#ffe600的黄色天空上——不添加文字阴影,也不设置文字背景。
  • 通过叠加插图图层(房屋位于地球之上,地球位于天空之上)来传达深度,而非通过阴影或不透明度。
  • 在满幅插画视口之间进行硬切,不添加分隔线、灰色条带或场景间的空白缓冲区。

建议避免

  • 不要在黄色背景后添加白色或中性页面背景——黄色是画布,而不是白色页面上的一个表面。
  • 不要对任何元素应用阴影、发光或模糊效果;该系统刻意保持扁平化。
  • 不要为卡片或按钮使用小数值的圆角(如4px、8px、12px);系统中唯一的圆角是1440px,用于圆形边框。
  • 不要引入第二套正文字体、无衬线字体的展示替代字体,或Changa One的粗体字重——Arial负责处理铬色元素,Changa One字重400负责展示,其他任何字体均不出现。
  • 不要在内容列中居中正文文字,或在插图周围添加最大宽度容器;所有内容均满幅呈现并居中,对视口而非页面进行对齐。
  • 不要为激活的导航链接添加彩色填充,或为任何按钮添加填充;唯一的交互状态信号是当前导航项下20px宽的#333333下边框。
  • 不要在UI铬色、文字或边框中使用珊瑚色(#ef3b2c)或其他插画艺术色彩——这些色彩仅属于艺术作品内部。