Modern Treasury 网站预览
Modern Treasury 网站预览

Modern Treasury

账本置于格子纸上。构建页面为安静的白色操作表单,其中资金流动通过细线、标注节点和精确的深色控件进行映射。

Modern Treasury — 格子纸上的资金账本。界面是一张白色财务画布,由淡网格、细分隔线和技术连接图构建结构,深色墨水承担几乎所有层级表达。大尺寸、柔和字重的展示标题位于紧凑的操作 UI 之上;淡蓝和低饱和梅紫色块独立呈现产品叙事,深森林绿则稳住页脚。颜色仅用于薄荷色订阅控件、绿色网络连线和棕色等宽标签,使整个系统看起来像支付基础设施图,而非五彩仪表盘。

查看原始网站

使用规范

建议采用

  • 使用 Paper #ffffff 作为主画布,Rule Gray #dcdcdc 用于 1px 结构规则和细微网格线。
  • 首屏展示标题使用 mt-neue-display,71px/450 字号/字重,78.1px 行高;主要区块标题使用 mt-neue-display,47px/450 字号/字重。
  • 正文使用 mt-sans,16px/360 字号/字重、24px 行高,颜色为 Graphite #424242 或 rgba(21, 21, 21, 0.8)。
  • 公共深色按钮使用 Ink #151515 为主色,Paper #ffffff 为文字,圆角 2px,内边距 6px 12px 或 8px 16px。
  • 保留 48px 区块间距、24px 卡片内边距,以及 8px 组件内间距,基于 4px 间距网格。
  • 将 Network Green #29735c 保留用于标志、连接路径及小型基础设施点缀。
  • 以 Forest Ledger #0c221d 为底色的页脚闭合白色页面,使用 Paper 标题和 60% 白色站点地图链接。

建议避免

  • 卡片或矩形控件的圆角不得超过 8px 和 4px 分别。
  • 不要为 Ice Panel #f0f8f9 或 Plum Ledger #543b4e 卡片添加阴影。
  • 不要将 Mint Subscription #bae0cf 作为通用公共按钮填充色;仅限用于订阅式页脚控件。
  • 不要用漂浮仪表盘格子或渐变团替代淡色网格与连接线的首屏视觉。
  • 不要将展示标题设置为 600 或 700 字重;保持 mt-neue-display 字重为 450。
  • 不要用 Network Green #29735c 或 Ledger Brown #7b5953 为普通正文文本上色。
  • 不要对新闻订阅输入框进行圆角处理;保持其圆角为 0px。