# iClosed brand guidelines

> The complete brand system for iClosed marketing and social content — colors, typography,
> CSS recipes, logo rules, voice, formats, and the approved product-UI component catalog.
> Generated from the same source code that renders /brand-guidelines. Last updated August 10, 2026.
> This file is for AI tools and agents; humans should read /brand-guidelines.

URLs in this file are root-relative to this file's origin.

## The five rules

1. **Never redraw product UI** — pull it from the social media library at /social-media, at real pixels.
2. **Copy is verbatim** — headlines and stats word-for-word from the website — no paraphrasing, no invented numbers.
3. **Blue is the only accent** — #1C64F2 on light grounds, #76A9FA on navy. Greens/reds/ambers belong to product-UI states.
4. **CTAs are square and dark** — sentence case, verb first — e.g. “Book a demo”.
5. **Poppins for headlines and stats, Inter for everything else** — nothing substituted, loaded from Google Fonts.

## Logo

- Variants: dark wordmark (light surfaces), white wordmark (navy/dark surfaces only), icon (avatars and tight spaces).
- Files (each available as .svg and .png under /assets/logos/): iclosed-logo-v2-dark · iclosed-logo-v2-white · iclosed-icon-v2-dark · iclosed-icon-v2-white — or the kit at /brand/iclosed-brand-kit.zip. Never screenshot or trace the logo.
- Clear space: the height of the icon mark on all four sides. Nothing enters it.
- Minimum sizes: wordmark 120px / 30mm wide; icon 24px / 8mm.
- Background contrast behind the mark: at least 4.5:1. Default to white or deep-navy grounds.
- Never: stretch or condense; recolor; add shadows/glows/effects; rotate; place on busy or low-contrast grounds; use the dark wordmark on dark grounds.
- Brand name in copy: always "iClosed" (never "ICLOSED", "IClosed", or "iclosed"). Approved phrases: "on iClosed", "Powered by iClosed". Never merge "iClosed" or fragments of it into another name.

## Color

Colors are roles, not decoration. Accent blue is the ONLY decorative accent; semantic colors
appear exclusively inside product UI.

### Text colors
What type is set in — nothing else is approved for copy.
| Role | Value | Usage |
|---|---|---|
| Ink | `#111928` | Headlines and primary text on light surfaces. |
| Secondary | `#6B7280` | Supporting copy and captions. |
| Muted | `#9CA3AF` | Timestamps and metadata only — fails AA as body text. |
| White | `#FFFFFF` | Primary text on navy grounds and dark CTAs. |

### Background colors
The grounds compositions sit on. The paper-grid and navy-glow recipes live in Backgrounds.
| Role | Value | Usage |
|---|---|---|
| White | `#FFFFFF` | The primary ground. Most compositions start here. |
| Field | `#F9FAFB` | Cloud fields and section grounds. |
| Deep navy | `#020418` | Dark sections, stat posts, and story CTA bands. |

### Border colors
Strokes and dividers.
| Role | Value | Usage |
|---|---|---|
| Border | `#E5E7EB` | The default stroke for cards and tiles. |
| Border strong | `#D1D5DB` | Input borders inside product UI. |
| Hairline | `rgba(0,0,0,0.05)` | Dividers — 5% black, used once, never stacked. |

### Accent
The only decorative color in the system.
| Role | Value | Usage |
|---|---|---|
| Accent blue | `#1C64F2` | Links, accent spans, and highlights on light grounds. |
| Accent on navy | `#76A9FA` | The accent when the ground is navy — #1C64F2 fails there. |

### Semantic — product UI only
| State | Foreground | Background | Usage |
|---|---|---|---|
| Qualified | `#03543F` | `#BCF0DA` | Qualify chips and badges inside product UI. |
| Disqualified | `#E02424` | `#FBD5D5` | Disqualify chips and badges inside product UI. |
| Pending | `#FACA15` | `#FDFDEA` | Did-not-book / waiting states inside product UI. |

