# CometChat Design System

> Deep indigo canvases punctuated by vibrant violet actions and high-contrast Satoshi typography.

**Source:** [https://cometchat.com](https://cometchat.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
CometChat utilizes a "Dark Mode by Default" aesthetic for its primary marketing presence, moving away from standard SaaS white canvases toward a deep indigo foundation (`#0a0914`). The brand identity is anchored by a high-voltage violet (`#6851d6`) used for primary CTAs and key interactive surfaces. Typography is strictly **Satoshi**, utilizing a semi-bold weight (600) for massive display headlines that often feature tight line heights. UI elements favor soft geometry, specifically 12px and 16px radii for content containers, while interactive buttons utilize a full pill (`9999px`) shape.

## Signature DNA
1. **Deep Space Canvas** (The primary background is a near-black indigo `#0a0914`, creating a high-contrast environment for white text and violet accents across all main landing pages.)
2. **Violet Voltage** (The primary action color `#6851d6` is used for buttons, active states, and icon backgrounds to pull focus in a dark environment.)
3. **Satoshi Display** (Headlines are rendered in Satoshi at weight 600, often exceeding 48px, creating a bold, technical, yet approachable developer-first aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-canvas-dark` | `#0a0914` | Primary page background | 53 | 0.8 | Computed Style |
| `color-canvas-light` | `#ffffff` | Secondary page background (Pricing/About) | 18 | 1.0 | Computed Style |
| `color-ink-primary` | `#fafaff` | Primary text on dark backgrounds | 809 | 0.8 | Computed Style |
| `color-ink-muted` | `#bdbdc1` | Secondary/Muted text and borders | 6 | 0.6 | Computed Style |
| `color-border-dark` | `#272730` | Subtle dividers on dark surfaces | 20 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-primary` | `#6851d6` | Primary CTA background, active states | 82 | 0.8 | Computed Style |
| `color-primary-deep` | `#44358d` | Hover states or depth accents | 16 | 0.8 | Computed Style |
| `color-teal` | `#2fc1b0` | Decorative accent / feature icons | 3 | 0.6 | Computed Style |
| `color-orange` | `#b25424` | decorative_only | 9 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `color-success-glow` | `rgba(18, 183, 106, 0.14)` | Success state ring/shadow |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Satoshi | 400, 500, 600, 640, 700 | Heading & Body | Inter | Proprietary (Fontshare) |
| IBM Plex Mono | 400 | Technical/Code | IBM Plex Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `text-display-mega` | 58px | 61px | normal | 600 | Hero Headlines | `div.mx-auto.w-[clamp(605px,58.333vw,840px)]` |
| `text-display-lg` | 48px | 51px | normal | 600 | Section Headers | `h2.max-w-[528px].text-3xl` |
| `text-heading-md` | 32px | 38px | 0.16px | 600 | Feature Titles | `p.font-semibold.tracking-wide` |
| `text-heading-sm` | 24px | 25px | normal | 400 | Sub-section Heads | `h3.text-sans.self-stretch` |
| `text-body-lg` | 18px | 22px | 0.09px | 500 | Intro Paragraphs | `div.text-lg.font-medium` |
| `text-body-md` | 16px | 24px | normal | 400 | Default Body | `header.fixed.left-0` |
| `text-button` | 14px | 20px | 0.28px | 600 | CTA Labels | `button.relative.w-full` |
| `text-caption` | 12px | 12px | 0.28px | 600 | Overlines/Badges | `a.tracking-normal.inline-flex` |

### Principles
1. **Tight Display Leading:** Large headlines (48px+) use a line-height ratio of approximately 1.06x, keeping text blocks dense.
2. **Medium Weight Default:** UI labels and navigation items consistently use weight 500 or 600; weight 400 is reserved for long-form body copy.
3. **Wide Tracking on Small Caps:** Captions and small buttons (12px-14px) use positive letter spacing (0.28px) to maintain legibility against dark backgrounds.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `space-4` | 16px | 88 |
| `space-5` | 20px | 83 |
| `space-6` | 24px | 32 |
| `space-8` | 32px | 4 |
| `space-12` | 48px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-input` | 4px | Form fields | 184 occurrences |
| `radius-card` | 12px | Feature cards | 30 occurrences |
| `radius-panel` | 16px | Pricing tiers | 17 occurrences |
| `radius-pill` | 9999px | Buttons, Badges | 48 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `glow-success` | `rgba(18, 183, 106, 0.14) 0px 0px 0px 4px` | Active/Success focus rings | Pricing page |
| `border-subtle` | `1px solid rgba(250, 250, 255, 0.1)` | Card definition on dark canvas | Homepage feature grid |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** All
**Spec:** Background: `#6851d6` / Text: `#fafaff` / Radius: `9999px` / Padding: `0px 16px` / Typography: `Satoshi 600 14px`
**States observed:** Default | Hover: `#44358d` | Active: Captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: `rgba(10, 9, 20, 0)` (Transparent) / Text: `#fafaff` / Radius: `0px` / Font Size: `16px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(250, 250, 255, 0.02)` / Border: `1px solid rgba(250, 250, 255, 0.1)` / Radius: `12px` / Padding: `16px`
**States observed:** Default | Hover: Captured

#### Pricing Tier
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#0a0914` / Border: `1px solid rgba(250, 250, 255, 0.1)` / Radius: `24px` / Padding: `24px`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific

#### Tech Badge
**Role:** Framework compatibility labels
**Pages observed:** Homepage
**Spec:** Background: `rgba(250, 250, 255, 0.03)` / Text: `rgba(250, 250, 255, 0.84)` / Border: `1px solid rgba(250, 250, 255, 0.12)` / Radius: `9999px` / Font Size: `12px`
**States observed:** Default | Hover: Captured

#### Global Footer
**Role:** Site-wide directory
**Pages observed:** All
**Spec:** Background: `#0a0915` (Computed as `#0a0914` variant) / Text: `#fafaff` / Radius: `0px` / Font Size: `16px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Vertical Gap | 80px - 120px |
| Mobile Side Margin | 16px |

## Imagery & decoration
CometChat uses high-fidelity product screenshots with "glassmorphism" effects (blurred backgrounds and 1px borders). Decorative elements include subtle radial gradients in violet and teal that sit behind content cards to provide depth on the dark canvas.

## Do's
- Use `#6851d6` for all primary user actions.
- Set large headlines in Satoshi 600 with line-heights near 1.05.
- Apply a 12px radius to standard content cards.
- Use `#fafaff` for primary text on dark backgrounds to ensure contrast.
- Maintain a base unit of 4px for all padding and margin.

## Don'ts
- **Wrong:** Using `#3b82f6` (standard blue) for primary CTAs. **Right:** Use `#6851d6`. **Reason:** CometChat uses a specific violet brand color, not default Tailwind blue.
- **Wrong:** Applying sharp corners to buttons. **Right:** Use `9999px` pill shape.
- **Wrong:** Using pure black `#000000` for backgrounds. **Right:** Use the indigo-tinted `#0a0914`.
- **Wrong:** Setting body text to weight 600. **Right:** Use weight 400 for readability.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #6851d6;
  --color-bg-dark: #0a0914;
  --color-text-main: #fafaff;
  --font-heading: 'Satoshi', sans-serif;
  --radius-card: 12px;
  --radius-pill: 9999px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #6851d6;
  --color-indigo-950: #0a0914;
  --font-satoshi: "Satoshi";
  --radius-card: 12px;
}
```

## Agent prompt examples
- "Create a feature section with a 3-column grid of cards using background `rgba(250, 250, 255, 0.02)`, a 1px border of `#fafaff1a`, and 12px border radius."
- "Generate a primary CTA button with a pill shape, background color `#6851d6`, and Satoshi 600 font at 14px."
- "Design a hero section with a background of `#0a0914` and a headline in Satoshi 600 at 58px with a line height of 61px."

## Known gaps
- Hover state transitions for the primary violet color were not explicitly captured in the token set, though `#44358d` is the observed darker variant.
- Mobile-specific typography scaling for the 58px display size was not fully documented in the provided evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://cometchat.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://cometchat.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://cometchat.com/about | Desktop 1440 | 2026-06-06 |