Conexeu — Components

Component docs are read off what is built, never scaffolded. These fourteen were measured on 2026-08-22 from the live conexeu.com build (Webflow site 69c4549b8f49d446ae6a35dc) at 1440×900 and 390×844, with computed styles read from the DOM — not from the stylesheet's :root, and not from the brand guide, which contains no web patterns at all.

Start with _as-built.md. The build diverges from ../tokens/tokens.json in ways that will bite anything generated from the tokens — the h1/h2 roles are inverted, body copy is set in the display serif, and there are four greens and two inks in play. Those are decisions to settle, not bugs to fix blindly.

Structure

Content

Chrome & atoms

What is not documented

• Resources list and detail — /resources is CMS-fed and its cards were not measured.
• Forms beyond the footer email capture.
• The bio modal's interaction — geometry, focus handling and close affordance are Needs source in bio-modal.md.
• Any uniform card grid. The site does not have one; phase-cards is a composed formation, not a repeater. Do not force it into that role.
• Motion. GSAP and ScrollTrigger drive the site, and the brand guide specifies no motion whatsoever. See ../00-foundations/motion.md.

Application cross-links

What it is. The "Explore Other Applications" row at the foot of every application page — the four sibling verticals as a flex row of links.

Classes. div.section.simple.app.platform → div.title-wrapper-submenu-2.section-container → 5 children.

Measured at 1440. 1008 × 300, display: flex, gap: 8px.

Where. /platform/woundcare, /platform/aesthetics, /platform/oralhealth, /platform/3dbioprinting, /animal-health-cxu, /3d-breast-reconstruction.

Rules.

• The current page is excluded from its own row. Five children, four of them siblings.
• 8px gap, flex — it wraps rather than scrolls. Check the wrap at tablet.
• This is the site's only lateral navigation between verticals; if a new vertical ships, it goes in every row, not just the new page.

Architects cards

What it is. The web expression of the brand guide's own 4.5 card (§4.5 Secondary Color Application): the five therapeutic verticals as a stacked list of full-width cards. This is the most brand-loaded component on the site.

Classes. div.section-green.white-bg.architect → div.architects.bg-white → div.architects-cards-list → 5 cards.

Measured at 1440. List 1248 × 2492. Each card 1248 × 413. At 390: card 342 × 401 — so the card keeps its height and loses its width; it is a full-width row at every breakpoint, not a grid.

Content per card. Architects of + the vertical, a line of copy, and a link. Live wording, in order: Wound Care · Aesthetics · Oral Health · Animal Health · 3D Bioprinting.

The gap worth knowing. The guide's version of this card assigns each vertical its therapeutic colour — Iris, Hydra, Coral, Rose, CXU green — plus a circular line icon top-right and the wordmark bottom-right. The live cards implement none of that: they are green and gold like everything else, and the icon set was never delivered (../00-foundations/iconography.md). Applying the mapping here is the single highest-leverage change available on this site, and it is a design decision, not a fix.

Rules.

• Five cards, in that order. The row is the argument that one formulation spans five markets.
• Use the live-site vertical names. Never "Architects of Care" or "Architects of Beauty".
• One line of copy per card. The card is a door, not a page.

Leadership bio modal — PRESENT, UNMEASURED

What it is. The About page's leadership grid opens a scrollable bio panel. The supporting classes ship on all 12 pages.

Classes. .bio-rich-text (37 instances across 12 pages), #bio-container, #pop-up, plus page-level CSS in the head block: a 6px webkit scrollbar with a #001E33 track, #cacaca thumb, and #pop-up { opacity: 0; transition: opacity 1s ease } driven by a data- attribute.

Where. /about — 7 leadership cards (Miles Harrison, David Bogart, Dr. Claudia Chavez-Munoz, Dr. Brian Pilcher, Steve Inouye, Sonia Thomas, Jean-Romain Falconnet).

Needs source. The modal's own geometry, trigger wiring and open/close behaviour were not measured — the audit read the page shell, not the interaction. Two things are already visible and worth flagging:

