Todoist

阳光洒落的工作空间,搭配纸质计划表——温暖的米白桌面,墨水笔记,一支红笔
Todoist 被感知为阳光洒落的工作空间,搭配纸质计划表:温暖的米白画布,近黑色墨水文字,以及一个鲜明的红橙色点缀,用于突出操作而不喧宾夺主。字体风格具有人文气息且沉静——Graphik 在标题尺寸中采用紧密的负字间距,而 Inter 则用于 UI 元素,带有轻微正字间距——因此层级感来自尺寸和字重,而非色彩体积。产品截图与手机 展示模型 浮现在奶油色装饰波浪之上,营造氛围却从不陷入插画噪音。色彩被严格控制为功能性点缀:品牌橙色用于每个视图中的一个主要操作,蓝色用于链接,绿色用于状态,其余区域保持在温暖的中性色中静默。层次感保持极简——卡片仅使用单层 1px 细线阴影,不使用厚重面板或装饰性渐变。
查看原始网站使用规范
建议采用
- 为每个视图保留 #e34432 作为主要操作颜色;在同一视口内,不得将其重复用作链接或图标颜色。
- 将正文文字设为 #25221 在 #fefdfc 背景上——15.6:1 的对比度在 16px 字号下满足 AAA 标准,同时让画布保持温暖而非冷冰冰的感觉。
- 为每个卡片、按钮、徽章和输入控件应用 8px 的圆角;仅将 15px 保留用于图像遮罩和桌面产品边框。
- 使用 Graphik 用于 22px 及以上标题,字间距在 -0.11px 到 -0.55px 之间;小于 21px 的内容则切换至 Inter。
- 垂直方向上,区块间距设为 48–80px;卡片内部间距为 16–24px,紧凑 UI 行间距为 12–16px。
- 将产品截图放置在 #fff6f0 或 #f0f6df 奶油/绿色调背景上,绝不使用纯白色——温暖的色调才是让产品显得阳光明媚而非冷清的关键。
- 卡片的层次感仅限于单层 1px 细线阴影;仅在最重要的操作上使用双层按钮阴影。
建议避免
- 不要在大区域使用 #e34432——红色是强调用色,而非填充色。
- 不要将 #0f66ae 用于正文或非链接文本;仅保留该色用于超链接和应用信息级标签。
- 不要在单个视图中堆叠超过一个主要操作按钮;次要操作必须使用透明描边链接样式。
- 不要在同一字号和角色下混合使用 Graphik 和 Inter——每个尺寸段只选择一个字体家族并保持一致。
- 不要为卡片应用比 rgba(37,34,30,0.04) 0 1px 0 更重的阴影;任何更强的阴影都会破坏‘低语式阴影’的设计理念。
- 不要为 UI 控件应用超过 8px 的圆角——15px 专用于图像遮罩,若用于按钮会让其看起来像芯片。
- 不要使用纯 #000000 作为正文文字;温暖的 #25221 是纸质计划表氛围的一部分,读起来像墨水,而非屏幕文字。