Dark gradient fintech pricing section template for neobank, digital banking, and subscription SaaS
Dark fintech pricing section with three tiers: Everyday (free), Halo ($6/month, featured), and Private ($24/month). The featured Halo card is styled as a physical banking card with gradient border, feature breakdown, and a white CTA button. Built for neobank, digital banking, and subscription SaaS pricing pages. Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
A three-tier pricing section designed for neobank, fintech, and subscription SaaS products that want a dark, editorial aesthetic. The near-black background (#050506) with a centred pink-to-orange radial glow sets the tone. The outer Everyday and Private cards use a dark panel background (#0D0D10) with an inset border, a serif price, a feature list with bullet-dot markers, and a ghost-button CTA. The featured center Halo card is built to resemble a phone: a tri-colour gradient border (pink, orange, blue) wraps a deep purple radial gradient interior with an internal soft glow. Inside the phone card, a notch cutout sits above a tier label and a Most Chosen badge, a 76px serif italic price, a row-list breakdown showing four key feature values side-by-side, and a solid white CTA button. The outer cards are visually lighter but lift on hover; the phone card is elevated with a coloured drop shadow. A deposit-protection footnote sits below the grid. No JavaScript; entirely CSS and HTML.
Common questions about this template
How do I change the three tier names and prices?
Ask Claude Code, Bolt, or Lovable to update the .tier text, .price text, and feature list items inside each .card and the .phone-in div. The tier names Everyday, Halo, and Private are plain text — replace them with your own plan names. The prices $0, $6, and $24 are in the .price div — update the number and the small descriptor below it to match your pricing.
How do I update the feature rows inside the featured phone card?
The four feature rows inside the phone card are .item divs, each with a .l label and a .v value. Ask your vibe coding tool to change the label and value text to match your own plan features. Add or remove .item divs to show more or fewer feature rows — the flex-direction:column layout will stack them automatically.
How do I change the gradient colours on the phone card border and glow?
The phone card border is set by the background property on .phone: a linear-gradient from rgba(255,107,157) pink through rgba(255,138,61) orange to rgba(43,123,255) blue. The interior glow is a radial-gradient on .phone-in::before. Ask Claude Code or Bolt to update these colour values to match your brand palette — the three CSS variables --pink, --coral, and --orange at the top of the style block drive most of the accents.
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
- ·Pricing sections for neobank and fintech products that need a three-tier layout with a visually dominant featured center card and a dark, editorial aesthetic
- ·Vibe coding projects for subscription SaaS, consumer fintech, and digital banking landing pages in Bolt, Claude Code, or Replit that need a premium dark pricing section
- ·SaaS pricing pages for products with a free entry tier, a featured mid-tier, and a high-touch premium plan — where the center tier needs to feel unmistakably different from the flanking cards
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
SaaS pricing comparison table template for B2B enterprise software and observability products
AI writing tool SaaS landing page template for content teams and marketing platforms
Other templates you might like