Chatter: Messaging App Design System

App · Light · Soft · Social

Chatter

Round bubbles, a friendly teal and conversations front and center.

Chatter keeps people and messages at the center: a white screen, teal bubbles for what you send, pale grey bubbles for replies, round avatars and generous 22px corners. Unread badges and typing states are clear without turning the screen into a slot machine.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Chatter design system. Its spec is at https://codexdesign.io/design-systems/chatter.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light 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)

Dark 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)

Fonts

Headings: Plus Jakarta Sans · 700
Body: Plus Jakarta Sans · 400
Monospace: JetBrains Mono

Type scale

display · 40/1.05 · -0.02emThe quick brown fox
h1 · 30/1.1 · -0.01emThe quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 18pxmd 20pxlg 22pxxl 26px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Touch targets: 48px
Tab bar: 60px, 4 items, icons with labels; unread badges
Screen padding: 16px
Navigation: bottom tab bar; chat list to thread
Numerals: proportional

Chatter: Messaging App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps