Secure

白色基底、摄影展示与衬线字形。
页面以白色为基底,搭配近黑色文字。字体采用 Whereby Roslindale Display Condensed、Whereby Roslindale Text。视觉特点包括摄影展示、衬线字形、分屏构图、网格布局。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有40px或更大的分区级标题都使用Roslindale Display Condensed;较宽的Roslindale Text字体款式保留给18-28px的卡片标题。
- Inter只使用400/500/600字重;不要引入bold或black字重,品牌依靠衬线字体承担强调作用。
- #2b189b仅用于填充式CTA,以及Log in描边按钮的激活状态;绝不要用于正文或装饰性填充。
- 无论按钮大小如何,都使用40px的胶囊圆角,以保持标志性的柔和圆角操作形状。
- 首屏和分区强调横带以满幅的#f8dbd5浅粉色营造氛围,内容密集的分区则回到#ffffff。
- 每张照片都配以12px圆角和0 8px 24px rgba(0,0,0,0.08)阴影;绝不要将图像裁成直角。
- 功能列表项以#2b189b的“+”字形开头,让列表标记延续品牌语言,而不是默认使用圆点。
建议避免
- 标题不要使用无衬线字体;衬线字体是品牌最有辨识度的选择,移除它就会使编辑式气质消失。
- 不要引入绿、蓝、红等额外强调色作为功能性UI设计变量;青绿色#006654只用于装饰,不得出现在按钮或状态徽章上。
- 不要给文字卡片或导航添加厚重投影;抬升效果只留给照片和产品模型图。
- 按钮圆角不要缩减为4px或8px;40px胶囊圆角是标志性特征,必须在所有操作变体中保持一致。
- 填充按钮的背景不要使用#000000;按钮之所以显得可交互,是因为它们带有彩色,而非深色。
- Roslindale Display的字号不要拉到40px以下或120px以上;超出这个范围,其窄体比例就会失衡。
- 同一组件中不要叠用多种饱和品牌色;这个系统建立在一种强烈紫色与温暖氛围之上,而非多彩配色。