Page Sections

Overview

Section-level patterns for Persuade x Web Page composition (homepages, landing pages, campaign pages). These sit between component patterns (buttons, cards) and full-page composition rules (foundations/composition.md).

These patterns cover the Persuade purpose type. Inform and Convert pages use different section vocabularies and are documented in foundations/composition.md and the corresponding cells in rules/visual-rules.yml.

Token Usage

Colors

• Brand teal: color.brand.verdigris (hero labels, stat numbers, CTA arrow links)
• Dark background: color.neutral.950 (hero sections, close sections)
• Dark container: color.neutral.900 (image container wrapper)
• Muted foreground: color.semantic.muted-foreground (stat labels, section descriptions)

Typography

• Display: font-family.display (Lato) for hero H1 and stat numbers
• Body: font-family.body (Inter) for all other text
• Mono: font-family.mono (JetBrains Mono) for section labels

Spacing

• Section padding: 4rem-8rem depending on narrative role (see Composing a Persuade Page)
• Card gap: 1.5rem (components.cta-strip-cards.gap)
• Logo gap: 2rem-4rem (components.logo-marquee-bar.min_gap, .max_gap)

Hero Section

The first section on a persuade page. Serves the hook narrative role: capture attention, state the value proposition.

A hero combines two independent axes. Scale (full / standard / minimal) is set by page tier. Posture (authoritative / belonging / restrained) is set by page role. See foundations/composition.md Page Hierarchy and Hero Posture for routing.

Scale

Body specs apply to all scales: line-height 1.65-1.75, max line length 65ch, body letter-spacing +0.01em.

Posture: Authoritative (dark)

Default for product evaluation pages. The dark ground creates visual weight that signals “this is serious infrastructure.” Used on homepage, platform, hardware, and solutions pages.

Do:

1. Let the hero breathe. Whitespace is the primary signal of quality on persuade pages.
2. Use the gradient strip (at full scale) as a visual transition to the next section.
3. Pair a primary filled CTA with a ghost-on-dark secondary CTA.

Don’t:

1. Fill the hero with secondary information (partner logos, taglines, social proof).
2. Use more than one H1 on the page.
3. Add more than two CTAs.

Posture: Belonging (teal)

For identity pages where brand teal reads as warmth, not accent. Used on About and at most one companion identity page (mission, investors, annual report). Capped at 2 pages per site by composition.site-level.hero-posture-match.

Do:

1. Use only on identity pages. Copy speaks as the company (“who we are”), not about the product.
2. Keep imagery human (team photos, hands-on, physical goods) rather than abstract.

Don’t:

1. Use on product, platform, hardware, or industry pages. Teal is your trust color; spending it on every page strips its meaning.
2. Mix accent colors inside the hero. Teal is already the ground; adding midnight-purple or cyber-yellow on top creates visual noise.

Posture: Restrained (light)

For awareness-stage and non-product surfaces: industry landings (search arrivals), recruiting pages, and partner pages. Full authoritative weight would over-sell on these surfaces. Restrained means lower intensity, not softer voice.

Do:

1. Keep typography and copy understated. Short, technical, confident. No hedging qualifiers, no warmth-photography framing, no “here is how we help your world.”
2. Use teal as a precise accent (eyebrow label, primary CTA). Do not tint the hero region with teal washes.
3. Keep CTAs anchored to the visitor’s job (“See how we help data centers”, “View open roles”) without softening the brand voice.

Don’t:

1. Use on product, platform, hardware, or solutions pages. Light heroes on evaluation pages feel like white-label starter templates.
2. Lead with lifestyle imagery (smiling teams, office tours) to signal “approachability.” That is softness, not restraint. Technical imagery (data center floor, hardware on a rack) is on-brand; stock-photo warmth is not.
3. Default to this posture to look modern. Authoritative is the right signal for product evaluation; restrained is the right signal for pre-product visitors, and nothing else.

Stats Row

Large numbers with labels, used for trust and metric displays. Serves the turn or evidence narrative role.

Color by Content Category

Stat numbers default to brand teal (color.brand.verdigris) when all metrics are trust-region content (technology, platform, data quality). When stats span multiple content categories, number color can follow the palette semantics from foundations/color.md:

