---
version: alpha
name: "Focus"
description: "Eine weiße Seite, ein Blau und nichts sonst zwischen dir und der Aufgabe. Focus entfernt alles, was nicht die Aufgabe ist: ein weißer Screen, Instrument Sans, dünne Trennlinien statt Karten und ein leuchtendes Blau für den Hinzufügen-Button und den heutigen Tag. Tabs nur mit Icons halten die untere Leiste ruhig, und ein schwebender Hinzufügen-Button macht das Erfassen sofort möglich."
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 entfernt alles, was nicht die Aufgabe ist: ein weißer Screen, Instrument Sans, dünne Trennlinien statt Karten und ein leuchtendes Blau für den Hinzufügen-Button und den heutigen Tag. Tabs nur mit Icons halten die untere Leiste ruhig, und ein schwebender Hinzufügen-Button macht das Erfassen sofort möglich.

## Colors

- **primary (#2F5BEA):** Leuchtendes Blau für den schwebenden Hinzufügen-Button, abgehakte Kästchen und das heutige Datum.
- **on-primary (#FFFFFF)**
- **secondary (#E8743B):** Orange für bald fällige Termine und Flags mit hoher Priorität.
- **tertiary (#19A974):** Grün für erledigte Aufgaben, Serien und eine dritte Projektfarbe.
- **neutral (#5B616E):** Kühles Grau für Fälligkeitsdaten, Notizen und erledigte Aufgaben.
- **surface (#FFFFFF):** Reinweiß; Karten entsprechen der Seite und werden durch dünne Trennlinien getrennt. Der Dunkelmodus ist fast schwarz mit einem Hauch Blau.
- **on-surface (#16181D)**

## Typography

Durchgehend Instrument Sans: Semibold 600 für Titel (40px für den großen Datums-Header, 30px für Listentitel), Regular 400 in 16px für Aufgabenzeilen. Datumsangaben und Zähler haben 13px.

## Layout

Smartphone-Screens mit 16px Seitenrand und einer 60px hohen Tab-Leiste mit vier Tabs nur mit Icons; der aktive Tab zeigt sein Label. Ein schwebender Hinzufügen-Button sitzt unten rechts über der Tab-Leiste.

## Shapes

12px-Ecken an Karten, Sheets und Eingabefeldern; runde Checkboxen mit 48px großen Tippflächen. Hellgraue 1px-Trennlinien und keine Schatten; der Hinzufügen-Button hebt sich allein durch Farbe ab.

## Components

Aufgabenzeilen mit runder Checkbox, Titel und Fälligkeitsdatum, ein Schnelleingabe-Sheet, das Datumsangaben wie „morgen 9 Uhr“ versteht, Projektlisten mit farbigen Punkten und Wischaktionen zum Erledigen oder Verschieben.

## Do's and Don'ts

- Lass eine Aufgabe mit einem Tipp und einer Zeile hinzufügbar sein.
- Blende erledigte Aufgaben zu Grau aus, statt sie sofort zu entfernen.
- Packe nicht jede Aufgabe in eine Karte oder einen Schatten.
- Gib einem Projekt nicht mehr als eine Farbe.