---
version: alpha
name: "Focus"
description: "真っ白なページに青が 1 色。タスクとの間に、余計なものは何もない。 Focus は、タスク以外のものをすべて取り除きます。真っ白な画面、Instrument Sans、カードの代わりの細い区切り線、そして追加ボタンと今日に使う明るいブルー 1 色。タブはアイコンだけにして下部バーを静かに保ち、フローティングの追加ボタンで即座に書き留められます。"
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、カードの代わりの細い区切り線、そして追加ボタンと今日に使う明るいブルー 1 色。タブはアイコンだけにして下部バーを静かに保ち、フローティングの追加ボタンで即座に書き留められます。

## Colors

- **primary (#2F5BEA):** 明るいブルー。フローティングの追加ボタン、チェック済みのチェックボックス、今日の日付用。
- **on-primary (#FFFFFF)**
- **secondary (#E8743B):** オレンジ。期限が近い日付と優先度の高いフラグ用。
- **tertiary (#19A974):** グリーン。完了したタスク、連続達成、3 番目のプロジェクトカラー用。
- **neutral (#5B616E):** クールグレー。期限、メモ、完了したタスク用。
- **surface (#FFFFFF):** 純白。カードはページと同じ色で、細い区切り線で分けます。ダークモードは、かすかに青みがかったほぼ黒。
- **on-surface (#16181D)**

## Typography

全体を Instrument Sans で統一。タイトルはセミボールドの 600（大きな日付のヘッダーは 40px、リストのタイトルは 30px）、タスクの行はレギュラー 400 の 16px。日付と件数は 13px。

## Layout

左右 16px のパディングと、高さ 60px の下部タブバーのスマートフォン画面。アイコンだけの 4 つのタブがあり、アクティブなタブにはラベルが表示されます。フローティングの追加ボタンは右下、タブバーの上。

## Shapes

カード、シート、入力欄は 12px の角丸。タップ領域が 48px の丸いチェックボックス。薄いグレーの 1px の区切り線で、影は使いません。追加ボタンは色だけで目立たせます。

## Components

丸いチェックボックス、タイトル、期限を並べたタスクの行。「明日の朝 9 時」のような日付を理解するクイック追加シート。色付きのドットを付けたプロジェクトのリスト。完了や再設定のためのスワイプ操作。

## Do's and Don'ts

- タスクは、1 回のタップと 1 行で追加できるようにする。
- 完了したタスクは、すぐに消さず、グレーにフェードさせる。
- すべてのタスクをカードや影で包まない。
- 1 つのプロジェクトに複数の色を与えない。