Components

Ledger hero banner

Pattern ID: component-ledger-hero-banner · component: src/components/LedgerHeroBanner.astro

The page-opening dark field: a full-bleed photograph bled to all four edges, a navy veil heaviest at the left and bottom so the copy keeps contrast, a breadcrumb (or mono eyebrow), a large two-line display claim low-left, a short deck, one or two pill CTAs, and a mono micro-label strip along the bottom. It is the page’s FIRST dark field, and it must stay dark so the transparent SiteNav reads over it. This is the exact hero used by /industries (lifted and generalised here); the Life-Sciences segment and platform pages open on the same component. Reach for it on any new inner page’s hero instead of re-rolling the photo + veil + reveal stack.

Components

Ledger deep hero

Pattern ID: component-ledger-deep-hero · component: src/components/LedgerDeepHero.astro

The Ledger-system page opener: a ledger-face--deep navy field with the photograph dropped to a faint underlay (not a hero photo), the site’s one signature cyan→purple gradient spent here, an optional halftone texture plate, a two-column grid (eyebrow + display heading with a ledger-pill on the left, lead/body prose + one on-dark Button on the right), and an optional "parties" chip row — the doc’s subject stated as a row rather than a sentence. This is the exact hero used by /life-sciences/clinical-cros (lifted and generalised here); the same idiom opens /platforms/life-sciences. Reach for it on any new Ledger-system inner page instead of re-rolling the underlay + veil + gradient + halftone stack. Pair it with the lighter LedgerHeroBanner above when a full-bleed photo opener fits the page better.

Components

Industry index row

Pattern ID: component-industry-index-row · component: src/components/IndustryIndexRow.astro

One row of the editorial-index spread first built on /industries — a full-bleed image plate on one side and a copy column (a mono kicker carrying the row’s two-digit code, a display title, one or more body paragraphs, and an arrow CTA) on the other. The sides alternate down the list, driven by each row’s index (even → image leads, odd → image trails) rather than a CSS :nth-child, so the zig-zag holds now each row is its own component. The two demo rows below show both sides; the second is the flipped "Education, Government and Nonprofits" row the pattern was extracted from. Reach for it on any new editorial index of sectors, services or case studies instead of re-deriving the plate + copy grid.

Components

Ledger pull section

Pattern ID: component-ledger-pull-section · component: src/components/LedgerPullSection.astro

A ledger-split--7-5 band: a copy column (mono eyebrow, display heading, one or more body paragraphs — the first set as the lead) on the left, and a ledger-pull statement pulled out of the measure with its leading edge ruled in the house highlight on the right. The band sits on a tinted ground and is capped top and bottom with the halftone dot-screen texture. This is the exact section used by /life-sciences/how-to-choose-a-salesforce-life-sciences-partner (the "Beyond certs" / "Look beyond certifications" §3), lifted and generalised here. Reach for it on any new page that needs a claim balanced against a short, pulled statement.

The texture is the shared pattern-halftone-caps primitive. The component bundles its three tunings as one halftone prop — halftone-cap-light, halftone-cap-bright, halftone-cap-on-dark — plus "none" to drop it. The three variants are shown back to back below (each on the ground it is tuned for).

Components

Convergence diagram section

Pattern ID: component-convergence-diagram-section · component: src/components/ConvergenceDiagramSection.astro

A two-column band: a copy column (mono eyebrow, display heading, an italic lead and body paragraphs) beside a DIAGRAM that argues the claim — scattered SOURCE chips, hairline curves fanning IN to one point, and a single white record PLATE, so many sources resolve into one complete view. A looping signal pulse rides each curve so the sources read as data flowing into the record (gated behind prefers-reduced-motion). This is the exact diagram from /life-sciences/commercial-operations-hcp-engagement §2 ("A complete view" / "Build a more complete HCP view"), lifted here.

The diagram is kept verbatim but is now DYNAMIC: the chips, the curves, the pulses and the record rows are all derived from the sources / recordRows props, and the curve geometry is computed from sources.length — so the fan draws the right number of lanes for any list, not the five the page hard-coded. diagramSide places the diagram "right" (default) or "left". The two demos below show a 4-source fan on the right and a 6-source fan on the left.

Components

Closing CTA band

Pattern ID: component-closing-cta-band · component: src/components/ClosingCtaBand.astro

The site’s second (and almost always final) dark field: a navy field over a photograph, one eyebrow, one heading, one or two body paragraphs, and one on-dark Button. This exact section — same gradient scrim, same type ramp — was hand-copied onto eight pages before ClosingCtaBand.astro existed: /about, /industries, /life-sciences/pharma-biotech, /life-sciences/cdmo-api-manufacturers, /life-sciences/medtech, /life-sciences/commercial-operations-hcp-engagement, /services/ai-and-data-strategy and /accelerators/lead-capture-agent — all eight now render through the shared component. Reach for it on any new page’s closing section instead of re-deriving the two-layer gradient style= block.

Components

Marquee strip

