Green Chat
Green Chat is a messaging-first design system inspired by the world's most widely used chat application. It prioritizes simplicity, instant familiarity, and effortless conversation flow. The aesthetic is warm and approachable — built around green and teal tones with a distinctive chat-wallpaper background pattern. Every design choice serves the singular goal of making messaging feel as natural as talking face to face.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxGreen Chat is a messaging-first design system inspired by the world's most widely used chat application. It prioritizes simplicity, instant familiarity, and effortless conversation flow. The aesthetic is warm and approachable — built around green and teal tones with a distinctive chat-wallpaper background pattern. Every design choice serves the singular goal of making messaging feel as natural as talking face to face.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List Item
Default
Active
Checkbox
Default
Checked
Tooltip
Default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here