• Trust/technology metrics: teal (default)
• Detection/alert metrics: energy region (mp-step-2 or mp-step-3)
• Savings/ROI metrics: results region (cyber-yellow) on dark backgrounds only
• Recovery/sustainability metrics: growth region (cy-step-2) on dark backgrounds only

When in doubt, use teal. Teal + neutrals must comprise at least 70% of color expression on any surface.

Specifications

Do’s

1. Do: Use 3-4 stats. Fewer than 3 looks sparse; more than 4 overwhelms.

2. Do: Use real numbers, not rounded generics. “2.1B+” is more credible than “Billions.”

Don’ts

1. Don’t: Mix units inconsistently. If one stat uses a suffix (“+”, “%”), apply the same formatting logic across all stats.

2. Don’t: Place the stats row as the first section. Stats land harder after the reader has context (the hook and at least one evidence section).

Logo Marquee / Trust Bar

Scrolling logo display for social proof. Serves the proof narrative role.

Specifications

Implementation

The marquee requires a duplicated logo set inside an overflow-hidden container. The animation translates the track by -50% (one full set width) and loops infinitely. On prefers-reduced-motion: reduce, the animation stops and logos display statically.

Do’s

1. Do: Mute logo opacity to 0.7. Logos at full opacity compete with page content for attention.

2. Do: Include at least 6 logos to fill the viewport. Fewer creates visible gaps in the scroll.

Don’ts

1. Don’t: Mix logo sizes. All logos should share the same max-height for visual consistency.

2. Don’t: Use the marquee without a reduced-motion fallback. The scrolling animation can cause discomfort for motion-sensitive users.

CTA Strip (Multi-Card)

Horizontal card strip where each card is a call-to-action. Serves the evidence narrative role (feature highlights, product areas).

Specifications

Do’s

1. Do: Use 3 cards for a balanced row. 2 looks incomplete; 4+ may not fit without scrolling on tablet.

2. Do: Keep card content to heading + one sentence. CTA cards are scannable, not readable.

Don’ts

1. Don’t: Mix hover-lift with hover-scale on CTA cards. Pick one. See categories/animation/hover-states.md for the hover-lift pattern.

2. Don’t: Add images to CTA strip cards. These are text-forward micro-CTAs, not feature cards with hero images.

CTA Arrow Link

Inline link with a trailing arrow that expands on hover. Used where a full button is too heavy.

Specifications

The arrow span should have aria-hidden="true" since the arrow is decorative.

Do’s

1. Do: Use CTA arrow links for section-level navigation (“See detection in action”, “Read the case study”). They are lighter than buttons and guide the reader forward.

2. Do: Place arrow links at the end of a section, after the content has made the case.

Don’ts

1. Don’t: Use arrow links for primary page CTAs. Primary actions get buttons (filled or ghost-on-dark). Arrow links are secondary.

2. Don’t: Mix arrow links with the underline CTA-link pattern (components.cta-link) in the same section. Pick one style per context.

Dark Image Container

Dark wrapper for showcasing dark-themed screenshots on light pages. Prevents jarring contrast at the light/dark boundary.

Specifications

Do’s

1. Do: Use the dark container when embedding Patina dashboard screenshots or dark-mode UI on light page backgrounds. The neutral.900 wrapper provides a visual frame.

2. Do: Use the smaller padding (1.5rem) for inline images and larger padding (3rem) for hero-scale screenshots.

Don’ts

1. Don’t: Use the dark container for light-themed images. It inverts the purpose and makes the image look detached.

2. Don’t: Nest dark containers inside dark page sections (hero, footer). The container exists to bridge light-to-dark contrast, which is not needed on already-dark surfaces.

Composing a Persuade Page

These section patterns map to narrative roles defined in foundations/composition.md:

Arc rules

See foundations/composition.md for the full narrative arc rules governing section ordering and pacing.

Section flow

Pages must follow the lightness rhythm rules to avoid strobing (alternating dark/light sections). See foundations/color.md for context and rules/visual-rules.yml -> color.section-flow for machine rules.

See foundations/composition.md for the coupling rules (color-to-spacing, color-to-typography, type-to-spacing) and whitespace principle.

Related

• Composition – Purpose x Surface framework and coupling rules
• Hover States – Hover-lift, ghost-on-dark, CTA arrow-link hover patterns
• Buttons – Button variants including ghost-on-dark
• Visual Rules – Machine-readable rules (canonical values)