Components

Component docs in this folder are extracted from approved artboards — one doc per component, provenance noted per doc. The full list with provenance lives in ../design-system.md. When a new component is extracted, add {component}.md here and a row there, citing the artboard it was read from.

A compact display component for real CodaMetrix awards and event appearances — rendered as a legible lockup with the award name, year, and issuing body; no invented honors, no placeholder text.

---

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 - (source: CodaMetrix_AI-Breakthrough-Awards-Carousel.pdf)

Variant A2 — "Top 50 Women Leaders in Healthcare Technology 2024" - Award name: Top 50 Women Leaders in Healthcare Technology - Year: 2024 - (source: Coda-Metrix-SocialTemplates-StickerSheet.pdf — the source asset names the award and year but does not name an issuing organization; do not add one without verification)

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 - (source: CodaMetrix HMA Spring CRO Forum 2026 - 04-06-26.pdf)

---

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 placeholder text like "Award Name TBD" — leave the component out entirely until the real award is confirmed. - 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.

(source: CodaMetrix_Denials-Whitepaper-Carousel.pdf)

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% (source: Codametrix Brand Guide.pdf) - Turnaround time improves 5x (source: Codametrix Brand Guide.pdf) - 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 (e.g., "(source: Codametrix Brand Guide.pdf)" or "(HFMA)"). - 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:

• Icon — an abstract, angular-yet-rounded mark made of interlocking rounded-rectangle "links," derived directly from Code Block geometry. The icon carries four approved colors: Purple (#973DDA), Coral Logo (#FE6E4E), Gold (#CFC17F), and Lavender (#DBACFF).
• 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

<PixelWave> renders an SVG element composed of geometric "pixel" steps derived from the same angular Code Block system. Two variants exist. They are not interchangeable and must never appear at the same Z-level in a single composition.

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 (source: CodaMetrix_Denials-Whitepaper-Carousel.pdf). - 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. - Maintain the wave's geometry proportions — the step pattern is derived from the same angular Code Block system and must read as structurally consistent. - 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 #2 — Wrong/distorted mark. Both waves are brand geometry elements derived from the Code Block system. Distorting, rotating out of intended orientation, or over-stretching either wave in a way that disrupts its angular, stepped geometry is a hard-fail under Gate #2. Using a flowing, ribbon-like, or organic wave shape as a substitute for either PixelWave variant is also Gate #2.

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)

(source: CodaMetrix_Denials-Whitepaper-Carousel.pdf)

• Coding gaps
• Documentation misalignment
• Workflow variability

Denial-prevention shift list

(source: CodaMetrix_Denials-Whitepaper-Carousel.pdf)

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

Workforce transformation list

(aligned with brand.md positioning; source: Codametrix Brand Guide.pdf)

• 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

(source: Codametrix Brand Guide.pdf)

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 (source: Codametrix Brand Guide.pdf)

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 (source: Codametrix Brand Guide.pdf)

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 (source: CodaMetrix_Denials-Whitepaper-Carousel.pdf, citing 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 (source: Codametrix Brand Guide.pdf)

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.