Design system

Foundations

Components

Media

digital · print · social

Rules, mapping and measured contrast

Three things to carry away:

• Conexeu Green is #0E443A. The guide captions it #0F574A; the swatch, the logo artwork and the live site all say #0E443A.
• Never set body copy on cg-3, cg-4, coral-2, rose-1, rose-2 or slate-3.
• The guide's own coral-4 / coral-1 (2.58:1) and rose-4 / rose-1 (2.25:1) pairings fail AA — display sizes only.
• live-deep-ground #042A23 and live-pearl #F8F7F3 are production values the 2026 guide does not define. Use them only when editing the existing site.

Four devices, all descended from the X in the logotype, all hairline linework.

Hard rules

• One device per composition. Mesh or X Pattern, never both.
• Hairline only — nothing filled.
• No gradient, blur, drop shadow, glow, bevel or 3D extrusion on any brand element, anywhere in this system.
• A flat mesh pasted over a curved surface is off-canon; the contour behaviour is the idea.

Guide language: "clean, circular line-art icons that balance literal and abstract forms with minimal detail and controlled stroke weight."

Spec

Modes

Check contrast before using a secondary mode: Coral 1 on Coral 4 measures 2.58:1 and Rose 1 on Rose 4 2.25:1 — both fail AA. Hydra (4.83) and CG (4.54) pass.

Motifs observed in the guide set

Layered waves · a seven-circle cell cluster · an asterisk / burst · a four-circle quad. All single weight, all inside the circle.

• a blue Conexeu wordmark, blue CXU mark or blue X-Mark
• 0F574A or 042A23 used as Conexeu Green in print or social
• gold on a secondary green tone, or gold as a dominant color
• a therapeutic 1 or 2 stop used as a full-bleed background
• body copy on CG 3, CG 4, Coral 2, Rose 1, Rose 2 or Slate 3
• a third typeface, Bold or Heavy IvyPresto, or an all-caps display headline
• the positioning line set as live text instead of an outlined vector
• a stretched, tinted, shadowed, rotated or hand-rebuilt mark
• content inside the X-height clearspace
• a standalone CXU mark where Conexeu has not been established
• mesh and X pattern in the same composition
• a full-surface X pattern
• a flat mesh pasted over a curved body surface
• gradient, blur, drop shadow, glow, bevel or 3D extrusion on a brand element
• baked lettering, headline, caption, logo, number or UI text inside a generated render
• before-and-after imagery in any medium
• a result, percentage, timeline-to-benefit or efficacy figure
• restores, heals, proves, works or regenerates stated as achieved fact
• a testimonial used as evidence of performance
• a comparative claim against a named competitor product
• an uncaveated superlative such as next-generation, advanced or innovative
• the unapproved line Regenerate, don't replace
• invented motion timing, easing or duration
• invented brand voice, personality or tone attributed to the guide

Categories and restrictions

Five approved categories: patient, gel & material macro, fluid & water motion, cellular & microscopic, skin & biological surface. "Balances human expression with scientific depth."

• AI-generated patient imagery is explicitly permitted — with strict attention to quality and licensability.
• Microscopy should align to the therapeutic palettes (aesthetics → Coral, wound care → Iris, …).
• No before-and-after, ever. CXU is investigational.

The Frame is the grid

Conexeu's spatial signature is not a column grid, it is containment. Content sits on a surface inset inside a frame, and the frame's weight is expressed as a percentage of the composition — never a fixed pixel value.

At 1080 × 1080 that is ~16px and ~38px. At 1920 × 1080 (long edge) ~29px and ~67px.

Artboards in use

Radii

small 15px · medium 20px · large 30px. Nothing else. Images in cards take a radius; full-bleed imagery takes none.

Web spacing (as built)

Slide anatomy (guide chrome, reusable for decks)

Running head 14pt Neue Montreal Regular. Section number and section name top-left, brand line top-right or bottom-right. Section title 53pt IvyPresto Thin. Full-bleed section dividers carry the title at 75pt with the number at 33pt. Body copy runs in two columns at 14pt.

Ramp, licensing and fallbacks

• Display is IvyPresto Display in Thin or Light only — no Regular, Medium, Bold or Heavy appears anywhere in the guide. Emphasis is Light Italic, never bold, never all-caps.
• Print ramp: headline 78pt / 112% / 4% kerning · positioning line 52pt / 100% / 2% · body 26pt / 150% / 2%. Sizes are relative; the percentages travel with the size.
• "Architecting Bioregeneration" is set as an outlined vector, not live text.

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.

What is not documented

• Resources list and detail — /resources is CMS-fed and its cards were not measured.
• Forms beyond the footer email capture.
• 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.

Measured 2026-08-22 off 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.

Type: the element roles are inverted

Three things fall out of that table:

1. Body copy is set in the display serif. p and .paragraph are ivypresto-display at 16px, not Neue Montreal. That is the single biggest divergence from the brand guide, which reserves IvyPresto for display and gives all body and utility copy to Neue Montreal.
2. Nothing steps down for mobile except h2. At 390px, h1 is still 48px/48px and .paragraph grows to 17.6px. h2 drops to 40px/44px.

Colour: four greens and two inks

So the deepest ground #042A23 is used as ink, and two neutrals (#585858, #0A7561) sit outside the 2026 palette entirely. Gold appears only as hairlines, arrows and small labels — which is exactly what the guide asks for.

Rhythm

• Section vertical rhythm is 160px (.section-green padding 160px 0), against the token file's --_spacing---section-gap: 8.125rem = 130px. Mobile collapses to 32px 0 0.
• Inner container measures 1248px at a 1440 viewport; .section.simple pads 64px, .ph-hero-section pads 0 32px 48px, .disclaimer-2 pads 64px 80px.
• Radii: the section shells carry 0px radius. The 15/20/30px radii in the token file apply to cards and media, not to sections.

The therapeutic mapping is not implemented

The guide maps Iris → wound care, Hydra → oral health, Coral → aesthetics, Rose → animal health, CXU green → 3D bioprinting. No platform page uses its family. Every application page is green and gold. The purple-* / coral-* classes in the markup are Webflow's auto-generated combo-class names, not colour usage. Applying the mapping is a design decision, not a defect to fix.

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.

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.

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

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

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

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.

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 — keep them consistent.

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.
• The four application pages end on disclaimer-2; keep that as the last content band before the 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Type ramp as built

h1 3.75rem/110% · h2 2.5rem/125% · h3 1.875rem/133% · h4 1.5rem/141% · h5 1.25rem/150% · h6 1.125rem/150% · body 1rem/150% · paragraph 1.0625rem/130% · button 0.9375rem/150%. Display steps L 4.6875rem · XL 5rem · XXL 5.3125rem · XXXL 5.625rem. Eyebrow ("sub-heading"): 0.75rem at 0.0875rem tracking, above h1/h2.

Web font reality

• Neue Montreal is declared as "Pp NeueMontreal", Arial, sans-serif and in practice falls back to Inter.
• Off-domain, the guide's sanctioned fallbacks are Times New Roman (display) and Helvetica (body). Any closer substitute is a declared deviation printed on the artifact.

Colour on the web diverges from the guide

The site ships greens the 2026 guide never defines: --dark-teal-green #042A23 (its actual ground), --green-pine-forest #0B463B, --light-green #0A7561, --medium-green #499486, --border-green #2A695D, plus --_color---pearl #F8F7F3. And --gold #D4A041 is metallic-1, not the guide's solid gold #FFD902.

For new digital work use the canon tokens. When editing the existing site, match the page you are in and log the divergence — do not half-migrate a page.

The therapeutic colour → vertical mapping (Iris / Hydra / Coral / Rose) is not implemented on the live site; platform pages are green and gold only. Applying it is a design decision, not a fix.

Source: Conexeu Brand Guidelines v1.0 (2026) — sections 4.2 (gold), 6.1 (mesh), 6.2 (frame), 7.0 (business system), 8.0 (brand applications). Extracted 2026-08-21.

Frame

Print and large-format take the Emphasis Frame — up to ~3.5% of the composition — "where added presence is needed… in more visually competitive settings." Digital and editorial stay at ~1.5%.

Gold in production

• Gold Solid #FFD902 — on white or Conexeu Green.
• Gold Metallic #D4A041 → #FBE67B → #FCFBE7 → #F7D14E — "reserved for Conexeu Green or true production finishes such as Pantone metallic or gold foil stamp." On print, prefer a real finish over a simulated ramp.
• Gold never on a secondary green tone. Always sparing.

The Mesh in print

The metallic-gold-on-green mesh is the guide's designated "high-impact, premium" execution — the one place the system is allowed to be lavish. Solid gold on white is the light-texture variant.

Colour specification

The guide's swatch captions carry RGB / HEX / CMYK — PMS fields, but every CMYK value is printed as 0/0/0/0 and every Pantone reads the literal word Pantone — i.e. no CMYK build and no PMS number has been specified for any colour in the system.

Do not send a job to press on this file. Get CMYK builds and Pantone equivalents from the client first, or have them approved from a printed proof. Converting the hexes yourself and calling it canon is how the green shifts between suppliers.

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

Primitive

Type