• The scrollbar track is #001E33, a navy that appears nowhere in the Conexeu palette. It looks inherited from another build.
• The 1s opacity transition is the only motion timing written down anywhere on this site, and the brand guide specifies no motion at all (../00-foundations/motion.md).

Before touching it: open /about, trigger a bio, and measure the panel — width, padding, type sizes, close affordance, focus handling, and whether it traps keyboard focus. Then replace this section with the measurement.

Buttons, arrows & rules

What it is. The site's smallest shared parts: the gold arrow link, the gold hairline, and the vertical divider. There is no filled button anywhere on conexeu.com.

Classes and measurements.

The pattern. A link is text plus a gold arrow, not a button. Emphasis comes from a gold hairline under or beside the thing, never from a filled shape. That is why the whole site reads as editorial rather than as an app — and it matches the guide's rule that gold is a hairline accent, never a surface.

Rules.

• No filled buttons. If a CTA needs more weight, give it more space, not a fill.
• Every rule is 1px #D4A041. Do not thicken, do not switch to solid gold #FFD902, do not use a green rule.
• The arrow points right and means "forward". It is the same idea as the gold arrow on the social covers (../../Social/social-layout-system.md) — keep them consistent.

Disclaimer & FDA notice

What it is. Two separate pieces of compliance UI, and both are load-bearing. This is the component that keeps the site lawful, so it is the one to touch most carefully.

1. The page disclaimer block

Classes. div.disclaimer-2. Measured: 1168 × 241, padding 64px 80px, ground white.

Carries the IMPORTANT NOTICES text verbatim:

CXU™ is a medical device candidate in preclinical development. It has not been submitted to or reviewed by the U.S. Food and Drug Administration. Safety and effectiveness have not been established. See Forward-Looking Cautionary Statement. Terms such as 'next-generation,' 'advanced,' 'innovative,' and 'bioregenerative' reflect the Company's assessment of its technology relative to existing approaches and are not intended as representations of regulatory status, clinical performance, or guaranteed commercial outcomes.

2. The FDA notice control

Classes. A family present on all 12 pages: fda-button-v4, fda-button-arrow, fda-button-arrow-box, fda-button-line, fda-middle-line, fda-change, fda-color-change, fda-tab-none, fda-menu-button-main, fda-1, fda-2. An expand/collapse control that reveals the notice.

Rules.

• Never remove, collapse-by-default-and-forget, or reword either piece. The wording is the client's own regulatory language, not copy.
• The trademark notice travels with it: CXU™, Ten-Minute Tissue™, B.R.E.A.S.T.™ and Architecting Bioregeneration™ are trademarks of Conexeu Sciences Inc. — plus the no-affiliation line for every competitor mark referenced.
• A new page ships with both. A page that makes a substantive CXU™ claim and carries neither is a hard fail (../../Social/Rubric/social-rubric.md C5, same rule).
• The four application pages end on disclaimer-2; keep that as the last content band before the footer.

Footer

What it is. A green footer carrying navigation, an email capture, social links and the legal line.

Classes. div.footer-2 → .footer-wrapper → .footer-block, .footer-nav-link, .enter-email-footer, .social, .social_link, .linkedin-block, .form, .divider-line.

Measured at 1440. .footer-2 1168 × 453, padding 80px 0, ground #0E443A (canon Conexeu Green — unlike the navbar). .divider-line is 1px #D4A041.

Content. 96 footer-nav-link instances and 37 social_link instances across 12 pages — one shared footer symbol. Legal line: © 2026 Conexeu. All Rights Reserved.

Rules.

• The email form is a real form with reCAPTCHA wired in the page. Do not duplicate the form markup into a new section; link to it.
• Gold hairline rules only. No gold surfaces in the footer.
• Legal name in any new footer copy is Conexeu Sciences Inc. — no comma. ir.conexeu.com uses a comma and is wrong.

Hero

What it is. The first screen of every page: an eyebrow, an h1, and either a video or a still behind it. It is also the first scroll-snap target.

Classes. section.ph-hero-section.ph-snap-slide (+ .home on the homepage) → div.hero-content-wrapper → div.hero-video-wrapper.

Measured. 462px tall on /platform/aesthetics, 681px on the homepage (which carries the video). Padding 0 32px 48px. The h1 inside is ivypresto-display 48px/48px weight 100 with 2.4px tracking, white.

Copy pattern. The eyebrow is the h2 element styled small, uppercase, 11.2px, tracking 1.6px, in gold #F7D14E — e.g. OUR PLATFORM | APPLICATIONS. The h1 is the page's real title: Architects of Aesthetics, Architecting Bioregeneration, What is Bioregeneration?.

Rules.

• One h1 per page, and it is the Architects of {vertical} string on an application page. Use the live-site wording (Wound Care, Aesthetics, Oral Health, Animal Health, 3D Bioprinting), not the guide cards' older "Care" and "Beauty".
• The eyebrow carries the section path, in caps, in gold. It is not a headline.
• The hero video sits in hero-video-wrapper; it is decorative and must not carry type or a claim. Check it degrades to its poster frame.

Navbar & overlay menu

What it is. A slim fixed bar with the wordmark and a square menu button, opening a full-screen green overlay whose links are set very large in the sans.

Classes. div.navbar → .navbar-container / .nav-container / .navbar-logo / .menu-button-square → .nav-menu / .nav-menu-container / .overlay-menu / .body-menu, with .nav-link, .nav-link-wrapper, .nav-underline, .subnav-wrapper, .menu-sub-heading, .display-nav, .menu, .close, .inactive.

Measured.

Two things to note.

1. The navbar ground is #0B463B, the footer's is #0E443A. Two greens one digit apart on the same page. Pick one — see _as-built.md.
2. .nav-link is weight 100 on Neue Montreal, which has no Thin cut in the vault. The browser synthesises or falls back. If the overlay links look wrong on a machine, that is why.

Rules.

• 180 nav-link + 180 nav-underline instances across 12 pages: the nav is one shared symbol. Change it once, not per page.
• The gold used here is Metallic-4 #F7D14E, not solid gold #FFD902. Keep them distinct.
• .inactive is a real state in this system and appears on shipped markup — check what it hides before reusing the class.

News band

What it is. The "News and Media" band that closes most pages — a CMS-fed row of the latest resources, above the footer.

Classes. div.cxu (.bg-white) → div.cxu-wrapper → div.cxu-news-container / .cxu-news-left.

Measured at 1440. .cxu-wrapper 1168 × 645, padding 22.4px. .cxu-news-container text is Pp NeueMontreal weight 500 in #0A7561 — a green that is not in the 2026 palette (the site's --light-green). See _as-built.md.

Where. Homepage, /science, /platform/cxu, /3d-breast-reconstruction. It is absent from the four application pages, which end on the cross-link row and the disclaimer instead.

Rules.

• The band is CMS-fed. Items come from the Resources collection — do not hand-write cards.
• Press-release titles carry the claim register already; do not rewrite them for the band.
• If the band is added to an application page, it goes below the cross-link row, above the disclaimer.

Page shell & scroll-snap slides

What it is. The outer architecture every Conexeu page is built inside: a page wrapper, a scroll-snap slide container, and then sections. This is not a generic Webflow page — the snap container changes how everything inside it behaves.

Classes. div.ph-page-wrapper (with an .old variant on the application pages) → div.ph-slides-wrap → section.ph-hero-section.ph-snap-slide plus sibling sections.

Where. All 12 core pages. ph-slides-wrap is absent on /platform/woundcare, /platform/aesthetics, /platform/oralhealth, /platform/3dbioprinting, /contact — those pages open straight into the hero.

Measured. .ph-page-wrapper.old runs 5718px tall on /platform/aesthetics. .ph-slides-wrap 3885px. The hero is a snap target; div.sticky-block below it is the second.

Motion. GSAP + ScrollTrigger, registered site-wide, with a ScrollTrigger.refresh() on a 300ms timeout and a navbar-logo transform reset at 200ms. No motion spec exists in the brand guide — see ../00-foundations/motion.md. Do not add scroll behaviour on the assumption that what is here is canon.