Pattern ID: component-marquee-strip · component: src/components/MarqueeStrip.astro

A slow looping mono-label ticker for dark bands (props: items, rule, class). Used on /leadership.

Components

Platform toolkit section

Pattern ID: component-platform-toolkit-section · component: src/components/PlatformToolkitSection.astro

The house 7/5 "Platforms" band: a claim column on the left (mono eyebrow, display heading, one or more body paragraphs, an optional arrow CTA) beside a two-up grid of calm paper tiles on the right, each tile a brand mark + the platform name over a masked blueprint grid (.plat-tile / .hstat-grid / .plat-mark). This exact section — same grammar, tile for tile — was hand-copied onto four Life Sciences pages before this component existed: /life-sciences/medtech, /life-sciences/pharma-biotech, /life-sciences/cdmo-api-manufacturers and /life-sciences/commercial-operations-hcp-engagement — all four now render through the shared component. Reach for it on any new page that needs to present a "technology we bring together" toolkit.

Each tile carries EITHER a logo (a brand mark in /public, the common case) OR an icon (inline SVG path data for an abstract capability with no brand mark, the house .jicon convention) — logo XOR icon. The demo below mixes both so the fallback glyph slot is visible.

Components

Stage deck section

Pattern ID: component-stage-deck-section · component: src/components/StageDeckSection.astro

The "How we deliver" band: a ledger-face--panel ground wrapping a ledger-split items-end heading row (mono eyebrow + display heading) above the shared LedgerStageDeck — a Swiper carousel of white cards, each with an oversized mono index, a serif title, a one-line description and a category-tinted progress bar. This exact band was hand-written on three Ledger pages before this component existed: /services/salesforce-implementation ("From requirements to everyday use"), /platforms/life-sciences ("From opportunity to working agent") and /life-sciences/move-to-life-sciences-cloud ("Move in clear stages"). Reach for it on any new page that lays a method out as an ordered run of stages.

The stage cards themselves stay in LedgerStageDeck (its Swiper deck, controls, no-JS fallback and card CSS); this component owns only the surrounding section and forwards the deck props through. Pass linkLabel to add the trailing "the method, in full" link on the deck’s control row (the agentforce page uses it; the other two don’t).

Components

Approach quote band

Pattern ID: component-approach-quote-band · component: src/components/ApproachQuoteBand.astro

The Ledger case-study "quote-band" composition on the house surface panel: a mono eyebrow + display heading, then a two-column row — a narrow image plate (~30%) on the left and, on the right, a large pulled display statement, a supporting paragraph and an optional arrow link. This is the exact section used by /industries §3 ("One approach" / "Technology that adapts to the business"), lifted and generalised here. Reach for it on any new page that balances a short, pulled claim against a supporting image.

The statement and support strings may carry HTML entities / smart quotes. The arrow link is optional: pass link and leave showLink at its default, or set showLink={false} to drop it on a page that has no target route yet. Set headingId to wire the heading’s aria-labelledby, or omit it (as /industries now does) for no id.

Components

Data foundation console

Pattern ID: component-data-foundation-console · component: src/components/DataFoundationConsole.astro

The house 7/5 "console" band: a claim column (mono eyebrow, display heading, an italic lead, one or more body paragraphs, an optional arrow CTA) beside a frosted-glass console — a panel floating on an ambient background image, with a mono cap label, a stack of cards and an optional dashed base row (.df-scene / .df-panel / .df-cap / .pf-card). This is the exact section used by /life-sciences/pharma-biotech §7 ("Build a stronger data foundation"), lifted and generalised here. Reach for it on any new page that presents a layered "platforms / data / governance" stack.

Two card variants, picked by cardVariant: "platform" (default — larger single-label cards with an optional brand tint key: sf · d360 · dbx — paired with a dashed base row) and "task" (tighter, smaller-label cards for a list of short phrases, usually no base). The same page’s §8 "AI, applied" band is the task variant. mediaSide ("right" default | "left") flips which column the console takes. The two demos below show both variants, mirrored.

Backgrounds

Dark-room ground

Pattern ID: bg-pattern-darkroom-ground

A photographic field, a navy veil deepening the edges, and an inverted white blueprint grid laid over the top — the dark "room" treatment used by the homepage’s "Start with the problem" section, the CDMO page’s "Process RFQs faster" section, and (currently) the MedTech page’s "Help field teams work with better information" section. Pull the three ground layers and the on-dark text ramp below onto any section that needs this effect — only the content inside changes.

Patterns

Halftone edge caps

Pattern ID: pattern-halftone-caps · variants: halftone-cap-light, halftone-cap-bright, halftone-cap-on-dark

A dot-screen strip masked to fade inward from an edge — the same texture SiteFooter uses, and the one PrincipleStatement puts on both the top and bottom of its band (ledger-halftone-cap + ledger-halftone-cap ledger-halftone-cap--bottom). Three named variants below bundle a dot colour/size/tile tuning for the ground the cap sits on, so a page reaches for a class instead of re-deriving an inline style every time.

