精选 · 开放 · 免费

Sunsama

为现代专业人士打造的任务管理器与日常规划工具。

productcalendar

Sunsama 网站截图

↓ 下载设计系统包 (12 MB)在 OpenDesign 中打开

原站: https://sunsama.com

📦 浏览包内文件 →

01

设计气质 DNA

平静专注生产力规划日常流程

一款宁静的日常规划器，助你保持平静与专注。

02

色彩

#FF891CAccent

#202228Ink

#4C4F56Ink soft

#FFFFFFBG

#FAFAFABG soft

#F6F5F1BG quiet

#767F86Muted

rgba(32,34,40,0.1)Line

洁净的白色背景，搭配温暖、高饱和度的橙色强调色和柔和的中性灰。

03

字体

geometric-sans · humanist-sans

display48px · 500
h227px · 400
body16px · 400
small14px · 400

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

基于一致的 4px 基础网格，采用充裕的纵向间距，营造富有呼吸感的布局。

05

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

sm · 4px

md · 10px

lg · 40px

pill · 48px

使用 1px solid rgba(32,34,40,0.1) 作为卡片和输入框的细微边界。

None: None · None: None

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

桌面端采用宽幅内容容器，主视觉区域偏左；移动端则过渡为居中的内容堆叠。

07

动效与交互

200msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

按钮和链接的平滑 hover 过渡 · 交互状态的细微背景色变化

根据元素的基色，进行细微的背景色变深或变浅处理。 · 立即响应，并带有轻微的缩放效果以提供触觉反馈。

08

组件

button 胶囊形的主按钮，采用明亮的橙色背景和白色文字。
card 带有轻微阴影的白色或柔和灰色卡片，拥有充裕的圆角（10px 至 40px）。
chip 小巧的圆角标签或标记，带有细微边框或浅色背景。
input 简洁的输入框，带有细微边框，注重可读性。
hero 大型分栏区域，包含粗体文字和柔和背景上的产品截图。

09

文案语气与禁用清单

语气平静、专业且令人安心。
标题风格 简短、陈述性、以利益为导向（例如：‘始于平静，保持专注’）。
按钮文案 直接且无压力（例如：‘免费试用’，‘14 天免费试用’）。

避免使用侵略性的高对比度霓虹色——截图显示的是柔和的白色、灰色和暖橙色调色板。
避免在主要组件上使用尖锐的直角——截图显示使用了 10px 至 40px 的圆角。
避免使用密集、长篇的文字块——截图显示间距充裕且文案简洁。
避免使用装饰性的、高度风格化的展示字体——截图显示使用的是干净的几何/人文无衬线字体系统。
避免使用深色模式或高对比度黑色背景——截图显示以白色和浅灰色表面为主。
避免使用复杂、厚重的投影——截图显示用于营造深度感的是非常细微、低不透明度的阴影。
避免: 过于技术化的行话
避免: 侵略性的销售语言
避免: 暗沉或杂乱的视觉隐喻

10

包内真实截图

Sunsama — 桌面首屏（hero） — 桌面首屏（hero）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sunsama — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

本网站服务于 Sunsama，一款面向现代专业人士的平静且专注的日常规划工具。它采用明亮、洁净的白色（#FFFFFF）和柔和的灰色（#FAFAFA）调色板，并以充满活力的橙色（#FF891C）作为强调色。字体是几何无衬线与人文无衬线的清晰混合体。关键约束：优先考虑充裕的留白和 4px 网格，使用 10-48px 圆角以营造友好感，并避免任何会破坏平静、高效定位的侵略性、暗沉或杂乱的视觉隐喻。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko