Kage Design logo kage
getinboxzero.com
Inbox Zero pricing table component

Design analysis

A centered pricing heading and billing toggle lead into three clearly differentiated plan cards, followed by compact alternative paths for email-app and enterprise buyers.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389760-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389697138-full.webp
- Component on Kage: https://kage.design/component/inbox-zero-pricing-table

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing this reference.

Build a three-tier SaaS pricing section. Use a centered heading, a muted subtitle, and an accessible monthly/annual segmented toggle with a savings hint. Place three equal cards in a responsive grid; give each a plan name, audience description, prominent price, billing cadence, primary trial button, and a checklist of included features. Visually emphasize the recommended middle plan with a blue button and a small green or blue “popular” badge, while keeping the other cards quieter. Use white cards, #eeeeee borders, 18px radius, 24–28px padding, subtle shadows, #202020 text, #707070 descriptions, and #3478e5 actions. Add two slim full-width rows below for alternate product and enterprise contact paths.

Never use the reference's logo, product name, copy, illustrations, or imagery.

More components