Components

Takeaway card list

Pattern ID: component-takeaway-card-list · component: src/components/TakeawayCardList.astro

A 5/7 split on a blurred blue-wash ground: an eyebrow glass chip, a heading, an optional italic lead and body on the left; a mono lead-in line and a stacked list of frosted-glass cards — each with a circular accent icon badge and a tabular index — on the right. Reach for it when a section needs to present a short, ordered set of "what you get" / "what to ask" items as scannable cards rather than prose. All copy is prop-driven and each item supplies its own inner SVG icon path.

Components

Principle statement

Pattern ID: component-principle-statement · component: src/components/PrincipleStatement.astro

A centered single-statement band on a white ground: a mono eyebrow with a trailing slash at the top, one large centerd serif statement below it (with an optional <mark> highlight pill on the operative phrase), and a halftone dot screen capping the top and bottom edges. Reach for it when a page needs its one sharp “principle” or stance line to stand alone as a quiet band between denser sections. The statement is passed via the default slot so each page keeps its own sentence and places its own <mark>. Live on /life-sciences/clinical-cros, /platforms/life-sciences, /life-sciences/medical-affairs and /services/salesforce-implementation.

An optional link prop ({ label, href? }) renders a single centerd ledger-link (arrow glyph) BELOW the statement, inside the same band, so a page’s principle line and its follow-on CTA read as one section. Omit it and no link renders; href defaults to "#". The preview below demonstrates the link-enabled variant.

Components

Ledger logo-plate grid

Pattern ID: component-ledger-logoplate-grid · component: src/components/LedgerLogoPlateGrid.astro

A soft-teal Ledger "stack band" capped by a halftone dot screen: a label rail on the left (eyebrow + serif heading + lead-in) and, on the right, a grid of brand logo-plates (the headline plate can span two tracks via wide), a closing line and a trailing arrow link. Reach for it to present a technology stack or capability set as branded chips rather than a bullet list. All copy is prop-driven and each plate rides an existing /public logo.

Components

Opportunity media plate

Pattern ID: component-opportunity-media-plate · component: src/components/OpportunityMediaPlate.astro

A 7/5 split: a claim on the left (eyebrow + heading + optional italic lead + body paragraphs + optional arrow link) and, on the right, a house media card carrying a photo with a floating frosted "plate" that lists supporting points (its live dot is motion-gated). Reach for it to pair a narrative claim with an image and a short captioned callout. All copy is prop-driven and the image is an existing /public asset.

Components

Info-work card grid

Pattern ID: component-info-work-card-grid · component: src/components/InfoWorkCardGrid.astro

An index-labelled card run on the house grid-blueprint ground: a mono eyebrow + serif heading + optional lead introduce a real <ul> of white cards, each carrying a mono index label, a serif title, a one-line body, and a hairline footer with a derived descriptive tag plus an arrow that reveals on hover. Reach for it to lay out a run of short, labelled "where this fits" items without inventing numbers. Rendered in the Megnity palette; live on /services/ai-agents block 06. It renders NO fabricated metrics, statistics, or promotional badges — only the prop strings passed in appear.

Components

Environment mosaic

Pattern ID: component-environment-mosaic · component: src/components/EnvironmentMosaic.astro

A 5/7 split with ALL the copy in the left column (eyebrow + serif heading + lead/body + optional arrow link) and, on the right, a STAGGERED two-column mosaic of mixed tiles. "Label" tiles are glass cards floating on a blurred background photo under an accent-tint veil (the house blue identity); "media" tiles are sharp placeholder photos with a mono caption. The component deals the tiles into two columns in order and offsets the second down, so a four-tile list reads as a composed board. Reach for it to contrast two environments or facets (first used for "Connect Salesforce and Databricks" — operational vs analytical). All copy is prop-driven and the images are existing /public assets.

Components

Claim plate split

Pattern ID: component-claim-plate-split · component: src/components/ClaimPlateSplit.astro

The house 7/5 split with the CLAIM in one column (mono eyebrow, display heading, an optional italic serif lead, body paragraphs and an OPTIONAL arrow link) and a single picture in the house .plate instrument shell — white, one hairline, generous radius, navy-tinted shadow — in the other. It is the quiet counterpart to OpportunityMediaPlate : no floating frosted plate, no pulse, no list, just a readable claim balanced against one framed visual. This is the exact section used by /services/salesforce-implementation ("Useful data" / "Bring data into the picture", §6), lifted and generalised here. Reach for it on any section that needs a claim beside a supporting (often decorative) image instead of re-rolling the split + plate shell.

All copy is prop-driven. cta, eyebrow and lead are each optional; mediaSide flips the split so the picture can lead on alternating sections; mediaSpan (4/5/6) narrows the picture column and the claim takes the remainder; ground picks the section ground (paper / surface / blueprint / none) so a page’s light-loud alternation holds. The three demos below show the source arrangement, a flipped link-free variant, and a narrowed blueprint-ground variant.