June 网站预览
June 网站预览

June

近白色基底、细线分隔与宽松留白。

页面以近白色为基底,搭配深蓝色文字。字体采用 SF Pro Rounded、Inter。视觉特点包括细线分隔、宽松留白、单栏阅读排版、扁平表面。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 在品牌表面使用 SF Pro Rounded 作为唯一字体——它是品牌的声调
  • 所有标题均使用 #2a2a63 午夜紫——禁止使用黑色或 #151531 用于展示文本
  • 卡片和按钮使用 12px 圆角,仅在罕见的突出强调卡片中使用 20px
  • 所有正文文本保持 1.5 的行高以确保编辑可读性
  • 所有结构分隔线使用 #e9ecef 雾边色——分隔线绝不深于该色
  • 长篇内容居中,最大宽度限制为 720px 以获得最佳阅读体验
  • 在展示尺寸(40px 及以上)上使用 -0.015em 的字间距以收紧圆润形态

建议避免

  • 任何元素均不得使用尖锐的 0px 圆角——圆角是品牌的核心信号
  • 不得引入比 rgba(13,19,27,0.1) 更重的阴影——抬升效果保持轻柔
  • 任何文本均不得使用 #000000 或纯黑色——应使用 #151531 深墨或 #2a2a63 午夜紫
  • 不得在文本或边框中使用淡紫 #6868f7——仅限于单个强调表面使用
  • 每页不得添加超过一个强调色元素
  • 不得使用 Arial 或 Helvetica 等系统字体——圆润的几何形态定义了品牌
  • 正文文本的行高不得压缩至低于 1.4——阅读舒适度是不可妥协的