Living Design System

The CodaMetrix brand, assembled from code blocks.

Touchless, transparent, traceable: a precise visual language for autonomous medical coding. Every token on this page resolves from tokens.json.

01 — Foundations

Foundations

Color, type, spacing, and grid: the primitives every layout is built from.

Color

Token chips show the human name, the CSS custom-property token, and the resolved hex. Brand colors only.

Type — six-step hierarchy

Funnel Display for headlines, Funnel Sans for body, Barlow Semi-Condensed for labels. Scale ratio 1.25.

HeadlineFunnel Display 600 · 3rem · 1.1
Autonomous coding, proven.
Sub-headlineFunnel Display 600 · 1.953rem
Denials start upstream, in the coding.
QuoteFunnel Display 400 · 1.563rem
A denial is a signal — a symptom of coding gaps.
BodyFunnel Sans 400 · 1rem · 1.5
CodaMetrix reads the full clinical record and assigns codes with auditable traceability, returning time to the people who do the work.
SmallFunnel Sans 400 · 0.8rem
Captions, footnotes, and sourced secondary information.
LabelBarlow Semi-Condensed 400 · 0.75rem · 0.04em
Section 7 · Data Label · Navigation

Spacing scale

Base unit 4px. Use only multiples from the scale.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 24px
--space-6 · 32px
--space-7 · 48px
--space-8 · 64px
--space-9 · 96px

12-column grid

12 columns, 24px gutters. Supports 2-, 3-, 4-, and 6-column sub-layouts.

123456 789101112

03 — Core Geometry

Code Blocks

The core visual element: a shape with one corner cut at exactly 45°, with a darker offset facet for depth. Cut-ratio 0.28, facet-offset 0.06, and facet-darken 0.18 are constants. Dimensions flex; angles never change.

Base Shape / Pattern
Repeating grid · watermarks
Image Mask
Clip over photography
Content Container
Holds text / stats / quotes
Section Tags / Labels
Wayfinding chips

04 — Secondary Graphic

Pixel Waves

Exactly two waves, never interchangeable. Wave 1 is bold and movement-forward (hero / backgrounds). Wave 2 is the structured stepped bar pattern (footers / carousel edges).

Wave 1 — bold, movement-forward (hero)
Wave 2 — structured, stepped (footer / carousel edge)

05 — System

Iconography

Angular-yet-rounded, derived from the same geometry as the Code Block and the logo mark. Consistent stroke weight scaled to size; no gradients; brand colors only.

24px · 1.5
32px · 2 · purple
48px · 2 · coral accent

06 — Imagery

Photography

Real medical professionals in real clinical settings. Bright, clean, natural light. Collaboration and problem-solving, never generic business stock or patients.

In a Code Block mask
Subject centered ·
face never at the cut

Faces and focal points stay centered and unclipped. The 45° cut corner must not intersect a face. Reframe rather than compromise the subject.

Rules
  • Real clinical environments
  • Bright, clean, natural lighting
  • Collaboration over posing
  • No filters or heavy grading
  • No patients — professionals only

07 — Library

Components

Thirteen documented components, each composed from tokens. Representative renderings below.

Headline + Coral Rule
Coding you can trace.

The signature move: Funnel Display headline + short coral rule beneath. Always paired.

CTA Pill

Coral pill, full radius. Funnel Display 600. Hover darkens ~12%.

Stat Block
70%
Reduction in coding denials

Large Funnel Display figure + Funnel Sans descriptor. Sourced proof point.

Quote Card

CodaMetrix has taken over the majority of our inpatient coding.

Dr. Max Rosen · UMass Memorial

Coral rule + Funnel Display pull-quote + attribution. No quote marks.

Section Tag
Section 7

Miniaturized Code Block chip. Barlow Semi-Condensed label, 45° cut.

Proof-Point List
  • Coding gaps
  • Documentation misalignment
  • Workflow variability

Parallel-structure phrases, coral tick markers. 3–5 items.

Bulleted Proof
  1. Denials start upstream, in the coding.
  2. Rework costs ~$55 per claim (HFMA).
  3. A denial is a signal, not a surprise.

Numbered/causal sequence with inline sourced stats.

Award & Event Chip
Award
Best in KLAS
Issuing body · Year

Real awards/events only. Category label + name + issuer/date.

Content Container
5x faster turnaround time

Code Block holding text/stats. Dark block + light text, AA contrast.

Code Block Primitive

Two-polygon recipe: body + 18%-darker facet. Roles: pattern/mask/container/tag.

Pixel Wave Primitive

variant 1 (hero) or 2 (stepped). Flat fills, geometry preserved.

Image Mask Block
Portrait

Photo clipped to Code Block, object-fit cover, face centered.

Logo Lockups
CodaMetrix

Horizontal (primary), Stacked, Icon-only. Clearance = ½ X / ¼ X.

08 — Application

Media Kits

The components composed into per-medium templates.

Social
  • IG/FB Feed — 1080×1080 (1:1)
  • Portrait — 1080×1350 (4:5)
  • Story / Reel — 1080×1920 (9:16)
  • LinkedIn — 1200×627 (1.91:1)
  • Wave 2 along bottom edge
Digital
  • Web hero (12-col, 1440 max)
  • Email templates
  • Display / banner ads
  • Slide decks
  • App screens
Print
  • CMYK · 0.125in bleed
  • One-pager & whitepaper
  • Conference materials
  • Business cards · posters
  • 300dpi min, fonts embedded
Video
  • Title cards (headline + rule)
  • Lower-thirds
  • Code Block transitions
  • End cards / CTA
  • assemble ease, slow reveals

09 — Motion

Motion

Calm, precise, confident. Code Blocks assemble; Pixel Waves step; type lands and breathes. Durations: fast 180ms, base 320ms, slow 640ms. Brand ease "assemble" = cubic-bezier(0.2, 0.8, 0.2, 1). Press Replay to play each demo.

a · Code Blocks assemble

slow 640ms · assemble

b · Pixel Wave 2 steps rise

base 320ms · decelerate · stagger

Denials start upstream.

c · Title-card reveal

slow 640ms · decelerate + rule wipe

  • Coding gaps
  • Documentation misalignment
  • Workflow variability

d · Proof points stagger in

base 320ms · decelerate · one at a time