July Fund 网站预览
July Fund 网站预览

July Fund

近黑色基底、衬线字形与胶囊形控件。

页面以近黑色为基底,搭配灰色文字。字体采用 Portrait、Helvetica Neue。视觉特点包括衬线字形、胶囊形控件、错落拼贴、分屏构图。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个标题使用 Portrait 400,30–96px,绝不用无衬线标题替代。
  • 所有大写标签,包括徽章、按钮、元数据,设为 8–10px,字间距 0.20–0.25em,字重 700。
  • 每张卡片恰好选一个彩色场 Forest Floor、Twilight Violet、Olive Depth、Solar Yellow 或 Charcoal 作背景,不用渐变或卡片内图片背景。
  • 卡片圆角 20px,按钮 24px 完整胶囊形,徽章 8px,图片 12px。
  • Mint Chip #56d270 徽章只搭配深色或中性卡片;Solar Yellow #fde440 留给任一网格中最响亮的唯一论点卡。
  • 卡片主轴内边距 40px,次轴 20px,配对文字列之间列间距 45px。
  • 区块用 80px 的 Obsidian 虚空分隔,卡片之间绝不用分割线,圆角与间隔就是分隔。

建议避免

  • 任何元素都不要添加 box-shadow、光晕或模糊,系统刻意平面。
  • Portrait 标题不要用粗字重,权威来自字号,而非字重。
  • 同一卡片不要混合两种彩色填充,选一种色场并贯彻。
  • 正文颜色只能用 Stone Gray #898989、Paper White 或 Coffee Bean,不用强调文字色。
  • 按钮不要用方角或 8px 圆角,24px 胶囊形不可妥协。
  • 以文字为主的卡片不要设置背景渐变,渐变留给首屏或空状态的径向强调色层。
  • 正文段落或标签不要居中,除文字标志外全部左对齐。