OpenDesign·你的设计资产库

网页参考

Fathom

一款简约、隐私优先的 Google Analytics 替代品。

AnalyticsDeveloper Tools
Fathom 网站截图

01

设计气质 DNA

数据分析隐私优先简约清晰信任

一个冷静、极简的网络数据分析仪表盘,优先考虑隐私而非复杂性。

02

色彩

#846BFFAccent
#181B19Ink
#636965Ink soft
#F7F8F7BG
#B0B5B2Muted
rgba(24, 27, 25, 0.1)Line

中性、高对比度的配色方案,仅使用一种鲜明的紫色作为主要操作的强调色。

03

字体

humanist-sans · monospace

  • display56px · 500
  • heading40px · 500
  • body18px · 400
  • caption14px · 400

使用 -webkit-font-smoothing: antialiased 实现清晰的文本渲染。 · 将行宽限制在约 680px 以获得最佳可读性。 · 对代码片段或数据表格使用等宽字体。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于 4px 的网格,搭配充足的留白以强调简约。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(24, 27, 25, 0.1)

None: None

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

单栏居中布局,主视觉下方是双栏功能网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

内容进入视口时微妙的淡入效果。 · 交互元素的色彩和背景平滑过渡。

按钮和链接上的颜色变化或微妙背景移动。 · 轻微的缩放或颜色变化以指示激活状态。

08

组件

  • button 高对比度的实心圆角按钮,主按钮使用强调色,次按钮使用深中性色。
  • card 简洁的卡片,边框极简或带微弱阴影,用于功能亮点和数据表格。
  • chip 浅背景、深色文字的小型圆角标签,用于如“新功能”等标签。
  • input 简洁的文本输入框,边框干净,聚焦状态微妙。
  • hero 左侧为大号、粗体的排版文字,右侧为数据可视化或模型图。

09

文案语气与禁用清单

  • 语气 清晰、直接、令人安心。
  • 标题风格 强调简约和隐私的粗体、利益驱动型陈述。
  • 按钮文案 以行动为导向的短语,如“开始免费试用”,并搭配闪电图标。
  • 不要使用复杂的渐变或厚重的纹理——截图显示的是干净、纯色的背景。
  • 不要使用明亮、多彩的配色方案——截图仅使用了一种紫色强调色。
  • 不要使用装饰性、手写体或过度风格化的字体——截图使用的是简洁的无衬线字体。
  • 不要在用户界面上堆砌过多元素——截图优先考虑留白和清晰度。
  • 不要默认使用深色模式——截图显示的是浅色主题界面。
  • 不要对所有元素使用圆角——截图显示部分用户界面元素使用的是直角。
  • 避免: 技术术语或复杂的营销话术。
  • 避免: 具有侵略性或高压的销售语言。
  • 避免: 模糊或过于抽象的利益点。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Fathom Analytics 是一款隐私优先、简约的 Google Analytics 替代品。设计采用干净、浅色的配色方案,背景为 #F7F8F7,文字为 #181B19,主操作按钮使用一种高饱和度的紫色 (#846BFF) 作为强调色。字体属于人文主义无衬线类别,优先考虑可读性和清晰度。关键的设计禁忌包括:不要使用复杂的渐变或厚重的纹理,不要使用明亮多彩的配色方案,不要在用户界面上堆砌过多元素。整体感觉冷静、值得信赖,并专注于易用性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。