Electric Cyan Credits-and-Tiers Pricing
A light, graph-paper dev-tool pricing page pairing 3 subscription tiers with a row of volume-discounted one-time credit packs, all in a single electric-cyan accent.
Summary
A frameless, responsive SaaS pricing page for an AI design tool, built on a light off-white canvas with a faint 44px graph-paper grid and an electric-cyan accent system. It pairs a 3-tier subscription card row (with a highlighted 'Most popular' middle card and a monthly/yearly toggle) with a distinct 5-step one-time credit-pack row and a usage-cost explainer strip, then an accordion FAQ and CTA. The signature move is the dual pricing model on one page: recurring tiers up top, scaling pay-as-you-go credit packs below.
Style
Clean, bright, technical dev-tool aesthetic: near-white paper background, dark near-black ink text, and a single saturated cyan accent ramp used for highlights, gradients and glows. Geometric display headings (Space Grotesk) over humanist body text (Inter), generous rounding, tabular numerals for prices, soft layered card shadows, and a subtle radial-tinted graph-paper grid behind hero/CTA bands.
Layout & Structure
Single-column, frameless responsive web page (max content width 1180px, centered) stacking: sticky translucent nav, centered hero with billing toggle and trust strip, a 3-up subscription tier grid, a full-bleed credit-packs band with a 5-up pack grid plus usage strip, a 4-up feature strip, an accordion FAQ, a graph-paper CTA band, and a footer. Cards reflow from 3 columns to 2 to 1 as the viewport narrows; the credit packs go 5->3->2; everything is fluid, no fixed frame.
Sticky nav
Hero / headline
Subscription tiers (the primary pricing layout)
Credit packs band (one-time top-ups)
Usage cost strip
Feature strip
FAQ
CTA band + footer
Components
Monthly / Yearly billing toggle
A pill-shaped segmented control in the hero that switches all tier prices between monthly and yearly rates.
Highlighted 'Most popular' tier card
The center subscription card, visually promoted above its neighbors.
Scaling credit-pack cards with per-credit math
A row of one-time purchase packs where the unit price drops as volume rises.
Graph-paper hero/CTA background
A subtle technical grid backdrop used behind the hero and final CTA bands.
Pinging live badge
Small animated status dot in the hero announcement pill.
Special Notes
Frameless, fully responsive single page, not a fixed device mock: content is centered at max-w-1180px and every grid reflows by breakpoint (tiers 3->2->1, packs 5->3->2, features 4->2->1). The defining structural idea is showing TWO pricing models on one page: recurring subscription tiers plus volume-discounted one-time credit packs, glued together by a credits mental model and a usage-cost explainer. Built with Tailwind (CDN) + Space Grotesk/Inter via Google Fonts + Iconify (Phosphor 'ph:' icon set). Interactivity is vanilla JS: the billing toggle rewrites prices/periods from data-m/data-y attributes, and a hamburger toggles the mobile menu. Keep the voice warm and human in microcopy (e.g. the cancel FAQ). When recreating, preserve the single-cyan-accent restraint on a light paper background, the tabular-num prices, and the glow accents on highlighted elements.