---
title: Vendschat Brand Guidelines
version: "1.1.0"
effective_date: "2026-07-09"
brand_name: Vendschat
legal_entity: Vendocker LLC
website: https://vendschat.com
app_url: https://app.vendschat.com
contact: brand@vendschat.com
document_type: brand_guidelines
messaging_framework: The Unified Inbox Model
messaging_framework_abbr: UIM
communication_style: [clear, conversational, accessible, B2C]
audience: [designers, marketers, developers, ai_agents]
languages: [en]
themes: [light, dark]
---

# Vendschat Brand Guidelines

> **For AI agents & automated tools:** This document is the canonical source of truth for Vendschat brand identity. Parse the [Machine-Readable Brand Data](#machine-readable-brand-data) JSON block for structured tokens. Web version: `https://vendschat.com/brand`. Raw markdown: `https://vendschat.com/docs/brand-guidelines.md`.

---

## Table of Contents

1. [Brand Overview](#1-brand-overview)
2. [Brand Architecture](#2-brand-architecture)
3. [Logo & Wordmark](#3-logo--wordmark)
4. [Color System](#4-color-system)
5. [Typography](#5-typography)
6. [Voice & Tone](#6-voice--tone)
7. [Imagery & Photography](#7-imagery--photography)
8. [Iconography](#8-iconography)
9. [UI Components & Patterns](#9-ui-components--patterns)
10. [Layout, Spacing & Shape](#10-layout-spacing--shape)
11. [Motion & Interaction](#11-motion--interaction)
12. [Social Media Guidelines](#12-social-media-guidelines)
13. [Co-Branding & Partnerships](#13-co-branding--partnerships)
14. [Accessibility](#14-accessibility)
15. [Asset Library](#15-asset-library)
16. [Machine-Readable Brand Data](#machine-readable-brand-data)

---

## 1. Brand Overview

### Messaging Anchor: The Unified Inbox Model

All Vendschat brand messaging reflects **The Unified Inbox Model** - the operating model for modern customer messaging: every channel in one inbox, answered clearly, with AI and workflows handling the rest.

**The idea is simple:** Your customers already message you on WhatsApp, Instagram, and Messenger. The businesses that win aren't the ones with the most apps - they're the ones where every conversation lands in one place and gets a real answer.

This is not a growth funnel borrowed from a competitor playbook. It's how Vendschat is built and how we help teams run messaging day to day.

Every piece of Vendschat copy, creative, and social content should pass the Unified Inbox test:

1. Does it start with the **customer moment** - a DM, a question, a stalled thread?
2. Does it show **one inbox** solving fragmentation - not another feature list?
3. Is it **clear** enough for any business owner to understand on first read?
4. Does it sound **conversational** - like a helpful person in chat, not a brochure?
5. Does it reflect how teams actually **work** - show up, answer, follow through?

### Four Principles

| Principle | What it means | Example |
|-----------|---------------|---------|
| **Unify every channel** | WhatsApp, Instagram, and Messenger in one shared inbox - no app-switching | "One inbox. Every channel. Zero missed DMs." |
| **Answer like a person** | Clear, warm, respectful - the B2C standard your customers expect | "We'll help you reply faster - not replace your team." |
| **Keep context in the thread** | CRM sync, history, labels - nobody starts a conversation cold | "See who they are and what they asked before you reply." |
| **Automate the repeat work** | AI, templates, broadcasts, and workflows for everything routine | "Let AI handle the FAQs. Your team handles the humans." |

### How Teams Run It

| Step | What happens | Example |
|------|--------------|---------|
| **Show up** | Be present on the channels customers already use | "Meet customers where they message - not where your dashboard lives." |
| **Answer** | Reply fast and clearly from one shared inbox | "Reply on WhatsApp, Instagram, and Messenger without switching apps." |
| **Follow through** | CRM sync, labels, broadcasts, and workflows close the loop | "Turn a question into a sale. Turn a DM into loyalty." |

### Product

**Vendschat** is the unified inbox platform for WhatsApp, Instagram, and Messenger - with AI automation, CRM sync, broadcasts, templates, and workflow integrations (n8n, Zapier).

### Positioning Statement

Vendschat helps businesses grow by talking to customers the right way: clearly, conversationally, and at scale - across every messaging channel that matters.

### Taglines & Descriptions

| Context | Copy |
|---------|------|
| **Messaging anchor** | The Unified Inbox Model |
| **Primary tagline** | One inbox. Every customer. |
| **Supporting line** | Clear, conversational, and accessible - the way customers actually want to be spoken to. |
| **Short description** | Customer messaging platform for WhatsApp, Instagram, and Messenger. |
| **SEO / metadata** | Vendschat unifies WhatsApp, Instagram, Messenger, and email in one inbox with AI automation, CRM sync, and n8n/Zapier workflows. |
| **Signup hook** | Start your 7-day free trial. No credit card required. |
| **Demo CTA** | Book a Demo |
| **Trial CTA** | Get Started |

### Brand Personality

| Trait | Expression |
|-------|------------|
| **Conversational** | Sounds like a real person in chat - never stiff, never salesy |
| **Clear** | Plain language, short sentences, one idea per line |
| **Accessible** | Readable by any customer (grade 8–10); no jargon without explanation |
| **Human-first** | Customers are people, not tickets, leads, or "users" |
| **Growth-minded** | Every conversation is a chance to show up, answer, and follow through |
| **Trustworthy** | Transparent pricing, honest claims, no hype |

### B2C Communication Standard

Vendschat speaks **to** businesses but models how they should speak **with** their customers. All brand materials demonstrate the B2C communication standard we help teams deliver:

- **Use "you" and "your customers"** - not "users," "consumers," or "end-users"
- **Write at grade 8–10 reading level** - Hemingway-style clarity
- **Prefer verbs over nouns** - "Reply faster" not "Response-time optimization"
- **One thought per sentence** - break up complexity
- **Show, don't lecture** - use examples, stats, and real scenarios
- **Match channel energy** - messaging apps are informal; match that warmth

### Brand Name Rules

| ✅ Correct | ❌ Incorrect |
|-----------|-------------|
| Vendschat | Vends Chat, VendorsChat, VendsChat, vendors_chat |
| Vendocker LLC | Vendocker, Vendocker Inc. (unless legally required) |

**Capitalization:** Use **Vendschat** (capital V only). Do not use Vends Chat, VendsChat, or VendorsChat in customer-facing materials.

---

## 2. Brand Architecture

```
Vendocker LLC (Parent Company)
└── Vendschat (Product Brand)
    ├── vendschat.com (Marketing)
    ├── app.vendschat.com (Application)
    └── help.vendschat.com (Support)
```

- **Vendocker LLC** is the legal entity and parent brand. Reference in copyright, legal pages, and footer attribution.
- **Vendschat** is the product brand used in all product, marketing, and social contexts.
- Parent brand colors (Vendocker mark): navy `#202D3D` / `#F3F3F5`, gold accent `#FCB109`, teal `#1EC5A8`. Do not mix Vendocker gold into Vendschat primary UI - reserve for "From Vendocker" attribution only.

---

## 3. Logo & Wordmark

### Primary Logo

- **File:** `/vendschat.svg` (marketing site) · Cloudinary CDN (app)
- **Construction:** Emerald chat-bubble icon + "Vendschat" wordmark
- **Logo colors:** `#059669` (primary emerald), `#05AD7D` (secondary teal accent in icon details)
- **Format:** SVG (preferred), PNG for raster contexts

### Logo Variants

| Variant | Use Case |
|---------|----------|
| **Full logo** (icon + wordmark) | Navbar, footer, social profile images, presentations |
| **Icon only** | Favicon, app sidebar (28×28), compact UI |
| **Wordmark only** | Avoid - always pair icon with wordmark in external comms |

### Theme Behavior

| Surface | Logo Treatment |
|---------|-----------------|
| **Light backgrounds** | Full-color emerald logo (`#059669`) |
| **Dark backgrounds** | Same full-color logo - emerald reads well on dark surfaces |
| **Photography / busy backgrounds** | Place logo on solid or glass surface with 16px+ padding |

> The logo does **not** invert to white. Do not recolor the logo to white, black, or gradients.

### Clear Space

Minimum clear space around the logo = **height of the chat-bubble icon** on all four sides.

### Minimum Sizes

| Context | Minimum Width |
|---------|---------------|
| Digital (navbar) | 100px |
| Print | 25mm |
| Favicon / app icon | 28×28px (icon only) |
| Social avatar | 400×400px (centered icon on brand background) |

### Logo Don'ts

- ❌ Do not stretch, skew, or rotate the logo
- ❌ Do not change logo colors (except approved emerald shades)
- ❌ Do not add drop shadows, outlines, or glows to the logo
- ❌ Do not place on low-contrast backgrounds (test 4.5:1 contrast for wordmark)
- ❌ Do not recreate or substitute with generic chat icons
- ❌ Do not use outdated spellings in the wordmark

---

## 4. Color System

Vendschat uses a **Material Design 3–influenced** semantic token system. Always use role-based tokens (primary, on-surface, surface-container) - never hardcode hex in components except documented accent constants.

### 4.1 Brand Core (Theme-Independent)

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **CTA Gradient Start** | `#38C995` | 56, 201, 149 | CTA gradient, accent text, featured borders |
| **CTA Gradient End** | `#0D9F6F` | 13, 159, 111 | CTA gradient end, slider accent, checkbox accent |
| **CTA Label (on gradient)** | `#E8FDF4` | 232, 253, 244 | Button text on filled CTA (light mode) |
| **On Filled Mint** | `#003824` | 0, 56, 36 | Text on bright mint surfaces, dark CTA labels |
| **Logo Emerald** | `#059669` | 5, 150, 105 | Logo, app primary buttons |
| **Logo Teal** | `#05AD7D` | 5, 173, 125 | Logo accent details |
| **Hero Glow** | `#4EDEA3` @ 10–12% opacity | - | Decorative radial blobs |
| **Featured Border** | `#38C995` | - | Pricing "Most Popular" card |

**CTA Gradient CSS:**
```css
linear-gradient(135deg, #38c995 0%, #0d9f6f 100%)
```

### 4.2 Light Mode Palette

| Role | Token | Hex |
|------|-------|-----|
| Primary | `--vc-primary` | `#006C49` |
| On Primary | `--vc-on-primary` | `#FFFFFF` |
| Primary Container | `--vc-primary-container` | `#AEF2D0` |
| On Primary Container | `--vc-on-primary-container` | `#002113` |
| Primary Fixed Dim | `--vc-primary-fixed-dim` | `#4EDEA3` |
| Secondary | `--vc-secondary` | `#4A5F8F` |
| Secondary Container | `--vc-secondary-container` | `#D8E2FF` |
| Tertiary | `--vc-tertiary` | `#7E5260` |
| Tertiary Container | `--vc-tertiary-container` | `#FFD9E2` |
| Background | `--vc-background` | `#F8FAF9` |
| On Background | `--vc-on-background` | `#181D1B` |
| Surface | `--vc-surface` | `#F8FAF9` |
| On Surface | `--vc-on-surface` | `#181D1B` |
| On Surface Variant | `--vc-on-surface-variant` | `#3F4A43` |
| Surface Container Lowest | `--vc-surface-container-lowest` | `#FFFFFF` |
| Surface Container Low | `--vc-surface-container-low` | `#F2F7F4` |
| Surface Container | `--vc-surface-container` | `#ECF2EE` |
| Surface Container High | `--vc-surface-container-high` | `#E6ECE9` |
| Surface Container Highest | `--vc-surface-container-highest` | `#E0E7E3` |
| Outline | `--vc-outline` | `#6F7A72` |
| Outline Variant | `--vc-outline-variant` | `#BFC9C2` |
| Error | `--vc-error` | `#BA1A1A` |
| Error Container | `--vc-error-container` | `#FFDAD6` |

### 4.3 Dark Mode Palette

| Role | Token | Hex |
|------|-------|-----|
| Primary | `--vc-primary` | `#4EDEA3` |
| On Primary | `--vc-on-primary` | `#003824` |
| Primary Container | `--vc-primary-container` | `#10B981` |
| On Primary Container | `--vc-on-primary-container` | `#00422B` |
| Secondary | `--vc-secondary` | `#B1C5FF` |
| Secondary Container | `--vc-secondary-container` | `#0069F7` |
| Tertiary | `--vc-tertiary` | `#E8B3FF` |
| Tertiary Container | `--vc-tertiary-container` | `#D57FFF` |
| Background | `--vc-background` | `#121415` |
| On Background | `--vc-on-background` | `#E2E2E3` |
| Surface | `--vc-surface` | `#121415` |
| On Surface | `--vc-on-surface` | `#E2E2E3` |
| On Surface Variant | `--vc-on-surface-variant` | `#BBCABF` |
| Surface Container Lowest | `--vc-surface-container-lowest` | `#0C0E0F` |
| Surface Container Low | `--vc-surface-container-low` | `#1A1C1D` |
| Surface Container | `--vc-surface-container` | `#1E2021` |
| Surface Container High | `--vc-surface-container-high` | `#282A2B` |
| Surface Container Highest | `--vc-surface-container-highest` | `#333536` |
| Outline | `--vc-outline` | `#86948A` |
| Outline Variant | `--vc-outline-variant` | `#3C4A42` |
| Error | `--vc-error` | `#FFB4AB` |
| Error Container | `--vc-error-container` | `#93000A` |

### 4.4 App-Specific Brand Scale (Product UI)

Used in `app.vendschat.com` (Subframe design system):

| Token | Light | Dark |
|-------|-------|------|
| brand-50 | `#ECFDF5` | `#1E2C26` |
| brand-100 | `#D1FAE5` | `#24342C` |
| brand-500 | `#10B981` | `#10B981` |
| brand-600 (primary button) | `#059669` | `#34D399` |
| brand-700 | `#047857` | `#34D399` |
| App background | `#FFFFFF` | `#1F1F1F` |
| App text | `#0F172A` | `#DADCE0` |
| Chat outgoing bubble | `#D9FDD3` | `#164E39` |

### 4.5 Color Usage Rules

| Context | Light Mode | Dark Mode |
|---------|------------|-----------|
| **Primary CTA button** | Emerald gradient + `#E8FDF4` text | Solid `#4EDEA3` + `#003824` text; hover `#3DCF96` |
| **Secondary CTA** | Tonal mint wash (`.cta-gradient-light`) | Translucent mint veil + `#C9F3E4` text |
| **Ghost / outline CTA** | Transparent + `border-primary/28` | Same pattern with mint hover wash |
| **Headline accent** | CTA gradient clipped to text | Same gradient text (renders bright) |
| **Body text** | `on-surface` / `on-surface-variant` | Same tokens (auto-adjust) |
| **Cards** | `surface-container-low` + `outline-variant/10` border | Same roles |
| **Glass surfaces** | `rgba(242,247,244,0.65)` + blur 20px | `rgba(40,42,43,0.6)` + blur 20px |
| **Selection highlight** | `rgba(0,108,73,0.18)` | `rgba(78,222,163,0.3)` |

### 4.6 Color Don'ts

- ❌ Do not use pure `#000000` text - use `on-surface` tokens
- ❌ Do not use yellow for warnings in product UI - use purple/violet (`#8B5CF6`)
- ❌ Do not place mint CTA buttons on primary-container backgrounds without checking contrast
- ❌ Do not mix Vendocker gold (`#FCB109`) into Vendschat product UI

---

## 5. Typography

### Primary Typeface: Onest

- **Source:** [Google Fonts - Onest](https://fonts.google.com/specimen/Onest)
- **Weights used:** 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
- **Fallback:** `sans-serif`
- **License:** Open Font License (free for all uses)

> Do not use Montserrat, Inter, or Open Sans - these are legacy loads and not part of the brand.

### Marketing Site Type Scale

| Element | Size | Weight | Tracking | Line Height |
|---------|------|--------|----------|-------------|
| Hero H1 | 36px → 48px (responsive) | 600 (Semibold) | Tight | Tight (1.1–1.2) |
| Section H2 | 30px → 36px | 700 (Bold) | Normal | Normal |
| Card H3 | 20px | 700 | Normal | Normal |
| Body (large) | 16px → 18px | 400 | Normal | Relaxed (1.6–1.75) |
| Body (default) | 14px → 16px | 400 | Normal | Relaxed |
| Eyebrow / label | 12px | 600–700 | Widest (0.1em) | Normal |
| Nav links | 15px | 500 | Tight | Normal |
| Footer links | 12px | 400 | Normal | Relaxed |
| Pricing price | 36px | 700 | Normal | Tabular nums |
| Code / mono | 14px | 400 | Normal | System monospace |

### App Type Scale (Product UI)

| Token | Size / Line Height | Weight |
|-------|-------------------|--------|
| heading-1 | 30px / 36px | 500 |
| heading-2 | 20px / 24px | 500 |
| heading-3 | 16px / 20px | 500 |
| body | 14px / 20px | 400 |
| body-bold | 14px / 20px | 500 |
| caption | 12px / 16px | 400 |
| Chat message | 13px / 16px | 400 |

### Headline Accent Treatment

Use `.cta-gradient-text` for emphasis words in headlines:

```
Need [easy, powerful business chat?]  ← gradient on accent phrase
```

Pattern: neutral setup text + gradient accent punchline. Never gradient the entire headline.

### Typography Don'ts

- ❌ Do not use more than 2 weights in a single component
- ❌ Do not use ALL CAPS for body text (eyebrows/labels only)
- ❌ Do not use serif or script fonts in any Vendschat material
- ❌ Do not set body text below 12px

---

## 6. Voice & Tone

> **All voice and tone decisions flow from The Unified Inbox Model.** If copy doesn't sound like something you'd send in a WhatsApp message to a customer you respect, rewrite it.

### Voice Principles

1. **Conversation first** - Lead with the dialogue, not the dashboard. Show what changes for the customer.
2. **Clear over clever** - Plain words beat punchy jargon. If a 14-year-old wouldn't get it, simplify.
3. **Conversational always** - Write like a helpful colleague in chat, not a press release or whitepaper.
4. **Accessible to everyone** - Grade 8–10 reading level. Short sentences. No acronyms without explanation.
5. **Follow through** - Show how teams close the loop with context, CRM, and workflows - not just a first reply.

### Copy Checklist

Before publishing any copy, verify:

- [ ] Opens with a customer moment, not a product feature
- [ ] Uses "you" / "your customers" - not "users" or "stakeholders"
- [ ] No sentence longer than 20 words (aim for 12–15)
- [ ] Jargon is defined or removed
- [ ] Passes the "would I send this in a chat?" test
- [ ] Includes a clear next step or outcome

### Tone by Context

| Context | Tone | Example |
|---------|------|---------|
| Marketing hero | Warm, direct, urgent | "Your customers are waiting on WhatsApp. Are you replying?" |
| Feature description | Clear, benefit-led | "Reply to Instagram DMs from one inbox - no more app-switching." |
| CTA buttons | Low-friction, conversational | "Book a Demo" · "Get Started" · "Try it free" |
| Error messages | Helpful, human | "That didn't send. Check your template is approved, then try again." |
| Empty states | Encouraging, brief | "No conversations yet. Connect WhatsApp to get started." |
| Social media | Insight-led, conversational | "98% of WhatsApp messages get opened. Email? 20%. The conversation already won." |
| B2C-facing templates | Friendly, personal | "Hi {name}! Your order is on its way. Track it here: {link}" |

### Writing Patterns

| Pattern | Example |
|---------|---------|
| Customer moment → Solution | "Customers DM you on Instagram. You find out three days later." → "See every message the moment it lands." |
| Show up → Answer → Follow through | "One reply turned a question into a sale" → the model in action |
| Clear stat + plain context | "98% open rates - because people actually read their messages" |
| Feature → Human outcome | "Unified Inbox - so no customer feels ignored" |

### Words We Use

conversation, inbox, unify, answer, message, chat, customer, clear, thread, context, automate, WhatsApp, Instagram, Messenger, personal, real-time, simple, help

### Words We Avoid

Revolutionary, disruptive, synergy, best-in-class, world-class, cutting-edge, leverage, utilize, stakeholders, end-users, simply, just, obviously, ecosystem (unless explaining integrations plainly)

### Naming & Competitor Terms

- Use **The Unified Inbox Model** or **Unified Inbox Model** in brand and marketing copy
- Do not use **Conversation-Led Growth**, **CLG**, **Inbox-Centered Growth**, **ICG**, or **Reply-Led Growth** - those are competitor-style frameworks, not Vendschat language

---

## 7. Imagery & Photography

### Style Direction

- **Product screenshots:** Real UI from dashboard (light/dark variants). Frame with glass effect and soft mint shadow.
- **Marketing photography:** Dark/emerald tech aesthetic, abstract digital textures, data flow visuals. Display at ≤50% opacity inside rounded containers when used as background texture.
- **Blog imagery:** Full-color editorial photography from CDN. Dark gradient overlays on hero images.
- **Illustrations:** No custom illustration system - rely on product screenshots, Material icons, and photography.

### Dashboard Screenshots

| Theme | File |
|-------|------|
| Light | `/dashboardlight.png` |
| Dark | `/dashboarddark.png` |

Always match the viewer's theme when possible.

### Image Don'ts

- ❌ Do not use stock photos of generic call centers or headset agents
- ❌ Do not use competitor UI screenshots
- ❌ Do not apply heavy filters that shift brand colors
- ❌ Do not use clip art or 3D cartoon illustrations

---

## 8. Iconography

### Marketing Site: Material Symbols Outlined

- **Source:** Google Fonts Material Symbols Outlined
- **Default:** Outlined, weight 400, opsz 24, FILL 0
- **Filled variant:** `.material-symbols-filled` - stars, checkmarks, feature glyphs
- **Colors:** `text-primary` at rest; `cta-gradient-text` on hover/active

### Product App: Feather Icons

- **Source:** `@subframe/core` (Feather icon set)
- **Size:** 16px sidebar, consistent stroke weight
- **Active state:** Heavier stroke (2.25px) + green tint background

### Channel Icons

Use official brand marks for WhatsApp, Messenger, and Instagram on tinted circular backgrounds:

| Channel | Background Tint |
|---------|----------------|
| WhatsApp | Green tones |
| Messenger | `#E5F4FF` |
| Instagram | `#FFF7E5` |

---

## 9. UI Components & Patterns

### Buttons

| Tier | Class | Use |
|------|-------|-----|
| **Primary** | `.cta-gradient` | Main conversion actions: Book a Demo, Get Started |
| **Secondary** | `.cta-gradient-light` | Supporting tier CTAs (pricing side tiers) |
| **Ghost** | `nav-book-demo` pattern | Secondary hero actions, nav demo button |
| **Neutral** | Bordered `outline-variant` | Tertiary actions, cancel |

**Button shape:** `rounded-xl` (12px) on marketing site · `rounded-md` (8px) in app
**Button hover:** `scale-[1.02]` or `scale-105` on primary CTAs

### Cards

| Type | Radius | Padding | Border |
|------|--------|---------|--------|
| Product card | `rounded-3xl` | `p-10` | `outline-variant/10` |
| Testimonial | `rounded-2xl` | `p-8` | `outline-variant/10` |
| Featured pricing | `rounded-3xl` | - | `2px solid #38C995` |
| CTA block | `rounded-[40px]` | `p-16` | glass + blur orb |
| Legal/brand sidebar | `rounded-xl` | `p-5` | `outline-variant/20` |

### Badges & Pills

- Shape: `rounded-full`
- Style: `border border-primary/30 bg-primary-container/30 text-primary text-xs uppercase tracking-widest font-semibold`

### Glass Effect

```css
.glass {
  background: rgba(242, 247, 244, 0.65);
  backdrop-filter: blur(20px);
}
.dark .glass {
  background: rgba(40, 42, 43, 0.6);
}
```

---

## 10. Layout, Spacing & Shape

### Spacing Scale

| Token | Value | Usage |
|-------|-------|-------|
| Section padding (major) | `py-32` (128px) | Hero, products, pricing |
| Section padding (medium) | `py-24` (96px) | Testimonials |
| Section padding (small) | `py-12` (48px) | Social proof strip |
| Container max-width | `max-w-7xl` (1280px) | All page content |
| Container padding | `px-8` (32px) | Horizontal gutters |
| Grid gaps | 24px / 32px / 48px / 96px | Component spacing |

### Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `--radius` | 4px | Small elements |
| `--radius-lg` | 8px | App buttons, inputs |
| `--radius-xl` | 12px | Marketing buttons |
| `rounded-2xl` | 16px | Cards, FAQ, auth |
| `rounded-3xl` | 24px | Product cards, blog |
| `rounded-full` | 9999px | Badges, avatars |
| `rounded-[40px]` | 40px | CTA sections |

### Shadows

- **Nav glass:** Layered shadow with mint tint - `rgba(0,108,73,0.09)` light / `rgba(78,222,163,0.18)` dark
- **Card hover:** `0 8px 32px -8px rgba(0,108,73,0.18)` light
- **Auth cards (app):** `shadow-lg`

---

## 11. Motion & Interaction

### Principles

- **Restrained** - Subtle scale and color transitions, no bouncing or spinning
- **Purposeful** - Motion confirms interaction, not decoration
- **Fast** - 200ms ease for hover/focus states

### Standard Transitions

| Element | Effect | Duration |
|---------|--------|----------|
| Primary CTA hover | `scale-[1.02]` | 200ms |
| Card hover | Lift + shadow increase | 200ms |
| Nav ghost hover | Mint background wash | 200ms |
| Social proof logos | Grayscale → full color | 200ms |
| Theme toggle | Color token swap | Instant (CSS vars) |

### Don'ts

- ❌ No auto-playing animations on marketing pages
- ❌ No parallax scrolling
- ❌ No flashing or blinking elements (accessibility)

---

## 12. Social Media Guidelines

### Profile Assets

| Platform | Avatar | Cover / Banner |
|----------|--------|----------------|
| **All** | Logo icon centered on `#F8FAF9` (light) or `#121415` (dark) background, 400×400px min | See dimensions below |

### Cover Dimensions

| Platform | Dimensions | Safe Zone |
|----------|-----------|-----------|
| LinkedIn Company | 1128 × 191px | Bottom-left 60% for text |
| Facebook Page | 820 × 312px | Center 60% |
| X / Twitter | 1500 × 500px | Center band |
| YouTube Banner | 2560 × 1440px (safe: 1546 × 423px) | Center |

### Post / Photo Card Dimensions

| Format | Dimensions | Aspect Ratio | Platforms |
|--------|-----------|--------------|-----------|
| Square post | 1080 × 1080px | 1:1 | Instagram feed, Facebook, LinkedIn |
| Portrait post | 1080 × 1350px | 4:5 | Instagram feed (preferred) |
| Landscape post | 1200 × 627px | 1.91:1 | LinkedIn, Facebook link preview |
| Story / Reel | 1080 × 1920px | 9:16 | Instagram, Facebook Stories |
| Carousel slide | 1080 × 1080px or 1080 × 1350px | 1:1 or 4:5 | Instagram, LinkedIn document |

### Social Card Layout Templates

#### Template A: Stat Card
```
┌─────────────────────────────┐
│  [eyebrow: THE CHALLENGE]   │  ← 12px uppercase, primary color
│                             │
│  98%                        │  ← 64px bold, gradient text
│  Open Rates                 │  ← 24px semibold, on-surface
│                             │
│  Supporting line of copy    │  ← 16px, on-surface-variant
│  in one or two lines max.   │
│                             │
│  [logo]          [CTA pill] │  ← Bottom bar
└─────────────────────────────┘
Background: surface-container-low (light) or surface-container-low (dark)
Accent: radial glow blob #4EDEA3 at 8% opacity, top-right
```

#### Template B: Quote / Testimonial Card
```
┌─────────────────────────────┐
│  ★★★★★  (gradient stars)    │
│                             │
│  "Quote text here in        │  ← 20px, on-surface, max 3 lines
│   customer's voice."        │
│                             │
│  - Name, Title, Company     │  ← 14px, on-surface-variant
│                             │
│  [logo]                     │
└─────────────────────────────┘
```

#### Template C: Feature Announcement
```
┌─────────────────────────────┐
│  [icon in primary/10 box]   │
│                             │
│  Feature Name               │  ← 28px bold
│  One-line benefit desc.     │  ← 16px, on-surface-variant
│                             │
│  ┌───────────────────────┐  │
│  │  [product screenshot]  │  │  ← Glass frame, rounded-2xl
│  └───────────────────────┘  │
│                             │
│  [logo]    vendschat.com →  │
└─────────────────────────────┘
```

### Social Typography Rules

- Use **Onest** for all text overlays
- Headline: 28–36px Bold
- Body: 16–18px Regular
- Eyebrow: 12px Semibold Uppercase Tracking-Widest
- CTA pill: 14px Semibold on `.cta-gradient` background

### Social Color Rules

| Mode | Background | Text | Accent |
|------|-----------|------|--------|
| **Light post** | `#F8FAF9` or `#FFFFFF` | `#181D1B` | CTA gradient |
| **Dark post** | `#121415` or `#1A1C1D` | `#E2E2E3` | `#4EDEA3` solid or gradient |
| **Gradient post** | CTA gradient as full background | `#E8FDF4` or `#003824` | White logo on dark emerald |

### Social Content Pillars

All social content maps to the Unified Inbox Model:

1. **Show up** - Channel tips, meeting customers where they message
2. **Answer like a person** - Conversational copy examples, B2C messaging best practices
3. **Keep context in the thread** - CRM, history, and team handoff stories
4. **Automate the repeat work** - AI + automation without losing the human touch
5. **Proof & trust** - Real metrics (98% open rates), testimonials, case study snippets

### Hashtags

Primary: `#Vendschat` · `#UnifiedInbox` · `#WhatsAppBusiness` · `#CustomerMessaging`
Use 3–5 hashtags on Instagram, 2–3 on LinkedIn. Avoid hashtag stuffing.

### Official Social Profiles

| Platform | URL |
|----------|-----|
| Facebook | https://www.facebook.com/people/Vendschat/61588712888283/ |
| Instagram | https://instagram.com/vendschat |
| LinkedIn | https://www.linkedin.com/company/vendschat |
| YouTube | https://www.youtube.com/@vendschat |

---

## 13. Co-Branding & Partnerships

### Vendocker Attribution

- Use "From Vendocker" mark (`light-fromvd.svg` / `dark-fromvd.svg`) in footer
- Text: "© {year} Vendocker LLC. All rights reserved."
- Link: `https://vendocker.com`

### Integration Partner Logos

- Show partner logos (Zapier, n8n, HubSpot) at equal or smaller size than Vendschat logo
- Do not alter partner brand colors
- Maintain clear space between Vendschat and partner logos

### Co-Branded Materials

- Vendschat logo on left, partner logo on right, separated by a vertical `outline-variant` line
- Use neutral `surface-container` background for co-branded cards

---

## 14. Accessibility

### Contrast Requirements

- **Normal text:** Minimum 4.5:1 contrast ratio (WCAG AA)
- **Large text (≥18px bold / ≥24px):** Minimum 3:1
- **Interactive elements:** 3:1 against adjacent colors

### Verified Pairings

| Foreground | Background | Ratio | Pass |
|-----------|-----------|-------|------|
| `#181D1B` (on-surface) | `#F8FAF9` (background) | ~14:1 | ✅ AA |
| `#E2E2E3` (on-surface dark) | `#121415` (background dark) | ~12:1 | ✅ AA |
| `#E8FDF4` (CTA label) | `#0D9F6F` (CTA gradient end) | ~4.6:1 | ✅ AA |
| `#003824` (on-filled-mint) | `#4EDEA3` (primary dark) | ~7:1 | ✅ AA |

### Accessibility Practices

- Include `SkipToContent` link on all pages
- All images require descriptive `alt` text
- Icons paired with text labels in navigation
- Focus states: `focus-visible` with primary outline
- Theme support: light, dark, and system preference
- Language: 8-locale i18n on marketing site

---

## 15. Asset Library

| Asset | Path / URL | Format |
|-------|-----------|--------|
| Logo (SVG) | `/vendschat.svg` | SVG |
| Logo (CDN) | `https://res.cloudinary.com/subframe/image/upload/v1764226058/uploads/27371/gwuwi5ivshj6ruwlsdgv.svg` | SVG |
| Favicon | `/favicon/` (ico, svg, png) | Multi |
| Dashboard (light) | `/dashboardlight.png` | PNG |
| Dashboard (dark) | `/dashboarddark.png` | PNG |
| Vendocker mark (light) | `/light-fromvd.svg` | SVG |
| Vendocker mark (dark) | `/dark-fromvd.svg` | SVG |
| Brand guidelines (this file) | `/docs/brand-guidelines.md` | Markdown |
| Brand guidelines (web) | `https://vendschat.com/brand` | HTML |
| Logo PNG pack | `/brand/logo/` | PNG (200w–2000w, square, avatars) |
| Logo asset manifest | `/brand/logo/manifest.json` | JSON |
| Social card HTML templates | `/brand/social-templates/` | HTML |
| Figma social card spec | `/brand/figma-social-cards-spec.md` | Markdown |
| Privacy policy (markdown) | `/docs/privacy-policy.md` | Markdown |
| Terms of service (markdown) | `/docs/terms-of-service.md` | Markdown |

---

## Machine-Readable Brand Data

```json
{
  "@context": "https://schema.org",
  "@type": "Brand",
  "name": "Vendschat",
  "alternateName": ["Vends Chat", "VendorsChat"],
  "parentOrganization": {
    "@type": "Organization",
    "name": "Vendocker LLC",
    "url": "https://vendocker.com"
  },
  "url": "https://vendschat.com",
  "logo": "https://vendschat.com/vendschat.svg",
  "description": "Customer messaging platform for WhatsApp, Instagram, and Messenger.",
  "slogan": "One inbox. Every customer.",
  "messagingFramework": {
    "name": "The Unified Inbox Model",
    "abbreviation": "UIM",
    "tagline": "One inbox. Every customer.",
    "supportingLine": "Clear, conversational, and accessible - the way customers actually want to be spoken to.",
    "operatingSteps": ["Show up", "Answer", "Follow through"],
    "principles": [
      "Unify every channel",
      "Answer like a person",
      "Keep context in the thread",
      "Automate the repeat work"
    ],
    "communicationStyle": ["clear", "conversational", "accessible", "B2C"],
    "readingLevel": "grade 8-10"
  },
  "sameAs": [
    "https://www.facebook.com/people/Vendschat/61588712888283/",
    "https://instagram.com/vendschat",
    "https://www.linkedin.com/company/vendschat",
    "https://www.youtube.com/@vendschat"
  ],
  "brandColors": {
    "primary": { "light": "#006C49", "dark": "#4EDEA3" },
    "ctaGradient": { "start": "#38C995", "end": "#0D9F6F" },
    "logoEmerald": "#059669",
    "logoTeal": "#05AD7D",
    "background": { "light": "#F8FAF9", "dark": "#121415" },
    "onSurface": { "light": "#181D1B", "dark": "#E2E2E3" },
    "ctaLabel": { "light": "#E8FDF4", "dark": "#003824" }
  },
  "typography": {
    "primaryFont": "Onest",
    "fontSource": "https://fonts.google.com/specimen/Onest",
    "weights": [400, 500, 600, 700],
    "fallback": "sans-serif"
  },
  "designSystem": {
    "marketing": { "framework": "Tailwind CSS v4", "tokens": "CSS custom properties (--vc-*)", "icons": "Material Symbols Outlined" },
    "application": { "framework": "Subframe + Tailwind CSS v4", "icons": "Feather (via @subframe/core)" }
  },
  "themes": ["light", "dark", "system"],
  "socialMedia": {
    "postDimensions": {
      "square": "1080x1080",
      "portrait": "1080x1350",
      "landscape": "1200x627",
      "story": "1080x1920"
    },
    "profileAvatar": "400x400"
  },
  "voice": {
    "framework": "The Unified Inbox Model",
    "tone": ["conversational", "clear", "accessible", "human-first", "growth-minded"],
    "avoidWords": ["revolutionary", "disruptive", "synergy", "best-in-class", "world-class", "leverage", "utilize", "stakeholders", "end-users", "conversation-led growth", "CLG", "inbox-centered growth", "ICG", "reply-led growth", "capture", "convert", "retain"],
    "preferredWords": ["conversation", "inbox", "unify", "answer", "message", "chat", "customer", "clear", "thread", "context", "automate", "help", "simple"]
  },
  "ctas": {
    "primary": "Book a Demo",
    "secondary": "Get Started",
    "signup": "Start your 7-day free trial. No credit card required."
  }
}
```

---

*© 2026 Vendocker LLC. All rights reserved. These guidelines are maintained by the Vendschat brand team. For questions: brand@vendschat.com*