Stellar 网站预览
Stellar 网站预览

Stellar

近黑色基底、大字排版与紧密字距。

页面以近黑色为基底,搭配白色文字。字体采用 Neue Montreal。视觉特点包括大字排版、紧密字距、细线分隔、网格布局。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 仅在主要行动号召按钮填充、激活链接状态和聚焦输入边框中使用 Sprint Violet(#6a48f2)——其稀缺性正是设计的本质
  • 所有显示标题均设为 400 字重,永不使用粗体。70-104px 的字号通过尺寸本身传递权威,而非笔画粗细
  • 70px+展示字号采用-0.02em字间距,小字号大写眉题采用+0.035-0.040em;紧凑展示文字与疏朗标签之间的对比形成字体系统特征。
  • 设计师卡片使用 10px 圆角,按钮使用 50px 胶囊圆角——这两个圆角定义了几何语言;避免任何中间值
  • 分层表面从 #000000 → #171718 → #2c2c2,每一步都是一个灰度差,从而在无照明条件下营造深度
  • 将次级文本和辅助内容设为 18-19px 的 Ash(#888888)颜色,确保在每屏上显示标题始终是最突出的元素
  • 页面最大宽度设为 1200px 且内容居中——虚空延伸至视口边缘,但文字始终在可控范围内

建议避免

  • 不要引入第二个色彩强调——Sprint Violet 是唯一颜色,增加其他会稀释系统
  • 不要在任何标题中使用粗体(600 及以上)——大字号下 400 字重是标志;粗体会破坏静谧的氛围
  • 不要在卡片或按钮上添加阴影——深度来自 #000000 → #171718 表面对比,而非抬升阴影
  • 不要使用浅灰(#f3f3f3、#e9e9e9)作为页面背景——整个系统依赖纯黑作为画布
  • 不要在卡片或按钮上使用 8px 或 12px 圆角——系统仅使用 6px(输入/导航)、10px(卡片)和 50px(按钮/链接)
  • 正文不要低于15px;字号尺度中的14px仅用于图注,15-16px才是易读的最小正文范围。
  • 不要在 #6a48f2 背景上直接放置白色或紫色文字,除非经过对比测试——仅在行动号召文字中使用白色在紫色背景上,绝不可用于装饰