# B2B Pricing Page Examples with Fonts, Colors, and Spacing

[Open the live Fudge conversation](https://design.withfudge.com/share/b2b-pricing-page-examples-with-fonts-colors-and-spacing)

Last updated: 2026-08-25

## Compare the pricing decision first

A useful B2B pricing page makes the buying decision easier before it tries to look impressive. Compare each reference by plan structure, audience fit, price emphasis, included value, and the action attached to each plan. Then document fonts, colors, and spacing as support for that decision, not as isolated style choices.

Use this checklist:

1. **Plan clarity:** Can a visitor tell which plan fits their situation?
2. **Difference:** Are the meaningful differences between plans easy to scan?
3. **Value:** Does each plan explain what the buyer receives?
4. **Action:** Is the next step clear for self-serve and sales-led options?
5. **Confidence:** Are billing terms, limits, or contact steps visible where needed?
6. **Visual order:** Does the design draw attention to the recommended choice without hiding alternatives?

Open the examples below and compare the pricing cards before borrowing their visual language. HeroUI Pro pricing is useful for studying a structured plan comparison. Linear pricing gives another reference for how a B2B product can combine a clear commercial layout with a defined typography system.

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

## Document the visual system

When an AI coding agent asks for design direction, give it measurable relationships. Record the page in layers:

- **Type:** Identify the display face, body face, weight range, and approximate size difference between the page title, plan names, prices, and feature text.
- **Color:** Separate background, main text, muted text, borders, accent, recommended-plan treatment, and action colors.
- **Spacing:** Note the distance from the page title to the plans, the padding inside cards, the gap between price and description, and the vertical rhythm between features.
- **Shape:** Record card radius, border weight, button height, dividers, and shadow strength.
- **Emphasis:** Mark how the recommended plan differs. It may use a stronger border, a label, a tinted background, or a more prominent button.

The captured Linear typography examples list Inter Variable as a primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. Treat those as observed choices in that reference, not as a universal B2B prescription. The useful lesson is to assign each type style a job and avoid introducing a new face for every component.

## Turn the comparison into build rules

A strong implementation brief could say: use one readable sans serif for plan content, reserve a display treatment for the main heading if needed, keep prices visually dominant, and make feature rows align across cards. Use muted colors for secondary information and a single accent for the recommended plan and primary actions.

Keep the content hierarchy consistent across plans. Each card should follow the same order: plan name, audience or positioning, price, billing note, primary action, short description, and included features. If a plan requires a sales conversation, say so directly rather than forcing it into a fake price format.

Check the page at mobile width before refining details. Cards may stack, but the recommended plan should remain identifiable and every action should stay attached to the plan it describes. Also check long feature names, different currencies if relevant to the product, keyboard focus, and contrast between muted text and the page background.

## Use this in your AI agent

> Build a B2B pricing page from the pricing references below. First create a clear comparison structure with consistent plan order: name, audience, price or sales contact, billing note, primary action, description, and included features. Make the recommended plan identifiable without hiding the alternatives. Use a restrained type system with one readable sans serif for plan content and an optional display style for the main heading. Define separate colors for background, main text, muted text, borders, accent actions, and the recommended plan. Use consistent card padding, aligned feature rows, clear button states, and responsive stacking on mobile. Treat the captured Linear font details as reference evidence, not a requirement. Test long text, keyboard focus, contrast, mobile order, and whether a visitor can choose a plan without reading the whole page. [Install Fudge for your AI agent](/mcp).

---

Show the number of choices your customers can genuinely distinguish. Three plans often work when you have a clear entry option, a main recommendation, and a higher-capacity or sales-led option. Two plans can be better when the decision is simply individual versus team, or self-serve versus contact sales.

Add another plan only when it changes the buyer's decision. A plan with nearly identical limits, audience, and action creates scanning work without adding clarity. If different customers need different configurations, consider a comparison table or a calculator instead of multiplying cards.

Whichever number you choose, give one sentence that explains who each plan suits. The visitor should not have to infer the difference from a long list of checkmarks. Keep the visual treatment consistent so the recommendation feels helpful rather than coercive.

---

Describe relationships first, then add approximate values. Say that the page title should have the largest type, plan names should be easy to scan, prices should dominate each card, and feature text should remain comfortably readable. Then specify the gaps that matter: title to cards, card padding, price to billing note, and feature-row spacing.

For spacing, use a small scale rather than unrelated numbers. For example, define a compact gap for labels, a medium gap between card elements, and a larger gap between sections. For typography, define a body size, a heading scale, weights, line heights, and a maximum text width.

Ask the agent to render a long plan name and a long feature description during review. If the layout survives those cases without cramped cards or uneven actions, the rules are doing useful work.

## Related questions

- [AI product landing page inspiration for building with Cursor](/share/best-ai-product-landing-page-inspiration-for-building-with-cursor)
- [B2B pricing page design references for Claude Code](/share/b2b-pricing-page-design-references-for-claude-code)
- [AI Product Landing Page Examples: Fonts, Colors, and Spacing](/share/ai-product-landing-page-examples-with-fonts-colors-and-spacing)
- [Dark mode dashboard inspiration for building with Cursor](/share/best-dark-mode-dashboard-inspiration-for-building-with-cursor)