← OpenDesign
精选 · 开放 · 免费
Mem
一个清洁、温暖且智能的 SaaS 落地页,用于一款个人 AI 驱动的笔记应用。
productivity notes
01
设计气质 DNA
AI 优先 知识管理 极简主义 温暖 平易近人
一本优雅、温暖的数字笔记本,能预见你的需求。
02
色彩
#100F31Ink
#FCF8F1BG
#707070Muted
rgba(16, 15, 49, 0.15)Line
温暖的米白色背景搭配深海军蓝排版,营造平静、易读的体验。
03
字体
humanist-sans · monospace
display 80px · 400heading 32px · 400body 16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 4px 基础单位和充足内边距的统一垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 60px
pill · 100px
主要交互元素使用 1px solid #100F31 边框
无
06
布局
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
居中容器,采用非对称主视觉布局。
07
动效与交互
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
平滑过渡
悬停时细微的不透明度或颜色变化。 · 即时视觉反馈。
08
组件
button 圆角轮廓按钮,100px border-radius,深海军蓝描边。 card 通过带有柔和阴影的圆形图片容器暗示。 chip 不适用 input 圆角搜索栏,带有橙色 focus 环。 hero 分屏布局,左侧为大字号排版,右侧为重叠的圆形元素。
09
文案语气与禁用清单
语气 乐于助人、友好且自信。 标题风格 直接且以利益为导向,例如:“一站式安放你心中所想”。 按钮文案 清晰、以行动为导向的标签,如“下载 Mem”和“观看视频”。 不要使用白色背景 —— 截图显示的是温暖的奶油色(#FCF8F1)背景。 不要为按钮使用明亮的主蓝色 —— 截图显示的是带有海军蓝边框的轮廓按钮。 不要为标题使用厚重的无衬线字体 —— 截图使用的是较轻的人文主义无衬线字体。 不要在容器上使用尖锐的直角 —— 截图显示的是圆角按钮和圆形图片元素。 不要将深色模式作为主要界面 —— 截图清晰显示的是浅色主题。 不要对长标题使用居中对齐 —— 截图显示的是左对齐的主视觉文本。 避免: 过于技术化的术语 避免: 咄咄逼人的销售语言 避免: 复杂的隐喻
10
包内真实截图
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 抓自真实页面 · 真 computed styles
11
System Prompt
Mem 是一款清洁、温暖且专注于 AI 的 SaaS 应用程序,用于个人知识管理。它采用温暖的奶油色背景(#FCF8F1),搭配深海军蓝(#100F31)排版,营造平静、易读的体验。设计上依赖人文主义无衬线字体系列,配有充足的空间和圆角 UI 组件。关键设计规则:避免白色背景,避免使用生硬的主蓝色按钮,并使用左对齐、以利益为导向的标题,而非居中文本。整体美学是极简、友好,专注于清晰度和易用性。
更多精选
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
为什么收录: 这个网站是清洁、温暖且平易近人的 SaaS 落地页的优秀范例,它将 AI 作为核心价值主张。