Design a light-mode website section: crisp white saas surfaces anchored by radiant gradient jewel icons and disciplined financial typography.
LAYOUT
The page flows down a single disciplined central vertical axis: centered badge and hero headers at the top, followed by a tight segmented billing switcher. Below lies a synchronized 4-column card grid with identical internal ordering (Identity, Price, CTA, Feature Checklist). It concludes with a full-width horizontally sectioned 3-part trust guarantee bar.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Outer page backdrop providing faint cool-gray atmospheric contrast behind pure white cards
- #ffffff — Card Surface: Base fill for pricing tiers, bottom guarantees bar, and pill toggle options
- #0f172a — Text Primary: Headlines, plan titles, large pricing numbers, and primary button labels
- #64748b — Text Secondary: Body descriptions, pricing frequencies, feature items, and guarantee explanations
- #e2e8f0 — Card Border: 1px structural outline bounding cards, inactive buttons, and toggle containers
- #2563eb — Brand Blue: Primary CTA button fill on featured tier, feature checkmarks, and trust icons
- linear-gradient(90deg, #2563eb 0%, #c026d3 100%) — Featured Gradient Ribbon: Top callout banner for the Scale tier indicating most popular plan
- #eff6ff — Toggle Active Fill: Soft translucent blue tint highlighting the selected billing cycle pill
- linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) — Growth Violet Gradient: Squircle icon background fill for Growth plan badge
- linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) — Enterprise Teal Gradient: Squircle icon background fill for Enterprise plan badge
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 38px heading, 48px display. Tracking -0.03em on display, -0.01em on headings, 0 on body. The typographic tone is authoritative, corporate, and frictionless. Crisp grotesque letterforms with negative tracking (-0.03em on display) give numbers and statements an institutional yet contemporary polish. Inter or Plus Jakarta Sans perfectly preserves the mathematical exactness required by high-value B2B pricing tables.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through tonal layering and delicate ambient drop shadows rather than heavy borders. Cards cast a subtle, diffuse blur (0 10px 25px -5px rgba(15, 23, 42, 0.05)) over the cool #f8fafc surface. White cards sit on Level 1, while inner buttons and toggles rest on Level 2 with crisp 1px hairline edges.
IMAGERY
Iconography is strictly vector and dual-modal: saturated gradient squircles for plan identities, and delicate outline icons in pure brand blue for trust markers. Photography and 3D illustrations are deliberately avoided to maintain operational clarity and legal/enterprise trust.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive design signature is the pairing of saturated 44px duo-tone gradient squircles at the top of each card with a vivid blue-to-fuchsia top banner ribbon on the featured tier. This injects focused optical energy into an otherwise sterile, enterprise-grade white canvas without sacrificing legible utility.
MUST
- Keep card backgrounds pure #ffffff to float cleanly above the subtle #f8fafc backdrop.
- Restrict vibrant gradients exclusively to plan squircle badges and the single 'Most popular' header bar.
- Set price integers in prominent 38px bold weight with adjacent 13px baseline-aligned billing cadence.
- Align all card CTA buttons horizontally across the 4-column row by enforcing equal top section heights.
AVOID
- Do not apply heavy dark drop shadows; shadows must remain low-contrast, diffuse, and below 5% opacity.
- Do not highlight more than one tier with full-bleed colored headers or filled primary buttons.
- Never use muted gray crosses for unavailable features; omit absent features entirely from lower tiers.
- Avoid colored backgrounds on secondary CTA buttons; keep them clean white with delicate hairline borders.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
