Electric-Lime Single-Plan SaaS Pricing
A bold editorial single-plan pricing page with a giant toggling price card, a tilted sky-blue feature card, and one electric-lime accent on warm paper inside a charcoal frame.
Summary
A single-plan SaaS pricing page in an editorial 'electric-lime on warm-paper' style: one giant centered price card with a quarterly/annual toggle, paired with a tilted sky-blue 'what's inside' card, all framed inside a rounded charcoal browser-like shell with a sticky pill nav. The transferable value is the bold display-type hierarchy, the warm-paper-over-ink frame, the lime accent system, and the offset two-card pricing composition.
Style
High-contrast editorial dark-frame aesthetic: a near-black charcoal page background wraps a warm off-white 'paper' panel (subtle dot-grain texture), with one electric lime accent and a soft sky-blue secondary. Big tight-tracked Space Grotesk display type does the heavy lifting; mono labels in caps with wide letter-spacing add a technical/zine feel. Generous whitespace, fully rounded corners (pills + 28px cards), soft long-throw shadows, and a lime blur glow behind the price card.
Layout & Structure
A frameless, responsive single-page pricing layout living inside a rounded charcoal 'browser shell'. Top to bottom: a sticky floating pill nav, a centered hero headline, the pricing centerpiece (a two-card offset composition: a tall white price card with billing toggle + a tilted sky-blue feature card overlapping behind it), a 3-item FAQ accordion, and a slim footer. It is fully responsive: the two pricing cards sit side-by-side on desktop and reflow/stack to a single column on mobile (the tilt straightens out), and the nav stays sticky.
Page frame / shell
Sticky pill nav
Hero headline
Pricing centerpiece (offset two-card composition)
Billing toggle behavior
FAQ accordion
Footer
Components
Billing period toggle
A pill switch that flips the single plan between Quarterly and Annual, animating a knob and live-swapping the price, terms line, label emphasis, and showing a lime '-25%' savings tag on the Annual side.
Offset / tilted card pairing
The signature composition: a white price card layered over a tilted sky-blue feature card so they overlap into one object, then flatten and stack on mobile.
Pinned ribbon badge
A lime mono-caps pill badge pinned to the top edge of the price card to flag the single-plan offer.
Lime glow halo
A soft blurred lime ellipse behind the price card that makes the centerpiece glow off the warm paper.
Special Notes
This is a FRAMELESS, fully RESPONSIVE single web page (not a fixed-size artboard): the rounded charcoal shell, sticky pill nav, and clamp()-based type all scale with the viewport, and the pricing/feature cards reflow from a side-by-side offset pair (3->2->1 effective columns across the page's grids) down to a single stacked column on mobile, where the blue card's tilt straightens to 0deg. It is a SINGLE-PLAN pricing model (one product, billing-period toggle only), so there is no multi-tier comparison table or per-tier columns. The whole vibe depends on three moves: the warm-paper-inside-charcoal frame, the one electric-lime accent against muted ink text, and the offset tilted two-card composition. Icons use the Phosphor (ph:) set via Iconify; fonts are Space Grotesk / Instrument Sans / JetBrains Mono.