Chatter: Messenger-App-Designsystem
App · Hell · Weich · SocialChatter
Runde Sprechblasen, ein freundliches Türkis und Unterhaltungen im Mittelpunkt.
Chatter hält Menschen und Nachrichten im Zentrum: ein weißer Screen, türkise Sprechblasen für das, was du sendest, blassgraue Blasen für Antworten, runde Avatare und großzügige 22px-Ecken. Ungelesen-Badges und Schreibstatus sind klar, ohne den Screen in einen Spielautomaten zu verwandeln.
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.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn 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 Chatter. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/chatter.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#14201Foklch(0.232 0.017 189.589)
- card#F4F7F7oklch(0.974 0.003 197.104)
- card-foreground#14201Foklch(0.232 0.017 189.589)
- popover#F4F7F7oklch(0.974 0.003 197.104)
- popover-foreground#14201Foklch(0.232 0.017 189.589)
- primary#0F7F81oklch(0.542 0.089 196.842)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E3F2F2oklch(0.95 0.016 196.89)
- secondary-foreground#0B5455oklch(0.406 0.065 196.352)
- muted#F1F5F5oklch(0.967 0.004 197.086)
- muted-foreground#56676Aoklch(0.501 0.021 209.449)
- accent#E8F2F2oklch(0.954 0.011 196.978)
- accent-foreground#14201Foklch(0.232 0.017 189.589)
- destructive#C4302Boklch(0.542 0.186 27.429)
- border#E1E8E8oklch(0.926 0.008 197.027)
- input#D2DCDCoklch(0.887 0.011 196.961)
- ring#0F7F81oklch(0.542 0.089 196.842)
- chart-1#0F7F81oklch(0.542 0.089 196.842)
- chart-2#F08A4Boklch(0.732 0.146 50.375)
- chart-3#5B7BE0oklch(0.608 0.157 268.254)
- chart-4#D9568Coklch(0.638 0.172 357.485)
- chart-5#3FA34Doklch(0.637 0.155 146.028)
Dunkles Theme
- background#0E1414oklch(0.185 0.009 196.382)
- foreground#E6EEEEoklch(0.943 0.009 197.011)
- card#162020oklch(0.234 0.014 196.218)
- card-foreground#E6EEEEoklch(0.943 0.009 197.011)
- popover#162020oklch(0.234 0.014 196.218)
- popover-foreground#E6EEEEoklch(0.943 0.009 197.011)
- primary#4FC9CBoklch(0.769 0.107 196.682)
- primary-foreground#0E1414oklch(0.185 0.009 196.382)
- secondary#1C2828oklch(0.266 0.017 196.199)
- secondary-foreground#E6EEEEoklch(0.943 0.009 197.011)
- muted#182222oklch(0.242 0.014 196.254)
- muted-foreground#8EA2A3oklch(0.697 0.023 200.326)
- accent#1F2C2Coklch(0.281 0.018 196.192)
- accent-foreground#E6EEEEoklch(0.943 0.009 197.011)
- destructive#FF7A73oklch(0.733 0.164 24.948)
- border#253232oklch(0.305 0.017 196.275)
- input#2E3C3Coklch(0.344 0.018 196.33)
- ring#4FC9CBoklch(0.769 0.107 196.682)
- chart-1#4FC9CBoklch(0.769 0.107 196.682)
- chart-2#F5A56Eoklch(0.789 0.118 54.63)
- chart-3#8CA3F0oklch(0.729 0.115 270.659)
- chart-4#EE8BB3oklch(0.753 0.128 354.922)
- chart-5#74C982oklch(0.764 0.131 148.054)
Schriften
- Überschriften
- Plus Jakarta Sans · 700
- Fließtext
- Plus Jakarta 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 18pxmd 20pxlg 22pxxl 26px
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 with labels; unread badges
- Bildschirmrand
- 16px
- Navigation
- bottom tab bar; chat list to thread
- Ziffern
- proportional
Ideal für
- Messaging- und Chat-Apps
- Community- und Gruppen-Apps
- Dating- und Social-Apps
- Chat für den Kundensupport
Dos and Don’ts
- Gruppiere aufeinanderfolgende Nachrichten derselben Person.
- Halte das Eingabefeld über der Tastatur sichtbar.
- Verwende Türkis nur für deine eigenen Nachrichten und wichtige Aktionen.
- Setze keine Schatten oder Verläufe auf Sprechblasen.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader