Cotality Placement Bible

Contrast is already AA

White on #A805FB measures ~5.1 : 1: passes WCAG 2.1 AA for both normal and large text. Text stays pure white; never tint it.

Box, not hue, does the separating

• Fill opacity 100%: the violet fully separates text from the video; no see-through boxes over busy frames (the rig's BOX OPACITY control ships at 100, and should never drop below ~92%).
• Edge definition: a fixed soft shadow (0 2px 10px rgba(0,0,0,.28)) so the box holds on light/sky backgrounds (the gable + sky clips).
• Never place white text directly on footage without the box; never run a second, competing caption style on Cotality's own posts.

• One typeface, one weight: TWK Everett at 700. No italics, no mixed weights, no per-clip emphasis.
• Size by frame, then auto-fit: the headline's size ceiling is ≈ 4.5% of frame height (so it scales identically across 9:16 / 1:1 / 16:9), and the rig auto-fits smaller to keep any copy inside the padded band.
• Line-height ~1.2, target ≤ 3 lines. Longer copy auto-shrinks to fit; it never overruns or grows the box (rewrite to ≤ 3 lines for legibility).
• Sentence case, no terminal period on a single headline.

• Reels: top no-go 220px, bottom no-go 450px (caption + right rail + scrubber), side margins 35px. The box bottom sits on the 450px line.
• Stories: top and bottom no-go 250px each.
• Feed (3:4 1080×1440 · 1:1 1080×1080 · 1.91:1 1080×566): no platform UI over the canvas, so the box uses its true 6% bottom margin.

• Master at 1080×1920 (9:16): the sampled feed currently ships 360×640, ~9× fewer pixels. It reads on a phone at a glance; full-screen or cast to a TV it's visibly soft, and it leaves no headroom for IG's own re-encode.
• Export high-bitrate H.264/HEVC: 16 / 14 / 12 Mbps per format (9:16 / 3:4 / 1:1) so Instagram downscales from a clean master instead of re-compressing an already-degraded 360p file. (Full recipe + QC in §06.)
• Protect the violet & the white stroke: flat brand fills are exactly what low-bitrate 4:2:0 punishes (the #A805FB blocks up and the hairline divider can bleed toward purple). Higher bitrate + a master that isn't pre-compressed keeps the box on-brand. (Full recipe + QC in §06.)

Ship this as a locked motion-graphics template (After Effects MOGRT / Premiere) with the box, margins, padding, type scale, and the per-format safe zones baked in: editors type copy and pick a format; they can't move or restyle the box. The bible becomes a template, not a memo.

Built. A scripted After Effects rig generates all three master comps (9:16 / 3:4 / 1:1) with these exact rules baked in: 45° chamfer, triangle + 2px line, an auto-fitting headline, and a set of live controls (colour, alignment, line width, edge padding, text gap). It animates itself too (assembles in, holds for an adjustable beat, then slides out as one unit) and ships matching Adobe Media Encoder presets per format.

Hands it to a non-designer. The build auto-promotes the headline and every control into After Effects' Essential Graphics panel, so each comp exports as a MOGRT the instant it's built. A Premiere editor drops that template on the timeline and types a sentence; the rig makes every brand decision (placement, padding, type scale, colour, safe zones) on their behalf. The panel exposes only the editor-safe knobs (headline, colours, opacity, alignment, line width, padding, and the in/hold timing); brand-spacing like the eyebrow gap stays locked out of reach. The bible isn't a memo they have to remember; it's the few controls they're allowed to touch.

The AE rig expects TWK Everett 700 when installed; until then, the template uses its system fallback.

• Flat violet → blocking & banding. 4:2:0 chroma subsampling plus low bitrate turn the smooth fill into 8×8 blocks and stepped gradients.
• White line → purple bleed. The 2px stroke is thin enough that chroma from the adjacent violet bleeds into it: the line reads lavender, off-brand.
• Sub-HD source compounds it. The current feed ships ~360p (see §05); a low-res master gives Instagram nothing clean to downscale from.

Master

1080×1920 (and 1080×1440 / 1080×1080): never pre-shrink; hand Instagram a clean master and let it do the final downscale.

Codec

H.264 High / 5.1 (or HEVC for ~equal quality at lower bitrate), VBR 2-pass, fast-start.

Bitrate

Deliberately high so the re-encode starts pristine: 16 / 14 / 12 Mbps target (9:16 / 3:4 / 1:1), scaled to pixel count.

Colour

8-bit 4:2:0, Rec.709; Maximum Render Quality on; match the source frame rate.

Line

Bump the rig's LINE WIDTH from 2 → 4: a thicker stroke survives the downscale and resists the purple bleed.

• Violet: no blocking or banding across the fill. If you see it, raise the bitrate (or switch to HEVC).
• White line + triangle: still crisp white, not bleeding lavender at the edges.
• Chamfer: the 45° cut stays a clean line, no mosquito noise crawling the edge.

The three Adobe Media Encoder presets that bake all of this in ship with the AE rig download (§ Enforcement).

• The Bible defines the rule. It locks placement, safe zones, card shape, type, and compression expectations.
• The AE rig applies the rule. The editor chooses the format and headline, while the rig makes the placement decision.
• The QA tool verifies the frame. It checks still-image output from the motion system and flags drift before publish.

The social-resize files are not an exact Instagram or Facebook server transcode. They approximate platform-style recompression by resizing each AME master to a 720-wide H.264 version. The point is to show that clean masters keep the violet card, white divider, chamfer, and face detail intact after another compression pass.

For the companion validation surface, open the Placement QA tool. For the expanded design-system rationale, open the QA design whitepaper.

The Reel proof uses the full Instagram-style overlay because caption text, the bottom progress rail, and the right action rail create real placement pressure. Feed and square use a skinned control bar below the image area so the demo does not imply a false no-go zone.

The proof videos do not autoplay. Reviewers opt in to motion, which avoids starting a looping playback experience on page load and keeps this section friendlier for WCAG/508 review.

The simulation intentionally omits fake engagement counts. It only marks interface regions that can collide with placement.

Instagram Reels are treated as the stricter stress case. Facebook feed playback is usually quieter, so a layout that survives the Instagram overlay has more room on Facebook.

All three proof videos now carry the 3px divider candidate. It reads white after AME compression without making the mark feel heavy, so the AE rig defaults can lock to the same line width.

The still posters are PNG frames from the same masters, so the paused state does not add a separate JPG tint before playback starts.

• Headline anchor flips: bottom-left on most cards, top-anchored on others ("Banning TikTok…").
• Eyebrow / category label is uneven: present on some cards, absent on others.
• Scrim treatment varies: full dark vs. bottom gradient vs. none, so legibility over busy photos is inconsistent.

• Editorial headline card: photo + scrim + wordmark + headline + footer. The workhorse (governed below).
• Report cover: title-led (Wildfire Risk Report, Mortgage Fraud Brief).
• Coral infographic: black on coral, dotted-C mark, data narrative. Coral lives only here.
• Data card: white field, violet charts, a single stat or series.
• Event / people photo: documentary, minimal or no text.

Headline

TWK Everett 800, white, left-aligned on the bottom-left baseline. It is the dominant element: sized so a full headline fills the lower band above the footer, max-width ~74%, target ≤ 3 lines. Longer copy gets rewritten, never shrunk into a caption.

Eyebrow

IBM Plex Mono, uppercase, tracked, one line above the headline. Per the §08 rule, every card in a series carries one or none of them does.

Wordmark

Lowercase cotality, top-left, fixed inset, white. Held small so it never competes with the headline.

Footer

IBM Plex Mono, bottom-left, fixed inset, one muted line for a URL or handle when used.

Ink on light cards

On the light-field systems (report cover, data card) the headline drops to brand ink #1E1405 on white, with violet as the accent. The photo card stays white-on-scrim.

4:5 feed

1080×1350, the tallest the feed allows and the default for reach. The editorial card is designed here first.

1:1 square

1080×1080, the safe universal. A 4:5 card must keep its wordmark and headline inside the centre 1:1 so the profile-grid crop never beheads it.

1.91:1 link

1080×566, link and landscape cards only. Headline and wordmark pull toward the centre to survive the wider crop.

• Profile grid centre-crops every post to 1:1. Keep all brand-critical type inside that centre square.
• First caption line truncates at ~125 characters before "more"; lead with the point, never with a hashtag.
• No reposting motion artwork as a still. A frame pulled from a Reel was composed for 9:16 and its safe zones; re-crop and re-set it, do not screenshot it.

Cover slide

The hook: editorial card, full grid, the strongest headline. It is the only slide most of the feed will see, so it earns the scroll on its own.

Content slides

Same margins, same wordmark position, same type scale. Only the photo and copy change. A slide that breaks the grid reads as a different account.

Continuity

A small slide counter or a consistent right-edge swipe cue, in the same spot on every slide, so the set reads as one object.

Mixed systems

A carousel may move from editorial card to data card to coral infographic, but each slide obeys its own system's rules. The set is held together by margins and type, not by forcing one layout onto all of them.

Report cover

Title-led on a light or muted field, TWK Everett ink on white, violet accent. No photo-overlay headline; this is a cover, not a card.

Coral infographic

The only place coral appears. Black type on coral, the dotted-C mark, a data-narrative layout. Coral never leaves this system, and never enters the editorial card (the §08 colour rule).

Data card

White field, violet charts and accent, a single stat or one series. Minimal, legible, no photo.

Event / people photo

Documentary. Wordmark only, minimal or no headline. Let the photograph carry it.

Build the editorial card and the carousel as a locked template, a Figma component or a Canva / Adobe Express brand template, with the wordmark, margins, scrim, headline band, and type baked in as fixed properties. A social manager drops in the photo, types the headline, picks a category, and exports. They cannot move the wordmark, restyle the headline, or reach for coral, because those are not editable. The grid that drifts today becomes the one thing they no longer have to think about.

It is the Part I lesson carried across: the bible stops being a document people are asked to remember and becomes the only path the tool offers.