Finding the Right Patterns

The Challenge

You’re building a website for a law firm. You open the pattern library and see 666 patterns across 187 families. Where do you start?

Not every hero fits a law firm. Not every pricing section fits a nonprofit. And a playful countdown timer is great for an e-commerce sale but wrong for a medical clinic.

Webspire solves this with three simple filters: domain, tone, and UX goals.

Three Questions to Find the Right Patterns

1. What’s the domain?

Your industry or context. Pick the closest canonical domain from the MCP taxonomy, then use the Domains, Tones & UX Goals Reference if you need examples and typical combinations.

2. What’s the tone?

How should the site feel? Pick 1-2 canonical tones. Use the reference page for the full tone set and the “avoid with” guidance.

3. What should the page achieve?

Pick 2-3 canonical UX goals. The full validated set lives in the MCP taxonomy and is documented in the Domains, Tones & UX Goals Reference.

Using These Filters

With MCP (AI-assisted)

Tell your AI coding tool:

Use compose_page with domain "legal", tone "serious",
and ux_goals ["build_trust", "drive_contact", "highlight_expertise"]

The tool returns an ordered page structure:

1. Navbar Base — navigation
2. Hero Base — entry
3. Services Reveal List — supporting
4. Awards List Base — supporting
5. Testimonials Base — trust
6. FAQ Base — supporting
7. Contact Base — conversion
8. Footer Base — footer

Then use get_pattern("hero/base") to get the HTML for each section. If the composition includes snippet recommendations, use get_snippet(...) to add the matching CSS layer after the structure is in place.

With search_patterns

Search with semantic filters:

search_patterns(
  query: "trust building section",
  domain: "legal",
  tone: "serious"
)

Results are ranked by relevance: patterns tagged for legal + serious score higher. Patterns that avoid serious tone are filtered out.

Manually browsing

Use the Domains, Tones & UX Goals Reference to see which pattern families are recommended for your domain.

For example, legal sites typically use: hero, services, credentials, awards-list, testimonials, FAQ, contact, trust-strip.

How It Works Behind the Scenes

Every pattern carries metadata about which domains, tones, and goals it supports:

• A trust-strip pattern supports domains legal, healthcare, finance, consulting and goals build_trust, drive_purchase
• A deal-of-the-day pattern supports ecommerce but avoids tones serious and premium
• A portfolio/interactive-list supports agency, personal with tones modern, premium, editorial

When you search or compose, the system matches your context against these annotations and ranks results accordingly. Patterns that explicitly avoid your tone get penalized.

The important constraint is this: the MCP tools validate domain, tone, ux_goals, and content_needs against the canonical code-level taxonomy. If you are unsure which exact values are allowed, use the reference page rather than inventing near-matches.

Page Order

The system orders sections by their role on the page:

1. Navigation — navbar, announcement-bar (top of page)
2. Entry — hero, page-header (first thing visitors see)
3. Supporting — features, services, timeline, portfolio (explain and showcase)
4. Conversion — pricing, contact, CTA, appointment (ask for action)
5. Trust — testimonials, awards, trust-strip (reinforce the decision)
6. Footer — footer, legal links (close the page)

This order follows the natural decision arc: Attention → Understanding → Action → Confidence.

Quick Start by Domain

Law Firm? Use serious tone + build_trust + drive_contact. Key patterns: hero, services, awards-list, testimonials, FAQ, contact.

SaaS Product? Use modern tone + explain_offer + drive_signup. Key patterns: hero, features, pricing, integrations, testimonials, FAQ.

Agency Portfolio? Use premium tone + showcase_work + highlight_expertise. Key patterns: hero, portfolio, case-study, awards-list, team, contact.

Online Shop? Use friendly tone + drive_purchase + build_trust. Key patterns: hero, deal-of-the-day, product-grid, trust-strip, testimonials, cart-progress.

See the full reference in Domains, Tones & UX Goals.