Design system

The CodaMetrix design system is the single authoritative source for visual and interaction standards across all CodaMetrix brand touchpoints — marketing, product, social, and print.

Three Forms

The system ships in three coordinated forms. They are maintained in sync; the token canon is the root.

(a) Markdown token canon — this folder

The source of truth lives here on Drive. Every foundation doc, component spec, media guideline, and token file is authored and updated in this folder tree. When in doubt, this is the reference.

(b) GSAP living styleguide — DS/styleguide/

A browser-rendered styleguide built with GSAP. It renders Code Block animations, Pixel Wave behaviors, typography specimens, and color swatches live against actual token values. Run it locally or deploy it for review. The styleguide is generated from the tokens — do not hard-code values in styleguide source files.

Tier Map

Foundation docs define the laws of the visual system — geometry, color, type, motion. Component docs apply those laws to specific UI patterns. Media docs translate the system to production formats. Tokens are the numeric bridge between the markdown canon and every code artifact.

Contribution Rule

1. Reload the styleguide — rebuild or refresh the GSAP styleguide so rendered specimens reflect the new values.

Ship / No-Ship Gate

The 4 hard-fail gates — any one is an automatic Do Not Ship, regardless of overall score:

1. AI-replaces-people framing. Any asset that frames CodaMetrix as replacing coders, reducing headcount, or "taking jobs" must not ship. (violates brand + soul)
2. Wrong logo or mark. Using a flowing ribbon, loop, or infinity shape in place of the angular interlocking-links icon; or any distorted, shadowed, or recolored logo version. (violates brand-style-guide §logo)
3. Unproven stat claim. Any factual or numeric claim with no source, citation, or documented basis. (violates voice "prove everything")

Complete index of every document in the design system. All links are relative to this file.

Foundations

Core laws of the visual system. No component or media spec may contradict a foundation doc.

• Color — primitives, semantic tokens, signature gradient, dual-coral rule, contrast pairings
• Typography — three typefaces, six-step hierarchy, leading and tracking tokens
• Logo — approved versions, clearance rules, the interlocking-links mark, never-do list
• Code Blocks — geometry law, four roles, color fills, implementation recipe
• Pixel Waves — Wave 1 (bold/hero) and Wave 2 (stepped/footer), shared rules
• Photography — subject matter, mood, lighting, in-Code-Block masking rules
• Iconography — style, stroke weight, sizing tokens, corner treatment
• Motion — duration tokens, easing tokens, six motion principles
• Space & Grid — spacing scale, 12-column grid, breakpoints, social safe areas

Components

Reusable UI and layout components. Each spec references the foundation tokens it depends on and declares its hard-fail gates.

• Award & Event Chip
• Bulleted Proof
• Code Block Primitive
• Content Container
• CTA Pill
• Headline + Coral Rule
• Image Mask Block
• Logo Lockups
• Pixel Wave Primitive
• Proof Point List
• Quote Card
• Section Tag
• Stat Block

Media

Production specifications for each output format. Apply foundation + component standards to real-world format constraints.

• Social — Instagram, LinkedIn; safe areas, carousel layout DNA, platform-specific rules
• Digital — web, email, display advertising
• Print — paper specs, bleed, safe area, CMYK production
• Video & Motion — frame rates, export specs, motion principle application

Styleguide

The GSAP living styleguide renders token values, component specimens, and animation behaviors in the browser.

• styleguide/ — local or hosted GSAP styleguide; rebuild after any token change

The foundational graphic system — geometry law, four roles, rules, and the implementation recipe.

What They Are

Code Blocks are the core visual element of CodaMetrix. They echo the logo's angular-yet-rounded construction and make any layout unmistakably on-brand. A Code Block reads as a rectangle or hexagon-adjacent shape with one corner cut at a consistent 45° angle, rendered with a darker offset "facet" for depth.

Geometry Law

All geometry parameters come from tokens.codeblock. These values are constants — they must not change.

Width and height can flex freely to fit content — portrait, landscape, or near-square. However, the cut-angle, cut-ratio, facet-offset, and facet-darken must remain constant across all instances.

This is the law: shape dimensions flex; angles and ratios never change.

Color Fills

Code Blocks use brand colors only, from solid fills only.

Additional approved fills: White #FFFFFF, Coral #F17053 (accent use), Deep Plum #402058.

No gradient on the blocks themselves. Gradients live in the background field (see color §Signature Gradient and pixel-waves). A Code Block is a flat, solid-color geometric form. The facet creates implied depth — a gradient fill would visually fight the facet and destroy the geometry.

Four Roles

1. Base Shape / Pattern

Arrange blocks in a structured repeating grid — monochromatic for subtle watermark backgrounds, or multicolor (purple, gold, coral, dark maroon, wine red, white) for energetic compositions. Used as top-corner watermarks in social layouts and as large-format backgrounds.

2. Image Mask

Apply the angular shape as a clip mask over photography. Keep the subject (face, focal point) clearly visible and centered within the block. Never crop faces at the cut corner. See photography for subject centering rules.

3. Content Container

Use the block as a holder for text, statistics, quotes, or testimonials. Rule: dark block + light text (text.on-dark) OR light block + dark text (text.on-light). Always meet WCAG AA contrast — see color §Contrast Pairings.

4. Section Tags / Labels

Small Code-Block-shaped chips for wayfinding (e.g., "Section 7" tags). Use Barlow Semi-Condensed (Label) for the text inside. See type §Label.

Rules

• Width and height flex; angles and cut ratio constant.
• Never stretch, skew, or distort in a way that alters the 45° foundational geometry.
• No gradients on the blocks — solid brand colors only.
• No non-brand colors.
• Do not overuse in complex layouts — the system structures content, it does not bury it. If everything on the page is a Code Block, nothing reads as a Code Block.

Don'ts

• Do not round the cut corner — it is a precise angled cut, not a curve.
• Do not apply drop shadows to Code Blocks.
• Do not use as decorative blobs or amorphous shapes.
• Do not introduce a cut on more than one corner per block.
• Do not mix gradient fills with the facet shadow.

Implementation

Code Blocks ship as two artifacts:

1. SVG/CSS recipe — a parameterized clip-path polygon computed from cut-angle, cut-ratio, and facet-offset tokens. The facet is a second polygon behind the main shape, filled with the main fill color darkened by facet-darken (18%).
2. <CodeBlock> React primitive — wraps the SVG recipe with a fill, width, height, and optional children prop. Children are rendered inside the clip region (for content-container role) or the component accepts an <img> child (for image-mask role).

Complete color system for CodaMetrix: primitives, semantic tokens, and application rules.

Primitives

Primary

Secondary

Shades

Neutrals

Semantic Tokens

Semantic tokens map intent to primitive values. Resolved hex values shown for quick reference.

Dual-Coral Rule

There are two coral values in the system — use the correct one for the correct context:

• #FE6E4E — Logo and icon only. This is the coral used in the full-color logo mark. Do not use it for type, UI, or background fills.
• #F17053 — All general use. CTAs, accent rules, Code Block fills, semantic tokens (accent.cta, accent.rule). This is the palette coral.

Using #FE6E4E outside the logo, or #F17053 in the logo, is an error.

Signature Gradient

The dominant brand background field is a purple-to-deep-plum gradient.

This gradient is the base field for social/marketing layouts, hero sections, and login screens. See pixel-waves for the wave elements that layer on top.

Contrast Pairings

WCAG-oriented pairings for accessible layouts.

Dark block + white text

Light block + dark text

Coral #F17053 on white and coral on dark both require verification at small type sizes — prefer coral for accents, rules, and large CTA labels rather than small body text.

Style Principle

Icons must look like they belong in the same family as the Code Block shapes and the logo mark. A reader should be able to recognize them as part of the same system without being told.

Stroke Weight

Icons use a consistent stroke weight scaled to the icon's output size. The design token --icon-stroke (1.5px) is the standard stroke weight and applies to the default 24px icon size (--icon-size-md). Stroke weight should remain visually consistent at the sizes the icon will be rendered — do not use the same absolute stroke weight across dramatically different sizes.

