Preview image. Unlock full-res
Dark-to-light pricing section with a serif headline, billing toggle, three plan cards, and a full white feature matrix below.
Summary
A pricing section that opens dark with a centered serif headline and three plan cards, then drops into a full white "All plans" comparison matrix. The defining move is pairing a tidy three-card overview with an exhaustive feature checklist directly underneath.
Visual description
Top half sits on deep navy: a small wallet icon, a serif headline "Direct, upfront pricing" with "upfront" in italic, a muted one-line subhead, and a Billed Monthly / Billed Annually pill toggle with a "Save 20%" tag. Three white cards follow, Growth ($599), Scale ($899), and Enterprise (Custom), each with a plan label, "Billed Annually" tag, audience line, a check-marked feature list, and a violet or outlined "Get started" button. Below, a large white "All plans" panel lists features in two check-marked columns, with a right-hand gray sidebar headed "Fastest two-way sync with integrations" showing Oracle NetSuite, Sage Intacct, QuickBooks Online, and Xero logos plus an "Explore Integrations" link.
Key takeaway
The dark-card / light-matrix split lets the three-tier summary feel premium while the full feature grid handles buyers who want to compare line by line. Surfacing named integration logos inside the pricing block answers a common procurement question in place. The "Save 20%" tag on the toggle nudges annual billing without extra copy.
Reuse notes
Best for a B2B or fintech product with real feature depth and a meaningful enterprise tier. Works when you need both a glanceable comparison and a detailed matrix on one page. The dark-to-light transition needs deliberate spacing or the matrix can read as a separate section.
