Design a light-mode website section: crisp white card architecture with electric blue focus states and frictionless comparative precision.
LAYOUT
Centered single-column layout within a strict 1200px max-width boundary. The page opens with an overhead label pill, followed by a bold display heading, subhead, and a segmented billing switch. The core of the viewport is commanded by a monolithic 5-column feature matrix, completed below by an aligned horizontal trust bar detailing guarantees and accepted payment methods.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: ambient light background providing soft contrast behind pure white card surfaces
- #ffffff — Card Surface: primary surface fill for the comparative pricing table and footer trust badges
- #0066ff — Electric Cobalt: highlight borders, active pill toggles, pro tier CTA, and feature badge accents
- #eff6ff — Soft Cobalt Tint: background fill for the top pricing chip and selected highlight states
- #0f172a — Deep Slate: primary heading typography, prominent pricing numerals, and bold tier titles
- #64748b — Muted Slate: supporting descriptions, feature sublabels, period notations, and inactive toggles
- #10b981 — Success Green: positive feature availability checkmarks and secondary offer badges
- #e2e8f0 — Hairline Border: outer card boundaries, button outlines, and soft row separators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.02em at display, -0.01em at headings, 0 at body. The type is clean, highly legible, and engineered for financial transparency via a geometric neo-grotesque like Inter. Large tabular numbers for prices instill confidence, while subtle slate sub-captions maintain visual quietude. If replacing Inter, choose Plus Jakarta Sans or SF Pro Display to retain the modern software feel.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 999px, buttons 12px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is minimal and largely planar, relying on borders (#e2e8f0) and subtle contrast between #ffffff surfaces and the #f8fafc backdrop. The highlighted Pro tier achieves elevation through a prominent 2px #0066ff outline rather than a heavy drop shadow. The bottom trust bar rests flat within a thin hairline card matching the master table.
IMAGERY
This interface relies entirely on typography, iconography, and structured vectors rather than photographs or illustrated art. Icons are simplified 20px line glyphs inside circular discs or paired cleanly with trust metrics. Any rich photographic imagery or complex 3D renders would clash with this focused transactional clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated 4-tier matrix where the recommended 'Pro' column is framed by a continuous 2px royal blue contour that visually holds a top-centered pill tag ('MOST POPULAR') and terminates in a matching solid CTA button. Misusing this means applying bold colored outlines to multiple cards simultaneously, which destroys the conversion focal point.
MUST
- Keep the primary 'Pro' card vertically highlighted using the solid #0066ff accent border.
- Align feature matrix labels to the left rail with complementary secondary helper text below.
- Use pill-shaped 999px radiuses for small tags, toggles, and status badges.
- Ensure all column action buttons strictly line up along the baseline across tiers.
AVOID
- Do not fill every tier card with dark colors; white cards preserve necessary clarity.
- Avoid thick, heavy divider lines between table rows—keep dividers to subtle #f1f5f9 hairlines.
- Do not omit the small period context ('/mo', 'Billed yearly') beneath tier dollar figures.
- Avoid using multiple high-saturation button fills; only the recommended tier receives solid blue.
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. 在 DraPub 中尝试 
