Zum Inhalt springen
Codex DesignBETA
Deutsch
Installation

Focus: To-do-App-Designsystem

App · Hell · Minimalistisch · Produktivität

Focus

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.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch
9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch
9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIch

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Focus. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/focus.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

  • background#FFFFFFoklch(1 0 0)
  • foreground#16181Doklch(0.209 0.01 268.187)
  • card#FFFFFFoklch(1 0 0)
  • card-foreground#16181Doklch(0.209 0.01 268.187)
  • popover#FFFFFFoklch(1 0 0)
  • popover-foreground#16181Doklch(0.209 0.01 268.187)
  • primary#2F5BEAoklch(0.533 0.221 265.795)
  • primary-foreground#FFFFFFoklch(1 0 0)
  • secondary#F0F2F7oklch(0.961 0.007 268.547)
  • secondary-foreground#16181Doklch(0.209 0.01 268.187)
  • muted#F3F4F6oklch(0.967 0.003 264.542)
  • muted-foreground#5B616Eoklch(0.492 0.022 265.817)
  • accent#EEF1F7oklch(0.958 0.009 264.522)
  • accent-foreground#16181Doklch(0.209 0.01 268.187)
  • destructive#C8322Boklch(0.551 0.188 27.911)
  • border#E4E6EBoklch(0.925 0.007 268.545)
  • input#D5D8DFoklch(0.882 0.01 267.351)
  • ring#2F5BEAoklch(0.533 0.221 265.795)
  • chart-1#2F5BEAoklch(0.533 0.221 265.795)
  • chart-2#E8743Boklch(0.685 0.16 44.716)
  • chart-3#19A974oklch(0.652 0.139 161.399)
  • chart-4#B455C8oklch(0.612 0.189 320.372)
  • chart-5#D4A017oklch(0.735 0.146 84.267)

Dunkles Theme

  • background#101114oklch(0.178 0.006 271.042)
  • foreground#EDEEF1oklch(0.949 0.004 271.368)
  • card#16181Coklch(0.209 0.009 264.373)
  • card-foreground#EDEEF1oklch(0.949 0.004 271.368)
  • popover#16181Coklch(0.209 0.009 264.373)
  • popover-foreground#EDEEF1oklch(0.949 0.004 271.368)
  • primary#7D9BFFoklch(0.711 0.15 269.685)
  • primary-foreground#101114oklch(0.178 0.006 271.042)
  • secondary#1E2026oklch(0.244 0.012 270.896)
  • secondary-foreground#EDEEF1oklch(0.949 0.004 271.368)
  • muted#1A1C21oklch(0.227 0.01 268.232)
  • muted-foreground#9298A5oklch(0.679 0.02 265.92)
  • accent#22252Coklch(0.264 0.014 267.038)
  • accent-foreground#EDEEF1oklch(0.949 0.004 271.368)
  • destructive#FF7B72oklch(0.734 0.163 25.784)
  • border#272A31oklch(0.285 0.014 267.079)
  • input#30343Coklch(0.324 0.015 264.337)
  • ring#7D9BFFoklch(0.711 0.15 269.685)
  • chart-1#7D9BFFoklch(0.711 0.15 269.685)
  • chart-2#FF9F6Boklch(0.79 0.133 48.496)
  • chart-3#4ADE9Coklch(0.806 0.157 160.001)
  • chart-4#D88BE6oklch(0.747 0.15 321.263)
  • chart-5#F2CC5Boklch(0.857 0.137 90.603)

Schriften

Überschriften
Instrument Sans · 600
Fließtext
Instrument Sans · 400
Monospace
JetBrains Mono

Schriftgrößen

  • display · 40/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
  • h1 · 30/1.1 · -0.01emZwölf Boxkämpfer jagen Viktor
  • h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
  • h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
  • body · 16/1.5Zwölf Boxkämpfer jagen Viktor
  • small · 13/1.4Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 8pxmd 10pxlg 12pxxl 16px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

Touch-Ziele
48px
Tab-Leiste
60px, 4 Einträge, icons only with active label
Bildschirmrand
16px
Navigation
bottom tab bar; floating add button
Ziffern
proportional

Ideal für

  • To-do- und Aufgaben-Manager
  • Planer und Kalender
  • Notizen und schnelles Erfassen
  • Team-Aufgaben- und Projekt-Apps

Dos 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.

Weitere Designsysteme für Apps

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.