# Vendschat Social Card - Figma Recreation Spec

> Use this document to recreate social card templates in Figma. HTML reference exports live at `/brand/social-templates/`. Open in browser at full size and export as PNG, or rebuild in Figma using the specs below.

## Global Settings

| Setting | Value |
|---------|-------|
| Font | Onest (Google Fonts) |
| Logo | `/vendschat.svg` or `/brand/logo/vendschat-logo-400w.png` |
| Grid | 8px base unit |
| Export | PNG @1x for social, PNG @2x for print |

---

## Template A: Stat Card

**Frame:** 1080 × 1350 (4:5 portrait) - Instagram feed preferred

### Light Mode

| Layer | Property | Value |
|-------|----------|-------|
| Background | Fill | `#F2F7F4` |
| Glow blob | Ellipse 400×400, position top-right | `#4EDEA3` @ 12% opacity, blur 80 |
| Eyebrow | Onest 24px Semibold, tracking 15%, uppercase | `#006C49` |
| Stat number | Onest 128px Bold | Gradient `#38C995` → `#0D9F6F` |
| Stat label | Onest 48px Semibold | `#181D1B` |
| Body | Onest 32px Regular, line-height 150% | `#3F4A43` |
| Logo | Height 48px, bottom-left | Full-color emerald |
| CTA pill | Onest 24px Semibold, padding 16×32, radius full | Gradient bg, text `#E8FDF4` |

**Padding:** 96px top/sides, 80px bottom safe zone

### Dark Mode

Same layout. Replace colors:

| Layer | Value |
|-------|-------|
| Background | `#1A1C1D` |
| Glow | `#4EDEA3` @ 8% |
| Eyebrow | `#4EDEA3` |
| Stat | `#4EDEA3` solid |
| Stat label | `#E2E2E3` |
| Body | `#BBCABF` |
| CTA pill | Bg `#4EDEA3`, text `#003824` |

---

## Template B: Quote / Testimonial Card

**Frame:** 1080 × 1080 (1:1 square)

| Layer | Property | Value |
|-------|----------|-------|
| Background | Fill | `#FFFFFF` |
| Border | 2px | `#BFC9C2` |
| Stars | 40px, gradient text | `#38C995` → `#0D9F6F` |
| Quote | Onest 40px Semibold, line-height 140% | `#181D1B` |
| Attribution | Onest 28px Regular | `#3F4A43` |
| Logo | Height 44px, bottom | Full-color |

**Padding:** 96px all sides

---

## Template C: Feature Announcement

**Frame:** 1080 × 1350 (4:5 portrait)

| Layer | Property | Value |
|-------|----------|-------|
| Background | Fill | `#F8FAF9` |
| Icon box | 80×80, radius 20px | `#006C49` @ 10% |
| Title | Onest 56px Bold | `#181D1B` |
| Description | Onest 32px Regular | `#3F4A43` |
| Screenshot frame | Radius 24px, glass effect | `rgba(242,247,244,0.65)` + blur 20 |
| Screenshot | `/dashboardlight.png` or `/dashboarddark.png` | 92% width, radius 12px |
| Footer link | Onest 28px Semibold | `#006C49` |

---

## Platform Export Presets

Create Figma export presets for each:

| Name | Size | Use |
|------|------|-----|
| IG Feed Portrait | 1080×1350 | Instagram, Facebook |
| IG Feed Square | 1080×1080 | LinkedIn, Facebook |
| LinkedIn Landscape | 1200×627 | Link previews |
| Story | 1080×1920 | Stories, Reels |

### Story Variant

Extend Stat Card frame to 1080×1920. Keep content in center 1080×1350 safe zone. Top/bottom 285px are platform UI overlay zones.

---

## Figma Component Structure

```
📁 Vendschat Social Cards
├── 🎨 Colors (styles)
│   ├── Brand/Primary Light #006C49
│   ├── Brand/Primary Dark #4EDEA3
│   ├── Brand/CTA Gradient
│   ├── Surface/Background Light #F8FAF9
│   └── Surface/Background Dark #121415
├── 🔤 Text (styles)
│   ├── Eyebrow/12 Semibold Uppercase
│   ├── Headline/48 Bold
│   ├── Stat/128 Bold Gradient
│   └── Body/32 Regular
├── 🧩 Components
│   ├── Logo/Full
│   ├── CTA/Pill Primary
│   ├── CTA/Pill Dark
│   └── Card/Glass Frame
└── 📐 Templates
    ├── Stat Card Light 1080×1350
    ├── Stat Card Dark 1080×1350
    ├── Quote Card Light 1080×1080
    └── Feature Card Light 1080×1350
```

---

## Auto Layout Recommendations

- **Stat Card:** Vertical auto layout, space-between, fill container height
- **Footer row:** Horizontal auto layout, space-between, align center
- **CTA pill:** Hug contents, padding 16×32

---

*Reference HTML templates: `/brand/social-templates/` · Brand guidelines: `/brand`*