ChatBubble Design System
Click to expand
ChatBubble is a conversational, real-time, and expressive design system for messaging apps and chat platforms. It prioritizes rapid reading, personality expression, and fluid interaction with generously rounded shapes that feel friendly and approachable.
Primary#22C55E
Secondary#3B82F6
Tertiary#A855F7
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label
Color Palette
ChatBubble is a conversational, real-time, and expressive design system for messaging apps and chat platforms. It prioritizes rapid reading, personality expression, and fluid interaction with generously rounded shapes that feel friendly and approachable.
Do's & Don'ts
Do
use the 20px large radius for all chat bubbles
ensure all interactive elements meet 44px minimum touch target on mobile
Don't
apply large shadows to message bubbles
Download .md
License MIT
Uploaded yesterday
Version v1
File size 886 B
Downloads 0
Use with MCP
Using designmd mcp, download the design system https://designmd.ai/chef/chatbubble and implement it in my code
Don't have the MCP? Install it here