Electric Mint Dark Dev-Tool Pricing

Summary

A frameless, full-width dark SaaS pricing page for a developer/design tool, built around a 3-tier card grid (Starter / Pro / Team) with a centered monthly-annual billing toggle, a mint-green electric accent, and a quiet mono/grotesk type system. The whole page reads as 'expensive minimal dev-tool': near-black canvas, hairline borders, subtle radial glow behind the headline, one glowing highlighted middle tier, and a feature checklist per card.

Style

Electric-on-black dark mode. The canvas is near-black ink (#08090c) with a faint top-center radial glow in the mint accent. Surfaces are layered by lightness: panel (#0d0f14) and card (#101319) on the ink base, separated by 1px hairline borders (#1b1f29) rather than shadows. The single accent is an electric mint-green (#7df9c0, dimmer hover #39e89a) used sparingly for the logo chip, the highlighted tier ring/CTA, the toggle knob, badges and check icons. Text runs three weights of grey: muted (#7c8398) for body/labels, soft (#aab1c4) for secondary, pure white for headings/prices. Prices use a white-to-grey vertical gradient clipped to text (#ffffff -> #c9cedd). Type: Inter for body/UI, Space Grotesk for display headings + tier names + prices (tight tracking), JetBrains Mono available for mono accents. Generous rounding (rounded-2xl cards, rounded-xl buttons, full-round pills). No drop shadows except a soft mint glow ring on the featured card.

Layout & Structure

Frameless, responsive full-width web page (no surrounding device/browser frame), centered to a max-w-6xl column with px-6 gutters. Vertical flow: sticky translucent nav -> centered hero with eyebrow pill, two-line headline, subhead and billing toggle -> the 3-column pricing grid (the page's centerpiece) -> a reassurance trust row -> a two-column FAQ -> a logo-cloud + copyright footer. The pricing grid reflows 3 -> 2 -> 1 column (lg / md / base); the middle Pro card is visually lifted and ringed to draw the eye.

Sticky nav

Hero / headline

Billing toggle

Pricing grid (centerpiece)

Featured (Pro) card

Reassurance row

FAQ

Footer

Components

Highlighted 'Most popular' tier card

The center pricing card is elevated and ringed to steer choice: lifted vertically above siblings, mint border, card->panel gradient fill, a soft mint glow shadow ring, a pinned solid-mint 'MOST POPULAR' uppercase pill, a solid-mint primary CTA, and mint check icons. The two flanking tiers stay flat with hairline borders and outline ghost buttons.

Monthly / Annual billing toggle

A pill switch with a sliding mint knob and a '2 months free' incentive pill that recomputes every price and billing subline live when flipped.

Gradient price typography

Oversized prices rendered with a white-to-grey vertical gradient clipped to the glyphs, paired with a tiny grey unit label.

Hairline-divider feature lists

Per-card feature checklists separated from the CTA by a faded edge-to-edge hairline, with check-icon rows.

Special Notes

This is a FRAMELESS, responsive full-bleed web page, not a screenshot inside a device/browser chrome: render edge-to-edge with a sticky translucent nav that blurs content behind it. The page is single-column-of-sections, each section centered to a max-w-6xl (FAQ to max-w-3xl) container with px-6 gutters. The pricing grid is the only multi-column block and must reflow 3 -> 2 -> 1 columns at lg/md/base breakpoints; the featured card un-lifts (mt resets) when it stacks. Keep the palette strictly monochrome + the single mint accent; rely on hairline borders and one glow ring instead of heavy shadows. Icons are Phosphor (iconify ph:*). The billing toggle is interactive and must rewrite prices/sublines on flip.