---
version: "alpha"
name: "ChatBubble"
description: "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."
source: "https://designmd.ai/chef/chatbubble"
author: "@chef"
license: "MIT"
colors:
  primary: "#22C55E"
  secondary: "#3B82F6"
  tertiary: "#A855F7"
  background: "#FFFFFF"
  surface: "#F3F4F6"
  success: "#22C55E"
  warning: "#F59E0B"
  error: "#EF4444"
  info: "#3B82F6"
rounded:
  lg: "20px"
components:
  chat-bubble-sent:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    shadow: "no large shadows"
  chat-bubble-received:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    shadow: "no large shadows"
  touch-target:
    minSize: "44px"
---

## Overview

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.

- **Composition cues:** (no especificado). The source gives no layout type, content width or grid.

## Colors

Light system: white chat background, light gray received bubbles, green for what the user sends.

- **Primary (#22C55E):** Green. Sent messages, online status.
- **Secondary (#3B82F6):** Blue. Links, received messages accent.
- **Tertiary (#A855F7):** Purple. Reactions, premium features.
- **Background (#FFFFFF):** chat background.
- **Surface (#F3F4F6):** received message bubbles.
- **Success (#22C55E)**
- **Warning (#F59E0B)**
- **Error (#EF4444)**
- **Info (#3B82F6)**

- **Not specified:** text colors (primary and secondary), border colors, text color on sent bubbles. The styleguide uses #111827 and #4B5563 for rendering only, and dark ink on green because white on #22C55E reaches only 2.3:1.

## Typography

(no especificado). The source defines no families, sizes, weights or line heights. The HTML styleguide renders Fredoka (display) and Figtree (body) as an editorial pick: Typography not specified in source -> HTML: Fredoka / Figtree (editorial pick).

## Layout

(no especificado). No spacing scale, base unit or content width is given.

## Elevation & Depth

- Message bubbles never take large shadows. No other elevation values are given.

## Shapes

- **Large radius (20px):** all chat bubbles.
- **Other radii:** (no especificado).

## Components

- **Sent bubble:** #22C55E, 20px radius, no large shadow.
- **Received bubble:** #F3F4F6, 20px radius, no large shadow.
- **Links:** #3B82F6.
- **Reactions and premium features:** #A855F7.
- **Online status:** #22C55E.
- **Touch targets:** every interactive element is at least 44px on mobile.
- **Buttons, inputs, cards:** (no especificado).

## Do's and Don'ts

### Do
- Use the 20px large radius for all chat bubbles.
- Make every interactive element meet the 44px minimum touch target on mobile.

### Don't
- Apply large shadows to message bubbles.

## Motion

(no especificado).

---

Source: designmd.ai/chef/chatbubble · by @chef · MIT License. Converted to this format without changing its values; the original license notice is kept.