SaaS pricing comparison table template for B2B enterprise software and observability products
SaaS feature comparison pricing table with a four-column layout, grouped section headers, a highlighted recommended tier column, feature included and not-included indicators, and a CTA row. Tiers run from Observer (free) through Practice (recommended, $180/month) to Enterprise custom. Built for B2B SaaS, observability, monitoring, and infrastructure products. Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
A formal feature-comparison pricing table for B2B SaaS, observability, monitoring, and infrastructure products where buyers need to see exactly what each tier includes before committing. The warm parchment palette (--bg:#EDEBE4, --paper:#F5F2EA) and serif italic typography give the table an editorial newspaper quality that reads as authoritative rather than promotional. The four-column grid has a fixed label column on the left in serif italic and three tier columns for Observer, Practice, and Enterprise. The Practice column (the recommended tier) uses a terracotta accent rail (inset 2px box-shadow on left and right edges) and a warm gradient cell background to highlight it across every row without changing the table structure. Feature rows are grouped under section headers (The room, The alarm, The paperwork) which use the darker bg-2 background as a visual separator. Each feature cell shows either a centred value string or a dot check mark: a filled terracotta dot for included, a ghost dot (box-shadow only) for not included. The price row displays large serif numerals with a small billing label. The CTA row has ghost-outline buttons and one filled terracotta primary button under the Practice column. A two-column footer below the table holds a note about seat-flat pricing and a serif italic brand stamp.
Common questions about this template
How do I add or remove feature rows in the comparison table?
Each feature row is a .row div with four .cell divs — the first holds the feature name in serif italic, and the remaining three hold either a value string with .center class or a check dot with .check class. To add a row, copy an existing .row and update the cell contents. To add a not-included dot in a cell, add the .off class to the .check cell alongside the .dot span.
How do I change which column is highlighted as the featured tier?
The featured column highlight is applied by adding the .featured class to the relevant .cell in each row. The .featured-rail div sits inside the .sheet and uses box-shadow to draw terracotta left and right borders across the full column height. Ask Claude Code or Bolt to move the .featured class from the Practice cells to the Enterprise cells, and update the .featured-rail positioning accordingly.
How do I update the colour palette from warm parchment to my own brand colours?
All colours are defined as CSS variables in :root. Change --bg, --bg-2, and --paper for the background tones; --ink and --ink-mute for text; --rule for borders; and --accent for the terracotta highlight colour used on the featured rail, the recommended tag, the primary CTA button, and the footer stamp. Ask your vibe coding tool to update these six variables to your brand palette.
Which tools can I use to build with this template?
Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
Use this AI coding template for
- ·Feature comparison pricing tables for B2B SaaS, observability, monitoring, and infrastructure products where enterprise buyers need a clear row-by-row breakdown of what each tier includes
- ·Vibe coding pricing pages in Bolt, Claude Code, or Replit for SaaS tools that have a free tier, a recommended paid tier, and an enterprise custom tier with compliance and residency add-ons
- ·Pricing sections for observability, incident response, on-call scheduling, and developer infrastructure products where a parchment editorial aesthetic signals seriousness and longevity
Works with every vibe coding tool
More vibe coding pricing templates
View allLinear-style single-plan pricing card
App-style paywall pricing section
SaaS usage-based pricing section template with gradient slider for API tools and developer platforms
Stripe-style SaaS pricing section template with gradient featured center card for B2B and identity software
Dark gradient fintech pricing section template for neobank, digital banking, and subscription SaaS
AI writing tool SaaS landing page template for content teams and marketing platforms
Other templates you might like