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。