Design Guide

Richtung

Die Seite folgt einer ruhigen, konzentrierten Darkmode-Aesthetik fuer einen Focus- und Pomodoro-Kontext. Das Interface soll nicht verspielt wirken, sondern praezise, ruhig und leicht technisch. Die visuelle Sprache ist reduziert, aber nicht flach: weiche Lichtinseln, transparente Flaechen und subtile Tiefe erzeugen Atmosphaere, ohne von der Aufgabe abzulenken.

Visuelle Prinzipien

• Dunkler Untergrund mit leichter Tiefenstaffelung statt reinem Schwarz.
• Warme Akzentfarbe fuer aktive Handlungen, damit Interaktion sofort lesbar ist.
• Glaeserne Kartenoptik mit dezenten Borders und Blur statt harten Boxen.
• Grosse, klare Zahlen fuer den Countdown als visuelles Zentrum.
• Sekundaere Informationen bewusst leiser in Farbe, Groesse und Gewicht.

Farbwelt

Die Farbpalette kombiniert kuehle Blau- und Nachtschattierungen mit einem warmen Orange als Fokus-Akzent.

• Hintergrund oben: #07111f
• Hintergrund unten: #02060d
• Panel: rgba(11, 19, 34, 0.86)
• Haupttext: #f3f6fb
• Sekundaertext: #97a3bb
• Akzent: #ff6b4a
• Akzent hell: #ff8f70

Die warmen Akzente sollen sparsam eingesetzt werden, vor allem fuer interaktive Elemente oder kleine Highlights.

Typografie

Die Seite verwendet "Space Grotesk" als primaere Schrift. Das passt zum digitalen, fokussierten Charakter und bleibt dabei freundlich genug fuer ein Produktivitaets-Tool.

• h1 ist gross, dicht gesetzt und dominant.
• Meta-Labels wie Focus Timer oder Aufgaben sind uppercase, klein und mit mehr Letterspacing.
• Sekundaere Texte laufen in einem weichen, leicht entsaettigten Ton.

Layout

Die gesamte Seite ist als zentrierte Hero-Flaeche aufgebaut.

• Die Hauptkarte ist eine einzelne grosse Stage in der Mitte.
• Countdown und Controls sitzen im oberen Bereich.
• Sekundaere Inhalte wie Zielzeit und Aufgabenliste folgen darunter in klar getrennten Abschnitten.
• Auch auf mobilen Screens soll das Kernsignal erhalten bleiben: Timer zuerst, Aufgaben danach.

Komponenten

Hero Card

Die Hauptkarte ist das tragende Layout-Element.

• Grosse Rundungen
• Halbtransparenter dunkler Hintergrund
• Feine Border
• Starker, weicher Schatten
• Leichter backdrop-filter fuer Glaswirkung

Timer Cards

Die Zeitkarten sind kompakte Informationsmodule.

• Drei Karten nebeneinander fuer Stunden, Minuten, Sekunden
• Grosse Zahlen mit maximaler Klarheit
• Labels klein, uppercase und sekundar
• Mobile bleibt dreispaltig, die Karten werden nur kompakter

Action Buttons

Die +X-Buttons sind prominent, aber nicht aggressiv.

• Runde Pillenform
• Dunkle Flaeche mit leichter Border
• Hover nur dezent
• Keine schwere Animation, nur kleine Bewegung und Border-Aenderung

Stop Button

Der Stopp-Button ist absichtlich zurueckhaltender als die Add-Buttons.

• Kleinere Flaeche
• Weniger Kontrast
• Gleiche Formensprache
• Sekundaere Aktion, daher visuell leiser

Aufgabenkarten

Die Aufgabenliste soll sich wie eine ruhige Arbeitsflaeche anfuehlen.

• Jede Aufgabe liegt in einer eigenen Karte
• Titel und Notizen haben klare Eingabefelder
• Der Drag-Zustand darf sichtbar sein, aber nur subtil
• Der +-Button zum Anlegen neuer Aufgaben ist einfach und direkt

Bewegung

Animationen bleiben sparsam.

• Kleine Hover-Verschiebung bei primaeren Buttons
• Sanfte Farbwechsel statt starker Effekte
• Kein hektisches Motion-Verhalten im Timer-Umfeld

Tonalitaet

Die UI spricht sachlich und ruhig.

• Kurz
• Klar
• Kein Marketing-Sprech
• Keine spielerischen Texte

Beispiele:

• Verbleibende Zeit
• Zielzeit
• Zeit fuer eine Pause.
• Woran arbeitest du gerade?

Responsive Verhalten

• Die Hauptkarte bleibt kompakt und zentral.
• Buttons duerfen umbrechen.
• Die drei Countdown-Felder bleiben auch mobil nebeneinander.
• Abstaende werden mobil enger, aber die visuelle Hierarchie bleibt gleich.

Weiterentwicklung

Neue Features sollten sich an diesen Regeln orientieren:

• Erst Klarheit, dann Dekoration.
• Akzente nur dort, wo Aufmerksamkeit gebraucht wird.
• Neue Karten und Eingabefelder muessen wie Teil derselben dunklen Oberflaeche wirken.
• Interaktionen sollen praezise wirken, nicht verspielt.