Employment Hero 网站预览
Employment Hero 网站预览

Employment Hero

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 DM Sans、Saiga。视觉特点包括胶囊形控件、细线分隔、非对称构图、网格布局。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 任何32px以上展示标题采用Saiga 800–1000字重,并按字号尺度搭配紧凑负字间距。
  • #7622d7作为集中强调用于填充胶囊、链接文字和激活图标描边,不用于大面积表面填充。
  • 表面按薰衣草层级叠加:#ffffff → #f9f5ff → #f0e6fa,区块背景绝不引入中性灰。
  • 所有主要交互元素(按钮、标签式链接)采用32px圆角,以强化胶囊语言。
  • 按钮内边距设为12px 16px,填充CTA保持700字重DM Sans,以保留紧凑自信的按钮感。
  • 标题和正文直接放在白色上,不包裹卡片;只有内容需要视觉分组时,才以薰衣草卡片围住。
  • 结构分隔采用1px #e4e4e7极细边框,避免box-shadows,以保持平坦精确感。

建议避免

  • Saiga不要低于700字重,也不要用于正文,其几何特征只在大尺度中成立。
  • 不要用低不透明度铺色、浅色或去饱和变体稀释#7622d7作为背景,紫罗兰必须保持单一明确色相。
  • 任何面向用户的交互元素都不要使用方正角落(0–4px),系统以最小8px及操作32px为基础。
  • 卡片或按钮不要应用box-shadows,分隔仅来自填充色与1px边框。
  • 不要随意混用#000000和#121214,#000000仅用于最强调的标题,#121214用于次要深色文字和深色表面。
  • 不要引入额外强调色相;青柠绿(#94e022)和金色(#ffefa7)仅用于状态或强调,绝不作装饰。
  • DM Sans不要超过36px,展示场景始终属于Saiga。