ChatBubble Brand Style Guide
← Color Fonts

ChatBubble

A conversational, real-time system for messaging apps: rapid reading, personality and fluid interaction, with generously rounded 20px bubbles. Green carries what you send, gray holds what you receive, blue marks links and purple is saved for reactions and premium.

Source: designmd.ai/chef/chatbubble · by @chef · MIT

Typography

Editorial pick
Heading system
Fredoka
Specimen · 600 · 48px. Rounded terminals echo the bubble shape.
Body system
Figtree
Message text 14px / 1.45 in the preview · 400 to 600
Leaving at 8. I'll bring coffee for everyone, see you at the trailhead.
Typography not specified in source -> HTML: Fredoka / Figtree (editorial pick). No sizes, weights or line heights are defined by the system.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
12:04 · 2,408 online · 3 new

Colors

Light · green sent
Primary#22C55E
Secondary#3B82F6
Tertiary#A855F7
Surface#F3F4F6
Success #22C55E Warning #F59E0B Error #EF4444 Info #3B82F6

Background #FFFFFF · Received #F3F4F6 · Sent, online #22C55E · Links #3B82F6 · Reactions, premium #A855F7

Text color is not specified in the source. The preview uses #111827 and #4B5563 for legibility, and dark ink on green because white on #22C55E only reaches 2.3:1.

Overview

Messaging
ProductMessaging apps, chat platforms
PrioritiesRapid reading, personality, fluid interaction
Shape languageGenerously rounded, friendly
Touch target44px minimum on mobile

Layout, content width and spacing scale: (not specified).

Components

Bubbles from color roles
Received bubble on #F3F4F6
Sent bubble on #22C55E
Links stay blue: chat.link/plan
Reaction
Online Away Not delivered
Message

The source defines no component recipes. These pieces only combine its color roles, the 20px bubble radius, the 44px touch target and the no-large-shadow rule.

Shapes

20px bubbles

Every chat bubble uses the 20px large radius. Shapes stay generously rounded so the interface feels friendly and approachable. Bubbles stay flat: no large shadows.

Large radius20px · all chat bubbles
Other radii(not specified)

Do's and Don'ts

Guardrails

Do

Use the 20px large radius for all chat bubbles.
Make every interactive element at least a 44px touch target on mobile.

Don't

Apply large shadows to message bubbles.
Generated from DESIGN.md · design-md-styleguide · ChatBubble
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #22C55E;
  --color-secondary: #3B82F6;
  --color-tertiary: #A855F7;
  --color-background: #FFFFFF;
  --color-surface: #F3F4F6;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --radius-lg: 20px;
}
@theme {
  --color-primary: #22C55E;
  --color-secondary: #3B82F6;
  --color-tertiary: #A855F7;
  --color-background: #FFFFFF;
  --color-surface: #F3F4F6;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  --radius-lg: 20px;
}
{
  "colors": {
    "primary": "#22C55E",
    "secondary": "#3B82F6",
    "tertiary": "#A855F7",
    "background": "#FFFFFF",
    "surface": "#F3F4F6",
    "success": "#22C55E",
    "warning": "#F59E0B",
    "error": "#EF4444",
    "info": "#3B82F6"
  },
  "typography": {},
  "rounded": {
    "lg": "20px"
  },
  "spacing": {}
}
---
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.