lemuriaOS
creativeconversioncontent

Section Pattern Library

Define reusable page section templates — features, testimonials, pricing, FAQ, CTA — with layout specs, content slots, and responsive behavior so every page assembles from proven patterns.

Context

Most websites reuse 8-12 section patterns across all pages. Defining these upfront as a library prevents ad-hoc design decisions that create inconsistency. Each pattern solves a specific persuasion job and can be assembled in any order.

Procedure

  1. Identify the persuasion jobs needed across all pages: introduce (hero), prove (social proof), explain (features), demonstrate (how-it-works), reassure (testimonials), differentiate (comparison), convert (CTA), inform (FAQ), showcase (case studies).
  2. For each job, design one primary pattern and one alternate layout. Primary = the default; alternate = for visual variety when the same job repeats on a page.
  3. Define each pattern with: layout grid, content slots, spacing, background treatment, and animation trigger (if any).
  4. Specify content slot constraints: headline max characters, description max lines, image aspect ratio, minimum/maximum items in a grid.
  5. Define responsive stacking rules: which elements stack, which hide, which resize at each breakpoint.
  6. Test pattern composition: place 4-5 patterns in sequence and verify visual rhythm — alternating backgrounds, consistent spacing, no jarring transitions.

Output Format

# Section Pattern Library

## Pattern: Feature Grid
- **Job**: Explain value propositions
- **Layout**: 3-column grid, icon + heading + description per card
- **Background**: var(--color-surface)
- **Spacing**: var(--space-16) vertical padding, var(--space-4) gap
- **Content Slots**:
  - Section headline: max 60 chars
  - Card icon: 24×24 or 32×32
  - Card heading: max 40 chars
  - Card description: max 120 chars, 2-3 lines
  - Cards: min 3, max 6
- **Responsive**: 3-col → 2-col at 768px → 1-col at 375px

## Pattern: Social Proof Bar
- **Job**: Build trust quickly
- **Layout**: horizontal logo strip or metric badges
- **Background**: transparent or subtle divider
- **Content Slots**:
  - Logos: min 4, max 8, grayscale, max height 32px
  - Optional caption: "Trusted by [N]+ teams"

## Pattern: How It Works
- **Job**: Reduce complexity, show process
- **Layout**: 3-step horizontal flow with numbered badges
- **Content Slots**:
  - Step number: 1-4
  - Step title: max 30 chars
  - Step description: max 80 chars
  - Visual: icon or mini-screenshot per step

## Pattern: Testimonial
- **Job**: Reassure with peer validation
- **Layout**: centered quote with attribution
- **Variants**: single quote, carousel, grid of 3
- **Content Slots**:
  - Quote: 40-120 words
  - Name: full name
  - Title and company: role at [company]
  - Avatar: 48×48, rounded

## Pattern: Pricing Table
- **Job**: Enable plan comparison and selection
- **Layout**: 2-4 column cards with feature comparison
- **Content Slots**:
  - Plan name: max 20 chars
  - Price: number + period
  - Features: min 4, max 12 per plan
  - CTA: one per plan
  - Highlight: one "recommended" plan

## Pattern: FAQ Accordion
- **Job**: Address objections pre-emptively
- **Layout**: single-column accordion
- **Content Slots**:
  - Section headline: max 60 chars
  - Questions: min 4, max 10
  - Question text: max 80 chars
  - Answer text: max 200 words

## Pattern: Final CTA
- **Job**: Convert after full-page persuasion
- **Layout**: centered block with headline + button
- **Background**: var(--color-primary) or gradient
- **Content Slots**:
  - Headline: max 50 chars, action-oriented
  - Subhead: max 80 chars
  - Primary CTA button
  - Secondary text link

QA Rubric (scored)

  • Job clarity (0-5): every pattern has a named persuasion purpose.
  • Composability (0-5): any 4 patterns placed in sequence produce a cohesive page.
  • Content constraints (0-5): slot limits prevent layout breakage with real content.
  • Responsive coverage (0-5): every pattern defined at desktop, tablet, and mobile.

Examples (good/bad)

  • Good: "Feature Grid — 3 columns, each with a 24px Lucide icon, heading capped at 40 chars, description at 120 chars. Stacks to single column on mobile. var(--space-16) top/bottom padding maintains vertical rhythm with adjacent sections."
  • Bad: "Features section — put some cards with icons and text. Make it look nice."

Variants

  • Minimal mode: 5 core patterns only (hero, features, social proof, CTA, FAQ) — for single-page sites.
  • Marketing-heavy mode: 12+ patterns including comparison tables, ROI calculators, case study spotlights, and interactive demos.