North Kingdom 网站预览
North Kingdom 网站预览

North Kingdom

电影式虚空搭配发光文字——一个黑色电影制片厂的声控舞台,仅有一个字标在发光

North Kingdom 的阅读效果如同一场电影式的虚空:几乎黑色的画布(#050311)吞噬一切,仅留下超大尺寸的白色文字和一个明亮的点缀。字标是首屏区域——巨大的新无衬线字母形式横跨整个视口,两侧配有带有圆形交互提示的3D盾牌徽章。整个配色方案接近单色;没有品牌色,没有渐变,没有装饰性的暖调。每个组件的生死取决于对比度:在黑暗背景下,白色文字与细线的对比,唯一次要信息由淡灰(#9b9aa0)承载。表面是扁平的——没有阴影,没有立体效果,没有玻璃质感。几何形态沉静且略带锐利:8px 图片/卡片圆角,4px 按钮圆角,唯有一处26px的胶囊输入控件用于标示交互性。整体效果如同数字机构的宣传册,被处理成电影片头字幕的风格。

查看原始网站

使用规范

建议采用

  • 将所有正文和标题设置为 FKGroteskNeue 400 字重——这是系统的唯一声音;绝不引入粗体或轻体变体
  • 使用 #050311 作为所有全宽背景的页面画布;让各区块自然延伸为连续的虚空带
  • 为所有图片容器和项目卡片应用 8px 圆角;按钮使用 4px;仅将 26px 保留给输入字段
  • 让白色(#ffffff)承载所有主要信息:文字、边框、图标、按钮轮廓——它是唯一能清晰表达的发声体
  • 使用 #9b9aa0 用于次要文字和柔和边框;它绝不能与白色争夺注意力
  • 让首屏字标显得极其巨大——字形尺度是设计系统的本质,而非色彩或图像
  • 在所有 FKGroteskNeune 的使用中包含 "tnum" 字体特性设置,以保持表格数字的对齐

建议避免

  • 绝不引入任何有色彩的品牌色——该系统为单色;色彩仅出现在3D徽章艺术作品内部
  • 绝不使用阴影、发光或模糊效果——深度来自明暗对比,而非立体感
  • 绝不为卡片或图片设置超过 8px 的圆角——26px 和 100px 的值仅保留给输入控件和胶囊按钮使用
  • 绝不使用超过一种字重——系统以单一 400 字重为基础,通过不同尺寸表达语气
  • 绝不将白色文字置于白色背景,或在虚空中使用黑色文字——系统依赖于两个值之间的绝对清晰度
  • 绝不使用背景渐变——画布是实心的虚空;系统中未检测到渐变使用
  • 绝不添加装饰边框或装饰性元素——整体风格是建筑式极简,而非插画