AutoSend 网站预览
AutoSend 网站预览

AutoSend

近白色基底、细线分隔与扁平表面。

页面以近白色为基底,搭配深红色文字。字体采用 Geist、Cooper LtBT。视觉特点包括细线分隔、扁平表面、衬线字形、网格布局。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 将首屏标题设置为 Cooper LtBT 80px 字号 400 字重,并对每行中的单个重点词汇进行斜体处理
  • 使用 #615fff 填充色 + #ffffff 文字作为唯一的主行动号召按钮——绝不使用 #292524 或任何中性色作为主要操作的配色
  • 以 #fafaf9 作为页面背景,以 #ffffff 作为卡片表面——绝不颠倒温暖米白与纯白之间的关系
  • 按钮和链接设置 8px 圆角,卡片设置 16px 圆角,输入框设置 12px 圆角
  • 将大写标签和标签文字使用 Geist Mono 字体,字间距设置为 0.04–0.10em
  • 不同区块之间使用 1px #e7e5e4 细线或 80px 垂直间距分隔,禁止使用彩色条带
  • 所有非行动号召的文本内容保持在温暖灰调家族(#292524、#79716b、#a6a09b)中——绝不为正文使用任何彩色

建议避免

  • 不要将 #4f39f6(深紫色)用作按钮填充——它是主行动号召按钮的悬停/按下状态,而非独立的强调色
  • 不要将正文设置为衬线字体——Cooper 仅用于展示级标题
  • 不要为按钮、导航栏或功能卡片添加投影——只有产品展示卡片是带有投影的表面
  • 不要为状态变化引入新的彩色——应复用现有配色方案(#5ea500 绿色、#22b8cd 青色、#ff0000 红色)以 1px 笔画或图标粗细呈现
  • 不要使用 #d97757(陶土色)作为交互元素的填充——它仅作为边框和图标笔画的装饰性点缀
  • 正文内容在首屏之下不要居中对齐——只有标题是居中的文本;其余内容均在列内左对齐
  • 字间距不要宽于0.10em,也不要窄于正常值;0.04em标签和0.10em眉题是仅有的两级字间距。