Foundations

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

Source: Brand Instructions/brand-style-guide.md

---

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

---

Related

• logo — logo icon geometry derived from Code Block geometry
• pixel-waves — wave elements built from the same brand geometry
• motion — Code Block assembly animation principles
• iconography — icon style derived from Code Block geometry
• photography — image masking inside Code Blocks

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

Source: Brand Instructions/brand-style-guide.md

---

Primitives

All values taken directly from tokens/tokens.json.

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.

---

Related

• code-blocks — block fill colors defined here
• pixel-waves — wave color rules reference primitives
• logo — logo palette uses #FE6E4E coral exclusively
• motion — palette discipline in motion references this doc

Icon style, sizing tokens, and do/don't rules derived from Code Block geometry.

Source: Brand Instructions/brand-style-guide.md

---

Style Principle

CodaMetrix icons are derived from the same geometry that governs code-blocks and the logo icon: angular-yet-rounded. Icons share the visual character of the interlocking-links mark — they are not fully geometric/sharp, nor soft/circular. The consistent corner cut discipline from the Code Block system carries into the icon style.

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 (tokens.radius.sm = 4px at 24px icon size; tokens.radius.md = 8px at 48px). - 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.

---

Related

• code-blocks — source geometry for icon style
• logo — interlocking-links mark that defines the visual character
• color — icon color rules
• type — Barlow Semi-Condensed labels that accompany icons

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

Source: Brand Instructions/brand-style-guide.md

---

The Mark

The CodaMetrix logo is the wordmark "CodaMetrix" paired with an icon — an abstract, angular-yet-rounded mark made of interlocking rounded-rectangle "links," derived directly from code-blocks geometry. The wordmark carries a subtle accent between "Coda" and "Metrix": a small coral tick (#FE6E4E) with a purple dot (#973DDA).

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.

---

Related

• color — dual-coral rule, logo palette values
• code-blocks — logo icon geometry derives from Code Block geometry
• motion — logo animation constraints

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

Source: Brand Instructions/brand-style-guide.md

---

Motion Tokens

Source: tokens.motion.

Duration

Easing

The assemble ease is brand-specific: it gives the angular Code Block geometry a sense of precision snapping into position rather than floating passively.

---

Six Motion Principles

These principles are derived from the static brand system. They apply to any animation, video, or interactive motion work.

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.

---

Related

• code-blocks — primary animated geometry
• pixel-waves — secondary animated texture
• color — palette discipline reference
• type — type role and leading in motion context

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

Source: Brand Instructions/brand-style-guide.md

---

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.

---

Related

• code-blocks — image-mask role specification
• color — background color context for portrait backdrops
• motion — human payoff on screen (faces in Code Block masks in video)

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

Source: Brand Instructions/brand-style-guide.md

---

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: - Keep angle and proportions consistent — this is a geometry-derived element. - 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)

• Never distort, rotate, or over-stretch either wave. The geometry is derived from the same angular code-blocks system — angles and proportions must stay consistent.
• 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).

---

Related

• code-blocks — waves built from the same brand geometry
• color — gradient field that waves layer onto
• motion — wave animation principles
• space-grid — safe area and placement notes for social formats

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

Source: Brand Instructions/brand-style-guide.md

---

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

Detailed production values (precise bleed/safe-area px) to be finalized in 20-media/social.md. The table below captures platform format and safe-area intent for layout planning.

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

---

Related

• code-blocks — block sizing flex within grid columns
• pixel-waves — wave element placement references grid and safe areas
• color — gradient fields span full bleed, outside column gutters

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

Source: Brand Instructions/brand-style-guide.md

---

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.

---

Related

• color — text color tokens
• motion — type animation principles
• code-blocks — Label (Barlow Semi-Condensed) used for section tags

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.