Emerald 4-Tier SaaS Pricing Table
A light-mode emerald-accented SaaS pricing page with a Monthly/Annual toggle and four tiers fused into one bordered table, the Pro column lifted and ring-highlighted as 'Most popular'.
Summary
A clean, light-mode SaaS pricing page in a confident emerald-on-near-white palette: a sticky translucent nav, a centered hero with a 'design prompts' badge and a Monthly/Annual billing toggle (Save 20% pill), and the signature 4-tier pricing block where Free / Pro / Team / Enterprise sit as one fused bordered table on desktop with the Pro column lifted, scaled, and ring-highlighted as 'Most popular'. Below: a minimal FAQ accordion and a gradient-emerald CTA card over a quiet footer. The transferable value is this exact look (emerald accents, soft-shadowed white cards on a faint grid background, Sora display + Inter body) plus the 4-tier 'fused-table-with-one-promoted-column' pricing structure.
Style
Premium light SaaS aesthetic: near-white paper background (#fbfdfb) with a faint emerald dot/grid hero wash, emerald-600 (#059669) as the single accent across logo, primary buttons, highlighted plan ring, badges and the CTA gradient. Ink-toned neutral text scale (almost-black headings #0c1410 down to muted #7d8d85). Sora for display/headings (geometric, tight tracking), Inter for body/UI. Generous whitespace, rounded-2xl cards, two layered soft green-tinted shadows, hairline #e7efe9 dividers, tabular-nums on prices.
Layout & Structure
Frameless, fully responsive single-column web page (not a fixed-frame mockup): centered max-w-6xl content, sticky translucent nav, centered hero with billing toggle, then the 4-tier pricing block, a centered FAQ accordion, and a gradient CTA + footer. The pricing tiers reflow from a fused 4-column bordered table on desktop -> 2 columns on tablet -> 1 stacked column on mobile.
Sticky top nav
Hero / headline + billing toggle
Pricing block (the core — 4 tiers, fused table)
FAQ accordion
CTA card + footer
Components
Monthly/Annual billing toggle (CSS-only)
A pill switch between 'Monthly' and 'Annual' labels with a 'Save 20%' pill; flipping it swaps every plan's displayed price and the active-side label color, with no JavaScript.
Highlighted 'Most popular' plan column
The Pro column is visually promoted out of the fused table: thicker emerald ring, deeper green shadow, lifted/scaled, raised z-index, and a badge straddling its top border.
Fused-table pricing grid with aligned rows
Four plan columns that merge into a single bordered card on desktop using internal hairline dividers, with fixed-height head blocks so price rows, dividers, and checklists line up across columns.
Feature checklist rows
Per-plan 'Includes / Everything in X, plus' lists of emerald-check + label rows.
Special Notes
This is a FRAMELESS, fully responsive real web page, not a fixed-canvas mockup: content is centered in a max-w-6xl container, the nav is sticky and translucent (backdrop-blur), and the pricing tiers reflow 4-col fused table -> 2-col -> 1-col across breakpoints. Reproduce the EXACT palette (paper #fbfdfb, emerald-600 #059669 accent, ink text scale #0c1410/#1f2a24/#566a60/#7d8d85, hairline #e7efe9) and fonts (Sora display, Inter body). Built with Tailwind (CDN) + iconify (Phosphor 'ph:' icons) and two custom green box-shadows; the billing toggle and FAQ accordion are pure CSS (no JS). The whole layout reads as one accent color on near-white with lots of whitespace — keep it restrained, do not add a second accent hue.