Electric-Blue Studio Pricing
A frameless, near-black dev-tool SaaS pricing page with one electric-blue accent, oversized outlined-type headline, and a single-plan card (monthly/annual toggle + optional power-up add-ons) instead of a tier wall.
Summary
A single-screen, frameless responsive pricing page for a dev-tool / prompt-library SaaS, built around a radical 'one plan, no tiers' message. An electric-blue accent pops against a near-black ink background; an oversized statement headline (half solid white, half hairline-outlined ghost type) anchors the top, and the pricing itself is a two-column grid: a large primary plan card with a monthly/annual toggle on the left and a stacked, slightly-rotated accent panel + optional power-up add-on toggles on the right. A clean two-column FAQ accordion and a mono-typeset footer close the page.
Style
Electric, high-contrast dark dev-tool aesthetic: near-black ink canvas, one saturated electric-blue accent used surgically for CTAs, glows, knobs and checkmarks, and a typographic system that pairs a tight geometric grotesk for display with an all-caps tracked monospace for labels/metadata. Subtle dotted grain texture and a blue glow shadow give it a 'terminal meets premium product' feel.
Layout & Structure
Frameless, single-column responsive web page (max content width 1280px, padded 20-32px) that flows top to bottom: sticky translucent nav, a centered hero headline + sub, a two-column pricing grid (primary plan card | accent panel + add-on power-ups) that collapses to one column on mobile, a fine-print tax note with an FAQ jump pill, a social-proof strip, a two-column FAQ accordion, and a footer. The pricing card grid is the visual + functional centerpiece. Cards reflow from the 2-column (1fr + fixed 360px) desktop layout down to a single stacked column on small screens; the feature checklist inside the card goes 2-col to 1-col.
Sticky nav
Hero / statement headline
Pricing layout (the centerpiece)
Fine print + FAQ jump + social proof
FAQ
Footer
Components
Outline / ghost statement headline
The second line of each big heading is rendered as transparent-fill outlined type (only a hairline stroke), creating a layered solid-white-over-ghost-blue-grey effect that defines the page's typographic personality.
Monthly/annual billing toggle with price flip
A custom rounded-full switch that toggles the plan card between monthly and annual, sliding an electric knob and swapping both the giant price number and the mono billing-period sub-line; annual is the default-on state and shows a 'SAVE 25%' badge.
Add-on power-up toggles
Three optional feature switches that let users compose extra capacity on top of the single base plan — the interactive expression of the 'one plan + power-ups' pricing model.
Rotated accent panel
A solid electric-deep-blue panel tilted a couple degrees to break the grid, reinforcing the single-plan value prop with a big '842 PROMPTS UNLOCKED' stat.
elec-glow accent treatment
A reusable electric-blue glow (subtle ring + large soft drop shadow) applied to all primary interactive/branded elements to give them a charged, light-emitting quality.
Native details FAQ accordion
Lightweight, JS-free expand/collapse FAQ using native details/summary with a custom rotating plus-to-x icon.
Special Notes
Frameless, fully responsive web page (no device chrome): content is centered in a max-w-1280px container with 20-32px side padding, and the pricing grid sits in a max-w-940px well. Layout reflows gracefully — the pricing grid goes from 2 columns (1fr + 360px) to a single stacked column, the in-card feature checklist goes 2-col -> 1-col, nav links and the annual 'SIGN IN' link hide on mobile, and the fine-print + FAQ-jump row stacks and centers. The nav is sticky with a translucent blurred background. The defining structural choice is a SINGLE-PLAN pricing model (one card with a monthly/annual toggle) augmented by optional add-on power-up toggles, deliberately rejecting the usual 3-tier comparison wall — copy throughout ('ONE PLAN. NO TIERS.', 'WHY ONE PLAN') reinforces this. Built with Tailwind (CDN config defining the custom color tokens), Iconify Phosphor (ph:*) icons, and Google Fonts Space Grotesk + JetBrains Mono. Brand voice in supporting copy stays warm and human ('ping us and we'll sort it together'). No em-dashes used in customer-facing copy.