Podscan.fm 网站预览
Podscan.fm 网站预览

Podscan.fm

白纸上亮起绿灯的播客雷达:安静仪表面板中,唯一翡翠信号穿透灰阶数据。

Podscan.fm 像一座建立在清爽白色画布上的现代数据智能控制台:单色基础上,唯一鲜明翡翠绿成为导航北极星;紫罗兰、粉色、蓝色和蓝绿色构成严格限定的分类配色,只用于区分相邻使用场景或定价层级。文字采用紧密排布的系统无衬线,每个字号都使用负字间距,形成紧压的数据展示节奏,而非编辑式松展感。组件平面、轻边框,圆角为 8–12px,区分时更依赖 #e5e7eb 细线,而不是阴影。情绪徽章、彩色图标圆盘和定价层级各异的 CTA 填充,包括黑、绿、紫罗兰,承担彩色表现。因此,新页面应主要呈灰阶,以绿色作为操作动词色,辅助色相只以小型功能标点出现。

查看原始网站

使用规范

建议采用

  • 页面主要操作动词的唯一实心 CTA 色为 #059669;Onyx #18181b 留给次要“中性”操作,Violet #9333ea 留给企业级操作。
  • 所有正文、副标题和展示文字都采用 -0.4px 至 -0.66px 的负字间距。紧密间距让系统像数据控制台,而非编辑页面。
  • 卡片和面板通过 1px 的 #e5e7eb 边框与 0–1px 轻微阴影分隔;rgba(0,0,0,0.1) 的 10-15px 阴影,只留给悬停和漂浮首屏卡片。
  • 分类图标通过色相区分:绿色表示监测,紫罗兰表示发现,蓝色表示 API,粉色表示受众;背后配以 Lilac/Mint/Sky Wash 配色的 40px 带色圆盘。
  • 页面背景保持 #ffffff;#ecfdf5、#eff6ff、#f3e8ff 的淡色铺陈,只用作积极、信息或高级消息后方约 100px 的提示区块。
  • 内容最大宽度为 1200px,边距为 32px;主要区块之间留出 64px 垂直间隔,卡片网格行之间留出 24px。
  • 9999px 圆角只用于胶囊、标签、徽章和标志组合,绝不用于卡片、输入框或按钮。

建议避免

  • 不要在绿色、紫罗兰、蓝色、粉色和蓝绿色组之外,引入新的高饱和强调色。系统恰好只有五种分类色相,并已映射到特定角色。
  • 字重 700 只用于 60px 的首屏展示、36px 的大型区块标题和价格数字。正文中的重字重会破坏控制台感。
  • 不要使用渐变、列出的 Token 之外的投影或模糊效果。设计刻意保持平面,并由边框驱动。
  • 不要使用暖灰或灰白背景。画布必须是纯 #ffffff,唯一带色表面是三种语义铺色。
  • 卡片或输入框圆角不要超过 16px;12px 的上限赋予组件清爽、仪表盘般的轮廓。
  • 同一行不要放置超过一个翡翠色 CTA。如需多个操作,次要操作必须采用 Ghost,即白色填充加 #e5e7eb 边框,或 Black,即 Onyx 填充。
  • 主要页面区块不要添加装饰图像、插画或背景图案。系统完全通过文字、按颜色分类的图标和信息流行数据传达内容。