Blueprints

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.

Two-column contact section: left 45% contains contact information — H2 heading, short reassurance sentence (muted), then stacked contact details as icon + label rows (phone, email, address, hours). Optional embedded Google Maps iframe at bottom of left column. Right 55% is the contact form: name, email, phone (optional), message textarea, and large primary submit button full-width. Form fields have clear label above, 48px height inputs, 8px radius. No floating labels.

Full-width FAQ section. Section heading centered at top with optional subheading. Below: optional category tabs or pill filters (if multiple FAQ categories). FAQ items as accordion rows — question in bold (15px, 600 weight), expand chevron right-aligned, answer text (14px, muted, line-height 1.65) revealed on click with smooth max-height transition. Items separated by 1px bottom border. 20–30% narrower than full container width, centered, for readability. Open state: chevron rotates 180°, border-left 2px accent color.

Light background section. 3-column grid of feature cards. Each card: icon or number (40px, accent color) top-left, feature title (18–20px, 700 weight) below, 1-sentence description (muted, max 80 chars). Cards have no visible border at rest — on hover: translateY(-4px) + subtle shadow. Section header: eyebrow + heading left or center aligned. Optional subheading (1 sentence max). Grid gap is generous (24–32px).

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

Alternating left/right layout. Each feature is a two-column row: one side is text (eyebrow, heading, 1-sentence body, optional CTA), other side is image, illustration, or abstract visual. Odd rows: text left, visual right. Even rows: visual left, text right. Generous vertical padding between rows (80–100px). Light section background with subtle background color variation between rows.

CSS grid with asymmetric column sizes (2fr 1fr 1fr). Two rows. Top-left card spans both rows (featured card — large photography or dark card with big stat). Remaining cards are equal-size: photography cards with overlay text bottom-left, one stat card in accent background color. All cards have border-radius: 12px and overflow: hidden. Photography cards: image with dark gradient overlay, label and title bottom-left. Stat card: large number (52px, 800 weight) and short descriptor.

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.

Long-form text content layout for Privacy Policy, Terms of Service, 404, and utility pages. Content column centered at 700–760px max-width. Section heading H1 (32–40px). Content uses H2 (22px) for major sections, H3 (18px) for subsections, body paragraphs (15px, 1.75 line-height). Ordered lists for numbered rules, unordered lists for items. Subtle left border (3px, accent-muted) on key callouts. No images, no CTAs except at very bottom. Quiet background (off-white or surface-secondary). Last-updated date shown near top in muted small text.

Four-column grid explaining a process in ordered steps. Each cell contains: a large step number (1–4, 56–64px, bold, brand accent), a short step title (H4, 16px, heading font), and a 2-sentence body description (14px, body font, muted color). Optional divider arrows between cells on desktop (hidden on mobile). Background: surface-primary or brand-dark for contrast. No images in cells — numbers carry the visual weight. Used for commercial transactions, brokerage processes, or any trust-building sequence. Collapses to 2×2 on tablet, single column on mobile.

3-column masonry or CSS grid with mixed aspect ratios. Photography cards with overlay that appears on hover: dark overlay, label (uppercase, small), title (20px, white). Cards have border-radius: 8–12px and overflow: hidden. Hover: image scale(1.04) with transition, overlay fades in. Section header left-aligned above grid.

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.

Full-width section with mesh gradient or radial glow background (not solid color). All content centered. Display headline (80px, 800 weight) spans 2–3 lines with a color-highlighted word or phrase. Single subheading sentence below (muted). Two CTAs centered. Floating stat cards or social proof badges positioned left and right of the heading using absolute positioning. No body paragraph.

Full-viewport-height section. Background is a high-quality photography fill (object-fit: cover) with a dark gradient overlay (linear-gradient bottom-left to transparent). Content positioned bottom-left or center-left at 30% from bottom. Eyebrow label, then large display headline (3–4 words max, 80px+), then single CTA. A glassmorphism stat card (blurred dark background, white text) is pinned bottom-right or bottom-left as a secondary visual anchor.

