Service Pricing Card Moodboard

How to Design a Service Pricing Card

Business Design Info Cards Info cardPricingServiceOffer
Service pricing card mockup with large price, included items, badge, and strong call-to-action.
info-card

SERVICE

Launch Review

  • Page audit
  • Copy rewrite notes
  • One follow-up call

Clear scope, clear price, clear next step

How to adapt it

01

Package name

  • Name the outcome or service level, not just the internal tier.
02

Included list

  • Use 4-6 concrete deliverables so the buyer understands what they receive.
03

Decision cue

  • Add one line that says who this package is best for.

Copy and adapt

Design specs

Color values

Offer cream

#fffaf0 · RGB(255, 250, 240)

Card surface and page section background.

Ink black

#111111 · RGB(17, 17, 17)

Package name, price, and border.

Blue proof

#3b82f6 · RGB(59, 130, 246)

Recommended badge, guarantee line, or included count.

Red urgency

#ff4b2f · RGB(255, 75, 47)

Limited seats or one highlighted bonus.

Type and size

Price

  • Use 46-64px numerals, 900 weight, with a 15-17px billing note next to or below the number.

Feature list

  • Use 15-18px text, 600-750 weight, with short benefit-led bullets rather than long explanations.

Layout rules

Card structure

  • Use package name, one-line fit statement, price, 4-6 included items, and one CTA. Keep the CTA at the bottom.

Spacing

  • Use 28-36px padding, 18-24px between major zones, and 10-12px between included items.

Build notes

  • Use as a single offer card, three-card pricing row, proposal page block, or Instagram service menu.
  • If the price needs explanation, add one footnote instead of shrinking the main list.

Replaceable parts

Offer fields

  • Package name
  • Best-for line
  • Price
  • Included items
  • CTA
  • Availability note

Useful badges

  • Most popular
  • Starter
  • For small teams
  • Limited seats

Avoid when

  • The service has too many custom variables.
  • Users must configure many options before seeing a price.
  • The offer needs a legal contract explanation first.

Variants

  • Make a three-tier pricing row.
  • Turn it into a proposal cover block.
  • Use it as a small-shop service menu.

Usage notes

  • Never hide the price behind tiny text.
  • Keep included items parallel.
  • Use one badge only, or the card starts to feel noisy.

Best for

PricingService pageWorkshopOffer card

Colors

Related ideas

Keep browsing similar structures, styles, and use cases.