---
version: alpha
name: "Focus"
description: "一张白纸和一个蓝色，你和任务之间再无其他。 Focus 拿掉一切与任务无关的东西：白色屏幕、Instrument Sans、用细分隔线代替卡片，亮蓝色只留给添加按钮和今天。纯图标的标签栏让底部保持安静，悬浮添加按钮让记录随手可得。"
colors:
  primary: "#2F5BEA"
  on-primary: "#FFFFFF"
  secondary: "#E8743B"
  tertiary: "#19A974"
  neutral: "#5B616E"
  surface: "#FFFFFF"
  on-surface: "#16181D"
typography:
  display-lg:
    fontFamily: "Instrument Sans"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Instrument Sans"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Instrument Sans"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Instrument Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Focus 拿掉一切与任务无关的东西：白色屏幕、Instrument Sans、用细分隔线代替卡片，亮蓝色只留给添加按钮和今天。纯图标的标签栏让底部保持安静，悬浮添加按钮让记录随手可得。

## Colors

- **primary (#2F5BEA):** 亮蓝，用于悬浮添加按钮、已勾选的复选框和今天的日期。
- **on-primary (#FFFFFF)**
- **secondary (#E8743B):** 橙色，用于即将到期的日期和高优先级标记。
- **tertiary (#19A974):** 绿色，用于已完成的任务、连续打卡和第三种项目颜色。
- **neutral (#5B616E):** 冷灰，用于截止日期、备注和已完成的任务。
- **surface (#FFFFFF):** 纯白，卡片和页面同色，用细分隔线隔开；深色模式是带一点蓝的近黑色。
- **on-surface (#16181D)**

## Typography

全站用 Instrument Sans：标题半粗 600（大号日期标题 40px，列表标题 30px）；任务行用常规 400，16px。日期和数量用 13px 小字。

## Layout

手机屏幕左右边距 16px，底部标签栏高 60px，四个纯图标标签，当前标签显示文字。悬浮添加按钮在右下角、标签栏上方。

## Shapes

卡片、弹层和输入框用 12px 圆角；复选框是圆形，点按区域 48px。1px 浅灰分隔线，不用阴影，添加按钮只靠颜色突出。

## Components

带圆形复选框、标题和截止日期的任务行、能识别明天上午 9 点这类说法的快速添加弹层、带彩色圆点的项目列表，以及左右滑动完成或改期。

## Do's and Don'ts

- 添加一条任务只需点一下、写一行。
- 已完成的任务先变灰，不要立刻消失。
- 不要给每条任务都套上卡片和阴影。
- 每个项目不要用超过一种颜色。