Stroke weight by size:

• --icon-size-sm (16px): 1.5px stroke (--icon-stroke)
• --icon-size-md (24px): 1.5px stroke (--icon-stroke) — default
• --icon-size-lg (32px): 2px stroke (scale up proportionally)

Filled icon variants are acceptable for active states and high-emphasis contexts. The fill must use a brand color from color §Primitives.

Sizing Tokens

Icons align to the spacing scale from space-grid and the icon.size token group. The three canonical icon size tokens are:

For sizes outside the token set (e.g. 12px inline/label or 48px hero/display), align to the nearest spacing scale step from space-grid.

Corner Treatment

Icons must use the angular-yet-rounded character of the brand. This means:

• Inner corners of strokes carry a slight radius.
• Outer corners are more angular — the cut geometry is referenced, not replicated exactly.
• Do not use fully circular/blob style.
• Do not use fully sharp/pixel-perfect geometric style.

Color

• Default icons: Text Black #22192B on light backgrounds; White #FFFFFF on dark backgrounds.
• Accent icons (interactive, CTA, highlight): Coral #F17053 (accent.cta).
• Brand icons (logo-adjacent, category marks): Purple #973DDA.
• No off-palette colors on icons.

Do

• Reference the Code Block geometry and logo mark character when creating new icons.
• Align icon size to the spacing scale.
• Use stroke weight consistent with the output size.
• Maintain consistent optical weight across the icon set.
• Use a 1px grid snapping discipline at the icon's design size.

Don't

• Do not design icons that look like generic rounded-square systems (iOS style) or purely geometric flat systems.
• Do not use gradients inside icons.
• Do not vary stroke weights arbitrarily within a single icon.
• Do not use off-brand colors.
• Do not introduce new corner treatment styles — follow the angular-yet-rounded convention.

Approved logo versions, clearance rules, and the never-do list.

The Mark

The real mark is the angular interlocking-links icon. Do NOT substitute flowing "ribbon-loop" or infinity-style shapes — those are off-brand and must never appear as logo substitutes.

Approved Versions

Primary (preferred)

Full-color logo — use whenever possible.

Reversed

