精选 · 开放 · 免费
Todoist
全球领先的待办事项应用，专为清晰与简约而设计。
productivitysaas
01
设计气质 DNA
任务管理组织规划简约设计生产力工具专业高效
为你的生活打造的整洁有序的数字笔记本
02
色彩
#E44232Accent
#25221EInk
rgba(37,34,30,0.66)Ink soft
#FFFFFFBG
#F9F7F6BG soft
#FEFDFCBG quiet
rgba(37,34,30,0.49)Muted
rgba(37,34,30,0.18)Line
温暖中性色搭配单色高饱和度红色点缀
03
字体
humanist-sans · geometric-sans
- display
56px · 500 - h2
36px · 500 - body
18px · 400 - small
15px · 400
主要标题和UI文字使用Inter字体 · 次要正文内容使用Graphik字体 · 装饰性或引用元素使用Caecilia字体 · 标题采用粗体并收紧字间距 · 正文使用常规字重，搭配宽松行高
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于4px的基础网格系统，章节间保持宽裕的间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(37,34,30,0.18)
0px 1px 0px 0px rgba(37, 34, 30, 0.04) · 0px 14px 19px -9px rgba(37, 34, 30, 0.07) · 0px 10px 48px 0px rgba(37, 34, 30, 0.18)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用12列网格系统，配合宽裕的页边距和居中的内容区块
07
动效与交互
150msmicro
350mssmall
500msmedium
cubic-bezier(0.2, 0.8, 0.2, 1)easing
基于变换的悬停效果 · 平滑的背景色过渡 · 交互元素的细微缩放动画
轻微的transform缩放和颜色亮度提升 · 采用弹簧缓动曲线的缩放效果
08
组件
- button 主要操作按钮采用圆角矩形，搭配渐变背景和微妙阴影
- card 干净的白色容器，带有细微边框和圆角
- chip 药丸状分类选择器，搭配浅色背景
- input 干净的输入框，带有细微边框和圆角
- hero 双栏布局，包含醒目的标题和产品展示图
09
文案语气与禁用清单
- 语气 友好、亲切且充满信心
- 标题风格 简短有力的陈述，强调清晰与简约
- 按钮文案 直接的行动导向型文案，如“免费开始”
- 避免使用冷色调蓝色——截图显示采用温暖红色点缀
- 避免使用深色背景——截图显示以白色/浅色背景为主
- 避免使用厚重边框——截图显示采用细微的1px边框
- 避免使用尖锐直角——截图显示采用圆角设计（8-15px半径）
- 避免正文使用衬线字体——截图显示使用无衬线字体
- 避免使用密集的文本块——截图显示采用宽裕留白和短段落
- 避免使用多种竞争性点缀色——截图显示仅使用单一红色点缀
- 避免: 技术术语或复杂专业词汇
- 避免: 咄咄逼人或高压的语言
- 避免: 过于企业化或正式的语气
- 避免: 主标题区域的大段密集文字
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
Todoist是一款高端SaaS生产力工具，定位为全球领先的待办事项应用。设计通过温暖、干净的美学风格和宽裕的留白强调清晰度。主要颜色包括白色（#FFFFFF）和温暖米白色（#F9F7F6）背景、深墨色（#25221E）文字，以及独特的红色点缀（#E44232）。字体采用人文无衬线体（Inter）作为标题字体，几何无衬线体（Graphik）作为正文字体。界面采用圆角（8-12px）、细微阴影和12列网格布局。关键禁忌：绝不使用冷色调蓝色、深色背景、尖锐直角、密集文本块或多种点缀色。系统保持友好、亲切的语气，标题简短有力，强调简约与清晰。
en · zh-CN · zh-TW · ja · ko