Blueprints

Logo / partner / trust strip. Optional centered uppercase eyebrow heading (label/lg, muted) above a row of client/partner logos. Each item is one logo image (consumer supplies a pre-monochromed SVG/PNG), optionally linked. Two motion modes via the content-motion axis (ADR-039): default `none` renders a centered wrapped flex row; `contentMotion: marquee` scrolls the strip through the Marquee primitive (seamless loop, reduced-motion-gated by construction — the track stops and wraps under prefers-reduced-motion). Logo height ~24px, generous gap (~40px). Section-driven; no required client facts.

Dark background (near-black or brand dark). Radial gradient glow behind content (accent color, low opacity). All content centered. Eyebrow label (uppercase, accent). Heading: 2 lines max, 52–64px, 800 weight. Single subheading sentence (muted, max 50 chars). Two CTAs centered: primary filled + ghost outlined. No body paragraph.

Light section. Centered section header (heading + subhead) above. Below: two-column split, content-region (illustration block) left, plan card right. Illustration block: persona/scene composition with floating UI elements (chat bubble, message tile, optional photo) — composed via the BDS MarketingIllustration primitive (PR #484), NOT a baked image. Plan card: surface-secondary background, rounded-lg corners, padded generously. Card content: plan name (heading/sm), 2-sentence description (body/sm, on light), 'Learn more' primary CTA (size md). Two-column collapses to stacked at <992px (illustration goes above card on mobile). Section also supports an 'illustration-omitted' variant where the card centers max-width 720px.

Light background. Two-column layout. Left: heading (2 lines, 40px), 1-sentence subheading, primary CTA button. Right: contact details (phone number large, email, optional address), each with a small icon. Separated by a thin vertical rule. Conveys "we are real, reachable people" rather than just a form prompt.

Dark section background (page-inverse). 3-column grid of cards, each filled with its own brand color via [data-audience='X'] scope binding (re-binds --bds-background-brand-primary per card). Card layout: oversized illustration top (1:1 aspect, ~60-70% of card height, padded inside the brand color), then card body with high-contrast title (heading/sm, font-weight bold for AA on saturated bg), 1-sentence description (body/sm at 16px regular for large-text 3:1 threshold), and 'Learn more' affordance with arrow. Cards rounded-lg, full-bleed image at top, body padding generous. Section header centered above grid in light text on dark surface. Optional eyebrow above heading. Cards collapse to 2-col at <992px, 1-col at <768px. Each card establishes its own data-audience subtree binding so its --brand-primary cascades correctly per the BDS scope-binding pattern (consumer site defines [data-audience='X'] cascade rules).

Two-column layout for About / Story sections: left 55% is body content — eyebrow label, H2 headline (36–44px, 700 weight), 2–3 short paragraphs, optional values list as small icon + label rows. Right 45% is a single portrait or team photo in a tall card with rounded corners (16px radius), optional overlapping stat chip (e.g. "12 years in business") positioned bottom-left of the photo. Vertical rhythm: section is 100–120px tall padding.

Two-column layout: left 60% contains eyebrow label (12px uppercase, accent color, line before text), display headline (72–96px, font-weight 800, letter-spacing -0.04em, line-height 1.02), single subheading (1 sentence, 17px, muted color), and two CTAs side by side (primary filled + ghost outlined). Right 40% is full-height photography with dark gradient overlay bleeding from left edge. Trust signal (small text, very muted) sits below CTAs separated by a horizontal rule. No body paragraph.

Two-column 58/42 split on a soft audience-tinted background. Left column (vertical flex stack, gap-md): optional breadcrumb trail (3-5 items, brand-primary text color, '/' separators, last item aria-current=page); optional eyebrow label (uppercase, label-sm, primary text); h1 headline (display, weight bold); optional 1-3 line body paragraph (body-md, secondary text, max-width 55ch); optional single dark CTA button (small padding, dark background, white label — NOT a paired CTA group). Right column: white surface-primary card (radius-lg, soft shadow, padding-md) containing a 4:3 image-frame and an optional price overlay block underneath (label 'Starting at' / display price / brand-primary CTA button). Background tinting comes from `[data-audience='X'] { --background-brand-primary-soft: ... }` cascade declared by the consumer site — BDS ships the slot, not the values. Drives interior service-detail and similar 'page lives under a category' templates.

Compact banner hero for interior pages (About, Services, Contact). Full-width section, 200–280px tall. Left-aligned breadcrumb (very small, muted) above a large page headline (48–60px, 800 weight, ink color). Optional one-sentence subheading below (muted, 16px). No CTA. Background is either solid brand-light fill or subtle diagonal stripe texture. Transitions page context before the main content area begins.

Services or offerings detail layout. Section heading + subheading centered at top. Below: 2-column grid of service cards (3–6 cards typical). Each card: icon top-left (32px, accent color), service name (18px, 600 weight), 2-sentence description (14px, muted), optional price or tier badge bottom-right, optional "Learn more" text link at bottom. Cards have subtle border (1px rule color), 16px radius, 28px internal padding. Hover: elevate with box-shadow transition.

Light background section. Centered section header (eyebrow optional + heading + optional one-line subhead). 3-column grid of service cards below. Each card: top image area (3:2 aspect) showing service-specific 3D illustration or photo on a light backdrop; below, a small ServiceTag (icon variant, accent color) + service name (heading/sm, 700 weight) + 1-2 sentence description (body/sm, on light) + 'Learn more' ghost-variant link-button. Optional 'Has Options' positive-status badge anchored top-right of card when the service exposes multiple offerings. Cards have rounded corners (border-radius-md), no border at rest, optional subtle hover lift. Grid gap is generous (24-28px). Collapses to 2-col at <992px, 1-col at <768px.

Full-width dark background strip (sits between hero and first content section). 4 metrics in equal columns separated by 1px vertical rules. Each metric: large number (40–48px, 800 weight, white) with colored accent suffix (+ % B yr), label below in small muted text (2 lines max, 13px). No heading — the numbers speak. Counter animation on scroll-into-view.

Dark or accent-tinted background. Single large testimonial centered. Quote mark (large decorative, accent color, 80px). Quote text is large (20–24px, light weight, italic, white, max 2 lines). Author avatar (60px circle), name, and title below. Optional: 2–3 smaller secondary quotes in a row below the featured quote at smaller size.