### Measured contrast (WCAG 2.x — AA: 4.5:1 body text, 3:1 for text ≥24px)
| Text | Background | Ratio | Verdict |
|---|---|---|---|
| Ink #111928 | White | 17.6:1 | Pass |
| White | Deep navy #020418 | 20.3:1 | Pass |
| Accent on navy #76A9FA | Deep navy #020418 | 8.5:1 | Pass |
| Accent #1C64F2 | White | 5.1:1 | Pass |
| White | Accent #1C64F2 | 5.1:1 | Pass |
| Text secondary #6B7280 | White | 4.8:1 | Pass |
| Accent #1C64F2 | Deep navy #020418 | 4.0:1 | Pass only ≥24px |
| Text muted #9CA3AF | White | 2.5:1 | FAIL — banned for text |

Other color rules: hairlines are 5% black used once (never stacked); the only permitted
gradient is the navy glow recipe below; no multi-color gradients.

## Typography

Typefaces (load from Google Fonts — nothing substituted, ever):
- **Poppins** — Headlines & stats; weights: 500 headlines · 600 stats. https://fonts.google.com/specimen/Poppins
- **Inter** — Body, labels & UI; weights: 400 body · 500 labels & buttons. https://fonts.google.com/specimen/Inter
- Mono (JetBrains Mono / Fragment Mono): numbers and code inside product UI only.
- Embed: https://fonts.googleapis.com/css2?family=Poppins:wght@400..700&family=Inter:wght@400..700&display=swap

### Web type scale (desktop / mobile)
Use these exact styles for website work — pages, embeds, landing sections.

| Style | Face | Weight | Desktop | Mobile | Line height | Tracking | Notes |
|---|---|---|---|---|---|---|---|
| H1 · page & section headlines | Poppins | 500 | 40px | 28px | 1.2 | -1% | — |
| H2 · sub-section | Poppins | 500 | 32px | 24px | 1.25 | -1% | — |
| H3 · card title | Poppins | 500 | 28px | 22px | 1.3 | 0 | — |
| Stat | Poppins | 600 | 64px | 44px | 1.05 | 0 | 130–160px on 1080-wide social boards |
| Body large · lead paragraphs | Inter | 400 | 18px | 16px | 1.6 | 0 | — |
| Body | Inter | 400 | 16px | 15px | 1.55 | 0 | — |
| Eyebrow | Inter | 500 | 13px | 12px | 1.4 | +6% | uppercase |
| Caption | Inter | 400 | 13px | 13px | 1.5 | 0 | color #6B7280 |
| Button label | Inter | 500 | 15px | 15px | 1.2 | 0 | — |

- Headlines are sentence case always; the blue accent span goes on the payoff words only.
- Stats are set huge (130–160px on a 1080-wide social board), Poppins 600, with a short Inter label underneath.

## Backgrounds

