Electric Dark Usage-Based Pricing Calculator
An electric dark dev-tool pricing page built around an interactive slider calculator that live-computes included quota plus tiered pay-as-you-go overage, with a lime accent, a highlighted plan card row, and an FAQ accordion.
Summary
An electric dark, developer-tool pricing page anchored by an interactive usage-based cost calculator: a near-black UI with a faint engineering grid, soft iris/lime radial glows, and a giant rounded calculator panel where a lime range slider, a Studio/Scale tier toggle, and a monthly/annual switch drive a live volume readout, a highlighted pay-as-you-go rate table, and a sticky estimate card. Below it a 3-tier comparison card row (one highlighted 'Most popular' card) and a minimal FAQ accordion. The transferable value is the look (electric dark + lime accent + mono numerals) plus the usage-based-pricing structure (included quota + tiered overage calculator).
Style
Electric dark dev-tool aesthetic: deep ink/near-black backgrounds with a subtle white engineering grid and dual radial glows (violet iris + acid lime), high-contrast white headings in a geometric display face, lime as the single high-energy accent, and JetBrains Mono for all numbers/prices to read like a console. Cards are large-radius panels with hairline borders and deep, soft drop shadows.
Layout & Structure
Frameless, fully responsive web page on a max-width 1200px centered container. Top to bottom: sticky translucent nav, a centered hero, the headline interactive cost calculator (3-column inner grid that collapses on mobile), a trust line, a 3-up plan comparison card row (reflows 3->2->1 columns), a centered FAQ accordion, and a slim footer. Sticky nav stays pinned; cards reflow responsively.
Sticky top nav
Hero / headline
Interactive cost calculator (the centerpiece pricing layout)
Trust line
Plan comparison cards
FAQ accordion
Footer
Components
Usage cost calculator (slider-driven pricing estimator)
The defining element: an interactive estimator where a range slider sets monthly generation volume and the page live-computes included quota vs tiered pay-as-you-go overage, updating a big readout, the highlighted rate-table band, and the sticky estimate card + breakdown.
Custom lime range slider
A restyled native range input: thin pill track that fills lime up to the thumb, with a large lime circular thumb ringed in ink and a lime glow.
Segmented tier toggle + annual switch
Two compact controls in the calculator header: a Studio|Scale segmented button group and a Monthly/Annual pill toggle with a sliding lime knob and a '-20%' chip.
Live rate table with active-band highlight
A pay-as-you-go price ladder where the row matching the current slider volume is tinted and tagged.
Highlighted 'Most popular' plan card
The middle plan card visually elevated with a lime-tinted border, iris gradient, glow shadow, and a ribbon.
Special Notes
Frameless, fully responsive web page (not an app screen): single centered max-width 1200px container, sticky blurred nav, and grids that reflow (calculator inner grid 200px/1fr/320px -> single column with the metric rail becoming a horizontal scroll; plan cards 3 -> 2 -> 1 columns). Single high-energy accent discipline: lime #C6F24E carries all CTAs/active states/numbers-emphasis, iris #7C6CFF is reserved for low-opacity gradient washes and the active table-row tint. ALL numerals and prices use JetBrains Mono for the console feel; headings use Space Grotesk, body uses Inter. Built with Tailwind (CDN config maps the named colors), Phosphor icons via Iconify, and a small vanilla-JS controller that wires the slider, tier toggle, and annual switch to live price math. No em-dashes in copy.