Two traps.

1. ScrollTrigger.refresh() fired while the page is scrolled shifts every trigger by −scrollY. Refresh at the top, or after restoring scroll position.
2. A site-wide snippet animates scrollTo on every a[href^="#"] click with no cancellation. Any new in-page anchor inherits that, and two of them fighting produces a scroll war.

Rule. New sections go inside the existing shell as siblings of the hero. Do not nest a second snap container, and do not add a page wrapper variant — there are already two.

Phase cards

What it is. A row of small cards used for a staged or grouped set — the homepage's "The Body Deserves" formation and each application page's Key Features.

Classes. div.ph-formation → div.phase-cards → cards. Supporting classes phase-cards-heading-container, phase-cards-note (with .square).

Measured at 1440. .phase-cards 1248 × 802 with 5 children; the first child measures 655 × 57, so the children are mixed sizes rather than a uniform grid — this is a composed formation, not a card grid.

Rules.

• Treat it as a composition, not a repeater. If you need a uniform grid, that component does not exist yet — say so rather than forcing this one.
• phase-cards-note is the caption band beneath. .square switches its aspect.
• Numbers on these cards need a source in the same section (claims-compliance.md).

Section shell

What it is. The base full-width band every piece of content sits in. One class with modifiers, not a family of bespoke sections.

Classes. div.section-green — and its modifiers, all observed live: .left · .right · .white-bg · .no-padding · .biology-bg · .architect. Also div.section.simple (with .app, .platform) on the application pages.

Measured at 1440.

Rules.

• .section-green is the shell; the ground comes from the modifier. .white-bg inverts it.
• The vertical rhythm is 160px, not the token file's 130px. Match the page you are in.
• Sections are square-cornered. Radii belong to cards and media (15 / 20 / 30px).
• .no-padding exists for full-bleed media sections — use it rather than zeroing padding inline.

Sticky block

What it is. The site's signature scroll device: two to four full-height panels stacked in a sticky container, each with its own background video, revealed as you scroll. It carries the homepage's mechanism argument and every application page's Overview / How it works / Key Features sequence.

Classes. div.sticky-block → div.section-green panels (.left, .right, .biology-bg) → div.ph-water-flow-container (the copy) + div.video-bg (the media).

Measured.

Each panel's copy block is short — 304px, 395px, 788px on the homepage — against a 1120px panel. The type sits low in a tall field on purpose.

.sticky-block > div carries a 1px bottom border in #D4A041 — a gold hairline separating each panel from the next. That rule, and the .divider-line / .divider-vertical utilities (both 1px #D4A041), are the only rules in the system.

Rules.

• Copy per panel is one heading plus one short passage. If a panel needs a list, it is not a sticky panel — use a card row.
• .left and .right set which side the copy sits on. Alternate them; do not stack three the same way.
• The background video is decorative. No type, no claim, no number baked into it.
• The gold hairline is structural. Keep it; do not thicken it.

Testimonial band — SHIPPED INACTIVE

What it is. A "What professionals are saying" band on the homepage. It is built, it is in the DOM, and it carries the class .inactive.

Classes. div.testimonial.bg-white.inactive → div.testimonial-container.

Measured at 1440. .testimonial 423px tall, .testimonial-container 1248 × 622 with 2 children.

Why it matters more than its size suggests. CXU™ is preclinical. A practitioner quote that attests to a result is a testimonial for an investigational device — the exact thing ../../Oracle Brain/10-oracle-instructions/claims-compliance.md forbids. A quote may describe the approach; it may not attest to performance.

The brand guide's own sample of this pattern (guide slide 6.2, a named physician praising the technology) is layout lorem with no factual basis — it is not an approved testimonial and must never be pasted into the live band.

Rules.

• Do not activate this band without: an approved quote, written consent from the speaker, and a claims review confirming the quote describes the approach rather than a result.
• If it is activated, the investigational-status line must appear in the same section.
• Until then, leave .inactive on it. It is doing its job.