The approved background library (source of truth in Figma: https://www.figma.com/design/WjBBr3qxDMXFS0xi8mhPAy/iClosed-Marketing-Design-Foundation?node-id=56-502).
Use each one as supplied — do not alter gradients, colors, grids, or textures.

| Name | Native size | Value | JPG |
|---|---|---|---|
| Light Fade | 720×448 | image: /assets/backgrounds/light-fade.png | /assets/backgrounds/light-fade.jpg |
| Subtle Light Fade | 720×448 | image: /assets/backgrounds/subtle-light-fade.png | /assets/backgrounds/subtle-light-fade.jpg |
| Light Grid | 720×400 | image: /assets/backgrounds/light-grid.svg | /assets/backgrounds/light-grid.jpg |
| Dark Gradient | 720×400 | `linear-gradient(23.27deg, #171717 4.12%, #001E6D 122.11%)` | /assets/backgrounds/dark-gradient.jpg |
| Blue Abstract | 720×400 | image: /assets/backgrounds/blue-abstract.png | /assets/backgrounds/blue-abstract.jpg |
| Dark Diagonal | 661×543 | image: /assets/backgrounds/dark-diagonal.png | /assets/backgrounds/dark-diagonal.jpg |

Template recipes used by the social boards:

```css
/* paper — the default, UI-led posts */
background: repeating-linear-gradient(0deg, #f2f2f4 0, #f2f2f4 1px, transparent 1px, transparent 120px),repeating-linear-gradient(90deg, #f2f2f4 0, #f2f2f4 1px, transparent 1px, transparent 120px),#ffffff;

/* cloud — content sits in a white 1px #E5E7EB bordered card on this field */
background: #F9FAFB;

/* navy — stat posts and CTA bands; white Poppins headline, #76A9FA accent */
background: radial-gradient(90% 60% at 50% 0%, rgba(28,100,242,0.16) 0%, rgba(28,100,242,0) 62%), #020418;
```

## Buttons (CTAs)

Square corners, always. One CTA per composition. Sentence case, verb first ("Book a demo").

```css
/* light surfaces */
background: #020418; color: #fff; border-radius: 0;
box-shadow: inset 0 1px 4px rgba(255,255,255,0.24), inset 0 4px 16px rgba(255,255,255,0.2);

/* dark surfaces — inverted, no shine */
background: #ffffff; color: #020418; border-radius: 0;
```

## Product UI — the component catalog

NEVER redraw, sketch, fabricate, or approximate iClosed product UI. Use only the approved
elements below, from the social media library. Keep UI upright: no perspective tilts, no fake
device frames, no added shadows. Scale at least 2× in a 1080-wide post (native UI type is 8–12px).
Crop along element boundaries, never through the middle of a control.

| Feature | Element | Native size | Where to get it |
|---|---|---|---|
| Scheduler | Scheduler stage | 660×484 px | /social-media?board=scheduler-elements |
| Scheduler | Scheduler card | 569×332 px | /social-media?board=scheduler-elements |
| Scheduler | Scheduler card — empty form | 569×332 px | /social-media?board=scheduler-elements |
| Scheduler | Scheduler card — number typing | 569×332 px | /social-media?board=scheduler-elements |
| Scheduler | Step header | 569×31 px | /social-media?board=scheduler-elements |
| Scheduler | Form pane | 284×301 px | /social-media?board=scheduler-elements |
| Scheduler | Calendar pane | 284×301 px | /social-media?board=scheduler-elements |
| Scheduler | Phone field — captured | 248×32 px | /social-media?board=scheduler-elements |
| Scheduler | Month grid | 248×284 px | /social-media?board=scheduler-elements |
| Scheduler | Scheduler / Inbox tab pair | 269×32 px | /social-media?board=scheduler-elements |
| Scheduler | Lead captured pill | 225×50 px | /social-media?board=scheduler-elements |
| Qualify & Route | Disqualify flow | 384×260 px | /social-media?board=qualify-elements |
| Qualify & Route | Disqualify flow (transparent) | 384×260 px | /social-media?board=qualify-elements |
| Qualify & Route | Conditional routing | 384×260 px | /social-media?board=qualify-elements |
| Qualify & Route | +21% conversions chip | 108×69 px | /social-media?board=qualify-elements |
| Qualify & Route | Scheduler qualify card | 149×201 px | /social-media?board=qualify-elements |
| Qualify & Route | Outcome chip stack | 150×210 px | /social-media?board=qualify-elements |
| Qualify & Route | Closer assigned card | 120×70 px | /social-media?board=qualify-elements |
| Qualify & Route | Storyboard — lead qualified | 608×420 px | /social-media?board=qualify-elements |
| Qualify & Route | Storyboard — lead disqualified | 608×420 px | /social-media?board=qualify-elements |
| Qualify & Route | Lead credit score | 520×372 px | /social-media?board=qualify-elements |
| Qualify & Route | Qualify chat panel | 519×420 px | /social-media?board=qualify-elements |
| Unified Inbox | Full inbox app window | 1096×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Inbox canvas | 1238×680 px | /social-media?board=inbox-elements |
| Unified Inbox | Inbox — line smart-view icons | 1096×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Inbox — no smart-views column | 1096×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Inbox — chrome stripped | 1096×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Icon rail | 41×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Smart-views sidebar | 169×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Conversation-list column | 235×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Chat thread | 456×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Deal sidebar | 196×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Reply bar | 430×44 px | /social-media?board=inbox-elements |
| Unified Inbox | Conversation-list snippet | 235×290 px | /social-media?board=inbox-elements |
| Unified Inbox | Contact card | 196×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Contact card — gray journey | 196×607 px | /social-media?board=inbox-elements |
| Unified Inbox | Floating inbox | 660×484 px | /social-media?board=inbox-elements |
| Unified Inbox | Compact inbox window | 772×320 px | /social-media?board=inbox-elements |
| Lead Recovery | Scheduler + floating inbox | 660×480 px | /social-media?board=recover-elements |
| Lead Recovery | Storyboard — lead captured | 608×420 px | /social-media?board=recover-elements |
| Lead Recovery | Storyboard — did not book | 608×420 px | /social-media?board=recover-elements |
| Lead Recovery | Storyboard — auto engaged | 608×420 px | /social-media?board=recover-elements |
| Lead Recovery | Storyboard — call booked | 608×420 px | /social-media?board=recover-elements |
| Lead Recovery | Live pipeline counter card | 640×303 px | /social-media?board=recover-elements |
| Revenue Analytics | Full analytics dashboard | 1096×607 px | /social-media?board=analytics-elements |
| Revenue Analytics | KPI row | 1003×102 px | /social-media?board=analytics-elements |
| Revenue Analytics | Recovered-pipeline KPI card | 322×102 px | /social-media?board=analytics-elements |
| Revenue Analytics | Scheduling funnel card | 493×232 px | /social-media?board=analytics-elements |
| Revenue Analytics | Calls-created bar chart | 493×260 px | /social-media?board=analytics-elements |
| Revenue Analytics | Closing · Engagement · Show up | 493×130 px | /social-media?board=analytics-elements |
| Revenue Analytics | Mini revenue dashboard | 588×260 px | /social-media?board=analytics-elements |
| Revenue Analytics | Deal tracker window | 540×236 px | /social-media?board=analytics-elements |
| Revenue Analytics | Deal tracker card | 585×260 px | /social-media?board=analytics-elements |
| Workflows | Three-step flow | 420×470 px | /social-media?board=workflows-elements |
| Workflows | Branching flow | 800×430 px | /social-media?board=workflows-elements |
| Workflows | Trigger to three channels | 900×400 px | /social-media?board=workflows-elements |
| Workflows | No-show recovery sequence | 420×610 px | /social-media?board=workflows-elements |
| Workflows | Workflow node | 420×180 px | /social-media?board=workflows-elements |
| Workflows | Node with a callout | 660×200 px | /social-media?board=workflows-elements |
| Workflows | SMS and email workflow | 236×202 px | /social-media?board=workflows-elements |
| Workflows | Workflow tile | 384×260 px | /social-media?board=workflows-elements |
| Product tabs | Product tabs — Recover | 1238×736 px | /social-media?board=tabs-elements |
| Product tabs | Product tabs — Qualify and Route | 1238×736 px | /social-media?board=tabs-elements |
| Product tabs | Product tabs — Unified Inbox | 1238×736 px | /social-media?board=tabs-elements |
| Product tabs | Product tabs — Analytics | 1238×736 px | /social-media?board=tabs-elements |
| Product tabs | Product tab bar | 1238×56 px | /social-media?board=tabs-elements |

The library also holds 32 finished post boards (4 features × 4 sizes × 2 layouts) at
/social-media — duplicating an approved board is always the fastest path.

## Voice & copy

- Product copy is verbatim: headlines and stats come from the iClosed website word-for-word. Never paraphrase, never invent numbers.
- Headline pattern: plain statement in ink; payoff words in the accent span. Sentence case — Title Case and all-caps read as shouting.
- Stats: huge Poppins 600 numeral + short Inter label ("Live Pipeline recovered").
- CTAs are verbs: "Book a demo". Never "Click here". No exclamation marks on CTAs.
- Approved verbatim headlines include: "Disqualify automatically, save +100 hours" · "Conditional routing, close more deals" · "Your whole team, closing in one inbox." · "Monetize the leads that never booked" · "The money's already in your funnel. Plug in. Take it back." · "Your CMO & sales manager won't believe it!"

## Social formats

| Ratio | Size | Placements |
|---|---|---|
| 1:1 | 1080×1080 | Universal feed · Meta ads |
| 4:5 | 1080×1350 | Best mobile-feed default |
| 9:16 | 1080×1920 | Stories · Reels · Shorts |
| 16:9 | 1920×1080 | X · LinkedIn · YouTube |
| 16:9 | 1280×720 | YouTube thumbnail — the platform's own upload spec |

Story format (9:16): keep text and logo inside the middle safe area — platforms overlay
roughly the top and bottom 250px.

### Post safe areas

Every placement states what its platform paints over or throws away. Product-UI shape and ground
texture may enter an overlay region; a headline, a stat, a face or the wordmark may not. A crop
region is pixels that cease to exist on some surface — nothing may be there at all.

| Placement | Read at | Safe box | Platform takes |
|---|---|---|---|
| linkedin/feed-square | 360px · mobile feed | 968×968 at 56,56 | nothing |
| linkedin/feed-portrait | 360px · mobile feed | 968×968 at 56,191 | Desktop trim keeps 1080×1080 at 0,135 |
| linkedin/link | 280px · link card | 563×499 at 318,64 | Organic thumbnail keeps 627×627 at 286,0 |
| instagram/feed | 360px · mobile feed | 968×1238 at 56,56 | Profile grid keeps 1013×1350 at 34,0 |
| instagram/story | 220px · story rail | 968×1420 at 56,250 | Top chrome 1080×250 at 0,0 · Bottom chrome 1080×250 at 0,1670 · Reels rail 200×770 at 880,900 |
| instagram/square | 360px · mobile feed | 810×968 at 135,56 | Profile grid keeps 810×1080 at 135,0 |
| x/square | 360px · mobile feed | 968×608 at 56,236 | Timeline crop keeps 1080×608 at 0,236 |
| x/landscape | 320px · mobile timeline | 1728×968 at 96,56 | nothing |
| meta/square | 360px · mobile feed | 880×880 at 100,100 | nothing |
| meta/portrait | 360px · mobile feed | 880×772 at 100,250 | nothing |
| meta/story | 220px · story rail | 950×980 at 65,270 | Top chrome 1080×270 at 0,0 · Bottom chrome 1080×670 at 0,1250 |
| youtube/endcard | 320px · mobile timeline | 1104×968 at 96,56 | Video elements 480×270 at 1360,180 · Subscribe element 300×300 at 980,390 · Player controls 1920×120 at 0,960 |

### Post copy budget

Poppins runs ~0.51em per character, so the column width sets the line length. Enforce it in the
copy — the renderer only steps the size down to the floor.

| Layout | Column | Size | Budget |
|---|---|---|---|
| square · headline | 968px | 76px | 24 chars/line, up to 3 lines |
| portrait · headline | 968px | 80px | 23 chars/line, up to 3 lines |
| story · headline | 968px | 84px | 22 chars/line, up to 3 lines |
| landscape · split copy column | 672px | 88px | 14 chars/line, up to 4 lines |
| landscape · full-width headline | 1400px | 88px | 31 chars/line, up to 2 lines |
| link · headline | 563px | 56px | 19 chars/line, up to 3 lines |

### Post rules

- Fit the product UI to its band — never hand-place it so an edge amputates a control.
- A screenshot needs a plate: a radius, a clip and either a 1px ring on light grounds or a drop shadow on navy. Without one it reads as pasted.
- A chart with an axis may never bleed off an edge — its labels are the content.
- The proof element may not repeat the stat's number or its label. Say it once.
- Keep glyphs out of the platform's own chrome: Instagram and Meta stories paint over the top and bottom, X shows only a 16:9 window of a square.
- Whole-app screenshots are texture, not content — at feed size their type is 3px. Crop to one pane.

## YouTube thumbnails

1280×720 (16:9). YouTube's upload spec — 1280×720, 16:9, under 2MB, JPG/PNG. Authored at 1280 but read at ~360px in the mobile feed and ~210px in the sidebar, so every size on the board divides by ~6.
Templates and a fill-in-the-slots editor live in the studio at /studio/youtube; ready PNGs are
written to /assets/studio/ by `npm run capture:studio`.

### Rules

- Six words or fewer in the headline — it is read in under a second at 210px wide.
- Never repeat the video title verbatim; the thumbnail adds a claim the title doesn't make.
- Product UI is pulled from the library and scaled at least 2× — never redrawn, never tilted, never in a fake device frame.
- Keep the bottom-right 256×112 clear: YouTube paints the duration chip there.
- Photos need a 1000px+ source. A face is cropped to the eyeline, never centred on the chin.
- One accent span per headline, on the payoff words only — #76A9FA on navy, #1C64F2 on paper.
- No outlines, drop shadows, arrows, or red circles. The contrast comes from the ground, not from decoration.

### Grounds

| Ground | Slug | Usage |
|---|---|---|
| Navy | `navy` | #020418 with the accent glow — the default, and the one that separates from YouTube's own dark chrome. |
| Dark gradient | `gradient` | The Dark Gradient from the background library. Use when two videos in a row would otherwise look identical. |
| Cloud | `cloud` | #F9FAFB. Light thumbnails punch hardest against YouTube's dark theme — use for tutorials and light product UI. |

### Type scale

| Role | Face | Weight | Size | At 210px wide |
|---|---|---|---|---|
| Headline · 2 lines in the 610px column | Poppins | 500 | 88px | 14.4px |
| Headline · 3 lines in the 476px column | Poppins | 500 | 76px | 12.5px |
| Headline · one-word punch line | Poppins | 500 | 132px | 21.7px |
| Stat | Poppins | 600 | 172px | 28.2px |
| Stat label | Poppins | 500 | 40px | 6.6px |
| Guest name | Inter | 500 | 34px | 5.6px |
| Guest title | Inter | 400 | 24px | 3.9px |
| Program label · uppercase | Inter | 500 | 26px | 4.3px |
| Wordmark width | — | — | 176px | 29px |

Copy budget — Poppins runs ~0.51em per character, so the column sets the line length:

| Layout | Column | Size | Budget |
|---|---|---|---|
| Product UI on the right | 476px | 76px | 12 chars/line, up to 3 lines |
| Person on the right | 610px | 88px | 12 chars/line, up to 2 lines |
| Person on the right · long | 610px | 76px | 14 chars/line, up to 3 lines |
| Full width | 1152px | 132px | 16 chars/line, up to 2 lines |

### Safe areas

| Zone | Region | Why |
|---|---|---|
| Safe box | 1152×592 at 64,64 | Nothing crosses the 64px margin, and type stops at y=592 — not 656. |
| Duration chip | 256×112 at 1024,608 | YouTube paints the runtime over this corner on every surface. |
| LIVE / CC chip | 200×104 at 0,616 | Bottom-left, on live streams and captioned videos. |
| Progress bar | 1280×16 along the bottom | Red watched-progress bar on the home and sidebar rails. |
| Hover controls | 160×160 at 1120,0 | Desktop hover state — keep the top-right corner quiet. |
| Corner radius | 44px | YouTube rounds the card; nothing meaningful within 44px of a corner. |
| Shorts crop | 405px column at x=438 | If the video may also run as a Short, keep line one inside it. |

### Templates

Every one takes the same swappable slots — headline, accent span, program label, person photo,
product-UI element, guest name and title.

| Template | Slots | Use it for |
|---|---|---|
| Product update · UI-led (`ships-ui`) | program, headline, accent, snippet | Feature launches and changelog videos where the screen is the story. |
| Product update · with presenter (`ships-host`) | program, headline, accent, photo, snippet, guest | Announcements delivered to camera. |
| Interview · fireside (`fireside`) | chip, headline, accent, photo, guest | Guest interviews, podcasts, customer conversations. |
| Introducing · feature badge (`feature-badge`) | headline, accent, badge, snippet | The first video about a named feature. |
| Element cluster (`element-hero`) | program, headline, accent, snippets | Round-ups, 'what shipped this month', multi-feature videos. |
| Number-led hook (`stat-hook`) | program, stat, statLabel, snippet | Results, benchmarks, case studies. |
| Tutorial · how-to (`tutorial`) | chip, headline, accent, photo, guest, snippet | Walkthroughs, setup guides, playbooks. |

Program labels in the lockup are editable text, not sub-brands — "Product update" · "Fireside" · "Playbook" · "Results" · "What shipped".
A channel can rename them without a brand review.

## Motion (video)

Product motion is captured from the real choreography, never re-animated by hand: a hand-animated
mock drifts from the product the moment the product changes, and motion is the one asset a viewer
cannot tell is fake. Play each clip and record it — /brand-guidelines/motion, or /social-media?motion=1.

### The approved clips

| Clip | Feature | Length | Loop | What it shows |
|---|---|---|---|---|
| Disqualify flow | Qualify & Route | ~7.5s | plays once | An email is typed and corrected, the outcome chips cascade red → green, and it settles on the same end state the qualify element sheet shows. |
| Conditional routing | Qualify & Route | ~3s | plays once | Revenue radio → age pill → connector draw → closer assigned → the +21% counts up. Ends on the qualify element sheet's state. |
| Analytics count-ups | Revenue Analytics | ~2s | plays once | KPI tiles and revenue chips count up to the final numbers on the analytics element sheet. Those numbers are the verbatim ones — do not re-time them to land on different figures. |
| Scheduler storyboard | Qualify & Route · Lead Recovery | 9 frames | loops | The full scheduler → inbox story. The frame picker holds an exact still: frames 4, 5, 7, 8 and 9 are the ones the qualify and recovery element sheets use. |
| Scheduler + inbox recover cycle | Lead Recovery | ~12s | loops | The hero choreography: a lead is captured, auto-engaged, and recovered rows stream into the floating inbox. |
| Live pipeline counter | Lead Recovery | rolls up, then ticks | never settles | The $1,160,000 roll-up plus live increments. Record the counter card region only — and cut before the increments drift, because this component never lands on a fixed number. That is also why it is not allowed on a static board. |

### Capture spec

| Setting | Value | Why |
|---|---|---|
| Zoom | 2× browser zoom | Native product type is 8–12px; at 1× a screen recording is unreadable once it is cropped into a 9:16. |
| Frame rate | 60fps | The choreography uses 200–400ms transitions — 30fps strobes them. |
| Pre-roll | 1 second | Press play, count one, then start the take. It gives the editor a clean handle. |
| Region | the card only | Record the element, not the browser. No chrome, no cursor, no scrollbars. |

### Edit spec

- Fades and small translates only, 200–400ms, ease-out. Nothing bounces, spins or flips in 3D.
- Product UI stays upright and unscaled — no perspective tilts, no fake device frames.
- End card: navy with the glow, white wordmark centred, square CTA below it, held two seconds minimum.
- 9:16 exports keep all text and the wordmark inside the middle safe area.

## Approvals

Self-serve (no approval): posts built from the library, video edits using captured motion,
resizes of approved boards. Needs review before publishing: co-branded/partner content, paid
ads, anything naming a customer or using their data, new graphic types — send to the iClosed design team
(typical turnaround 1–2 business days).

## Assets

- Brand kit (logos): /brand/iclosed-brand-kit.zip
- Design tokens (DTCG JSON): /brand/tokens.json
- Human guidelines: /brand-guidelines (requires JavaScript)
- Component library: /social-media (requires JavaScript; the tables above carry its content)

## Changelog

- Aug 10, 2026 — Videos — the site's animations as downloadable clips, including transparent cut-outs. Scheduler and Unified Inbox product UI re-sourced from the live site, so the catalog matches what ships.
- Jul 20, 2026 — YouTube thumbnails — seven 1280×720 templates, the studio at /studio, and the format's type scale and safe areas.
- Jul 18, 2026 — First release — guidelines published, social media library linked, brand kit v1.