Shortverse 网站预览
Shortverse 网站预览

Shortverse

白色基底、大字排版与摄影展示。

页面以白色为基底,搭配近黑色文字。字体采用 CooperHewitt、JetBrainsMono。视觉特点包括大字排版、摄影展示、渐变展示、大幅图像展示。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 使用 #ffffff 作为主页面画布,所有默认阅读和标题文本使用 #262626。
  • 将区块展示设置为 CooperHewitt 54px/800;紧凑的编辑标题处理使用 0.88 行高。
  • 将电影标题设置为 CooperHewitt 18px/700,目录元数据使用 JetBrainsMono 12px/300 大写字体,字间距为 0.14px。
  • 导航和按钮标签使用 JetBrainsMono 14px/800 大写字体,字间距为 1.12px。
  • 矩形按钮和输入控件使用 5px 圆角,浅色图标卡片使用 8px 圆角,仅圆形或胶囊形工具控件使用 9999px 圆角。
  • 保持电影静态画面的锐利直角,缩略图卡片之间间距为 12px。
  • 将 #6c00f4 文字和 #a77eff 字段保留用于品牌导航、提交语言和区块图标标点。

建议避免

  • 不要将 #a77eff 作为通用填充主按钮背景;公共浏览控件使用 #ffffff 背景,文字为 #262626。
  • 不要对电影缩略图、海报静态画面或横向目录卡片进行超出 0px 图片卡片处理的圆角处理。
  • 不要用 CooperHewitt 替代 JetBrainsMono 元数据,也不要移除其在 12px 时的大写 0.14px 字间距。
  • 不要使用通用的 16px/600 无衬线字体作为区块标题;使用 CooperHewitt 54px/800。
  • 不要使用阴影使每个目录项都变成浮起的卡片;使用 #eaeaea 边框和 #f1f1f1 表面块。
  • 不要引入超出薰衣草投影 #a77eff 和紫外线字体 #6c00f4 的饱和色。
  • 不要为矩形导航、搜索或提交控件应用胶囊圆角;保留 5px 角度几何结构。