OpenDesign·你的设计资产库

网页参考

Lemon Squeezy

为软件公司提供支付、税务与订阅服务。

SaaSPayments
Lemon Squeezy 网站截图

01

设计气质 DNA

支付记录商户订阅软件开发者

一个友好、紫色调的金融科技仪表板，处理繁琐事务，让你能专注于构建。

02

色彩

#5423E7Accent
#121217Ink
#6C6C89Ink soft
#FFFFFFBG
#F7F7F8BG soft
rgba(18,18,23,0.1)Line

高对比度的主色调紫色 (#5423E7) 搭配深邃墨色 (#121217) 与暖黄色 (#FFC83C)，打造活泼、自信的金融科技品牌标识。

03

字体

geometric-sans · humanist-sans · monospace

  • display72px · 500
  • heading38px · 500
  • body18px · 400
  • small14px · 400

在大号展示文本上使用紧凑的字距（-1.5px）以增强视觉冲击力。 · 严格遵循 400/500 的字重层级，用于常规和强调文本。 · 正文应使用易读的人文主义无衬线字体，以获得最佳可读性。

04

间距

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

基于一致的 4px 网格，章节间采用充裕的内边距（40px）进行分隔。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 40px

输入框采用 1px solid rgba(18,18,23,0.1) 边框；卡片大多无边框。

0px 4px 24px rgba(0,0,0,0.06) · 0px 8px 48px rgba(0,0,0,0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽首屏采用不对称分割（文字居左，设备模型居右）；下方是三列功能网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

悬停时平滑的颜色过渡（0.2s） · 交互元素的变换移动（0.22s） · 整体状态过渡（0.28s）

按钮和链接在悬停时背景颜色或透明度发生微妙变化；光标变为指针。 · 通过变换或颜色变化提供即时的视觉反馈。

08

组件

  • button 药丸形（border-radius 40px）主按钮，白色背景深色文字，或紫色背景白色文字。高对比度，内边距充裕。
  • card 极简风格卡片，带有微妙阴影（0px 4px 24px）和 8-20px 圆角，通常包含截图或功能列表。
  • chip 小型大写标签（例如 'M / 1'），采用柔和蓝色（#0075AD），用作章节标记。
  • input 标准矩形输入框，8px 圆角，浅灰色边框，带有清晰的占位符文本。
  • hero 全出血紫色（#5423E7）背景，搭配超大展示字体和一个悬浮、倾斜的设备模型。

09

文案语气与禁用清单

  • 语气 友好、平易近人、自信，同时保持专业。
  • 标题风格 直接、以效益为导向，略带趣味性（例如，'降低提现费用'）。
  • 按钮文案 以行动为导向，表述清晰（例如，'免费开始'，并带有右箭头图标）。
  • 不要使用深色模式——截图显示的是一种以明亮白色和鲜艳紫色为主的配色方案。
  • 不要使用厚重的衬线字体——截图显示所有展示和正文文本均采用简洁、现代的无衬线字体。
  • 不要使用复杂的渐变——截图显示背景使用纯色块。
  • 不要使用尖锐的矩形按钮——截图显示的是完全圆润的药丸形按钮（border-radius 40px）。
  • 不要为重要操作使用柔和、低对比度的颜色——截图显示的是高对比度的白底紫字或深底白字按钮。
  • 不要使用狭小、拥挤的布局——截图显示的是充裕的内边距（40px）和元素间宽大的间距。
  • 避免: 生硬或过于正式的企业术语。
  • 避免: 缺乏明确价值主张的模糊承诺。
  • 避免: 使核心信息模糊不清的杂乱界面。

10

包内真实截图

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

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

11

System Prompt

Lemon Squeezy 是一家为软件公司服务的记录商户，定位为友好、一体化的支付、税务和订阅解决方案。其视觉系统以大胆、高饱和度的紫色（#5423E7）为主色调，辅以深邃墨色（#121217）和活泼的暖黄色（#FFC83C）。排版依赖于简洁的几何与人文主义无衬线字体层级（可能是 Inter 和 Circular Pro）。关键设计规则包括：1）绝不使用深色模式，因为品牌标识建立在明亮、鲜艳的界面之上。2）重要操作务必使用完全圆润的药丸形按钮。3）保持充裕的留白和字距紧凑的大标题，以传递自信和现代感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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