---
id: "sendbird"
name: "Sendbird"
country: US
category: developer-tools
homepage: "https://sendbird.com"
primary_color: "#742DDD"
logo:
  type: favicon
  slug: "https://www.google.com/s2/favicons?domain=sendbird.com&sz=128"
verified: "2026-06-01"
omd: "0.1"
ds:
  name: Sendbird UIKit
  url: "https://sendbird.com/docs/chat/uikit/v3/react/overview"
  type: system
  description: Sendbird's official chat UIKit — a documented, token-driven conversation-UI system (React, iOS, Android, React Native) with named color sets, message components, and themeable light/dark resources.
tokens:
  source: prose-derived
  extracted: "2026-06-09"
  colors:
    primary: "#742DDD"
    primary-hover: "#6211C8"
    primary-active: "#491389"
    brand: "#742DDD"
    canvas: "#FFFFFF"
    foreground: "#0D0D0D"
    body: "#424242"
    muted: "#EEEEEE"
    on-primary: "#FFFFFF"
    success: "#259C72"
    error: "#DE360B"
    info: "#ADC9FF"
    surface: "#F2F3F7"
    hairline: "#E3E5EF"
    border-light: "#D1D1D1"
    ink-dark: "#0D0D0D"
  typography:
    family: { sans: "Helvetica Now Text", mono: "system-ui" }
    display-serif: { size: 72, weight: 500, use: "Marketing hero headline (serif)" }
    body-lg:    { size: 18, weight: 400, use: "Marketing body text" }
    nav:        { size: 16, weight: 500, use: "Marketing nav links" }
    body:       { size: 14, weight: 400, use: "UIKit message text and labels" }
    label:      { size: 14, weight: 600, use: "UIKit labels, button text" }
    cta:        { size: 13, weight: 600, use: "Marketing pill CTA text" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
  rounded: { sm: 4, md: 8, lg: 24, full: 9999 }
  shadow:
    focus-ring: "0 0 0 1px #742DDD"
    scrim: "rgba(0,0,0,0.55)"
  components_harvested: true
  components:
    button-primary: { type: button, bg: "#742DDD", fg: "#FFFFFF", radius: "4px", height: "40px", padding: "10px 16px", font: "14px / 600", hover: "#6211C8", active: "#491389", use: "UIKit primary action (send, confirm)" }
    button-secondary: { type: button, bg: "transparent", fg: "#742DDD", border: "1px solid #742DDD", radius: "4px", active: "rgba(0,0,0,0.04)", use: "UIKit ghost alternative beside primary" }
    button-danger: { type: button, bg: "#DE360B", fg: "#FFFFFF", radius: "4px", hover: "#BF0711", active: "#9D091E", use: "UIKit destructive action" }
    button-disabled: { type: button, bg: "#E0E0E0", fg: "rgba(0,0,0,0.38)", radius: "4px", disabled: "non-interactive", use: "UIKit blocked action" }
    input: { type: input, bg: "#FFFFFF", fg: "rgba(0,0,0,0.87)", border: "1px solid rgba(0,0,0,0.12)", radius: "4px", padding: "7px 12px", font: "14px / 400", focus: "border #742DDD + 0 0 0 1px #742DDD", use: "UIKit text field" }
    bubble-outgoing: { type: listItem, bg: "#742DDD", fg: "#FFFFFF", use: "Outgoing message bubble, right-aligned, max 400px" }
    bubble-incoming: { type: listItem, bg: "#EEEEEE", fg: "rgba(0,0,0,0.87)", use: "Incoming message bubble, left-aligned, 40px avatar" }
    cta-dark-pill: { type: button, bg: "#0D0D0D", fg: "#FFFFFF", border: "1px solid #0D0D0D", radius: "24px", height: "42px", padding: "12px 10px", font: "13px / 600", use: "Marketing highest-emphasis CTA" }
    cta-outline-pill: { type: button, bg: "#FFFFFF", fg: "#0D0D0D", border: "1px solid #0D0D0D", radius: "24px", height: "42px", padding: "12px 10px", font: "13px / 600", use: "Marketing secondary CTA" }
    chip: { type: badge, bg: "#F2F3F7", fg: "#0D0D0D", border: "1px solid #E3E5EF", radius: "8px", height: "50px", padding: "8px 12px", font: "18px / 400", use: "Marketing neutral selector / utility control" }
    input-newsletter: { type: input, bg: "#FFFFFF", fg: "#424242", border: "1px solid #D1D1D1", radius: "50px", padding: "6px 35px", font: "12.8px / 400", use: "Marketing pill email capture" }
---
# Design System Inspiration of Sendbird

## 1. Visual Theme & Atmosphere

Sendbird is a developer-infrastructure company that wears two faces, and the gap between them is the whole story. The **product** — the Sendbird UIKit that powers chat inside thousands of apps — is a disciplined, token-driven system built on a single confident **purple** (`#742DDD`, "Sendbird purple") sitting on an eight-step neutral grayscale, with green, red and blue reserved strictly for semantic meaning. It is functional software color: a 4px corner radius everywhere, flat fills, no gradients, a palette that survives being dropped into a customer's own app without fighting it. The **marketing site** (sendbird.com), by contrast, is a near-monochrome editorial surface — pure white grounds, an oversized **serif display face** running to 72px for headlines, body text set in Helvetica Now Text, and pill-shaped black-and-white CTAs with no brand color at all. One surface is engineered to disappear into a developer's product; the other is engineered to read like a printed enterprise brochure. The through-line is restraint: a brand that earns trust by looking calm, legible, and uncluttered, letting the single purple do its work only where it carries product meaning.

## 2. Color Palette & Roles

Sendbird's UIKit ships a fully named, five-step-per-family color set (the authoritative design-system source). The marketing site layers a separate near-grayscale identity on top.

**Primary — Sendbird purple (brand + primary actions)**
- primary-100: `#DBD1FF`
- primary-200: `#C2A9FA`
- primary-300: `#742DDD` (the main color — default fills, links, focus)
- primary-400: `#6211C8` (hover)
- primary-500: `#491389` (pressed/active)

**Secondary — green (accents, success-adjacent)**
- secondary-100: `#A8E2AB`
- secondary-200: `#69C085`
- secondary-300: `#259C72`
- secondary-400: `#027D69`
- secondary-500: `#066858`

**Error — red (destructive, validation)**
- error-100: `#FDAAAA`
- error-200: `#F66161`
- error-300: `#DE360B` (light-theme error border + danger fill)
- error-400: `#BF0711`
- error-500: `#9D091E`

**Information — `#ADC9FF`** (informational highlights, link previews)

**Background — neutral grayscale (surfaces, light → dark)**
- background-50: `#FFFFFF`
- background-100: `#EEEEEE` (incoming message bubble, subtle fills)
- background-200: `#E0E0E0` (disabled fills)
- background-300: `#BDBDBD`
- background-400: `#393939`
- background-500: `#2C2C2C`
- background-600: `#161616`
- background-700: `#000000`

**Text on light (alpha black)**
- onlight-01: `#000000` @ 87% (primary text)
- onlight-02: `#000000` @ 50% (secondary text)
- onlight-03: `#000000` @ 38% (disabled text)
- onlight-04: `#000000` @ 12% (dividers, default input border)

**Text on dark (alpha white)** mirrors the above at 87 / 50 / 38 / 12% white. **Overlay:** `#000000` @ 55% (modal scrim), `#000000` @ 32% (lighter scrim).

**Marketing surface (sendbird.com, live):** ground `#FFFFFF`, body text `#424242`, near-black display + CTA ink `#0D0D0D`, nav ink `#0E1017`, footer + chip fill `#F2F3F7`, hairline borders `#E3E5EF` and `#D1D1D1`. No purple appears in the marketing chrome — brand color is held back for the product.

## 3. Typography Rules

- **Product (UIKit):** the system font stack via `--sendbird-font-family-default` — platform-native sans (SF Pro / Roboto / system-ui) so embedded chat matches the host app. Message text and labels sit at 14px with a clear weight ladder (400 body, 500–600 labels).
- **Marketing display:** a **serif** display face for headlines, observed at **72px / weight 500** on the hero (`#0D0D0D`). The serif is the single most distinctive type choice — it signals editorial confidence and separates Sendbird from the geometric-sans default of developer-tool marketing.
- **Marketing body + nav:** **Helvetica Now Text** — body at 18px / 400 (`#424242`), nav links at 16px / 500 (`#0E1017`), small print near 13px / 600 on pill CTAs.
- **Hierarchy:** large serif headline → Helvetica Now subhead/body → medium-weight nav and buttons. Tight, legible, generous line spacing; never more than two type families on one surface.

## 4. Component Stylings

> Two systems documented below: the **UIKit** (product, token-driven, purple) verified from the official component source, and the **marketing chrome** (sendbird.com) verified from live computed style. Each is the source of truth for its own surface.

### UIKit Button

**Primary — Big (default)**
- Background: `#742DDD` (primary-300)
- Text: `#FFFFFF`
- Border: none
- Radius: 4px
- Padding: 10px 16px
- Height: 40px
- Font: 14px / 600 / system default
- Hover: background `#6211C8` (primary-400)
- Pressed: background `#491389` (primary-500)
- Use: the single most prominent action in a UIKit surface (send, confirm, create channel)

**Primary — Small**
- Background: `#742DDD`
- Text: `#FFFFFF`
- Radius: 4px
- Padding: 6px 16px
- Height: 32px
- Use: inline and toolbar actions

**Secondary (ghost)**
- Background: transparent
- Text: `#742DDD`
- Border: 1px solid `#742DDD`
- Radius: 4px
- Pressed: background `#000000` @ 4% (onlight wash)
- Use: lower-emphasis alternative beside a primary button

**Danger**
- Background: `#DE360B` (error-300)
- Text: `#FFFFFF`
- Radius: 4px
- Hover: background `#BF0711` (error-400)
- Pressed: background `#9D091E` (error-500)
- Use: destructive actions (leave channel, delete message)

**Disabled**
- Background: `#E0E0E0` (background-200)
- Text: `#000000` @ 38% (onlight-03)
- Radius: 4px
- Use: any blocked action; non-interactive

### UIKit Input / TextField

**Default**
- Background: `#FFFFFF`
- Text: `#000000` @ 87% (onlight-01)
- Border: 1px solid `#000000` @ 12% (onlight-04)
- Radius: 4px
- Padding: 7px 12px
- Font: 14px / 400

**Focus**
- Border: 1px solid `#742DDD` (primary-300)
- Shadow: 0 0 0 1px `#742DDD`

**Error**
- Border: 1px solid `#DE360B` (error-300)

### UIKit Message Bubble

**Outgoing (mine)**
- Background: `#742DDD` (primary-300)
- Text: `#FFFFFF`
- Max-width: 400px
- Use: messages sent by the current user, right-aligned

**Incoming (other)**
- Background: `#EEEEEE` (background-100)
- Text: `#000000` @ 87% (onlight-01)
- Max-width: 400px
- Avatar: 40px (min-width, left of bubble)
- Use: messages from other participants, left-aligned

### Marketing CTA — Dark pill (primary)

**Default**
- Background: `#0D0D0D`
- Text: `#FFFFFF`
- Border: 1px solid `#0D0D0D`
- Radius: 24px
- Padding: 12px 10px
- Height: 42px
- Font: 13px / 600 / Helvetica Now Text
- Use: highest-emphasis marketing action

### Marketing CTA — Outline pill (secondary)

**Default**
- Background: `#FFFFFF`
- Text: `#0D0D0D`
- Border: 1px solid `#0D0D0D`
- Radius: 24px
- Padding: 12px 10px
- Height: 42px
- Font: 13px / 600
- Use: secondary marketing action paired with the dark pill

### Marketing Utility chip

**Default**
- Background: `#F2F3F7`
- Text: `#0D0D0D`
- Border: 1px solid `#E3E5EF`
- Radius: 8px
- Padding: 8px 12px
- Height: 50px
- Font: 18px / 400 / Helvetica Now Text
- Use: neutral selector / utility control on marketing surfaces

### Marketing Input (newsletter)

**Default**
- Background: `#FFFFFF`
- Text: `#424242`
- Border: 1px solid `#D1D1D1`
- Radius: 50px
- Padding: 6px 35px
- Font: 12.8px / 400
- Use: pill-shaped email capture in footer/forms

## 5. Layout Principles

- **UIKit:** a vertical conversation column with a fixed channel header, a scrolling message list, and a docked composer. Message rows are avatar + bubble, bubbles capped at 400px so long text wraps rather than spanning wide screens. 4px is the universal corner unit; spacing is an 8px rhythm.
- **Marketing:** generous single-column-of-attention sections on white, oversized serif headlines anchoring each block, wide margins, and image columns doing the visual work. No dense grids — the page breathes.
- **Density:** product is information-dense but calm (chat needs scannability); marketing is deliberately sparse.

## 6. Depth & Elevation

Sendbird is overwhelmingly **flat**. The UIKit uses fills and 1px hairlines, not shadows, to separate surfaces — incoming bubble vs. ground is a fill contrast (`#EEEEEE` on `#FFFFFF`), not a drop shadow. Elevation appears only where it carries meaning: modals/menus float above a `#000000` @ 55% overlay scrim, and the input focus ring is a 1px purple halo rather than a glow. Marketing is similarly shadowless — depth comes from whitespace and scale, not z-axis tricks.

## 7. Do's and Don'ts

### Do
- Use purple `#742DDD` for exactly one primary action per surface; let neutrals carry everything else.
- Keep the 4px radius on product controls and the pill (24px / 50px) radius on marketing chrome — don't mix the two languages.
- Reserve green, red, and blue for semantic roles (success-adjacent, destructive/error, informational).
- Pair the serif display headline with Helvetica Now body on marketing; never set body copy in the serif.

### Don't
- Introduce gradients, drop shadows, or a second brand hue — the system's calm depends on restraint.
- Put brand purple into marketing chrome, or near-black pills into the product UI; the surfaces are intentionally distinct.
- Combine multiple fields on one spec line; each token gets its own value.
- Let message bubbles exceed the 400px cap or drop the 40px avatar gutter.

## 8. Responsive Behavior

- **UIKit:** the conversation column is fluid; bubble max-width collapses from 400px to `calc(100vw - 140px)` on narrow viewports, preserving the avatar gutter and right/left alignment. Channel list and conversation become a single stacked view on mobile.
- **Marketing:** the serif hero scales down from 72px on large screens; multi-column sections reflow to a single column; pill CTAs stay full-radius and stack vertically.
- Touch targets respect the 40px (Big) / 32px (Small) button heights as comfortable minimums.

## 9. Agent Prompt Guide

When generating a Sendbird-style interface, specify which surface you mean:
- **"Sendbird UIKit style"** → token-driven chat UI: purple `#742DDD` primary, neutral grayscale, 4px radius, flat fills, 14px system-font text, message bubbles (outgoing purple / incoming `#EEEEEE`) capped at 400px with 40px avatars, semantic green/red/blue only.
- **"Sendbird marketing style"** → near-monochrome editorial: white ground, 72px serif display headline, Helvetica Now Text body, black `#0D0D0D` and white pill CTAs (24px radius), `#F2F3F7` neutral chips, no brand color in chrome.
- Default corner radius: **4px** (product) — state "pill" explicitly for marketing CTAs.
- Keep it flat: 1px hairlines and fills, not shadows. One primary action per surface.

## 10. Voice & Tone

Sendbird speaks like **infrastructure that respects your time**: precise, technical without jargon-for-its-own-sake, confident but never loud. Product copy (UIKit labels, empty states) is plain and instructive — "No messages yet," "Send," "Leave channel." Marketing copy is declarative and enterprise-assured — "The AI customer experience platform" — short clauses, present tense, outcomes over features. The serif display face gives the words a measured, editorial gravity; the tone is a senior engineer who has already solved your problem and is calmly telling you how.

## 11. Brand Narrative

Founded in Korea (originally as a community for parents) and now powering in-app conversations for some of the world's largest apps, Sendbird's story is **invisible reliability at scale**. The brand's job is to be the messaging layer you never think about — which is why the product design system is built to disappear into the host app, and why the brand color is held back from marketing chrome. The single purple is a signature you only meet where it matters: the action that sends, the link that connects. Everything else — grayscale surfaces, flat fills, serif calm — communicates "we are the dependable substrate, not the spectacle."

## 12. Principles

1. **Color carries meaning, not decoration.** One purple for primary action; semantic green/red/blue; everything else neutral.
2. **Flat by default.** Fills and hairlines over shadows; elevation only for true overlays.
3. **The product disappears.** UIKit is themeable and system-font-based so it adopts the host app's identity.
4. **Two surfaces, two languages.** Product = 4px functional; marketing = pill editorial. Never blur them.
5. **Restraint reads as trust.** Whitespace, legibility, and a single accent over visual noise.

## 13. Personas

- **The app developer** embedding chat — wants tokens, theming, and components that drop in without fighting their design. Lives in the UIKit docs.
- **The enterprise buyer** evaluating a CX/messaging platform — meets the serif marketing site, reads "reliable, secure, at scale," needs trust signals (certifications, G2).
- **The end user** inside a customer's app — never sees "Sendbird," only a calm, legible conversation that feels native to the app they're using.

## 14. States

- **Default / Hover / Pressed:** buttons step purple-300 → purple-400 → purple-500 (danger steps error-300 → 400 → 500).
- **Focus:** 1px purple `#742DDD` border + 1px purple box-shadow halo on inputs.
- **Error:** input border switches to error-300 `#DE360B`; validation text in error color.
- **Disabled:** background-200 `#E0E0E0` fill with onlight-03 (38% black) text; no interaction.
- **Empty:** plain instructive copy ("No messages yet") centered in the conversation column, neutral text, no illustration noise.
- **Loading:** lightweight skeleton/spinner in neutral grays; the composer stays docked.

## 15. Motion & Easing

Motion is **minimal and purposeful**. New messages slide/fade into the list at the bottom; the composer and channel transitions are quick (~150–200ms) ease-out movements that never block input. State changes (hover, focus, pressed) are near-instant color transitions, not animated flourishes. Overlays fade their scrim in over ~200ms. The marketing site favors restraint too — subtle reveal-on-scroll rather than parallax theatrics. The guiding rule mirrors the visual system: motion clarifies, it does not perform.

---
**Verified:** 2026-06-01 (CREATE pilot — first ref through the proof-gated pipeline)
**Tier 1 sources:** https://sendbird.com (live DOM via playwright getComputedStyle — marketing chrome: nav `#0E1017` 16px/500, serif h1 72px/500 `#0D0D0D`, dark pill `#0D0D0D` 24px radius, neutral chip `#F2F3F7`/`#E3E5EF` 8px, pill input 50px radius), https://sendbird.com/docs/chat/uikit/v3/android-view/customizations/resource-customization/color-resources (official UIKit color tokens — primary/secondary/error/background/onlight/ondark/overlay full palette), https://github.com/sendbird/sendbird-uikit-react (official UIKit source — Button index.scss 4px radius / Big 40px / Small 32px / variant fills, Input index.scss 7px·12px / focus + error borders, MessageContent index.scss 400px max-width / 40px avatar)
**Tier 2 sources:** getdesign.md/sendbird — NOT LISTED ("No designs found"). styles.refero.design — NOT LISTED (curated taste-set; ?q= does not server-filter; B2B SDK absent). Tier 1 (official UIKit docs + source + live inspect) treated as authoritative per pipeline.
**Conflicts unresolved:** none. Note: an earlier web search reported a green primary (#259c72) — that is the UIKit **secondary** palette; the Android `colors.xml` source confirms **primary = purple #742DDD**. Resolved in favor of the official source file.
**Proof:** see `.verification.md` (`## Proof` block, ≥5 raw computed-style samples).
**Surface split:** §4 documents two parallel systems — the UIKit product DS (purple, 4px, token-driven) and the sendbird.com marketing chrome (monochrome serif editorial, pill radius). Both retained as authoritative for their surface.


---
Source: https://oh-my-design.kr/design-systems/sendbird · Raw twin of references/sendbird/DESIGN.md
Install 440 quality-graded references for your AI coding agent: npx oh-my-design-cli install-skills