Zum Inhalt springen
Codex DesignBETA
Deutsch
Installation

Calm: Wellness-App-Designsystem

App · Hell · Weich · Serifen · Gesundheit

Calm

Sanftes Salbeigrün, eine milde Serife und Raum zum Atmen.

Calm verlangsamt den Screen: ein salbeigrüner Hintergrund, tiefes Grün für Aktionen, eine milde Serife für Titel und viel Raum zwischen den Elementen. Jeder Screen verlangt nur eine Sache auf einmal.

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 Calm. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/calm.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

  • background#F1F3EEoklch(0.961 0.007 124.448)
  • foreground#1E2A24oklch(0.272 0.02 163.043)
  • card#FAFBF8oklch(0.986 0.004 121.559)
  • card-foreground#1E2A24oklch(0.272 0.02 163.043)
  • popover#FAFBF8oklch(0.986 0.004 121.559)
  • popover-foreground#1E2A24oklch(0.272 0.02 163.043)
  • primary#2F5446oklch(0.413 0.049 167.738)
  • primary-foreground#F1F3EEoklch(0.961 0.007 124.448)
  • secondary#DCE5DCoklch(0.913 0.015 145.447)
  • secondary-foreground#1E2A24oklch(0.272 0.02 163.043)
  • muted#E6EBE4oklch(0.934 0.011 136.561)
  • muted-foreground#56655Coklch(0.491 0.023 159.104)
  • accent#E3EADFoklch(0.929 0.016 133.827)
  • accent-foreground#1E2A24oklch(0.272 0.02 163.043)
  • destructive#A8392Aoklch(0.502 0.149 30.61)
  • border#D3DCD1oklch(0.885 0.018 140.021)
  • input#C9D3C6oklch(0.856 0.021 138.44)
  • ring#2F5446oklch(0.413 0.049 167.738)
  • chart-1#2F5446oklch(0.413 0.049 167.738)
  • chart-2#B5784Aoklch(0.626 0.098 56.778)
  • chart-3#5F86B8oklch(0.612 0.088 255.035)
  • chart-4#9C6A8Foklch(0.589 0.082 336.495)
  • chart-5#7A9A55oklch(0.645 0.102 129.249)

Dunkles Theme

  • background#121815oklch(0.202 0.011 163.644)
  • foreground#E6ECE6oklch(0.937 0.01 145.493)
  • card#18201Coklch(0.234 0.014 163.477)
  • card-foreground#E6ECE6oklch(0.937 0.01 145.493)
  • popover#18201Coklch(0.234 0.014 163.477)
  • popover-foreground#E6ECE6oklch(0.937 0.01 145.493)
  • primary#9CC5AEoklch(0.787 0.054 160.274)
  • primary-foreground#121815oklch(0.202 0.011 163.644)
  • secondary#1F2924oklch(0.27 0.017 163.393)
  • secondary-foreground#E6ECE6oklch(0.937 0.01 145.493)
  • muted#1C2420oklch(0.251 0.014 163.622)
  • muted-foreground#93A39Aoklch(0.7 0.022 161.216)
  • accent#222C27oklch(0.282 0.017 163.492)
  • accent-foreground#E6ECE6oklch(0.937 0.01 145.493)
  • destructive#E07A68oklch(0.689 0.13 31.169)
  • border#2A352Foklch(0.317 0.018 161.322)
  • input#33403Aoklch(0.358 0.02 165.566)
  • ring#9CC5AEoklch(0.787 0.054 160.274)
  • chart-1#9CC5AEoklch(0.787 0.054 160.274)
  • chart-2#E0A577oklch(0.767 0.093 58.756)
  • chart-3#93B4E0oklch(0.761 0.073 255.745)
  • chart-4#D3A2C6oklch(0.769 0.075 336.085)
  • chart-5#B4CF8Eoklch(0.818 0.092 126.655)

Schriften

Überschriften
Newsreader · 500
Fließtext
Figtree · 400
Monospace
Figtree

Schriftgrößen

  • display · 44/1.1 · -0.015emZwölf Boxkämpfer jagen Viktor
  • h1 · 32/1.15 · -0.01emZwölf Boxkämpfer jagen Viktor
  • h2 · 24/1.25Zwölf Boxkämpfer jagen Viktor
  • h3 · 19/1.3Zwölf Boxkämpfer jagen Viktor
  • body · 17/1.6Zwölf Boxkämpfer jagen Viktor
  • small · 14/1.45Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 20pxmd 22pxlg 24pxxl 28px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenWeich, flach und breit, nur auf Karten und Sheets.

Layout

Touch-Ziele
48px
Tab-Leiste
68px, 3 Einträge, icons with labels, no badges
Bildschirmrand
24px
Navigation
bottom tab bar; one primary action per screen
Ziffern
proportional

Ideal für

  • Meditations- und Schlaf-Apps
  • Tagebuch- und Stimmungs-Tracker
  • Therapie- und Gesundheits-Apps
  • Gewohnheits-Apps mit sanftem Ton

Dos and Don’ts

  • Verlange pro Screen nur eine Aktion.
  • Nutze die Serife nur für Titel und Zitate.
  • Verwende kein Rot und keine dringlichen Badges.
  • Fülle nicht jede Lücke; Raum gehört zum Design.

Weitere Designsysteme für Apps

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