Dark background (near-black). Left-aligned content. Eyebrow label in accent color with a short horizontal line before it. Headline is 3–5 words maximum, 64–80px, 800 weight, white. No subheading — rely on a single short stat or trust line instead. One primary CTA only. Right side is either empty (letting the headline breathe) or contains a single abstract geometric shape or minimal illustration.

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.

Fixed position, full-width. Dark semi-transparent background (rgba ~0.82 opacity) with backdrop-filter blur(12–16px). Logo left (text or image, height 36px). Nav links centered or right (14px, 500 weight, muted white, hover to white). Primary CTA button right (filled, accent color). Border-bottom: 1px hairline rule (very subtle). Transitions smoothly on scroll.

Fixed or sticky, light/white background with subtle bottom border (1px, rule color). Logo left. Nav links centered (14px, 500 weight, ink color, hover to accent). Optional: pill-shaped CTA right in accent color. Clean, no blur effect. Works on light-background sites.

3-column mega-menu drop-down triggered from a primary nav link. Each column represents a distinct audience pathway (e.g. Healthcare / Land / Investors for commercial real-estate; can generalize to any 3-audience vertical). Column header is the audience label (14px uppercase, letter-spacing 0.08em, brand accent color). Below the header: 3–5 deep-link items, each with a label (15px, heading font) and an optional one-line note (13px, muted). Each column carries a distinct accent color token from `audienceAccents[]` and an optional icon from `audienceIcons[]` displayed beside the column header. Mega-menu opens on hover/focus of the trigger; closes on Esc or click-outside. Mobile: collapses to accordion — one expand per audience. No featured card in this variant (audience pathways are the feature).

Full-width section (dark background preferred). Each service is a horizontal row spanning full width, separated by 1px hairline rules. Row layout: 2-digit number left (01–05, small, muted accent), service name center-left (20–24px, 700 weight, white), 1-sentence description center (muted, max 120 chars), and an arrow icon right. On hover: entire row shifts left 8–12px with transition, number changes to accent color, arrow changes color. Section header above: eyebrow + large heading left-aligned.

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.

Numbered list of services rendered as an accordion. Each row shows a large ordinal number (80–100px, ultra-light weight, brand accent color), the service name (H3, 20px, heading font), and a one-line descriptor. Clicking a row expands a panel containing a 2–3 sentence description plus optional sub-items or a CTA link. Numbers remain visible when expanded. Max 6–8 items to avoid scroll fatigue. Background: surface-secondary. Used for professional-services and commercial real-estate verticals where a feature-grid feels too casual.

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.

Light background section. 3 or 4 metrics centered horizontally with generous spacing between. Each metric: very large display number (64px+, accent color), short label below. Optional short section heading above the metrics. No divider lines between stats — rely on spacing alone. Counter animation on scroll.

Light background. 3 or 4-column grid of team member cards. Each card: circular avatar photo (120px), name (18px, 700 weight) centered, role/title (muted, 13px) centered, optional social icon links. Cards are minimal — no border, no shadow at rest. On hover: subtle lift. Section centered heading above.

3-column (or 4-column for large teams) grid of team member cards. Each card: circular portrait photo top (120–160px diameter), name (16px, 700 weight) below, title/role (13px, muted), optional 1-sentence bio, optional LinkedIn icon link. Cards are card-less (no border, no background) — white space provides separation. Mobile collapses to 2 columns. Featured member (lead/owner) shown larger at top using a 2-column span card.

Light or white background. 3-column card grid. Each card: star rating (5 stars, accent color) top, quote text (italic, 15px, 3–4 lines max), then author row at bottom with avatar (40px circle from UI Avatars), name (700 weight, 14px), and role/company below (muted, 12px). Cards have a subtle border (1px, rule color), border-radius: 12px, and lift on hover (translateY -4px, shadow). Section heading centered above.

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.