White (#FFFFFF) version on dark or black backgrounds. Used where the full-color version would lose contrast or visibility (e.g., on the deep-purple gradient field).

Monochrome Black

Single-color #000000 version. For print, grayscale contexts, or wherever color reproduction is unavailable.

Secondary Versions (Limited Use)

Clearance

Clearance ensures the logo is never crowded by other graphics or text. The clearance unit is defined as "X" = the height of the icon.

Clearance scales proportionally with the logo. At larger sizes, the physical clearance space grows. At smaller sizes, it shrinks — but the proportional relationship is always maintained.

Approved contexts for icon alone: mobile/responsive navigation, app icons, social profile images, page anchors, footers.

Never

• No drop shadows on the logo.
• No colors outside the approved logo palette (the four icon colors + Logo Black wordmark).
• Do not change, distort, stretch, or remove any logo element.
• Do not alter the proportional relationship between the icon and wordmark.
• Do not use #F17053 (general Coral) in the logo — only #FE6E4E (Coral Logo). See color §Dual-Coral Rule.
• Do not place the logo on backgrounds with insufficient contrast — use the Reversed version on dark fields.
• Do not animate the logo mark as a ribbon, loop, or flowing shape. See motion.

Motion tokens and the six principles for animating the CodaMetrix brand.

Motion Tokens

Source: tokens.motion.

Duration

Easing

Six Motion Principles

1. Geometry in motion = Code Blocks, not ribbons

Animate the angular code-blocks assembling, revealing, and masking. Animate the pixel-waves stepping and flowing. Never introduce flowing loop/ribbon/infinity motifs — those shapes are not part of this brand and are actively off-brand.

2. Calm, precise, confident pacing

Eased, deliberate moves that match the brand feeling (relief backed by authority). No frenetic cuts, no flashy spin effects. Prefer motion.ease.decelerate for entrances and motion.ease.standard for traversals. The pacing should feel like a capable system working — not a startup demo reel.

3. Palette discipline in motion

Stay on the documented color palette in every frame. Purple/plum fields, white type, coral accents. Do not introduce off-palette colors during transitions (e.g., no white flashes, no black fades unless intentional and on-palette). Gradient fields (bg.field.from → bg.field.to) are the correct animated background surface.

4. Type is the voice — let it land and breathe

Funnel Display headlines should appear with deliberate timing, sit on screen long enough to be read, and allow the next element to arrive in sequence. Never rush headline reveals. Reveal proof points one at a time, not all at once. Duration for headline entrance: motion.duration.slow (640ms) with ease.decelerate.

5. Human payoff on screen

Where people appear (doctors, nurses, healthcare workers), present them inside code-blocks masks per the photography rules. In motion, faces should not be obscured by transitioning block edges — ensure the Code Block mask is in its final position before the image fades in, or animate both simultaneously with a matched clip-path reveal.

6. Transparency/traceability metaphor

The product is touchless, transparent, and traceable. Motion can visualize this: codes resolving, data patterns surfacing, pathways connecting. Use the Code Block and Pixel Wave language to carry this — blocks assembling to reveal an outcome, Pixel Wave stepping forward to show progression. This is the brand's unique visual metaphor; use it intentionally, not decoratively.

Do Not

• Do not animate ribbons, loops, or infinity shapes.
• Do not use motion tokens outside their defined use cases (e.g., fast duration for hero entrances).
• Do not introduce easing curves outside the three defined tokens without explicit brand approval.
• Do not animate off-palette colors.

Subject, mood, lighting, and masking standards for CodaMetrix photography.

Subject Matter

Photography features real medical professionals in real clinical environments.

• Who: Doctors, nurses, administrators, and other healthcare workers.
• Where: Hospitals, clinics, real workspaces — authentic settings, not staged office stand-ins.
• Not: Generic business stock (people at laptops in coffee shops, handshakes in front of windows, posed corporate hallways).

The photography must reinforce the brand's healthcare grounding. A viewer should immediately recognize the context as clinical and professional.

Mood

Collaboration and problem-solving. Photography captures moments of people working together — reviewing information, communicating across roles, solving real workflow challenges. The mood is active and focused, not performative.

• Show the work, not the pose.
• Prefer candid or semi-candid over stiff, camera-facing portraits.
• Multiple subjects interacting is preferred over isolated individuals (where context allows).

Lighting

Bright, clean, natural. Lighting should communicate a modern, open, professional environment.

• Avoid dramatic shadows, moody underlighting, or artificially dark clinical environments.
• Prefer images with natural light sources or clean studio-quality supplemental lighting.
• Skin tones should read accurately — no heavy warming or cooling color grading.

Portraits

For individual/headshot-style photography:

• Backgrounds: Neutral (grey, white) or softly textured gradients. Keep backgrounds from competing with the subject.
• Lighting: Even, flattering, professional.
• No busy or distracting backgrounds.
• No branded-wall "corporate portrait" tropes.

In Code Block Masks

When photography is used inside code-blocks image-mask role:

• Faces and focal points must be centered and unclipped within the block.
• The 45° corner cut must not intersect a face, eye, or key subject area.
• Compose the crop so the subject is clearly visible in the central area of the block.
• If a specific shot does not fit the block geometry without awkward cropping, choose a different image or a different block proportion — do not compromise the subject.
• Do not use a Code Block mask on an image where the subject is positioned near an edge; reframe or recrop first.

Do

• Source authentic clinical imagery from professional healthcare photography libraries or on-site photography.
• Ensure subjects are diverse and represent the range of healthcare professionals who use the product.
• Select images where the lighting and environment are compatible with the color palette (clean backgrounds take the gradient field well as a backdrop).
• When in doubt about a crop, center the subject and verify the cut corner does not clip the face.

Don't

• No generic stock photography.
• No photos that could plausibly be from any non-healthcare industry (avoid images interchangeable with "tech" or "finance" stock).
• Do not apply heavy filters, dramatic color grading, or oversaturated effects.
• Do not mask images in a Code Block where the subject's face falls at the cut corner.
• Do not use images of patients — subjects should always be medical professionals, not patients.

Two complementary wave elements built from brand geometry, with distinct roles.

Overview

Pixel Waves are a secondary brand graphic system — layered above color gradient fields and below primary content. There are exactly two: Wave 1 (bold/energetic) and Wave 2 (structured/stepped). They are never interchangeable.

Wave 1 — Bold, Movement-Forward

Character: Energetic, impactful, directional. Conveys momentum and forward motion.

Primary uses:

• Hero sections
• Full-page backgrounds
• App interface backgrounds
• Login / landing screens

Color:

• Primary: Purple #973DDA for maximum brand impact
• Alternative: Neutral grey for subtlety when the composition needs less energy

Rules:

• Never distort, rotate out of its intended orientation, or over-stretch Wave 1.
• Do not place Wave 1 in support/footer roles — that is Wave 2's job.
• Do not overlap Wave 1 with dense text content; it is a background element.

Wave 2 — Structured, Step-Like

Character: Rhythmic, precise, stepped bar pattern. Conveys automation and precision more than movement.

Primary uses:

• Footer bands
• Section dividers
• Infographic backing elements
• Data visualization support elements

Color:

• Low-opacity or light tones under text content
• The stepped pattern seen along the bottom edge of social carousel cards is the canonical example

Rules:

• Use at low opacity when placed under text — it should complement, never compete.
• Use sparingly; it is a supporting texture, not a featured element.
• Never distort, rotate, or over-stretch Wave 2.
• Do not use Wave 2 in hero/background roles — that is Wave 1's job.

Shared Rules (Both Waves)

• Both waves operate on the documented color palette. No off-palette colors.
• In motion contexts, Wave 2's stepped pattern can animate as a progressive step/reveal. Wave 1 can flow or expand directionally. See motion for general animation principles.

Do Not

• Do not use a wave as a substitute for a code-blocks pattern.
• Do not flip Wave 2 upside-down or mirror it arbitrarily — maintain its intended orientation.
• Do not add gradients to the wave elements themselves (gradients live in the background field — see color).
• Do not use both waves at the same Z-level in a single composition — they have distinct spatial roles (hero vs. footer).

Spacing scale, 12-column grid, breakpoints, and social safe-area guidance.

Spacing Scale

Base unit: 4px. All spacing values are multiples of the base. Source: tokens.space.

Use only values from this scale for margin, padding, gap, and layout spacing. Do not use arbitrary values (e.g. 20px, 30px).

The largest step (96px) is used for major section breaks and hero vertical padding. The smallest (4px) is for inline micro-gaps (e.g., icon-to-label, tag internal padding).

12-Column Grid

Source: tokens.grid.

The 12-column grid allows 2-, 3-, 4-, and 6-column sub-layouts without fractional columns. Code Block compositions typically span 4–6 columns on desktop; headlines span 8–10 for visual weight. See code-blocks for block placement rules.

Breakpoint Behavior

• sm (480px): Single-column layouts; stacked content. Navigation collapses.
• md (768px): Two-column grids unlock; secondary content panels activate.
• lg (1024px): Full grid available; three- and four-column Code Block patterns.
• xl (1440px): Maximum content width enforced; lateral margins expand.

Social Safe Areas

Pixel Wave 2 stepped patterns along the bottom edge of social cards must stay within the safe area — see pixel-waves.

Three-typeface system, six-step hierarchy, and all scale/leading/tracking tokens.

The Three Typefaces

All three typefaces are self-hosted as woff2 files. All three are available on Google Fonts. Do not load them via CDN — serve from the project's /fonts/ directory.

Why These Three

• Funnel Display signals innovation and authority — the forward-facing, confident face of the brand.
• Funnel Sans is the trustworthy workhorse — modern, neutral, readable at any length.
• Barlow Semi-Condensed is the precision face — structured and space-efficient for data tables, chip labels, section tags, and UI navigation.

Six-Step Hierarchy

Scale ratio: 1.25 (major third). Source: tokens.type.scale.ratio.

Scale derivation: 1rem × 1.25 = 1.25rem (not used directly), 1.25 × 1.25 = 1.563rem (quote), × 1.25 = 1.953rem (sub), × 1.25 = 2.441rem (not in scale), headline uses 3rem (rounded for impact). Small and label sit below body at ÷ 1.25 steps.

Leading (Line-Height) Tokens

Headlines (type.size.headline, type.size.sub) use leading.tight. Body, small, label use leading.normal.

Tracking (Letter-Spacing) Token

Display and body typefaces are set at default (0) tracking. The 0.04em tracking on labels ensures legibility at small sizes in condensed settings.

Application Notes

• Funnel Display breathes. In motion, headlines should land with deliberate pacing and sit before the next element arrives — see motion §"Type is the voice."
• Never use Barlow Semi-Condensed for body copy. It is a label/data face only.
• Semibold (600) is the primary display weight. Light (300) is available for contrast in oversized display moments (e.g., large decorative numerals). Regular (400) sits between — used for quotes and sub-headlines that need less visual weight than the headline.
• Color pairing: White (text.on-dark) on gradient/dark backgrounds; Text Black (text.on-light) on surface/light backgrounds — see color §Contrast Pairings.

Anatomy

Two sub-layouts depending on use case:

Award chip:

1. Category label — Barlow Semi-Condensed Regular, type.size.label (0.75rem), type.tracking.label (0.04em), e.g. "Award".
2. Award name — Funnel Display Semibold, type.size.sub (1.953rem) or type.size.quote (1.563rem) depending on available space.
3. Issuing body + year — Funnel Sans Regular, type.size.small (0.8rem).
4. Optional coral rule — accent.rule (#F17053), 32px wide, 2px tall, beneath the award name.

Event chip:

1. Category label — Barlow Semi-Condensed Regular, type.size.label (0.75rem), e.g. "Event".
2. Event name — Funnel Display Semibold, type.size.sub or type.size.quote.
3. Location + date — Funnel Sans Regular, type.size.small (0.8rem).
4. Optional section tag (Code Block chip) as a companion label for the event type or track.

Both sub-layouts may be rendered as standalone text lockups or placed inside a <CodeBlock> container (see content-container).

Variants

Award Variants (real, documented honors)

Variant A1 — Newsweek "America's Greatest Startup Workplaces 2025"

• Award name: America's Greatest Startup Workplaces
• Issuing body: Newsweek
• Year: 2025

Variant A2 — "Top 50 Women Leaders in Healthcare Technology 2024"

• Award name: Top 50 Women Leaders in Healthcare Technology
• Year: 2024

Event Variants (real, documented appearances)

Variant E1 — ViVE 2025, Nashville

• Event name: ViVE 2025
• Location: Nashville
• (source: CodaMetrix brand materials)

Variant E2 — HMA Spring CRO Forum 2026, Frisco TX

• Event name: HMA Spring CRO Forum 2026
• Location: Frisco, TX
• Date: April 6, 2026

Tokens used

Typefaces: type.family.display (Funnel Display) for the main award/event name; type.family.body (Funnel Sans) for details; type.family.label (Barlow Semi-Condensed) for the category label.

Do / Don't

Do

• Use only the documented, real awards and events listed above. These are verified from source files.
• Include the issuing body name when the source names one — e.g. "Newsweek" must appear alongside "America's Greatest Startup Workplaces 2025." Where the source asset does not name an issuing organization (as with the Top 50 Women Leaders award), omit the line rather than guessing.
• Include the year with both awards and events.
• Cite the source document in any internal review or brief that uses this component.
• Use the coral rule as an accent to differentiate the chip from generic text in mixed layouts.

Don't

• Do not invent award names, issuing bodies, or rankings not documented in the source files.
• Do not round up or invent dates — use the documented event dates and locations.
• Do not use this component to promote unverified third-party rankings or surveys.
• Do not omit the year — undated award claims are harder to verify and easy to misread as current.

Hard-fail gates

Gate #4 — Unproven stat claim. Every award name and event name in this component must correspond to a documented, real honor or appearance. Any fictional or unverified award is an automatic hard-fail under Gate #4. This applies equally to event claims — do not list events CodaMetrix is not documented as attending.

Numbered or bulleted proof layout with parallel structure — the visual scaffold for the denial-prevention narrative, from root cause to resolution.

Anatomy

A structured list of proof items, each containing two sub-elements:

1. Number or bullet marker — Funnel Display Semibold at type.size.sub (1.953rem), in Coral (accent.cta, #F17053) or White on dark backgrounds. The number anchors the eye and signals a sequential argument.
2. Proof statement — Funnel Sans Regular at type.size.body (1rem), type.leading.normal (1.5). One to two sentences max. May include a sourced stat inline (e.g., "~$55 per denied claim, per HFMA").

List-level structure:

• Items: 3–5 per list.
• Vertical spacing: 24px (space step 5) between items.
• Optional horizontal rule in accent.rule (#F17053) between items at 1px height and full text-column width.

Parallel structure is non-negotiable. All items must be grammatically and structurally equivalent.

Variants

Variant A — Numbered sequential proof

Markers are sequential integers (1, 2, 3…). Use when the argument has a causal or process sequence — "this leads to that." The canonical denial-prevention arc:

1. Denials don't start at submission — they start upstream, in the coding.
2. The estimated cost to rework a single denied claim is ~$55 (HFMA). Multiply that across hundreds of claims.
3. A denial is a signal — a symptom of coding gaps, documentation misalignment, or workflow variability.
4. Fix the root cause upstream, at the source, the first time.

Variant B — Bulleted parallel proof

Markers are coral bullets (filled circles, accent.cta #F17053, 6px diameter). Use when items are parallel evidence without a required sequence — capabilities, outcomes, or proof points.

Example:

• Autonomous coding reduces coding denials by 70%
• Turnaround time improves 5x
• Skilled coders focus on complex, high-judgment cases — not rework

Variant C — Two-column proof grid

Items arranged in a 2-column grid (6-column each at desktop breakpoint). Each cell contains a marker + statement. Use for summary slides and whitepaper overview pages.

Tokens used

Do / Don't

Do

• Maintain strict parallel grammatical structure across all items in a single list.
• Source every quantitative claim inline.
• Use the sequential numbered variant when the argument has logical causality.
• Use the bulleted variant for unordered proof points.
• Keep statements short and direct — one insight per item, one to two sentences max.
• Use the reframe structure where possible: state the problem, then the solution.

Don't

• Do not frame any proof item as AI replacing people or reducing headcount — automation is a capacity and quality story, not a displacement story.
• Do not include any quantitative claim without a source citation. "~$55 per denied claim" is correct; "$55 per denied claim" without attribution or tilde is not.
• Do not mix numbered and bulleted formats in the same list.
• Do not exceed 5 items per list without a clear sectional break.
• Do not use fear language ("coders are at risk," "the workforce is shrinking away") — this is a workforce transformation narrative.
• Do not use generic bullet styles (en-dash, asterisk) for primary featured lists — use coral markers.

Hard-fail gates

Gate #1 — AI-replaces-people framing. The denial-prevention narrative must not be framed as automation eliminating coder jobs. Any proof item that reads as "AI replaces coders" or frames the coder shortage as a reason to eliminate the workforce is an automatic hard-fail. The correct argument: autonomous coding handles volume so skilled coders focus on complex cases and clinicians return to patient care.

Gate #4 — Unproven stat claim. Every numerical claim in a bulleted-proof list must cite its source. Unsourced statistics — even the brand's documented figures — are a hard-fail in this component because the parallel proof layout signals evidentiary weight.

Documents the <CodeBlock> primitive contract — the foundational geometric component that underpins logos, masks, containers, tags, and patterns across the CodaMetrix design system.

Anatomy

<CodeBlock> is a parameterized SVG/CSS component. It renders two overlapping polygons:

1. Main polygon — the primary visible surface. A rectangle with one corner cut at exactly 45°. The cut size is computed as cut-ratio × shorter-edge.
2. Facet polygon — a second, slightly offset polygon rendered behind the main shape. Offset distance: facet-offset × shorter-edge. Fill: the main fill color darkened by facet-darken (18%). The facet creates implied depth without a drop shadow.

Children are rendered inside the main polygon clip region for container and tag roles.

Props

Constants (never expose as configurable props)

These four values are brand geometry constants. They must not be configurable by consumers of the component. If a layout requires a different cut, the solution is a different block proportion — not a different angle.

Variants

The four role values are the primitive's variants. Each produces a distinct rendering behavior from the same geometry contract.

role="pattern"

Renders the block as a decorative tile in a repeating grid. No children. Used for top-corner watermarks and large-format background compositions. Accepts any approved fill. Typically rendered at small sizes (48–96px square) in a CSS grid or SVG repeat.

role="mask"

Renders the block as a clip mask over a child <img>. The photograph fills the clip region with object-fit: cover. Facet renders as a dark neutral overlay at the cut edge. No fill prop applies to the main surface — the image is the surface.

role="container"

Renders the block as a content holder. Children (text, stats, quotes) are rendered inside the clip region with 24px inner padding from uncut edges and 32px from the cut edge. Fill must be a flat brand color; text must meet WCAG AA contrast with the fill.

role="tag"

Renders the block at small chip size for section labels and wayfinding. Children are a single Barlow Semi-Condensed label string. Internal padding: 4px vertical, 12px horizontal. Geometry constants apply at all sizes.

Approved fills

Flat, solid brand colors only. No gradient values.

Tokens used

Do / Don't

Do

• Allow width and height to flex freely per layout needs — this is the intended design.
• Compute the cut size dynamically from cut-ratio × Math.min(width, height) so proportions remain constant at all sizes.
• Use flat brand-palette fills only.
• Render the facet polygon in the DOM behind the main polygon, not as a CSS box-shadow.
• Provide aria-label on non-decorative instances for accessibility.
• Cut exactly one corner per block (top-right by default in the canonical layout; bottom-right in some inverted compositions).

Don't

• Do not make cutRatio, cutAngle, facetOffset, or facetDarken configurable props — they are system constants and must not be overridden by consumers.
• Do not apply gradient fills to the main or facet polygon.
• Do not add drop shadows (box-shadow, filter: drop-shadow).
• Do not introduce a second cut on a single block.
• Do not round the cut corner — the clip-path polygon must produce a precise angled edge, not a rounded one.
• Do not use off-palette colors as fill values.
• Do not animate the logo mark (if it appears inside a <CodeBlock> context) as a ribbon, loop, or flowing shape — Code Block motion is assembly and reveal, not fluid.

Hard-fail gates

Gate #2 — Wrong/distorted mark. Altering any of the four geometry constants (cut-angle, cut-ratio, facet-offset, facet-darken) — even imperceptibly — diverges from the brand's foundational geometry and is an automatic hard-fail. Rounding the cut corner, introducing multiple cuts, or changing the cut angle are the most common violations.

Gate #3 — Off-palette colors. Passing any hex value outside the approved fill list as the fill prop is a hard-fail. Gradient fills of any kind on the block are also a Gate #3 violation.

A Code Block used as a holder for text, statistics, quotes, or testimonials — the geometric shape makes any text-heavy block unmistakably on-brand.

Anatomy

A <CodeBlock> component with role="container", wrapping text or stat content as children. The block renders:

1. Main fill polygon — flat, solid brand color. No gradients. The 45° cut corner is at top-right (default) or bottom-right depending on composition.
2. Darker facet — a second polygon behind the main shape, offset by codeblock.facet-offset (0.06 × shorter edge), darkened by codeblock.facet-darken (18%) from the fill color.
3. Content region — text, stats, or quote copy rendered inside the clip area, padded 24px (space step 5) from all uncut edges, 32px (space step 6) from the cut edge.

The block dimensions flex freely to fit content. Width and height are not fixed. Cut angle and cut ratio are constants.

Variants

Variant A — Dark block + light text

Fill: block.fill.1 (Purple #973DDA), block.fill.3 (Dark Maroon #45202C), or block.fill.4 (Wine Red #642D3F) Text: text.on-dark (#FFFFFF) Use: Featured stats, primary proof points, hero code-block insets, social card content panels.

Approved dark fills for containers:

Variant B — Light block + dark text

Fill: White #FFFFFF or bg.surface (#F8F8F8, Off White) Text: text.on-light (#22192B) Use: Editorial callouts, sidebar stats on light-background pages, whitepaper pull-quotes.

Variant C — Gold block (warmth/accent)

Fill: block.fill.2 (Gold #CFC17F) Text: text.on-light (#22192B) — Text Black reads well on Gold; White on Gold does not meet AA contrast at small sizes, so always use dark text on Gold fill. Use: Secondary proof points, warmth accents in multi-block grid compositions.

Content types inside the container

• Statistics: Large Funnel Display figure + Funnel Sans descriptor (see stat-block for sourcing rules).
• Quotes: Funnel Display Regular quote text + Barlow Semi-Condensed attribution (see quote-card).
• Body copy: Funnel Sans Regular at type.size.body (1rem).
• Headlines: Funnel Display Semibold at type.size.sub (1.953rem) or smaller inside a container — headline at full 3rem is large for a container unless the block is hero-scale.

Do not place Funnel Display display headlines at 3rem inside a narrow container — the geometry will clip the type. Scale down to type.size.sub or type.size.quote inside contained blocks.

Tokens used

Do / Don't

Do

• Match the contrast pairing strictly: dark fill → white text; light fill → dark text; Gold fill → dark text.
• Use flat brand-color fills only. No gradient fills on the block.
• Allow the block dimensions to flex to fit the content — do not force a fixed aspect ratio if it causes awkward text wrapping inside the clip region.
• Keep the 45° geometry constants — never soften, round, or adjust the cut to fit content.
• Use space[5] (24px) minimum inner padding so content never touches the cut edge.

Don't

• Do not apply gradient fills to the Code Block — gradients live in the background field, not on blocks.
• Do not use off-palette colors for block fills.
• Do not mix light text on Gold fill — it fails WCAG AA at small sizes.
• Do not overuse containers in a single composition — when everything is a block, nothing reads as a block.
• Do not introduce a second cut corner on the same block.
• Do not apply drop shadows to the container.

Hard-fail gates

Gate #3 — Off-palette colors. Block fills must be drawn exclusively from block.fill.1–block.fill.4, White, Off White, or the additionally approved fills (Coral #F17053, Deep Plum #402058). No off-palette fill is permitted. Gradient fills on the block itself are also a Gate #3 violation.

The primary call-to-action button: a coral pill shape that anchors every conversion moment in CodaMetrix layouts.

Anatomy

• Shape: Full pill — radius.pill (999px), ensuring a fully rounded capsule regardless of label length.
• Fill: accent.cta (#F17053, Coral).
• Label: Funnel Display Semibold (600) or Funnel Sans Regular (400) at type.size.label (0.75rem) or type.size.small (0.8rem), in White (text.on-dark, #FFFFFF). Example label: "Download now".
• Padding: Horizontal 24px (space step 5), vertical 12px (space step 3).
• Icon (optional): A right-facing arrow or chevron may follow the label text, set in white.

Variants

Default (Resting)

• Fill: accent.cta #F17053
• Label: White #FFFFFF
• No border, no shadow.

Hover / Focus

• Fill: Darken accent.cta by 12–15% → approximately #d45c40.
• Transition: motion.duration.fast (180ms), motion.ease.standard.
• Label: White #FFFFFF (unchanged).
• Focus ring: 2px solid accent.cta offset by 2px (accessibility).

Disabled

• Fill: accent.cta at 40% opacity (rgba(241,112,83,0.4)).
• Label: White at 60% opacity.
• Cursor: not-allowed.
• No hover effect.

Tokens used

Typeface: type.family.display (Funnel Display) preferred; type.family.body (Funnel Sans) acceptable for secondary CTAs.

Do / Don't

Do

• Use accent.cta (#F17053) as the only approved fill for primary CTAs.
• Use white label text on the coral fill — it meets WCAG AA at all button sizes.
• Keep labels short and action-oriented: "Download now," "Read the whitepaper," "Learn more."
• Provide hover and focus states on all interactive instances.
• Use pill shape exclusively — no square or rounded-rectangle CTA variants.

Don't

• Do not fill the pill with any color other than Coral (#F17053). Purple, Gold, or gradient fills are not approved for CTAs.
• Do not use dark label text on the coral pill — white is the only approved label color.
• Do not use the logo Coral (#FE6E4E) — that value is restricted to the logo mark. (See color §Dual-Coral Rule.)
• Do not apply drop shadows to the pill.
• Do not place two primary CTAs side-by-side in the same visual zone — use hierarchy (primary pill + text link).
• Do not use the pill shape for non-CTA elements (tags, badges, section labels use the Code Block shape — see section-tag).

Hard-fail gates

Gate #3 — Off-palette colors. The pill fill must be #F17053 (accent.cta). Any substitution — including the logo coral #FE6E4E or any off-palette color — is a hard-fail.

The signature brand move: a Funnel Display headline paired with a short coral rule beneath, anchoring the brand's visual voice in every layout.

Anatomy

Two-element stack, vertically flush-left:

1. Headline — Funnel Display Semibold (600), type.size.headline (3rem), type.leading.tight (1.1). Set in sentence case for body layouts; display/all-caps only in specific marketing executions.
2. Coral rule — a short horizontal bar, accent.rule (#F17053), positioned immediately below the headline's descender line with 8px gap (spacing step 2). Recommended width: 48–64px (3–4 characters wide). Height: 3–4px. The rule is decorative and structural — it grounds the headline and signals brand identity.

The two elements always appear together as a single unit. Do not use the headline without the rule, or the rule without a headline, in featured positions.

Variants

Variant A — On gradient field (white headline)

Background: Signature purple-to-deep-plum gradient (bg.field.from → bg.field.to) Headline color: White (text.on-dark, #FFFFFF) Rule color: Coral (accent.rule, #F17053)

This is the primary hero and social card variant. Used in carousel headers, hero sections, and any full-bleed gradient layout. The white headline reads with maximum contrast; the coral rule is a warm accent against the cool gradient.

Variant B — On light surface (dark headline)

Background: Off-white (bg.surface, #F8F8F8) or white (#FFFFFF) Headline color: Text Black (text.on-light, #22192B) Rule color: Coral (accent.rule, #F17053)

Used in editorial pages, whitepapers, deck interiors, and any light-background layout where the gradient would be too heavy.

Tokens used

Typeface: type.family.display (Funnel Display), weight type.weight.semibold (600).

Do / Don't

Do

• Use Funnel Display Semibold for all featured headlines in this component.
• Keep the coral rule short and proportional — it is an accent, not a full-width divider.
• Maintain 8px minimum gap between headline baseline and rule top.
• Use Variant A on any gradient field; Variant B on any light surface.
• Allow only one headline+coral-rule unit per primary visual zone (do not stack two).

Don't

• Do not use Funnel Sans or Barlow Semi-Condensed for the headline in this component.
• Do not extend the rule to full text width — that turns it into a divider, not an accent.
• Do not use any coral value other than #F17053 (accent.rule) for the rule.
• Do not omit the coral rule in featured/primary headline positions.
• Do not change the rule color to match the background — the contrast is intentional.
• Do not use Light (300) or Regular (400) weights for the primary headline in this component.

Hard-fail gates

Gate #3 — Off-palette colors. The coral rule must be #F17053 (accent.rule). Using any other color — including the logo coral #FE6E4E — for the rule is an off-palette error and a hard-fail.

A photograph clipped inside a Code Block shape — the angular geometry makes the image unmistakably on-brand while the composition keeps faces centered and unclipped.

Anatomy

Two-layer construction:

1. Code Block mask — a <CodeBlock> component in role="mask" mode. The clip-path polygon is computed from codeblock.cut-ratio (0.28) applied to the shorter edge, with a 45° cut angle. The block dimensions (width, height) flex to fit the layout; the angle and ratio are constants.
2. Photograph — placed inside the clip region as an <img> child, sized to fill the block with object-fit: cover. The focal point (face, primary subject) must land in the central clear area of the block, well away from the cut corner.

A darker facet is rendered behind the main block at codeblock.facet-offset (0.06 × shorter edge), darkened by codeblock.facet-darken (18%) relative to a nominal color — when the child is a photograph, the facet uses a neutral dark (#22192B at 60% opacity) to give depth at the cut edge.

Variants

Variant A — Portrait / Headshot (tall block)

Aspect ratio approximately 3:4 or 4:5. Subject centered, looking toward or across the layout. Used for named clinical leader portraits (e.g., quote card pairings, team pages).

Variant B — Scene / Collaborative (landscape block)

Aspect ratio approximately 16:9 or 4:3. Multiple subjects collaborating — healthcare workers reviewing records, communicating across roles. Used in editorial sections and hero sub-imagery.

Variant C — Square (social tile)

1:1 aspect. Used in social carousel compositions and grid layouts. Subject must remain centered within the square; cut corner must not touch the face.

Photography rules inside the mask

From photography:

• Faces and focal points must be centered and unclipped within the block. The 45° corner cut must not intersect a face, eye, or key subject area.
• If a shot cannot fit the block geometry without awkward cropping, choose a different image or a different block proportion — do not compromise the subject.
• Do not use a Code Block mask on an image where the subject is positioned near an edge; reframe or recrop first.
• Subjects must be real medical professionals in real clinical environments — no generic office stock, no patients.
• Lighting: bright, clean, natural. No heavy shadows or dramatic underlighting.

Tokens used

No fill token is used on the mask block itself — the photograph fills the clip region. The facet uses a dark neutral overlay, not a brand-fill color.

Do / Don't

Do

• Verify face/subject placement before finalizing any mask crop — open the block and check that the cut corner falls on background, not on the subject.
• Use object-fit: cover on the image to fill the block without distortion.
• Choose block proportions (width:height) to suit the photograph, not the other way around — the geometry law allows dimensions to flex.
• Keep the 45° cut constant — never adjust the angle to better fit a difficult crop. Instead, choose a better image.
• Pair the image mask block with a quote card or stat block in the same composition to add context.

Don't

• Do not introduce a cut on more than one corner per block.
• Do not round the cut corner — it is a precise angled cut, not a curve.
• Do not apply drop shadows or gradients to the Code Block shape itself.
• Do not alter cut-ratio or cut-angle values to attempt a better crop — these are constants.
• Do not use patients as photographic subjects — healthcare professionals only.
• Do not use generic stock photography (people at laptops in coffee shops, corporate hallways).

Hard-fail gates

Gate #2 — Wrong/distorted mark. The Code Block geometry must use the constant 45° cut angle and 0.28 cut ratio. Rounding the corner, introducing multiple cuts, changing the angle, or using a non-angular clip shape is a hard-fail under Gate #2.

Gate #3 — Off-palette colors. Any fill or facet color applied to the block frame (outside the photograph itself) must come from the approved brand palette. Off-palette colors on the block shell are a hard-fail under Gate #3.

Approved logo configurations, clearance rules, and placement guidance for all CodaMetrix layout contexts.

Anatomy

The CodaMetrix logo is composed of two bound elements:

• Wordmark — the text "CodaMetrix" set in Logo Black (#231F20), with a small coral tick (#FE6E4E) and purple dot (#973DDA) accent between "Coda" and "Metrix."

The icon is the mark. Its geometry is legally and visually the brand's core identity signal. The angular interlocking-links shape must never be substituted with a flowing ribbon, loop, or infinity motif.

Variants

1. Horizontal (Primary — Preferred)

Icon left, wordmark right on the same baseline. Use whenever possible for marketing, presentations, web headers, print, and email signatures.

2. Stacked

Icon centered above wordmark. Use for square or centered spaces: social avatars, app icons, merchandise, profile images.

3. Icon Only

The icon mark without the wordmark. Approved for: mobile/responsive navigation, app icons, social profile images, page anchors, footers, and any context where the wordmark has already appeared in the same composition.

Never use icon-only as the primary/major placement (marketing, presentations, web headers) — use horizontal or stacked there.

4. Reversed (White on Dark)

Full logo rendered in white (#FFFFFF) on dark or deep-purple gradient backgrounds. Use when the full-color version would lose contrast or visibility — e.g., on the bg.field.from→bg.field.to gradient field.

5. Monochrome Black

Single-color #000000 version. For print, grayscale contexts, or wherever color reproduction is unavailable.

Tokens used

The logo itself is not driven by semantic tokens — it uses its dedicated logo palette directly: Purple #973DDA, Coral Logo #FE6E4E, Gold #CFC17F, Lavender #DBACFF, Logo Black #231F20.

Clearance

The clearance unit is X = the height of the icon.

Clearance scales proportionally with the logo at any size. No text, graphic element, or other logo may intrude within the clearance zone.

Do / Don't

Do

• Use the horizontal lockup as the default for all primary placements.
• Switch to the reversed version on dark or gradient backgrounds for contrast.
• Maintain clearance at every size.
• Use icon-only only in contexts where the full wordmark has appeared nearby.

Don't

• Do not apply drop shadows to any logo version.
• Do not use colors outside the approved logo palette (#973DDA, #FE6E4E, #CFC17F, #DBACFF, #231F20, #FFFFFF, #000000).
• Do not use general Coral #F17053 in the logo — the logo uses Coral Logo #FE6E4E only. (See color §Dual-Coral Rule.)
• Do not stretch, skew, distort, or alter the proportional relationship between icon and wordmark.
• Do not substitute the icon with a ribbon, loop, or infinity-style shape.
• Do not place the logo on low-contrast backgrounds — switch to the reversed version on dark fields.
• Do not animate the icon as a flowing or looping shape.

Hard-fail gates

Gate #2 — Wrong/distorted mark. Any use of a flowing ribbon, infinity shape, or loop motif in place of the angular interlocking-links icon is an automatic hard-fail. Any drop shadow, unauthorized recolor, or proportional distortion is also a hard-fail under Gate #2.

All other gates (#1, #3, #4) do not apply to logo lockup usage itself, but the lockup must appear in any asset that is evaluated holistically.

Documents the <PixelWave> primitive — the two complementary wave elements built from CodaMetrix brand geometry, each with a distinct role and placement rule.

Anatomy

Both waves:

• Are flat, solid-color shapes — no gradient fills on the wave elements themselves.
• Operate exclusively on the documented brand palette.
• Maintain their geometry proportions and orientation — they must not be distorted, rotated arbitrarily, or over-stretched.

Props

Variants

Wave 1 — Bold, Movement-Forward

Character: Energetic, impactful, directional. Conveys momentum and forward motion.

Prop defaults:

• variant={1}
• fill: Purple #973DDA (bg.field.from) for maximum brand impact; or Medium Grey #BCCCC1 for subtlety in compositions needing less energy.

Primary roles and placements:

• Hero sections (full-bleed background element, behind content)
• App interface backgrounds
• Login and landing screens
• Full-page background fields

Spatial rules:

• Wave 1 lives at the background Z-level — behind all text, blocks, and UI elements.
• Do not place Wave 1 in footer or section-divider roles — that is Wave 2's job.
• Do not overlap Wave 1 with dense text content — it is a background element.

Motion: Wave 1 may flow or expand directionally. See motion for easing and duration guidelines.

Wave 2 — Structured, Step-Like

Character: Rhythmic, precise, stepped bar pattern. Conveys automation and precision more than movement.

Prop defaults:

• variant={2}
• fill: Low-opacity or light tones when placed under text content. The canonical example is the stepped bar element along the bottom edge of social carousel cards.
• Default opacity: 0.25–0.4 under text.

Primary roles and placements:

• Footer bands
• Section dividers
• Infographic backing elements
• Data visualization support elements
• Bottom-edge accent of social carousel cards

Spatial rules:

• Wave 2 is a supporting texture — never the featured element.
• Do not use Wave 2 in hero or full-background roles — that is Wave 1's job.
• Do not flip Wave 2 upside-down or mirror it arbitrarily — maintain its intended orientation.
• When placed under text content, use low opacity so the wave complements rather than competes.

Motion: Wave 2's stepped pattern may animate as a progressive step/reveal sequence. See motion §6.

Tokens used

Do / Don't

Do

• Use Wave 1 exclusively in hero/full-background placements.
• Use Wave 2 exclusively in footer, divider, and backing-element placements.
• Use flat, solid brand-palette fills only on both waves.
• Apply low opacity on Wave 2 when it sits behind text — legibility of text takes precedence.
• Set aria-hidden="true" — both waves are decorative.

Don't

• Do not use both waves at the same Z-level in a single composition — they have distinct spatial roles.
• Do not apply gradient fills to either wave element — gradients live in the background field, not on the waves.
• Do not use a wave as a substitute for a Code Block pattern.
• Do not rotate Wave 2 upside-down or mirror it arbitrarily.
• Do not distort, over-stretch, or rotate Wave 1 out of its intended orientation.
• Do not introduce off-palette colors on either wave.
• Do not animate either wave as a ribbon, loop, or flowing infinity shape — the geometry is stepped and angular, not fluid.

Hard-fail gates

Gate #3 — Off-palette colors. All fill values on <PixelWave> must come from the approved brand palette. Gradient fills on the wave are also a Gate #3 violation.

Tight parallel bullet lists that name the root-cause problems driving the denial-prevention narrative — no fear framing, no exaggeration, no unsourced claims.

Anatomy

A vertical stack of parallel-structure labels or short phrases, each on its own line:

• Marker: A short coral rule (accent.rule, #F17053, 16px wide, 2px tall) or a simple bullet dot in Coral, preceding each item.
• Item text: Barlow Semi-Condensed Regular at type.size.small (0.8rem) or type.size.body (1rem), type.leading.normal (1.5), uppercase or title-case per context.
• Grouping: 3–5 items per list. More than 5 collapses into noise.
• Spacing: 8px (space step 2) between items; 24px (space step 5) above and below the list block.

The parallel structure is not stylistic — it is the brand's voice mechanic. Every item in a single list must be grammatically parallel (all noun phrases, or all verb phrases, or all gerunds — never mixed).

Canonical Example Sets

Root-cause problem list (from denial-prevention narrative)

• Coding gaps
• Documentation misalignment
• Workflow variability

Denial-prevention shift list

• Find the pattern, not just the claim
• Fix the root cause upstream, at the source
• Get it right, the first time

Workforce transformation list

• Autonomous coding reduces repetitive volume
• Skilled coders focus on complex, high-judgment cases
• Clinicians return to patient care

Variants

Variant A — Inline slash-separated (compact)

Items separated by forward slashes on a single line. Used in tight layouts, captions, and social card sub-headlines.

Example: Coding gaps / Documentation misalignment / Workflow variability

Variant B — Bulleted vertical (standard)

Each item on its own line with a coral bullet or rule. Used in whitepaper, slide body, and web section copy.

Variant C — Numbered (sequential proof)

Items carry numbers when the sequence is meaningful (step 1 → step 2 → step 3 in a process description). Numbers set in Funnel Display Semibold; item text in Funnel Sans.

Tokens used

Do / Don't

Do

• Maintain strict grammatical parallelism within a list — all noun phrases or all verb phrases.
• Keep items short (2–6 words). If an item needs a sentence, it belongs in body copy, not this component.
• Use coral markers to signal these as brand proof bullets, not generic list items.
• When the list names a problem, follow it with a list that names the solution (the reframe structure from voice).

Don't

• Do not use fear language in problem lists ("coders will be replaced," "your revenue is at risk").
• Do not mix grammatical forms in a single list.
• Do not exceed 5 items per list — split into two sections if needed.
• Do not introduce unsourced quantitative claims in list items — statistics belong in stat-block.
• Do not use generic bullet points (en-dash, asterisk) in major placements — use coral markers.

Hard-fail gates

Gate #1 — AI-replaces-people framing. Proof-point lists must not frame automation as headcount reduction, job replacement, or a threat to coders. The correct frame is capacity augmentation and workforce transformation. Any list item that reads as "AI will take jobs" is an automatic hard-fail.

Gate #4 — Unproven stat claim. If a list item contains a quantitative claim (%, $, x multiplier), it must be sourced. Unsourced figures in list items are a hard-fail.

Testimonial pattern anchored in the real voice of a clinical leader — Funnel Display pull-quote + coral rule + attribution, carrying the brand's human payoff.

Anatomy

Four-element vertical stack:

1. Coral rule — accent.rule (#F17053), 48px wide, 3px tall. Appears above the quote to signal it as a featured testimonial.
2. Quote text — Funnel Display Regular (400) at type.size.quote (1.563rem), type.leading.tight (1.1). Set in the appropriate text color for the background. No quotation marks — the coral rule and typography perform that signal.
3. Thin divider (optional) — 1px line in White at 30% opacity (on dark) or Text Black at 20% opacity (on light), separating quote from attribution.
4. Attribution — Two-line stack: - Name: Funnel Sans Regular or Barlow Semi-Condensed, type.size.small (0.8rem), full name. - Title + affiliation: Barlow Semi-Condensed, type.size.label (0.75rem), type.tracking.label (0.04em), in a slightly muted tone (white at 80% opacity on dark; Text Black at 70% on light).

Canonical Quote

"CodaMetrix has taken over the majority of our inpatient coding and has dramatically decreased our discharge-not-final-billed days."

— Dr. Max Rosen, Chair of Radiology, UMass Memorial Medical Center

This is the primary documented testimonial from a named clinical leader at a named institution. Use this quote verbatim — do not paraphrase, shorten, or alter the attribution.

Attribution fields:

• Name: Dr. Max Rosen
• Title: Chair of Radiology
• Institution: UMass Memorial Medical Center

Variants

Variant A — On gradient field (dark background)

• Background: bg.field.from → bg.field.to gradient
• Quote text: text.on-dark (#FFFFFF)
• Attribution: White at 80% opacity
• Coral rule: accent.rule (#F17053)
• Use: Social carousels, hero panels, featured testimonial sections.

Variant B — On light surface

• Background: bg.surface (#F8F8F8) or #FFFFFF
• Quote text: text.on-light (#22192B)
• Attribution: Text Black at 70% opacity
• Coral rule: accent.rule (#F17053)
• Use: Whitepaper pages, deck interiors, website testimonial sections.

Variant C — Inside a Code Block container

• The quote card is placed inside a <CodeBlock> with block.fill.3 (#45202C, Dark Maroon) or block.fill.1 (#973DDA, Purple) fill.
• Quote text: text.on-dark (#FFFFFF)
• Code Block geometry: 45° cut, cut-ratio 0.28, facet-darken 0.18 — no gradients on the block.
• Use: Social tile layouts, grid compositions.

Tokens used

Typefaces: type.family.display (Funnel Display) for quote text; type.family.label (Barlow Semi-Condensed) for attribution.

Do / Don't

Do

• Use the Dr. Max Rosen quote verbatim with full attribution (name, title, institution).
• Place the coral rule above the quote in all featured positions.
• Ensure attribution is complete — name, title, and institution must all appear.
• Choose the variant that matches the background surface for contrast compliance.

Don't

• Do not paraphrase or shorten the canonical quote.
• Do not attribute the quote to a role title without a name ("A radiology chair" — no).
• Do not invent testimonials or composite attributions.
• Do not use quotation mark punctuation alongside the coral rule — the rule replaces that convention.
• Do not use Funnel Display Semibold for the quote text — Regular (400) is the quote weight.
• Do not apply the rule color in any value other than accent.rule (#F17053).

Hard-fail gates

Gate #3 — Off-palette colors. The coral rule must be #F17053 (accent.rule). Any other color for the rule is a hard-fail.

Gate #4 — Unproven stat claim. The quote card does not carry statistics, so Gate #4 applies only if a stat is added to the layout alongside this component — any such stat must be sourced per stat-block.

A small Code-Block-shaped wayfinding chip — used to label sections, steps, or categories with the same angular geometry that defines the full design system.

Anatomy

A miniaturized <CodeBlock> with role="tag", sized to fit a short text label:

1. Block shape — the same 45° cut corner, codeblock.cut-ratio 0.28 (applied to the chip's shorter edge, which is typically the height). At small sizes, the cut is visually smaller but the proportional ratio remains constant.
2. Fill — a flat, solid brand color. No gradients.
3. Label text — Barlow Semi-Condensed Regular (type.family.label), type.size.label (0.75rem), type.tracking.label (0.04em). Set in the appropriate text color for the fill.
4. Padding — 4px vertical (space step 1), 12px horizontal (space step 3).

The canonical example is the "Section 7" chip seen in social carousels and presentation layouts. Any short label (section titles, category names, step numbers, event names) may use this shape.

Variants

Variant A — Purple tag (primary)

• Fill: block.fill.1 (#973DDA, Purple)
• Text: text.on-dark (#FFFFFF)
• Use: Primary section callouts on gradient or light backgrounds.

Variant B — Dark Maroon tag

• Fill: block.fill.3 (#45202C, Dark Maroon)
• Text: text.on-dark (#FFFFFF)
• Use: Secondary wayfinding, event/category chips on mixed-color layouts.

Variant C — Gold tag (warmth)

• Fill: block.fill.2 (#CFC17F, Gold)
• Text: text.on-light (#22192B)
• Use: Accent chips, award labels, warmth highlights in multi-block compositions.

Variant D — Coral tag (accent)

• Fill: Coral #F17053 (accent use, per code-blocks)
• Text: text.on-dark (#FFFFFF)
• Use: Featured/highlighted wayfinding, CTA-adjacent chips. Use sparingly — coral competes with the CTA pill if overused.

Variant E — White tag (reversed)

• Fill: #FFFFFF
• Text: text.on-light (#22192B)
• Use: On deep-purple or dark-maroon backgrounds where other fills would not contrast.

Tokens used

Do / Don't

Do

• Use Barlow Semi-Condensed exclusively for the label inside section tags — it is the system's label face.
• Apply type.tracking.label (0.04em) for legibility at small sizes.
• Keep labels short: 1–3 words, or a number + word (e.g., "Section 7", "Step 3", "ViVE 2025").
• Maintain the constant cut ratio even at small chip sizes — proportional integrity is the law.
• Choose fill/text pairings from the approved contrast table (dark fill → white text; Gold/White fill → dark text).

Don't

• Do not round the cut corner on small chips — it must remain a precise angular cut.
• Do not use Funnel Display or Funnel Sans for the label inside this component.
• Do not introduce gradient fills on the chip.
• Do not use off-palette colors for the chip fill.
• Do not introduce a second cut corner on the chip.
• Do not use the section tag as a substitute for the CTA pill — these serve different purposes (wayfinding vs. call to action).

Hard-fail gates

Gate #2 — Wrong/distorted mark. The Code Block geometry constants (cut-angle 45°, cut-ratio 0.28, facet-offset 0.06) must be respected at all sizes. Rounding the cut, softening the geometry, or changing the angle to "look better" at small sizes is a hard-fail under Gate #2.

Gate #3 — Off-palette colors. All fill values must come from the approved brand palette. No off-palette fills on the chip shape.

Four sourced proof points rendered as large-format display statistics — the evidentiary backbone of CodaMetrix's positioning narrative.

Anatomy

Each stat block is a two-part unit:

1. Stat figure — Funnel Display Light (300) or Semibold (600) at type.size.headline (3rem) or larger (display-scale oversize is permitted up to 6rem for hero moments). The figure scans instantly: 70%, 5x, ~$55, 30%.
2. Descriptor — Funnel Sans Regular at type.size.body (1rem) or type.size.small (0.8rem). One to two lines naming what the figure means and citing the source in parentheses.

Both elements sit flush-left or center-aligned depending on layout. A coral rule (accent.rule) may appear above the figure to anchor the unit in a featured context. A 12px gap (space step 3) separates figure from descriptor.

Variants

Variant 1 — 70% reduction in coding denials

Figure: 70% Descriptor: Reduction in coding denials Source: Codametrix Brand Guide

This is the headline proof point and should appear most prominently when space allows only one stat.

Variant 2 — 5x turnaround time

Figure: 5x Descriptor: Turnaround time improvement Source: Codametrix Brand Guide

Pair with Variant 1 to show the compound benefit: fewer denials, faster resolution.

Variant 3 — ~$55 cost to rework a denied claim

Figure: ~$55 Descriptor: Estimated cost to rework a single denied claim — multiply across hundreds or thousands of claims to understand the real revenue impact. Source: HFMA

The tilde (~) is intentional and must be retained — the figure is an estimate. Removing it or stating "$55" as exact is a Gate #4 violation.

Variant 4 — 30% coder shortage

Figure: 30% Descriptor: Coder shortage as of 2023, estimated to grow an additional 8% by 2029. Source: Codametrix Brand Guide

When using this stat, always include both the 2023 figure (30%) and the forward projection (+8% by 2029) together — they tell the workforce-transformation narrative. Do not cite the 30% alone without the 2029 projection.

Tokens used

Typefaces: type.family.display (Funnel Display) for figures; type.family.body (Funnel Sans) for descriptors and source citations.

Do / Don't

Do

• Always include the source parenthetical with every stat. No sourced claim, no stat block.
• Retain the tilde on ~$55 — the estimate qualifier is part of the honest framing.
• Pair the 30% shortage figure with the +8% by 2029 projection.
• Use Funnel Display Light (300) for oversized display figures in hero contexts — the lighter weight makes very large numbers more elegant.
• Present stats as a group of 2–4 in a horizontal or 2×2 grid when multiple appear together.

Don't

• Do not state any of the four stats without their source citation.
• Do not add fabricated or unverified variants to these four figures.
• Do not remove the "~" from ~$55 or present it as a precise dollar figure.
• Do not use stats in fear-of-AI framing ("coders will be replaced by 2029") — the workforce shortage stat supports the transformation narrative, not a replacement narrative.
• Do not embed stats as decorative numerals without the accompanying descriptor.

Hard-fail gates

Gate #4 — Unproven stat claim. Every stat must cite its source in the component or the asset it appears in. The four sourced proof points above are the only approved primary statistics. Any additional stat introduced without a verifiable source is an automatic hard-fail.

Gate #1 — AI-replaces-people framing. The 30% coder shortage stat must not be framed as evidence that automation will replace coders. It supports workforce transformation and capacity arguments only.

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.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

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)

CMYK Color Reference

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.

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:

• [ ] 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.

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

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

Safe Areas

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.

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

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

Applied Motion Principles

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.

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.

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

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.

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. Timing column: mark in MM:SS format. Sum all timing to verify the total runtime.
5. 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).

Print rules

• Use CMYK values for print production; use RGB/hex values for all screen and digital applications.
• Coral variants: #FE6E4E (coral-logo) is reserved for logo and icon use ONLY. Use #F17053 (coral) for all general-purpose print and digital applications.
• Bleed: default 0.125 in on all sides.
• Safe margin: default 0.25 in from trim edge; keep all critical content inside this boundary.

The design tokens for Codametrix, as the system publishes them. Values are exact; names are the token names components use.

Generated updated: 2026-06-27.

Primitive

Semantic

Type

Space

Grid

Radius

Motion

Codeblock

Icon