# Overlay System Rules

The overlay system is the product's visual IP. It is what separates Hey Borton / Pulse from every other B2B SaaS ad in the feed. Treat it like an operating manual, not decoration.

## The premise

Overlays are **diegetic**. They show Pulse working in the subject's world. Not captions. Not tooltips. Not marketing copy.

The viewer should read them as data the system is surfacing, not data being sold to them.

## The seven ingredients

### 1. Signal chips
Small pill-shaped labels in IBM Plex Mono.
- Font: IBM Plex Mono 500, 10-11px, 0.08em tracking, uppercase
- Fill: `rgba(31, 31, 40, 0.85)` over photography
- Border: 1px `rgba(226, 107, 87, 0.3)` (coral at 30% opacity)
- Padding: 6-10px horizontal, 4-6px vertical
- Content: specific, credible, short
  - Good: `AUTHORITY`, `1:1 NOTES`, `KEY CONTEXT`, `BOARD TIMING`, `PRICING PUSHBACK · 3x`
  - Bad: `INSIGHTS`, `DATA`, `ANALYTICS`, `PRODUCTIVITY SCORE`

### 2. Pulse halo rings
Concentric coral circles radiating from a subject's temple or a focal point.
- Stroke: 1px
- Opacity ramp: 0.2, 0.35, 0.55, 0.8 from outer to inner
- Use only on one subject per asset
- Never cross the halo onto copy negative space

### 3. Coral hairlines
Thin lines connecting chips to anchor points on the subject.
- Stroke: 1px
- Opacity: 0.35-0.5
- Origin: edge of chip, nearest side
- Termination: subject's temple, hand, notebook, or product surface
- Never cross copy

### 4. Room brief micro-cards
Rectangular card showing a mock Pulse room brief.
- Background: `rgba(31, 31, 40, 0.85)`
- Border: 1px `rgba(226, 107, 87, 0.25)`
- Header row in `--coral` at 10px tracking 0.14em uppercase: `PULSE · ROOM BRIEF`
- Body rows in IBM Plex Mono 11px, slate color
- Max 3-4 rows per card
- Bullet glyph: `▸` (U+25B8)

### 5. Trust micro-line
A single line that earns the overlay system. Anchors trust.
- Font: Inter 400, 13-15px, `--slate`
- Content examples:
  - `Private by design`
  - `Never trained on your data`
  - `Your signal stays yours`
- Accompanied by small lock or shield glyph, coral

### 6. Specific and credible data points
Every data value must be specific, credible, and short.
- `Thu 2pm` (not "upcoming")
- `Signals woven · 5` (not "multiple inputs")
- `w10 · rising signal` (not "trending")
- `pricing pushback · 3x` (not "recurring concern")

### 7. Coral single emphasis
Exactly one coral word or element per asset in the overlay layer.
Usually the Pulse mark, the CTA, or a key chip header.

## Placement rules

1. Overlays hug the photo edge, never enter copy negative space
2. Maximum 4 overlay elements per card
3. Overlays sit in the right 50% or the bottom 40% of a portrait asset
4. Room brief cards sit bottom-right or mid-right, never top
5. Chips can scatter around head/shoulders of subject, connected by hairlines
6. Halo rings anchor to one temple or focal point

## Typography hierarchy

| Element | Font | Size | Weight | Color |
|---------|------|------|--------|-------|
| Chip label | IBM Plex Mono | 10-11px | 500 | `--shell` on dark fill |
| Chip value | IBM Plex Mono | 10-11px | 400 | `--shell` on dark fill |
| Brief header | Inter | 10px | 600 | `--coral` |
| Brief row | IBM Plex Mono | 11px | 400 | `--shell` at 82% |
| Trust line | Inter | 13-15px | 400 | `--slate` |

## Motion rules (for future video/animated ads)

- Halo pulses every 1.2s, not faster
- Chips fade in sequentially over 0.8s total, not simultaneously
- Hairlines draw from chip to subject, not the reverse
- No rotation, no scale-in, no bouncy easing
- All motion uses ease-out, duration 300-600ms

## Do not

- Do not invent new overlay ingredients without brand lead approval
- Do not stack more than 4 elements
- Do not use emoji in chips
- Do not use placeholder text that sounds AI-written ("Generating insights...")
- Do not animate decoratively
- Do not use chips to restate the headline

## The purpose check

An overlay element is valid if and only if it answers: **"What signal is Pulse actually reading here?"**

If you cannot answer that in one sentence, the element is decoration. Cut it.