精选 · 开放 · 免费

Morgen

一款 AI 驱动的日常计划工具,将日历与任务整合到一个统一的视图中。

productivitysaas
Morgen 网站截图
↓ 下载设计系统包 (14 MB)在 OpenDesign 中打开

原站: https://www.morgen.so

📦 浏览包内文件 →

01

设计气质 DNA

AI 驱动的计划工具日程安排日历集成任务管理

一个智能的数字助手,能智能地规划你的一天

02

色彩

#F3C26AAccent
#FFFFFFInk
#CBCCCCInk soft
#191A23BG
#1E202BBG soft
#2A2E3CBG quiet
#686A74Muted
rgba(203, 204, 204, 0.2)Line

深邃的深色背景搭配高对比度的白色文字,并使用温暖的金黄色作为主要操作的强调色。

03

字体

humanist-sans · monospace

04

间距

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

基于 4px 基线网格的一致垂直间距倍数系统。

05

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

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

用于在深色背景上进行分隔的 1px 微妙边框。

0px 0px 20px 5px rgba(0, 0, 0, 0.15) · 0px 2px 32px 0px rgba(0, 0, 0, 0.16)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

标准的居中内容布局,采用分屏首屏和交替排列的功能区块。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI 元素的平滑淡入效果 · 按钮和链接的悬停状态转换

交互元素上微妙的色彩或亮度变化。 · 通过缩放或色彩变化提供即时反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

Morgen 是一款 AI 驱动的日常计划工具,将日历和任务统一到一个智能的视图中。它被定位为面向个人和团队的高端生产力工具。其设计 DNA 的特点是深邃的深色模式美学(#191A23),搭配高对比度的白色字体和标志性的温暖金黄色强调色(#F3C26A)用于主要操作。字体设计简洁现代,使用 humanist sans-serif 类别字体作为标题和正文,以确保可读性并营造友好而专业的基调。关键设计原则包括保持充足的留白、使用圆角(甚至药丸形),以及避免使用明亮、刺眼的色彩或厚重、突兀的投影。布局居中且结构化,常采用分屏或堆叠区块来清晰呈现信息。动效保持微妙和功能化,聚焦于平滑的过渡,以体现高端质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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