Square

近白色基底、紧密字距与扁平表面。
页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Square Sans Display VF、Square Sans Text VF。视觉特点包括紧密字距、扁平表面、分屏构图、网格布局。适合参考的场景:金融产品官网、财务服务介绍页。
查看原始网站使用规范
建议采用
- Signal Blue(#006aff)是系统唯一彩色元素,绝不引入第二种品牌色、次级强调或装饰渐变。
- 标题采用Square Sans Display 400与-0.012em字间距,字号50–86px,行高1.0至1.19,使文字具有建筑感而非笨重感。
- 所有编辑式和卡片图像采用24px圆角;首屏照片仅在满幅分区中从边到边铺开。
- 每个填充主要按钮都配一个相同标签的透明描边变体,二者间隙10px,置于同一基线。
- 所有按钮、输入框和导航元素采用4px圆角,20px只用于胶囊按钮变体,32px只用于图标容器。
- 卡片通过#f2f2f2上的#ffffff表面对比凸显,绝不要给卡片或面板添加投影。
- 每个按钮标签都采用Cash Sans 18px medium,让操作呈现为不同于正文的独立排版语气。
建议避免
- 按钮背景不要使用Carbon(#1a1a1a),按钮始终为Signal Blue填充、蓝色透明描边,或页脚中深色上的白色。
- 卡片、功能面板或图像不要添加投影,唯一允许的阴影是填充按钮上1px、16%黑色。
- 展示标题不要采用600或700字重,系统依靠大字号400与负字间距构成视觉语气。
- 默认中性的界面不要引入绿色成功、红色错误等语义色,强调只有蓝色。
- 不要用装饰渐变、彩色分区横带或图案填充打破白色画布,让深色Obsidian页脚成为唯一的色彩反转。
- border-radius不要超出4、20、24、32四设计变量集合,不一致圆角会打散几何纪律。
- 正文不要使用letter-spacing调整,字间距变化只保留给24px及以上展示字号。