OpenDesign·你的设计资产库

网页参考

Polar

一个面向智能时代的计费平台，将使用量转化为收入。

Developer ToolsSaaS
Polar 网站截图

01

设计气质 DNA

计费基于用量货币化开发者平台金融基础设施

面向基于用量AI计费的Stripe

02

色彩

#FFFFFFInk
#71727AInk soft
#101011BG
#272A2ABG soft
#4C4F69Muted
rgba(29,30,32,1)Line

高对比度单色方案，具有严格的层级，无任何色彩干扰。

03

字体

geometric-sans · humanist-sans · geometric-mono

  • display64px · 400
  • h230px · 400
  • body16px · 400
  • small12px · 400

标题文字使用紧凑的负字距（-3.2px）以强调大尺度的几何感。 · 正文使用默认的1.5行高以确保最佳可读性。 · 等宽字体严格保留用于代码片段和技术数据。

04

间距

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

基于4px的严格网格，间距倍数保持一致。

05

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

sm · 4px
md · 8px
lg · 16px
pill · 9999px

使用深灰色（#1D1E20）的细微1px边框进行分隔。

0 0 0 1px rgba(255,255,255,0.1) inset（用于主按钮） · 无（用于平面表面）

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

英雄区域采用居中单栏布局，带有宽大的水平内边距（32px）。

07

动效与交互

100msmicro
150mssmall
200msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互状态下颜色、背景色和边框色采用标准过渡。

按钮和链接上细微的颜色或背景色变化。 · 即时状态改变。

08

组件

  • button 主按钮：药丸形状，白色背景，深色文字。次按钮：深灰色，药丸形状，白色文字。
  • card 在提供的截图中不可见。
  • chip 在提供的截图中不可见。
  • input 在提供的截图中不可见。
  • hero 居中的巨大排版，配有双按钮的CTA组合，下方有一个logo轮播。

09

文案语气与禁用清单

  • 语气 直接、技术性且具有权威性。
  • 标题风格 加粗、陈述性的声明，聚焦于价值主张。
  • 按钮文案 行动导向（开始使用、了解Polar）。
  • 不要使用明亮的强调色——截图显示的是严格的黑、白、灰单色方案
  • 不要使用装饰性衬线字体——截图显示标题使用干净、现代的几何无衬线字体，正文使用人文主义无衬线字体
  • 不要添加背景纹理或渐变——截图显示的是平坦、纯色的深色背景
  • 不要使用小而拥挤的字体——截图显示的是大而开阔的标题文字，字距紧凑
  • 不要在按钮上使用尖角——截图显示的是完全圆润的药丸形状按钮
  • 不要让英雄区域元素过多——截图显示的是仅包含标题、副标题和两个按钮的清晰层级结构
  • 避免: 营销套话
  • 避免: 模糊功能的专业术语
  • 避免: 过多的感叹号
  • 避免: 过于友好或随意的语气

10

包内真实截图

Polar — 桌面首屏（hero）
桌面首屏（hero）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Polar — 移动首屏
移动首屏

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

11

System Prompt

这是一个极简主义、深色主题的SaaS着陆页，服务于面向开发者的计费平台。设计依赖严格的单色方案，使用极深的背景色（#101011）、纯白墨色（#FFFFFF）和柔和的灰色（#71727A，#4C4F69）。字体是主要的设计驱动力，特点是巨大的几何无衬线标题，字距紧凑（-3.2px），正文使用人文主义无衬线字体，技术元素则使用等宽字体。关键禁忌：不要引入明亮的强调色；网站不使用任何彩色。不要使用装饰性衬线；保持字体干净且功能化。不要添加不必要的背景纹理或渐变；保持平面、纯色表面。不要在按钮上使用尖角；始终使用药丸形圆角。不要让布局杂乱；拥抱充裕的留白和居中的单栏英雄布局。不要为标题使用小字体；设计优先考虑巨大的尺度和冲击力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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