# B2B pricing page design examples by layout and typography [Open the live Fudge conversation](https://design.withfudge.com/share/search-live-b2b-pricing-page-designs-by-layout-and-typography) Last updated: 2026-08-25 The fastest way to compare B2B pricing page designs is to score each example on plan structure, decision flow, and typography before borrowing visual details. Start with the pricing references below, then use the checklist to decide which pattern fits your product and sales motion. ## Start with the pricing layout Compare each page in this order: 1. **Plan count:** Does the page show two, three, four, or more choices? Fewer plans usually make the decision easier, while more plans can support different team sizes or feature levels. 2. **Comparison method:** Check whether features are listed inside each card, in a shared comparison table, or across both. A shared table is useful when buyers need to compare many details. 3. **Recommended option:** Look for a clear visual treatment such as a border, background, label, or position in the row. The treatment should guide attention without making other choices hard to understand. 4. **Primary action:** Note whether every card has its own action, whether one plan gets the strongest button, and whether the page explains what happens after the click. 5. **Supporting information:** Check for annual billing, usage limits, enterprise contact paths, FAQs, or a calculator. These elements should answer purchase questions without burying the main choice. The HeroUI Pro pricing example is useful for studying a compact pricing-card arrangement. The Linear pricing example gives you a second reference for comparing a product-led plan structure and a restrained visual hierarchy. Open both and compare the first screen before copying any individual detail. ## Captured pages [![HeroUI Pro pricing](https://pin.fontofweb.com/832?format=jpg)](https://design.withfudge.com/share/pin-832) [HeroUI Pro pricing](https://design.withfudge.com/share/pin-832) [![Linear pricing](https://pin.fontofweb.com/4906?format=jpg)](https://design.withfudge.com/share/pin-4906) [Linear pricing](https://design.withfudge.com/share/pin-4906) ## Fonts captured on linear.app - **Inter Variable** โ€” weight 400 ยท Primary sans serif in the captured Linear typography system. - **Berkeley Mono** โ€” Supporting monospace typeface in the captured system. - **Tiempos Headline** โ€” An occasional editorial display face in the captured system. ## Typography that supports the decision Pricing pages need type that makes scanning easy. Review these roles separately: - **Page heading:** Large enough to establish the offer, but short enough that the plans remain visible quickly. - **Plan names:** Distinct from body copy, with consistent placement across cards. - **Prices:** The strongest numeric element on the page. Check size, weight, currency treatment, and billing interval. - **Feature labels:** Compact and readable at a glance. Avoid low-contrast text or overly tight line spacing. - **Actions and notes:** Buttons, limits, and qualification text should look related without competing with the price. The captured Linear typography reference lists Inter Variable as its primary sans serif, with Berkeley Mono as a supporting monospace face and Tiempos Headline as an occasional editorial display face. Treat that as an observed reference, not a complete internal design system. A practical starting point is one readable sans serif for the page and a second face only where it adds a clear role, such as technical labels or editorial emphasis. ## A simple comparison scorecard Give each reference a score from 1 to 5 for: - **Choice clarity:** Can a visitor identify the best starting plan quickly? - **Feature scanability:** Can they compare limits and inclusions without reading every sentence? - **Price emphasis:** Is the cost easy to locate and interpret? - **Trust support:** Does the page answer common buying concerns near the plans? - **Visual restraint:** Do borders, colors, shadows, and type support the decision rather than decorate it? Multiply choice clarity and feature scanability by two. Those are usually more important than visual novelty. Keep notes on what you would change, not just what looks attractive. ## Turn the reference into a working brief Before designing, write a short brief with these decisions: - Audience: self-serve buyer, growing team, or procurement-led account. - Number of plans: the smallest set that covers real buying differences. - Main comparison: features, usage, seats, or support level. - Recommended plan: which option should receive emphasis and why. - Typography: one primary family, one optional support family, and the roles for each. - Mobile behavior: stacked cards, horizontal comparison, or a condensed table. - Proof near the decision: testimonials, customer logos, security details, or a clear sales route. Use the examples as a visual check against that brief. The goal is not to reproduce a page. It is to identify a layout that makes your own pricing differences easy to understand, then test whether the type hierarchy still works when plan names and feature text become longer. Record observed details separately from your recommendations so the design decision remains traceable. ## Use this in your AI agent > Find live B2B SaaS pricing page examples with clear plan comparisons. Compare their card layout, number of plans, recommended-plan treatment, billing presentation, mobile behavior, heading hierarchy, price typography, feature-list spacing, borders, radii, shadows, and button styles. Return a shortlist with page links, observed design details, and a comparison table. Separate directly observed details from recommendations for my own pricing page. [Install Fudge for your AI agent](/mcp) to run this kind of design-reference search from your agent. --- Use pricing cards when the plans represent clear packages with a small number of meaningful differences. Use a comparison table when buyers need to check many features, limits, integrations, or permissions across plans. Many strong pages combine both: cards establish the choice, then a table supports detailed verification. Keep the first screen focused on the decision. Put the plan name, price, billing interval, short positioning line, key differences, and primary action in each card. Move exhaustive feature detail below. If your plans differ mainly by seats or usage, show that variable near the price instead of hiding it in a table. For mobile, stacked cards usually preserve the decision flow better than a wide table. If a table is essential, reduce it to the fields that change the buying decision and provide the rest below. Test the layout with long plan names and the least favorable feature text. If one card becomes much taller or the comparison becomes unclear, simplify the copy before adding more styling. --- Use this working brief: **Goal:** Help a B2B buyer choose a plan without needing a sales call for routine decisions. **Audience:** Name the primary buyer first, such as a startup founder, product team lead, or procurement manager. Add a separate enterprise route only if the requirements genuinely differ. **Structure:** Begin with a short promise and billing choice, followed by three plans. Give each plan one clear role, one price treatment, a concise list of included capabilities, and one action. Mark the recommended plan with a restrained border or label rather than a dramatic visual effect. **Typography:** Use one readable sans serif for headings, prices, labels, and feature text. Set the price as the strongest numeric element, keep plan names consistent, and use a supporting typeface only for a specific technical or editorial role. **Proof:** Place security, support, customer, or implementation information close enough to answer hesitation without interrupting the plan comparison. **Responsive behavior:** Stack cards on narrow screens, keep the recommended plan identifiable, and move detailed comparison below the initial choice. **Review checklist:** Confirm that pricing, billing interval, limits, actions, and the next step remain understandable in a quick scan. ## Related questions - [Live Dark Mode Dashboard Designs by Layout and Typography](/share/search-live-dark-mode-dashboard-designs-by-layout-and-typography) - [Search AI product landing page designs by layout and typography](/share/search-live-ai-product-landing-page-designs-by-layout-and-typography) - [Developer tool homepage design examples by layout and typography](/share/search-live-developer-tool-homepage-designs-by-layout-and-typography) - [SaaS landing page examples with fonts, colors, and spacing](/share/saas-landing-page-examples-with-fonts-colors-and-spacing)