Chatter: 메신저 앱 디자인 시스템
App · Light · Soft · SocialChatter
둥근 말풍선, 친근한 틸, 대화가 중심인 앱.
Chatter는 사람과 메시지를 중심에 둡니다. 흰 화면, 내가 보낸 말은 틸 말풍선, 답장은 옅은 회색 말풍선, 둥근 아바타, 넉넉한 22px 모서리. 읽지 않음 배지와 입력 중 상태는 화면을 슬롯머신처럼 만들지 않고도 분명하게 보입니다.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/ko/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
Best for
- 메신저·채팅 앱
- 커뮤니티·그룹 앱
- 데이팅·소셜 앱
- 고객 지원 채팅
Do's and don'ts
- 같은 사람이 연속으로 보낸 메시지는 묶으세요.
- 키보드 위에 입력창이 계속 보이게 하세요.
- 내 메시지와 핵심 행동 외에는 틸을 쓰지 마세요.
- 말풍선에 그림자나 그라데이션을 넣지 마세요.