CodaMetrix Hub
Design System /

Media

How the system applies in print, digital, social and video.

Digital Templates

Web, email, display advertising, slide decks, and app screen templates for CodaMetrix digital channels — each composed from the design system's foundational components and layout DNA.

Composes: logo-lockups, headline-coral-rule, code-block-primitive, pixel-wave-primitive, cta-pill, proof-point-list, bulleted-proof, stat-block, quote-card, section-tag, content-container, image-mask-block

Templates

Web Hero Section

Purpose: Full-width hero block at the top of the CodaMetrix website. The first brand impression in the browser — must carry maximum clarity and authority.

Grid: 12-column, 24px gutters, breakpoint.xl (1440px max content width). Hero spans all 12 columns, full-bleed background.

Layout (desktop, left-right split):

Left panel (cols 1–7): - Background: Signature gradient field full-bleed (bg.field.from #973DDA → bg.field.to #402058). - Logo: Reversed white horizontal lockup top-left, inside 64px top/left margin. - Pixel Wave 1: <PixelWave variant={1} fill="#973DDA"> behind all content in the left panel, at the background Z-level. Wave 1 is the hero-appropriate wave — bold, energetic, directional. Layered below the gradient field or at the gradient's surface for a directional energy effect. - Headline + coral rule: headline-coral-rule Variant A. Funnel Display Semibold, type.size.headline (3rem), type.leading.tight (1.1). White headline. Coral rule (accent.rule #F17053, 48–64px, 3–4px) 8px below headline baseline. - Sub-headline: Funnel Display Regular or Funnel Sans Regular, type.size.sub (1.953rem), white text.on-dark. - Proof-point list: proof-point-list Variant B — 3 bullet items, coral markers, Barlow Semi-Condensed, white. Maximum 3 items in the hero zone. - CTA: cta-pill "Download now" or "See how it works." Coral pill, white label, Funnel Display Semibold.

Right panel (cols 8–12): - image-mask-block Variant B (landscape, 16:9) or Variant A (portrait, 3:4): clinical professional or healthcare team collaboration scene. - Optional stat-block (one sourced stat, Funnel Display Light 300, large scale) overlapping the image mask block at the bottom-left corner of the image for compositional dynamism. Stat block in a content-container Variant A (Dark Maroon block.fill.3).

Code Block watermark: <CodeBlock role="pattern"> cluster, top-right corner of the hero, block.fill.1, 15% opacity. Stays behind all content.

Responsive behavior: - breakpoint.lg (1024px): Right panel image reduces to 40% width; stat block moves below. - breakpoint.md (768px): Single column. Image mask block moves below the headline and proof points. - breakpoint.sm (480px): Full single-column stack. Logo, headline, proof points, CTA pill, then image.

Components used: logo-lockups, pixel-wave-primitive (Wave 1), headline-coral-rule, proof-point-list, cta-pill, image-mask-block, stat-block, content-container, code-block-primitive

Stacked Section Blocks

Purpose: Interior web page sections below the hero — alternating light and dark section blocks that stack vertically to deliver the proof narrative.

Grid: 12-column, 24px gutters.

Section block types:

Dark section (gradient field): - Background: Signature gradient (bg.field.from → bg.field.to). - headline-coral-rule Variant A (white headline, coral rule). - bulleted-proof Variant A or B — numbered or bulleted parallel proof, white text, coral markers. - Optional stat-block in 2×2 grid (cols 3–5, 7–9 at desktop — two stat blocks side by side). - section-tag Variant A (purple chip) as a section label above the headline. - <PixelWave variant={2}> at section bottom edge, 0.25 opacity, as a divider to the next section.

Light section (surface): - Background: bg.surface (#F8F8F8) or white #FFFFFF. - headline-coral-rule Variant B (dark headline text.on-light, coral rule). - quote-card Variant B (Dr. Max Rosen, verbatim, on light surface). - image-mask-block Variant B (landscape, clinical scene). - No Pixel Wave 1 in interior sections — that is a hero-only element.

Alternating pattern: Dark → Light → Dark → Light, with <PixelWave variant={2}> dividers at each transition. Never place two dark gradient sections back to back without a light break.

Components used: headline-coral-rule, bulleted-proof, stat-block, section-tag, quote-card, image-mask-block, pixel-wave-primitive (Wave 2 only in interior)

HTML Email

Purpose: Marketing emails, event announcements, whitepaper promotions, and outbound CRM communications.

Grid: Single-column, 600px container width. Content padded 32px left/right inside the container. All content inlined for email-client compatibility.

Layout (top to bottom):

Header band (full-width, gradient): - Background: Gradient field (bg.field.from → bg.field.to) as a table/div background color using a linear-gradient CSS property or fallback to a solid #402058 for email clients that do not support CSS gradients. - Logo: Reversed white horizontal lockup centered or left-aligned. At 600px container width, maximum logo width: 160px. Use the PNG version of the reversed logo (white on transparent) against the gradient background. - Optional: section-tag Variant A (purple chip) as an email category label (e.g., "Whitepaper," "Event").

Hero / headline block: - Background: Gradient field continuation or bg.surface (#F8F8F8). - headline-coral-rule Variant A (on gradient) or Variant B (on surface). Headline at 32–36px (email pixel equivalent of type.size.sub–type.size.headline). - Sub-headline: Funnel Sans Regular, 18px, white or Text Black depending on background. - cta-pill — primary email CTA. Coral background (#F17053), white label, Funnel Display Semibold. Render as a <table>-based button for maximum email client compatibility. Pill shape approximated with border-radius: 999px.

Content blocks (one to three sections): - stat-block at email scale: stat figure in Funnel Display Semibold at 40–48px; descriptor in Funnel Sans Regular at 16px. One or two stats per email, sourced. - bulleted-proof Variant B: bulleted parallel proof points. Coral bullet markers rendered as small colored ■ or ● characters in #F17053 for email-client compatibility. - quote-card Variant B (light surface): Dr. Max Rosen quote verbatim. Rendered with a 3px left border in coral (#F17053) as an alternative to the top coral rule (email-client constraint for <hr> rendering).

Footer band: - Background: Text Black #22192B or Dark Maroon #45202C. - Logo mark icon only (reversed white PNG), 32px wide. - Legal copy: Funnel Sans Regular, 11px, white at 60% opacity. - Unsubscribe link. - Pixel Wave 2 is not rendered in email footers due to SVG rendering inconsistency across email clients — use a solid color band instead.

Email-client notes: All styles inline. No SVG fills as background images (Outlook incompatibility). Code Block patterns are omitted from email; the gradient field, coral accents, and typography carry the brand without requiring SVG geometry.

Components used: logo-lockups, headline-coral-rule, cta-pill, stat-block, bulleted-proof, quote-card, section-tag

Display Ad Set — IAB Standard Sizes

Purpose: Programmatic and direct-buy display advertising across healthcare publisher networks and Google Display Network.

Grid: Each ad format is self-contained with its own internal layout proportions. All use the layout DNA: gradient field, logo, headline + coral rule, CTA pill.

Shared design rules: - Background: Gradient field (bg.field.from → bg.field.to) full-bleed. No surface/light background on display ads — the gradient field is the only approved ad background for brand recognition at small sizes. - Logo: Reversed white horizontal lockup. At small ad sizes (medium rectangle and below), switch to icon-only lockup (logo-lockups Variant 3) if the full horizontal lockup crowds the composition. - Code Block watermark: Top-right corner, block.fill.1, 15% opacity. Scale down proportionally — at 300×250 and 160×600, the watermark should be a single tile or small cluster, not a full pattern. - Pixel Wave 2: Bottom edge, 0.3 opacity. Must fit within the ad canvas — never overflow the ad boundary. - CTA: cta-pill — single, centered. Label: "Learn more" or "Download now." - Animation: If animated (HTML5 banner), follow motion principles: Code Blocks assemble, Pixel Wave steps. Duration per motion.duration.slow (640ms) for entrances; motion.duration.base (320ms) for transitions. No ribbon/infinity animation. Maximum three animation loops before stopping on the final frame (IAB best practice).

Format specifications:

Medium Rectangle — 300×250

The highest-volume IAB unit. Most versatile placement.

  • Background: Full-bleed gradient field.
  • Logo (top-left): Reversed white. At 300px width, use horizontal lockup scaled to ~100px wide.
  • Code Block watermark (top-right): 2–3 tile cluster, block.fill.1, 15% opacity.
  • Headline: Funnel Display Semibold, 20–22px, white. One line maximum. Coral rule beneath (32px wide, 2px tall).
  • Proof line (optional): One-line proof-point-list Variant A (inline slash-separated) or a single stat figure. Funnel Sans Regular, 13px, white.
  • CTA pill: Coral, white label "Learn more" or "Download now." 14px label, horizontal padding 16px, vertical padding 8px. Centered bottom.
  • Pixel Wave 2: Bottom 30px strip.
Leaderboard — 728×90

Horizontal banner; very limited vertical height. Copy must be tightest.

  • Background: Full-bleed gradient field.
  • Layout: Logo far left (icon-only at this height — reversed white icon ~40px tall), headline center-left, CTA pill right.
  • Headline: Funnel Display Semibold, 18–20px, white, one line. No coral rule (insufficient vertical space).
  • Proof line (optional): Inline slash-separated proof point in Funnel Sans Regular, 12px, white, between headline and CTA.
  • CTA pill: Coral, white label "Learn more," positioned right 10–15px margin.
  • No Code Block watermark or Pixel Wave: Insufficient space — the gradient field and logo carry the brand signal alone.
Wide Skyscraper — 160×600

Tall, narrow format. More vertical space than the leaderboard but constrained width.

  • Background: Full-bleed gradient field.
  • Logo (top-center or top-left): Reversed white icon-only lockup, ~40px wide. Insufficient width for horizontal lockup with wordmark at full legibility.
  • Code Block watermark: Top-right corner, single tile, block.fill.1, 15% opacity.
  • Headline: Funnel Display Semibold, 16–18px, white. Two lines maximum. Coral rule beneath (32px, 2px).
  • Stat block: One sourced stat — figure at 36–40px Funnel Display Semibold, descriptor at 12px Funnel Sans. E.g., "70% / Reduction in coding denials (Codametrix Brand Guide)."
  • Proof-point list (optional): 2–3 proof-point-list Variant B items at 11px Barlow Semi-Condensed.
  • CTA pill: Coral, white label "Learn more." Centered, near bottom. Horizontal padding 12px, vertical padding 8px.
  • Pixel Wave 2: Bottom 40px strip, 0.3 opacity.
Billboard — 970×250

Large-format desktop unit. Wide, short. More compositional space than the leaderboard.

  • Background: Full-bleed gradient field.
  • Layout: Left 45% / Right 55% two-panel composition.
  • Left panel: Logo top-left (reversed white horizontal lockup, ~140px wide). headline-coral-rule Variant A, 24–28px, with coral rule beneath. cta-pill "Download now."
  • Right panel: stat-block two stats side by side (70% and 5×, sourced), Funnel Display Semibold/Light, large scale. Or image-mask-block Variant B (landscape) at right panel.
  • Code Block watermark: Top-right corner, small cluster, block.fill.1, 15% opacity.
  • Pixel Wave 2: Bottom 40px strip.

Components used (all formats): logo-lockups, headline-coral-rule, cta-pill, pixel-wave-primitive, code-block-primitive, stat-block, proof-point-list

Slide / Deck Master — 16:9

Purpose: PowerPoint/Keynote/Google Slides master for sales decks, conference presentations, and internal presentations. Format: 1920 × 1080px (16:9).

Master slide layouts:

Title slide (cover): - Full-bleed gradient field. - Logo: Reversed white horizontal lockup, top-left. Margin: 48px top, 64px left. - Code Block watermark: Top-right corner, block.fill.1, 15% opacity. - headline-coral-rule Variant A: headline centered or left-aligned, ~48–60px equivalent, Funnel Display Semibold, white. Coral rule beneath (64px, 4px). - Sub-headline: Funnel Display Regular or Funnel Sans Regular, 28px, white at 85% opacity. - section-tag Variant A (purple chip): deck series or event name label (e.g., "ViVE 2025" or "Whitepaper Brief"). - Pixel Wave 2: Bottom edge, full width, 0.3 opacity.

Content slide — dark: - Background: Gradient field. - section-tag Variant A in footer left: section number or topic label (e.g., "Section 3 — The Denial Problem"). This is the section-tag chip in the footer per the layout DNA spec. - headline-coral-rule Variant A: slide headline, 36px, Funnel Display Semibold, white. - Content zone: bulleted-proof Variant A or B, stat-block (2-stat horizontal grid), or image-mask-block. - Pixel Wave 2 bottom edge. - Slide number: Barlow Semi-Condensed, type.size.label (0.75rem), white at 60% opacity, bottom-right.

Content slide — light: - Background: bg.surface (#F8F8F8). - section-tag Variant A in footer left (purple chip on light background — high contrast, maintains wayfinding consistency). - headline-coral-rule Variant B: slide headline, 36px, Funnel Display Semibold, Text Black. - quote-card Variant B (Dr. Max Rosen, verbatim) in a content-container Variant B (off-white or white fill). - stat-block at type.size.sub scale for supporting evidence. - Slide number: Barlow Semi-Condensed, bottom-right, Text Black at 50% opacity.

Section divider slide: - Full-bleed gradient field. - Large section-tag Variant A centered, scaled up to approximately 3× the standard chip size (wider block, same geometry constants — cut-ratio 0.28, cut-angle 45° unchanged). - Section number in Funnel Display Light (300), oversized (6rem), white text.on-dark. - Section title in Funnel Display Semibold, 36px, white. - Pixel Wave 2 bottom edge.

Grid: 12-column, 24px gutters at 1920px. Headlines span cols 1–10 for visual weight. Content containers span 4–6 columns.

Footer (all slides): section-tag chip bottom-left + slide number bottom-right. This is the canonical section-tag-in-footer pattern from the layout DNA.

Components used: logo-lockups, headline-coral-rule, section-tag, bulleted-proof, stat-block, quote-card, image-mask-block, content-container, code-block-primitive, pixel-wave-primitive

App Screens — Login / Landing

Purpose: CodaMetrix product application UI — login screen and primary landing/dashboard screen. Uses Pixel Wave 1 as the signature background element, consistent with the pixel-waves spec (Wave 1 = hero, login, app interface).

Grid: Responsive. Base unit 4px (spacing scale). 12-column grid at desktop (breakpoint.lg 1024px); single-column at breakpoint.sm (480px).

Login screen: - Background: Signature gradient field full-bleed (bg.field.from → bg.field.to). - Pixel Wave 1: <PixelWave variant={1} fill="#973DDA"> at the background Z-level, behind all content. Bold, directional, energetic — establishing the product as technically precise. Wave 1 is correct here; do not substitute Wave 2. - Logo: Reversed white horizontal lockup centered, upper third of the screen. Scale: ~200px wide at desktop. - Login form: Centered card, content-container Variant B (white fill #FFFFFF, text.on-light). Card width: 400px at desktop. Fields: Funnel Sans Regular, type.size.body (1rem). Labels: Barlow Semi-Condensed, type.size.label (0.75rem), type.tracking.label (0.04em), Text Black. - Primary CTA: cta-pill "Sign in" — full width of the form, coral, white Funnel Display Semibold label. - Code Block watermark: Top-right corner of the full screen, block.fill.1, 15% opacity, behind the form card. - No Pixel Wave 2 on login: Wave 2 is a footer/divider element; login uses Wave 1 only.

App landing / dashboard screen: - Background: bg.surface (#F8F8F8) — interior app uses the light surface, not the full gradient field. The gradient and Wave 1 are reserved for the login/entry moment. - Top navigation bar: Dark Maroon #45202C background. Logo: Icon-only reversed white, 24px, left-aligned. Navigation labels: Barlow Semi-Condensed, type.size.label, white. - Page header: Funnel Display Semibold, type.size.headline (3rem), Text Black text.on-light. Short coral rule beneath (48px, 3px, accent.rule). - Data content: stat-block in a horizontal 4-stat grid (all four sourced stats: 70%, 5×, ~$55, 30%). section-tag Variant A or B as section labels above each content area. - content-container Variant A or C: Gold or Purple Code Block containers holding summary stats or quick-reference proof points. - No Pixel Wave 1 inside the app: Wave 1 is the entry-moment element. Interior screens use Wave 2 sparingly at section dividers, or no wave at all.

Components used: logo-lockups, pixel-wave-primitive (Wave 1 on login; Wave 2 sparingly in app interior), cta-pill, content-container, stat-block, section-tag, headline-coral-rule, code-block-primitive

Related

  • space-grid — 12-column grid, spacing scale, breakpoints
  • pixel-waves — Wave 1 vs Wave 2 role assignment
  • color — semantic tokens for all background and text decisions
  • motion — animation principles for HTML5 display ads and app transitions
  • 20-media/social.md — social-format specs
  • 20-media/video-motion.md — motion/video template specs
  • 20-media/print.md — print production specs

Print Templates

Production-ready print templates for CodaMetrix collateral — one-pager, whitepaper, conference materials, business cards, and posters. All CMYK values from ../tokens/print-cmyk.md. All dimensions include bleed; critical content inside safe margins.

Composes: logo-lockups, headline-coral-rule, code-block-primitive, pixel-wave-primitive, cta-pill, proof-point-list, bulleted-proof, stat-block, quote-card, section-tag, content-container, image-mask-block

Print Specifications (Universal)

Property Value
Bleed 0.125 in on all sides
Safe margin (trim inset) 0.25 in from trim edge; all critical content inside
Color mode CMYK for all print production files
Resolution 300 dpi minimum; 600 dpi preferred for fine-line elements (Code Block geometry, type)
PDF profile PDF/X-1a or PDF/X-4 depending on printer requirement
Font embedding All fonts (Funnel Display, Funnel Sans, Barlow Semi-Condensed) must be embedded

CMYK Color Reference

All values from ../tokens/print-cmyk.md:

Name HEX CMYK
Purple #973DDA C57 M79 Y0 K0
White #FFFFFF C0 M0 Y0 K0
Text Black #22192B C79 M81 Y52 K67
Dark Maroon #45202C C53 M81 Y58 K61
Coral #F17053 C1 M70 Y70 K0
Gold #CFC17F C20 M19 Y60 K0

Coral dual-value rule in print: #FE6E4E (coral-logo) is reserved for logo and icon artwork ONLY — in print as in digital. Use #F17053 (C1 M70 Y70 K0) for all general-purpose print applications: coral rules, CTA pill fills, bullet markers, Code Block accent fills. Passing #FE6E4E to a general-purpose element in print is the same Gate #3 violation as in digital.

Gradient field in print: The signature purple→plum gradient (#973DDA → #402058) may be rendered in print as a CMYK linear gradient blend from C57 M79 Y0 K0 (purple) to approximately C84 M100 Y0 K35 (deep plum). Proof on press; gradient fidelity depends on paper stock and print process. On uncoated stock, expect some gamut compression — especially in the deep plum end of the gradient. Recommend coated stock for full-color collateral.

Deep Plum (#402058): Not listed individually in print-cmyk.md — derive CMYK from the RGB conversion: approximately C84 M100 Y0 K35. Verify with press proof. Use Purple (#973DDA, C57 M79 Y0 K0) as the fallback if press cannot hold the deep plum value cleanly.

Templates

One-Pager — US Letter 8.5 × 11 in

Purpose: Single-sheet leave-behind for sales conversations, conference handouts, and email attachments formatted for print. The highest-velocity print deliverable.

Finished trim size: 8.5 × 11 in
With bleed: 8.75 × 11.25 in (add 0.125 in on all four sides)
Safe margin: 0.25 in from trim; critical content at minimum 0.375 in from canvas edge (bleed + safe)

Grid: 12-column, 0.25 in gutters inside the safe area. At 8.5 in interior width (minus 0.5 in total safe margins = 7.5 in content width), each column = ~0.5 in, gutter ~0.15 in. Effective 8-column layout recommended at this width for readable column widths.

Front side layout (top to bottom):

  • Header band (top 1.5 in, full-bleed): Background: gradient field CMYK blend (Purple → Deep Plum) extending to the bleed edge. Reversed white horizontal logo lockup (logo-lockups Variant 4) anchored top-left, inside the 0.25 in safe margin. section-tag Variant A (purple Code Block chip) adjacent to or beneath the logo — optional category label.
  • Code Block watermark (top-right corner of header): <CodeBlock role="pattern"> cluster, block.fill.1 purple in white (reversed to white or lavender at low opacity), ~15% opacity on gradient field.
  • Headline zone (rows 1.5–3.5 in): headline-coral-rule Variant A on a gradient continuation, or Variant B on bg.surface if the header transitions to a light body field. Funnel Display Semibold, largest size that allows one to two lines within the zone. Coral rule beneath: 48–64px (1.33–1.78 cm) wide, 3–4px tall, #F17053 (C1 M70 Y70 K0).
  • Body / Proof zone (rows 3.5–8.5 in): On a light bg.surface (#F8F8F8) background. Two-column layout (cols 1–5, cols 7–12).
  • Left column: bulleted-proof Variant A (numbered sequential denial-prevention arc) or Variant B (bulleted parallel). 3–4 items. Coral markers, Funnel Sans Regular body.
  • Right column: stat-block two-stat vertical stack (70% and 5×, both sourced), Funnel Display Semibold/Light. Optional quote-card Variant B (Dr. Max Rosen, verbatim) below the stats. Or image-mask-block Variant A (portrait block, 3:4) occupying the right column fully.
  • CTA / footer band (rows 8.5–11 in, full-bleed to bottom): Background: Dark Maroon #45202C (C53 M81 Y58 K61) or gradient field continuation.
  • cta-pill centered or left-aligned: "Download now," "Visit codametrix.com," or "Schedule a demo." Print CTAs include a URL or QR code alongside the pill — the pill shape is retained for brand consistency even in print.
  • <PixelWave variant={2}> along the bottom edge, within the safe margin, at low opacity on the dark band. Stepped bar pattern in White at 25–30% opacity.
  • Logo icon-only reversed white bottom-right (footer anchor), inside safe margin.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, bulleted-proof, stat-block, quote-card, image-mask-block, cta-pill, section-tag, pixel-wave-primitive

Whitepaper — Multi-Page

Purpose: Long-form technical/thought-leadership document (typically 8–16 pages). The CodaMetrix Denials Whitepaper is the canonical reference format.

Finished trim size: 8.5 × 11 in (US Letter) or A4 (210 × 297 mm) for international distribution
With bleed: 8.75 × 11.25 in / 216 × 303 mm
Safe margin: 0.25 in / 6 mm from trim

Grid: 12-column, 0.25 in gutters. Body text spans cols 1–8 at standard reading width; callout blocks span cols 9–12 in the sidebar.

Cover page: - Full-bleed gradient field to bleed edge. - Logo: Reversed white horizontal lockup, top-left, inside safe margin. - Code Block watermark: Top-right, block.fill.1, 15% opacity. - Title: Funnel Display Semibold, ~48pt, white. Coral rule beneath (64px/1.78cm, 4px, C1 M70 Y70 K0). Sub-title: Funnel Display Regular, 24pt, white at 85% opacity. - section-tag Variant A: "Whitepaper" or series label chip, beneath logo. - Pixel Wave 2: Bottom edge of cover, white at 30% opacity, within safe margin.

Interior master page (light): - Background: White #FFFFFF or bg.surface (#F8F8F8) — interior body pages use the light surface, not the full gradient field. - Running header: Dark Maroon band, 0.5 in tall, full width. Reversed white logo icon-only left; chapter/section title in Barlow Semi-Condensed, type.size.label (0.75rem), white at 80% opacity, right-aligned. Page number right. - headline-coral-rule Variant B: chapter/section headline, Funnel Display Semibold 28–36pt, Text Black. Coral rule (48px, 3px, C1 M70 Y70 K0) beneath. - Body copy: Funnel Sans Regular, 10–11pt, type.leading.normal (1.5), Text Black. Running body text spans cols 1–8. - Sidebar (cols 9–12): content-container Variant A (Purple or Dark Maroon Code Block) for callout stats. stat-block inside the container: figure at 28pt Funnel Display, descriptor at 9pt Funnel Sans. Sourced. - bulleted-proof Variant B or A: in-body proof lists, Funnel Sans body, coral bullet markers. - quote-card Variant B: pull-quote boxes at full text-column width, light surface, coral rule above, Dr. Max Rosen verbatim. - image-mask-block Variant B (landscape) in editorial sections — clinical photography per photography guidelines. - section-tag Variant A or B: chapter navigation chips above section headings.

Interior master page (dark accent): - Full-width dark section breaks: gradient field background, Pixel Wave 2 bottom edge, headline-coral-rule Variant A, stat-block in hero display scale. Use sparingly — maximum once per four pages.

Back cover: - Full-bleed gradient field. - CTA centered: headline-coral-rule Variant A + cta-pill "Download the full report" or "Schedule a demo." - Logo reversed white, centered or bottom-left. - URL / QR code below the CTA pill. - Pixel Wave 2 bottom edge.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, bulleted-proof, stat-block, quote-card, image-mask-block, content-container, cta-pill, section-tag, pixel-wave-primitive

Conference Booth + Handout

Conference booth materials:

Retractable Banner — 33 × 81 in (standard trade show banner): - With bleed: 33.25 × 81.25 in. Safe margin: 0.25 in from trim. - Background: Full-bleed gradient field, CMYK blend. - Logo: Reversed white horizontal lockup, top center. Scale: logo width = approximately 22 in at this banner size — commanding at distance. - Code Block pattern: Full tile arrangement across the upper 20 in of the banner, block.fill.1 white at 20% opacity on gradient. This is the base-shape/pattern role per code-blocks §Role 1. - Headline + coral rule: headline-coral-rule Variant A. 72–96pt Funnel Display Semibold. Coral rule beneath (2 in wide, 6–8px tall). - Stat block: 2–3 sourced stats in large display scale (Funnel Display Light, 6rem/72pt) in the center band. Each stat with Funnel Sans descriptor at 18pt. - CTA pill: "Visit codametrix.com" or "Schedule a demo" — centered near bottom third. Pill approximately 6 in wide, coral fill, white Funnel Display Semibold at 24pt. - Pixel Wave 2: Bottom 8 in strip of the banner, within safe margin.

Conference Handout — Rack Card (4 × 9 in): - With bleed: 4.25 × 9.25 in. Safe margin: 0.25 in from trim. - Front: Header band (gradient, top 2.5 in): logo reversed white, Code Block watermark. Headline zone: headline-coral-rule Variant A or B depending on field color. Proof points: 3-item proof-point-list Variant B. CTA band (bottom 1.5 in, Dark Maroon): cta-pill with URL/QR. - Back: Light surface. stat-block 2-stat vertical. quote-card Variant B (Dr. Max Rosen). cta-pill at bottom. Logo reversed on a small gradient footer band.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, stat-block, proof-point-list, cta-pill, pixel-wave-primitive, quote-card

Business Card — 3.5 × 2 in

Finished trim size: 3.5 × 2 in
With bleed: 3.75 × 2.25 in (0.125 in bleed all sides)
Safe margin: 0.25 in from trim edge; all name/title/contact text inside 0.375 in from canvas edge

Front: - Background: Full-bleed gradient field (C57 M79 Y0 K0 → deep plum blend) to bleed edge. - Logo: Reversed white horizontal lockup, top-left quadrant, inside safe margin. Scale to approximately 1.6 in wide — the wordmark must be legible at this size. If the horizontal lockup is too tight, use the stacked lockup (Variant 2) at 0.75 in wide. - Code Block watermark: A single Code Block tile (block.fill.1 white at 20% opacity) at the bottom-right corner — one tile only at this scale. Geometry constants apply: cut-ratio 0.28, cut-angle 45°. - Name: Funnel Display Semibold, 10–11pt, white text.on-dark. - Title: Funnel Sans Regular, 8pt, white at 85% opacity. - Contact: Funnel Sans Regular, 8pt, white at 85% opacity. Email, phone, LinkedIn, website. - Coral rule: accent.rule #F17053 (C1 M70 Y70 K0), 24px wide, 2px tall, between name and title.

Back (optional): - bg.surface (#F8F8F8) or white background. - stat-block single stat — 70% — in a content-container Variant A (purple Code Block). Or: QR code centered with URL beneath in Funnel Sans Regular, 8pt, Text Black. - Logo monochrome black version bottom-right if the back is white.

No CTA pill on business cards: The pill shape and scale are not appropriate for the business card format. Contact information is the CTA.

Components used: logo-lockups, code-block-primitive, stat-block, content-container

Poster — 18 × 24 in (Conference / Event Poster)

Finished trim size: 18 × 24 in
With bleed: 18.25 × 24.25 in
Safe margin: 0.25 in from trim

Grid: 12-column within the safe area (17.5 in content width), 0.25 in gutters. Headlines span 10–12 columns. Content zones split into 6-col × 6-col halves or 4-col × 8-col asymmetric.

Layout: - Full-bleed gradient field background: CMYK blend, Purple → Deep Plum, to bleed edges. - Code Block pattern (large-scale): Multiple Code Block tiles in a structured repeating grid across the upper half of the poster. Multicolor: block.fill.1 (Purple), block.fill.2 (Gold C20 M19 Y60 K0), block.fill.3 (Dark Maroon C53 M81 Y58 K61). This is the energetic multicolor Code Block pattern — appropriate for large-format event signage where impact matters. - Logo: Reversed white horizontal lockup, top-left, inside safe margin. At 18 in poster width, logo approximately 5 in wide. - Headline zone (upper-center): headline-coral-rule Variant A. Funnel Display Semibold, 72–96pt, white. Coral rule beneath (3 in wide, 6–8px, C1 M70 Y70 K0). - Sub-headline: Funnel Display Regular, 36pt, white at 90% opacity. One to two lines. - Content zone (lower half): Two-column layout. - Left column: stat-block — two to three sourced stats, Funnel Display Light at large display scale (Variants 1 and 2: 70% reduction in coding denials; 5× turnaround improvement — both from Codametrix Brand Guide). - Right column: quote-card Variant A (gradient field) — Dr. Max Rosen verbatim. Or image-mask-block Variant B (landscape, clinical scene). - CTA band (bottom 4 in): cta-pill centered — "Visit codametrix.com" or event-specific CTA. award-event-chip Variant E for documented conference appearance (ViVE 2025 Nashville; HMA Spring CRO Forum 2026 Frisco TX). - Pixel Wave 2: Bottom 2.5 in strip, white at 30% opacity, within safe margin. Stepped bar pattern — the precision/automation visual metaphor at event scale.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, stat-block, quote-card, image-mask-block, award-event-chip, cta-pill, pixel-wave-primitive

Print Production Checklist

Before sending any print file to production:

  • [ ] CMYK color mode confirmed. All values cross-referenced with ../tokens/print-cmyk.md.
  • [ ] Coral is #F17053 (C1 M70 Y70 K0) on all non-logo elements. Logo coral #FE6E4E appears only in the logo artwork file.
  • [ ] Bleed: 0.125 in on all four sides. Gradient field and dark background bands extend to bleed edge.
  • [ ] Safe margin: all text, logos, and critical graphics are at least 0.25 in inside the trim edge (0.375 in from bleed edge).
  • [ ] Fonts embedded: Funnel Display, Funnel Sans, Barlow Semi-Condensed.
  • [ ] Resolution: 300 dpi minimum. Code Block geometry and coral rules verified at production size — fine geometry can break below 300 dpi.
  • [ ] All stats cited with source. No unsourced numerical claims (Gate #4).
  • [ ] No AI-replaces-people framing in any proof point or headline (Gate #1).
  • [ ] Code Block cut geometry: cut-angle 45°, cut-ratio 0.28, facet-darken 18% — not softened or rounded for print output.
  • [ ] Press proof pulled before print run for gradient fidelity and coral accuracy.

Related

  • ../tokens/print-cmyk.md — authoritative CMYK values
  • ../tokens/tokens.json — source of all spacing, type, and color tokens
  • color — dual-coral rule, CMYK values
  • code-blocks — geometry constants
  • photography — image selection and Code Block masking rules
  • 20-media/digital.md — digital/screen equivalents of these templates

Social Media Templates

Per-channel production specs and template recipes for CodaMetrix social content — built on the deep purple→plum gradient field, logo lockup, Funnel Display headlines, coral rules, and Pixel Wave 2 step pattern.

Composes: logo-lockups, headline-coral-rule, code-block-primitive, pixel-wave-primitive, cta-pill, proof-point-list, bulleted-proof, stat-block, quote-card, section-tag, award-event-chip, content-container, image-mask-block

Platform Size Reference

Format Dimensions (px) Aspect Ratio Primary Use
IG/FB Feed — Square 1080 × 1080 1:1 Standard feed post, carousel card
IG/FB Feed — Portrait 1080 × 1350 4:5 Portrait feed post (higher organic reach)
IG Story / Reel 1080 × 1920 9:16 Ephemeral story, short-form video reel
LinkedIn — Landscape 1200 × 627 1.91:1 LinkedIn feed post, article header
Carousel Card 1080 × 1080 1:1 Multi-card carousel (all platforms)
Avatar / Profile 400 × 400 1:1 Profile image (all platforms)

Export: All raster exports at 72 dpi RGB. Color mode: sRGB. No CMYK for screen social assets.

Safe Areas

Format Top Bottom Left / Right Notes
IG/FB Feed 1:1 80px 200px 80px Bottom 200px competes with like/comment UI overlay
IG/FB Feed 4:5 80px 200px 80px Same bottom UI risk as square
IG Story / Reel 9:16 250px 350px 80px Top 250px: camera notch / status bar; bottom 350px: CTA / nav UI zones
LinkedIn 1.91:1 60px 60px 60px Critical content within center 1080 × 500px zone
Carousel Card 1:1 80px 200px 80px Consistent with feed square
Avatar / Profile — — — Full bleed; see avatar template below

Pixel Wave 2 stepped pattern along the bottom edge of each card must remain within the safe area bottom boundary — do not let the wave intrude into the UI-obscured zone.

Layout DNA (All Formats)

Every social template is composed on this base structure, adapted to the format's aspect ratio:

  1. Background field: Deep purple → Deep Plum gradient (bg.field.from #973DDA → bg.field.to #402058), full-bleed, top-left to bottom-right direction.
  2. Logo lockup: Reversed white horizontal lockup (logo-lockups Variant 4) anchored top-left, inside the safe area. Clearance: half the icon height on all sides.
  3. Headline + coral rule: White Funnel Display Semibold (headline-coral-rule Variant A). Coral rule (accent.rule #F17053, 48–64px wide, 3–4px tall) immediately beneath the headline with 8px gap.
  4. Code Block watermark: <CodeBlock role="pattern"> at low opacity (15–25%), monochromatic purple (block.fill.1), positioned at the top-right corner. Geometry constants: cut-angle 45°, cut-ratio 0.28.
  5. Pixel Wave 2: <PixelWave variant={2}> stepped pattern along the bottom edge, within the safe area. Low opacity (0.25–0.4) on the gradient field; do not overlap with primary body content.
  6. CTA pill: Coral pill (cta-pill, accent.cta #F17053, radius.pill 999px) with white Funnel Display Semibold label. Example labels: "Download now," "Read the whitepaper," "Learn more."
  7. Proof points: proof-point-list or bulleted-proof — tight parallel bullets, coral markers, Barlow Semi-Condensed or Funnel Sans body, white text on the gradient field.

Templates

Feed Post — Square (1080 × 1080)

Purpose: Standard single-image brand or proof-point post for Instagram and Facebook feeds.

Layout (top to bottom, within safe area): - Zone 1 — Header (top 100px): Logo lockup top-left (reversed white). Code Block watermark cluster top-right corner, 15% opacity, block.fill.1. - Zone 2 — Headline (rows 100–380px): headline-coral-rule Variant A. Headline spans columns 1–10 of a 12-col implicit grid (gutter 24px). Font: Funnel Display Semibold, ~60–72px equivalent. Coral rule 48–64px wide beneath. - Zone 3 — Body / Proof (rows 380–820px): proof-point-list Variant B (bulleted vertical) or a single stat-block in large display scale. 3–4 parallel bullet points maximum. Optional image-mask-block Variant C (square) occupying 50% of the composition width in a two-column split. - Zone 4 — CTA + Wave (rows 820–1000px): cta-pill left-aligned or centered. section-tag Variant A (purple) as optional category label beside the CTA. - Zone 5 — Footer (rows 920–1080px): <PixelWave variant={2}> stepped pattern at the bottom edge, 0.3 opacity.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, proof-point-list, stat-block, cta-pill, pixel-wave-primitive, section-tag

Portrait Post — 4:5 (1080 × 1350)

Purpose: Portrait-format feed post delivering higher organic reach on Instagram. Suited to longer proof narratives or quote features.

Layout: - Same DNA as the square template. Extra vertical real estate (270px) distributes between Zone 2 and Zone 3. - Zone 2 — Headline: Runs deeper; accommodate a two-line headline with the coral rule beneath. - Zone 3 — Body: Space for a quote-card Variant A (gradient field) stacked above a bulleted-proof Variant B (3 items), or a stat-block grid (2 stats side-by-side in a 6-col × 6-col split). - image-mask-block Variant A (tall portrait block) may occupy the right 40% of the composition to show a clinical professional. - Safe area bottom: 200px (Instagram feed UI). Pixel Wave 2 sits at rows 1150–1350, within safe area.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, quote-card, bulleted-proof, stat-block, image-mask-block, cta-pill, pixel-wave-primitive

Story / Reel — 9:16 (1080 × 1920)

Purpose: Full-screen vertical format for Instagram Stories, Instagram Reels, and TikTok. Safe content band: rows 250–1570 (1320px tall band). Top 250px and bottom 350px are platform-UI-obscured zones.

Layout (within safe band, rows 250–1570): - Header (rows 250–380): Logo lockup top-left inside the safe band. Code Block watermark cluster top-right, 15% opacity. - Hero headline (rows 380–700): Large headline-coral-rule Variant A. Headline at maximum Funnel Display Semibold weight, 80–96px equivalent. Short coral rule (64px wide, 4px tall) beneath. - Content zone (rows 700–1350): One of: - stat-block in hero display scale (figure at 6rem) centered on the canvas — single dominant stat with descriptor below. - quote-card Variant A occupying full width with Dr. Max Rosen attribution (verbatim, per component rules). - image-mask-block Variant A (tall portrait, 3:4 ratio) centered, paired with a proof-point-list below. - CTA zone (rows 1350–1500): cta-pill centered. Short inline proof-point in Barlow Semi-Condensed above or below the pill. - Wave footer (rows 1500–1570): <PixelWave variant={2}> at the safe-area bottom boundary, 0.35 opacity.

Safe area note: Do not place any brand content (logo, headline, CTA, proof points) outside rows 250–1570. The top 250px and bottom 350px belong to the platform UI.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, stat-block, quote-card, image-mask-block, proof-point-list, cta-pill, pixel-wave-primitive

Multi-Card Carousel (1080 × 1080 per card)

Purpose: Swipeable carousel telling the denial-prevention or AI Breakthrough awards narrative across 4–8 cards. References the real CodaMetrix Denials Whitepaper Carousel and AI Breakthrough Awards Carousel production assets.

Card structure:

Card 1 — Cover / Hook: - Full layout DNA: gradient field, logo top-left, Code Block watermark top-right. - Dominant headline (Funnel Display Semibold, ~72px): the narrative hook, e.g. "Denials don't start at submission" or "Recognition that means something." - Short coral rule beneath headline. - Pixel Wave 2 bottom edge. - cta-pill: "Swipe to read" or "Keep reading." - section-tag Variant A (purple chip): e.g. "Section 1" or the carousel series title chip.

Cards 2–N — Content cards: - Same gradient field and logo lockup top-left (reversed white, consistent position across all cards for visual continuity when swiping). - section-tag Variant A or B in the top-left area beneath the logo to signal card position (e.g., "Section 2," "Section 3"). - Content zone: one of bulleted-proof Variant A (numbered sequential, canonical denial-prevention arc), stat-block (single sourced stat per card — 70%, 5×, ~$55, 30%), quote-card Variant A (Dr. Max Rosen, verbatim), or award-event-chip (real documented awards only — Newsweek "America's Greatest Startup Workplaces 2025," "Top 50 Women Leaders in Healthcare Technology 2024"). - Code Block watermark top-right corner at low opacity. - Pixel Wave 2 bottom edge, consistent across all cards.

Final card — CTA: - Headline: e.g. "Fix the root cause, the first time." or "Built for what's next." - cta-pill: "Download now" or "Read the whitepaper." - Logo lockup centered or top-left (reversed white).

Carousel consistency rules: Logo position, Pixel Wave 2, Code Block watermark position, and gradient field must be identical across all cards to create visual continuity when swiping. section-tag chips are the navigation signal for the reader.

Components used: logo-lockups, headline-coral-rule, section-tag, bulleted-proof, stat-block, quote-card, award-event-chip, code-block-primitive, cta-pill, pixel-wave-primitive

LinkedIn Post — Landscape (1200 × 627)

Purpose: LinkedIn feed post. Wider, shorter format requires content density discipline — fewer elements, more white space.

Layout: - Background: Gradient field full-bleed, or split: left 55% gradient field, right 45% bg.surface (#F8F8F8) for a two-tone composition that reads well at LinkedIn's compressed preview size. - Left panel (cols 1–6.5): Logo lockup top-left. headline-coral-rule Variant A (on gradient) or Variant B (on light surface for right panel). Headline: one to two lines, Funnel Display Semibold. Sub-headline: Funnel Display Regular or Funnel Sans Regular. cta-pill at bottom of left panel. - Right panel (cols 6.5–12, on gradient) or left-only layout: stat-block (one or two sourced stats, horizontal layout), proof-point-list Variant B, or image-mask-block Variant B (landscape block, 16:9 ratio, clinical scene). - Code Block watermark: Top-right corner, block.fill.1, 15–20% opacity. - Bottom edge: <PixelWave variant={2}> at 0.25 opacity, within the 60px bottom safe margin. - Safe area: 60px all sides. All logo, headline, CTA within center 1080 × 500px zone.

Components used: logo-lockups, headline-coral-rule, stat-block, proof-point-list, image-mask-block, cta-pill, code-block-primitive, pixel-wave-primitive

Avatar / Profile (400 × 400)

Purpose: Social profile image across LinkedIn, Twitter/X, Instagram, and similar platforms. Brand signal in a small circle-cropped or square context.

Layout: - Background: Full-bleed signature gradient (bg.field.from → bg.field.to), centered. - Logo: Stacked logo variant (logo-lockups Variant 2 — icon centered above wordmark) centered on the canvas. Use reversed white version on the gradient field. Scale the logo to fill approximately 60% of the canvas width, ensuring clearance on all sides (half icon height minimum clearance). - No additional components: Avatar must be logo only on gradient — no proof points, no CTA pill, no Pixel Wave, no watermark Code Blocks. The simplicity of the mark must read at 40–50px rendered size in a platform profile context. - Crop note: The full 400 × 400 canvas is square; many platforms apply a circular crop. Verify the logo mark is entirely inside the inscribed circle (radius 200px from center) before export.

Components used: logo-lockups

Event Announcement Card (1080 × 1080)

Purpose: Announcing CodaMetrix attendance or participation at documented conferences and industry events (e.g., ViVE 2025 — Nashville; HMA Spring CRO Forum 2026 — Frisco, TX, April 6 2026).

Layout: - Base layout DNA: gradient field, logo top-left (reversed white), Code Block watermark top-right corner, Pixel Wave 2 bottom edge. - Headline zone: "See us at [Event Name]" — Funnel Display Semibold, white, with coral rule beneath. - Event chip: award-event-chip Variant E (Event sub-layout) centered in the content zone. Event name in Funnel Display Semibold; location + date in Funnel Sans Regular type.size.small. Optional section-tag chip (e.g., "Event") as companion label. - content-container Variant A (purple CodeBlock): Wraps the event details for visual anchoring in the composition. - CTA: cta-pill — "Meet the team" or "Register now."

Do not invent events. Only document events verified in source files: ViVE 2025 Nashville; HMA Spring CRO Forum 2026 Frisco TX April 6 2026. See award-event-chip §Hard-fail gates.

Components used: logo-lockups, headline-coral-rule, award-event-chip, content-container, section-tag, cta-pill, code-block-primitive, pixel-wave-primitive

"We're Hiring" Card (1080 × 1080)

Purpose: Talent acquisition post signaling CodaMetrix culture and recognition. References the Newsweek "America's Greatest Startup Workplaces 2025" award when relevant.

Layout: - Base layout DNA: gradient field, logo top-left, Code Block watermark top-right, Pixel Wave 2 bottom edge. - Headline: "We're hiring." or "Join the team." — Funnel Display Semibold, white, coral rule beneath. - Award chip (optional, if referencing recognition): award-event-chip Variant A1 — "America's Greatest Startup Workplaces 2025 — Newsweek." Placed inside a content-container Variant A (Dark Maroon block.fill.3). Do not introduce any award not documented in source files. - Proof-point list: proof-point-list Variant B — 3 parallel statements about the team and mission. Use workforce transformation framing, not displacement framing (per Gate #1 rules). - CTA: cta-pill — "View open roles" or "Apply now."

Components used: logo-lockups, headline-coral-rule, award-event-chip, content-container, proof-point-list, cta-pill, code-block-primitive, pixel-wave-primitive

Quote Card (1080 × 1080)

Purpose: Feature the canonical clinical-leader testimonial as a standalone social post.

Layout: - Base layout DNA: gradient field, logo top-left, Code Block watermark top-right, Pixel Wave 2 bottom edge. - Content zone (centered, ~60% of canvas width): quote-card Variant A (gradient field). - Coral rule above (48px wide, 3px, accent.rule #F17053). - Quote text verbatim: "CodaMetrix has taken over the majority of our inpatient coding and has dramatically decreased our discharge-not-final-billed days." — Funnel Display Regular, type.size.quote (1.563rem), white. - Attribution: Dr. Max Rosen / Chair of Radiology / UMass Memorial Medical Center — Barlow Semi-Condensed, type.size.label, white at 80% opacity. - Do not paraphrase, shorten, or alter the quote. Do not invent testimonials.

Components used: logo-lockups, quote-card, code-block-primitive, pixel-wave-primitive

Holiday Animated Card — St. Patrick's Day GIF (1080 × 1080, frame sequence)

Purpose: Seasonal social animation that stays on-brand. References the St. Patrick's Day GIF frame sequence in CodaMetrix production assets.

Animation approach (frame sequence for GIF or video export): - Frame 1 (0–640ms): Background gradient field fades in. Logo lockup appears top-left with motion.ease.decelerate entrance (motion.duration.slow 640ms). - Frame 2 (640–1280ms): Code Block watermark tiles assemble at top-right corner — blocks slide in one at a time using motion.ease.assemble (cubic-bezier(0.2, 0.8, 0.2, 1)). Gold block.fill.2 accents added to the pattern to reference the seasonal warm tone without introducing off-palette colors (Gold #CFC17F is the on-palette warmth accent). - Frame 3 (1280–2000ms): Headline appears with motion.ease.decelerate: seasonal greeting in Funnel Display Semibold, white, coral rule animates in beneath (left to right, 320ms). Pixel Wave 2 steps in along the bottom edge, progressive reveal left to right. - Frame 4 (2000–3200ms): cta-pill fades in. Composition holds. Optional brief pulse on the coral rule (opacity 100% → 80% → 100%) using motion.duration.fast (180ms) to draw the eye. - Loop: GIF loops from Frame 4 back to Frame 1 with a 400ms pause on the final frame.

Palette discipline: Seasonal colors (green, shamrock imagery) are off-palette and must not be introduced. On-palette warmth (Gold #CFC17F, Lavender #DBACFF) may be used as seasonal accent fills in Code Block pattern tiles. The gradient field, white type, and coral rule remain the dominant visual language in every frame.

Motion rules: Never animate ribbons, loops, or infinity shapes. Code Blocks assemble; Pixel Wave steps. See motion.md §Six Motion Principles.

Components used: logo-lockups, headline-coral-rule, code-block-primitive, cta-pill, pixel-wave-primitive

Related

  • space-grid — spacing scale and social safe-area source data
  • pixel-waves — Wave 2 placement rules
  • code-blocks — watermark pattern geometry
  • motion — animation principles for animated cards and GIFs
  • 20-media/video-motion.md — full video/motion template specs

Video & Motion Templates

Motion principles derived from the static brand system, applied to video templates: title cards, lower-thirds, transitions, and end cards — with a storyboard table format for pre-production planning.

Composes: logo-lockups, headline-coral-rule, code-block-primitive, pixel-wave-primitive, cta-pill, section-tag, stat-block, content-container

Applied Motion Principles

All motion work derives from the static brand system documented in ../00-foundations/motion.md. These are the six principles in applied form for video production.

1. Geometry in Motion: Code Blocks Assemble, Reveal, and Mask

The angular code-block-primitive shapes are the primary animated geometry. Motion sequences are built around:

  • Assembly: Code Block tiles appear and snap into position individually, not all at once. Each tile enters using motion.ease.assemble (cubic-bezier(0.2, 0.8, 0.2, 1)) — a slight overshoot that settles with precision.
  • Reveal: Content inside a content-container role block is revealed via a clip-path wipe that follows the 45° cut angle — content appears as if the block is opening.
  • Masking: Photography inside image-mask-block role blocks appears after the Code Block mask reaches its final position. Never animate a face appearing simultaneously with a clipping edge moving across it — the mask settles first, then the image fades in, or both animate with a matched clip-path reveal.

NEVER: Flowing ribbons, infinity loops, organic wave shapes, or any motif not derived from the Code Block and Pixel Wave geometry. If a shape can be described as "flowing" or "looping," it is off-brand.

2. Calm, Precise, Confident Pacing

The product delivers relief backed by authority. Motion must match.

  • Entrances: motion.ease.decelerate (cubic-bezier(0, 0, 0.2, 1)) — fast start, soft landing. Elements do not drift or float; they arrive deliberately.
  • Traversals: motion.ease.standard (cubic-bezier(0.4, 0, 0.2, 1)) — elements moving across the screen.
  • Assembly sequences: motion.ease.assemble (cubic-bezier(0.2, 0.8, 0.2, 1)) — the precision-snap feel specific to Code Block entry.

Duration reference: - motion.duration.fast (180ms): hover states, icon swaps, micro-interactions. - motion.duration.base (320ms): panel reveals, card flips, standard transitions. - motion.duration.slow (640ms): hero reveals, Code Block assembly sequences, headline entrances.

No frenetic cuts. No spin effects. No whip-pans. No flashy kinetic typography that moves type before it can be read.

3. Palette Discipline in Every Frame

Every frame of every video must stay on the documented color system. No frame is exempt.

  • Background field: Gradient (bg.field.from #973DDA → bg.field.to #402058) is the canonical animated background. Do not introduce white flashes, black fades, or off-palette transition frames.
  • Type: White (text.on-dark #FFFFFF) on gradient fields. Text Black (text.on-light #22192B) on light surface frames.
  • Accents: Coral #F17053 (accent.cta, accent.rule) — rules, CTAs, Code Block accent fills. The logo coral #FE6E4E is the logo artwork only; it does not appear on animated rules or fills.
  • Block fills in motion: block.fill.1 through block.fill.4 plus the approved additional fills. No gradient fills on Code Block shapes themselves — ever.

4. Type Is the Voice — Let It Land and Breathe

  • Funnel Display headlines animate in at motion.duration.slow (640ms) with motion.ease.decelerate. The headline arrives; it sits; it is read; the next element enters.
  • Never rush headline reveals. The next element should not enter until the headline has been on screen for a minimum of 1.5 seconds (after the animation completes).
  • Proof points reveal one item at a time, not all simultaneously. Sequential entrance with 200–320ms stagger per item.
  • The coral rule beneath the headline animates in immediately after the headline, drawing left to right over motion.duration.base (320ms).

5. Human Payoff on Screen

Where healthcare professionals appear (doctors, nurses, administrators): - Use image-mask-block role — the Code Block clip-path mask over the photograph. - In video, the mask reaches its final position (clip-path animation completes) before or simultaneously with the image fade-in. Never animate a clipping edge moving across a face. - Photographs must follow ../00-foundations/photography.md: real medical professionals, real clinical environments, bright/clean lighting, faces centered within the block.

6. Transparency / Traceability Metaphor

The product is touchless, transparent, and traceable. Motion can carry this: - Code Blocks assembling to reveal an outcome (codes resolving). - Pixel Wave stepping forward to show progression (a process completing). - Data patterns surfacing through block reveals. Use this intentionally, not decoratively. Every Code Block assembly should mean something in the narrative — a step completing, a proof point landing, a claim resolving.

Do Not

  • Do not animate ribbons, loops, or infinity shapes in any form.
  • Do not use easing curves outside the three defined tokens without explicit brand approval.
  • Do not animate off-palette colors.
  • Do not use motion.duration.fast for hero entrances.
  • Do not reveal proof points all at once — stagger each item.
  • Do not let type animate while it is still in motion — the headline must be fully settled before the next element enters.

Frame / Aspect Sizes

Format Dimensions (px) Aspect Ratio Primary Use
Widescreen 1920 × 1080 16:9 YouTube, website embed, presentation video, conference screen
Vertical 1080 × 1920 9:16 Instagram Reels, TikTok, Stories, LinkedIn video (vertical)
Square 1080 × 1080 1:1 Instagram feed video, LinkedIn video (square)

Frame rate: 24fps for cinematic feel; 30fps for web/social delivery standard. Match source footage frame rate.
Codec: H.264 for web/social delivery. ProRes 422 or higher for mastering.
Color space: sRGB for screen delivery. Gradient field renders correctly in sRGB — no color space conversion needed for digital outputs.

Video Templates

Title Card

Purpose: Opening card for any CodaMetrix video — product demos, thought-leadership, event recaps, social video. Establishes brand identity in the first 3–5 seconds.

Dimensions: 1920 × 1080 (adapt to 1080 × 1920 or 1080 × 1080 per distribution format).

Composition: - Background: Gradient field, full frame. - <PixelWave variant={1}>: At the background Z-level, behind all content. Animates in with a directional flow (motion.ease.decelerate, motion.duration.slow 640ms) expanding from center or left edge. - Code Block pattern: Top-right corner watermark tiles assemble one at a time (motion.ease.assemble, staggered 80ms per tile, motion.duration.slow 640ms per tile). block.fill.1 (purple) primary pattern; one or two tiles in block.fill.2 (gold) for depth. - Logo entrance: Reversed white horizontal lockup fades in at top-left (motion.ease.decelerate, motion.duration.slow 640ms). Hold logo 0.5 seconds before headline begins. - Headline entrance: headline-coral-rule Variant A. Headline text slides in from slightly below (8px offset) and settles: motion.ease.decelerate, motion.duration.slow (640ms). Coral rule draws left to right immediately after headline settles: motion.duration.base (320ms). - Sub-headline (optional): Enters after headline + rule are settled. Fade-in: motion.ease.decelerate, motion.duration.base (320ms). White Funnel Display Regular or Funnel Sans Regular. - <PixelWave variant={2}>: Steps in along the bottom edge from left to right: motion.duration.base (320ms), after logo and headline are settled.

Hold duration: Title card typically holds 3–5 seconds after all elements are settled before cutting to content.

Components used: logo-lockups, headline-coral-rule, pixel-wave-primitive (Wave 1 hero, Wave 2 footer), code-block-primitive

Lower-Third

Purpose: Identifies on-screen speakers, names data sources, labels locations, or adds wayfinding context during interview or presentation footage. Appears in the lower third of the frame without obscuring the main subject.

Placement: Bottom of frame, bottom-safe zone. For 16:9 (1920 × 1080): rows 810–950 (lower-third band). Never cover the speaker's mouth or eyes.

Anatomy: - Background element: section-tag Variant A or B (<CodeBlock role="tag">) scaled to lower-third dimensions — a wider, shorter Code Block shape with the 45° cut at the top-right corner. Fill: block.fill.1 (purple) or block.fill.3 (dark maroon). Width flexes to accommodate the text; geometry constants unchanged. - Name / Primary label: Funnel Display Semibold, 22–26px (at 1920 × 1080 output), white text.on-dark. Aligned left inside the block, padded 24px from uncut edges. - Title / Secondary label: Barlow Semi-Condensed Regular, type.size.label (0.75rem / 12px), type.tracking.label (0.04em), white at 80% opacity. Second line below the name. - Coral rule: accent.rule #F17053, 32px wide, 2px tall, between name and title lines. (Optional — use when visual separation aids legibility.)

Animation: - Entrance: Lower-third slides in from the left edge: motion.ease.decelerate, motion.duration.base (320ms). The Code Block shape leads; name text fades in simultaneously or 80ms after the shape settles. - Exit: Slides back out to the left: motion.ease.standard, motion.duration.base (320ms).

Variants: - Speaker ID: Name + Title + Organization (e.g., "Dr. Max Rosen / Chair of Radiology / UMass Memorial Medical Center"). - Stat lower-third: Stat figure in Funnel Display Semibold (large) + descriptor in Funnel Sans + source citation — surfacing a key proof point mid-video. Use content-container Variant A (Purple Code Block) shaped to lower-third proportions. - Location / event: Event name (award-event-chip Variant E) styled as a lower-third label.

Components used: section-tag, content-container, headline-coral-rule, award-event-chip

Transition — Code Blocks Assembling

Purpose: Scene-to-scene transition that reinforces the brand's angular geometry language. Used between major content sections in a longer video, or between individual slides in a motion-deck.

Duration: motion.duration.slow (640ms) total transition. Easing: motion.ease.assemble (cubic-bezier(0.2, 0.8, 0.2, 1)).

Animation sequence:

  1. Assembly phase (0–400ms): Code Block tiles (<CodeBlock role="pattern">) assemble across the frame from a corner or edge, covering the outgoing scene. Tiles enter one by one in a staggered grid sequence, snapping into position with the assemble ease (slight overshoot, precision settle). Colors: primary block.fill.1 (purple), with accent tiles in block.fill.3 (dark maroon) or block.fill.2 (gold). The gradient field (bg.field.from → bg.field.to) shows between tiles during assembly.
  2. Full-cover hold (400–500ms): All tiles assembled. Full frame is the assembled Code Block pattern on the gradient field. This is a momentary brand identity flash — not a static frame, but a held beat.
  3. Reveal phase (500–640ms): Tiles disassemble or wipe away to reveal the incoming scene, using the reverse of the assembly sequence. Or: the incoming scene's background gradient is already present and the tiles clear to reveal the new content beneath.

Palette rule: The gradient field is always visible between or behind the Code Block tiles during the transition. No white, black, or off-palette color frames appear at any point during the transition.

Do not use: Crossfades, wipes, star-wipes, page-turns, or any non-Code-Block transition. The Code Block assembly is the only brand-sanctioned transition language.

Components used: code-block-primitive, pixel-wave-primitive (optional Wave 1 if transition opens onto a hero scene)

End Card

Purpose: Final frame(s) of any CodaMetrix video. Holds on screen for 5–8 seconds (longer if it carries a URL or QR code for the viewer to act on). The last brand impression the viewer has.

Composition (1920 × 1080, adapt per format): - Background: Gradient field full-bleed. No fades to white or black at the end — hold on the gradient field. - Logo: Reversed white horizontal lockup, centered vertically and horizontally, or aligned to the compositional center. This is a primary-placement moment; use the full horizontal lockup (icon + wordmark), not icon-only. - Coral rule: accent.rule #F17053, 64–80px wide, 4px tall, centered beneath the logo. The coral rule is the punctuation of the end card — it grounds the logo in the brand's visual voice. - CTA pill: cta-pill centered below the coral rule: "Visit codametrix.com," "Download now," or "Schedule a demo." Coral fill, white Funnel Display Semibold label. - <PixelWave variant={2}>: Bottom edge of frame, stepped in and held. 0.3 opacity. - Code Block watermark: Top-right corner, small cluster, block.fill.1, 15% opacity.

Animation (entrance into end card from the preceding transition or scene): - Logo fades in: motion.ease.decelerate, motion.duration.slow (640ms). - Coral rule draws left to right after logo settles: motion.duration.base (320ms). - CTA pill fades in: motion.ease.decelerate, motion.duration.base (320ms), after the coral rule completes. - Pixel Wave 2 steps in bottom edge: motion.duration.base (320ms). - Hold all elements for 5–8 seconds.

Components used: logo-lockups, cta-pill, pixel-wave-primitive, code-block-primitive

Storyboard Template

Use this table format for pre-production planning on any CodaMetrix video. Each row is one shot or major moment. Fill out the table before opening a motion tool.

Frame Action Copy Timing
1 — Title card Gradient field fades in. Pixel Wave 1 animates in from left at background layer. Code Block pattern tiles assemble top-right corner, staggered, ease.assemble. — 0:00–0:02
2 — Logo entrance Reversed white horizontal logo lockup fades in top-left, ease.decelerate 640ms. Hold logo 0.5s. — 0:02–0:03
3 — Headline entrance Headline slides up 8px and settles, ease.decelerate 640ms. Coral rule draws left to right 320ms. "[Headline copy here — Funnel Display Semibold, white]" 0:03–0:05
4 — Pixel Wave 2 entrance Wave 2 steps in along bottom edge, left to right, 320ms. — 0:05–0:05.5
5 — Sub-headline Fade in below headline, ease.decelerate 320ms. "[Supporting copy — Funnel Display Regular or Funnel Sans]" 0:05.5–0:06
6 — Proof points 3 bullet items enter one at a time, 320ms each, staggered 200ms apart. Coral markers appear first; text fades in. "• [Proof point 1] • [Proof point 2] • [Proof point 3]" 0:06–0:09
7 — Stat reveal content-container Purple Code Block assembles from bottom-left. Stat figure counts up from 0 to final value over 640ms. Descriptor fades in. "[Figure] / [Descriptor] / ([Source])" 0:09–0:11
8 — Human moment image-mask-block Code Block mask assembles to final shape 640ms. Image cross-fades in after mask settles. Lower-third slides in from left: name + title. "[Speaker name] / [Title / Institution]" 0:11–0:15
9 — Transition Code Blocks assemble across frame covering outgoing content. Full-cover hold 100ms. Tiles clear to reveal incoming scene. — 0:15–0:16
10 — [Content section] [Describe next content section here] "[Copy for this section]" 0:16–[N]
N-1 — Transition to end card Code Block assembly transition. — [N]–[N+1s]
N — End card Logo centered, coral rule draws beneath, CTA pill fades in. Pixel Wave 2 steps along bottom. Hold 6s. "Visit codametrix.com" (or relevant CTA) [N+1s]–[end]

Instructions for using this table: 1. Duplicate the table for each video project. 2. Fill in Frame column with a descriptive label (scene type + sequential number). 3. Action column: describe what is moving, entering, or changing on screen. Reference component names (code-block-primitive, etc.) for any geometry elements. 4. Copy column: include the exact text that will appear on screen. Do not use placeholder copy ("Headline goes here") in the production storyboard — write the real words, or leave the field blank and flag it as "COPY PENDING." 5. Timing column: mark in MM:SS format. Sum all timing to verify the total runtime. 6. After completing the table, verify: all sourced stats include their source citation in the Copy column; no AI-replaces-people framing in any proof point copy (Gate #1); all geometric elements are Code Blocks or Pixel Waves (no ribbons or loops).

Related

  • ../00-foundations/motion.md — motion token definitions and the six principles in full
  • ../00-foundations/code-blocks.md — Code Block geometry for animation
  • ../00-foundations/pixel-waves.md — Wave 1 vs Wave 2 motion roles
  • ../00-foundations/photography.md — photography rules for faces in Code Block masks
  • 20-media/social.md — animated social card specs (GIF / short-form)
  • 20-media/digital.md — HTML5 display ad animation constraints