Balsa

近白色基底、产品图像展示与圆角卡片。
页面以近白色为基底,搭配近黑色文字。字体采用 Van Condensed Pro Bold、Inter。视觉特点包括产品图像展示、圆角卡片、紧密字距、细线分隔。适合参考的场景:工作流工具首页、产品功能说明页。
查看原始网站使用规范
建议采用
- 所有首屏和区块标题均使用Van Condensed Pro Bold全大写,字号32–48px,字间距-0.047em——这是标志性语气。
- 保持画布背景色为 #f7f7f7,并通过白色文字与浅灰背景的亮度对比,使卡片看起来更突出,而非使用阴影。
- 仅在注解提示卡片和高亮区域使用#ffb700琥珀色——绝不用于按钮、背景或正文文本。
- 所有主要操作按钮设为#000000填充,6px圆角,Inter 14px字重600,8px × 20px内边距。
- 所有卡片、产品表面和图标保持12px圆角,按钮和输入控件为6px圆角。
- 仅在小型内联元素中使用#914db2紫色:徽章、图标描边、链接下划线、以及宽度小于60px的内联标签。
- 区块间距保持80px,产品截图卡片需在所有方向至少留出30px的边距。
建议避免
- 不要引入超出现有0.5px细线的阴影——系统设计上本无阴影。
- 不要将颜色作为UI元素间的主要区分方式——配色本意狭窄,应优先使用字重和尺寸差异。
- 正文文本字号不得低于11px或高于18px;字体层级紧凑且有明确意图。
- 不要使用Inter作为首屏或展示标题——Van Condensed Pro Bold是唯一的展示语气。
- 不要将#ffb700琥珀色用于全宽背景或大面积表面——在大尺度下会失去‘荧光笔强调’的语义。
- 不要在卡片上设置超过12px的圆角,或在按钮上超过6px——系统为矩形,非胶囊形。
- 不要使用#0000ee或任何浏览器默认链接蓝色——Balsa的链接色为#003399(带描边)和#914db2(内联使用)