Flowmapp 网站预览
Flowmapp 网站预览

Flowmapp

白色基底、产品图像展示与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Inter。视觉特点包括产品图像展示、胶囊形控件、圆角卡片、大字排版。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 页面中仅使用 Signal Blue(#0080ff)作为唯一饱和色——绝不为操作、链接或高亮引入第二套品牌色。
  • 所有交互控件必须为胶囊形(1600px 半径),除非是表单输入,此时使用 12px。
  • 标题显示尺寸设为 48–118px,使用 Inter 700 字体,字间距在 -0.036em 到 -0.06em 之间,使文字紧凑成一个紧密的排版块,而非松散分布。
  • 使用 1px Pencil Gray(#8c9baa)边框来分隔卡片与白色画布,而非依赖阴影——阴影仅用于漂浮的首屏元素。
  • 通过在正文中嵌入柔和的圆形图标徽章(半径 1600px,大小 28–32px)来锚定长文本内容,使功能列表实现视觉扫描。
  • 所有卡片四周间距设为 24–48px,使用 20–32px 的圆角——任何卡片表面均不得使用锐角。
  • 在首屏中以柔和的 rgba(0,0,0,0.06) 18px 阴影漂浮产品 UI 原型,并用细的 Signal Blue 弯线连接,作为视觉证明。

建议避免

  • 按钮、链接或激活状态不得使用第二套饱和品牌色——该系统为单色,仅以蓝色为信号。
  • 卡片、按钮或标签不得使用方形角;所有可见表面均需圆润,至少 6px,多数控件为完整胶囊形。
  • 内容卡片不得使用厚重的阴影;唯一允许的阴影是 0.06 透明度 18px 模糊,且仅用于漂浮的产品原型和弹窗。
  • 正文内容不得超过 16–18px 或使用 500 以上字重——更重的字重应用于标题。
  • 标题不得使用低于 600 的字重;该系统依赖粗体语气来支撑其极简的色彩调性。
  • 不得用纯蓝色、渐变网格或彩色条带填充板块——背景保持纯白,色彩仅作为强调或光晕出现。
  • 主操作文字或填充不得使用中性灰——按钮文字仅限白色搭配 Signal Blue 或 Ink,绝不用 Pencil Gray。