Design a light-mode website section: a clinical, high-trust comparison layout elevating the proprietary solution through a prominent blue-framed centerpiece column.
LAYOUT
The layout follows a centered vertical spine. It starts with a centered header block (eyebrow, title, subtitle), progresses directly into the three-column comparison container, transitions into a horizontal proof-metric strip, and concludes with a single-line centered footer mark.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background canvas for the entire page section
- #F8FAFC — Subtle Surface Tint: Background fill for outer table bounds and metric callout container
- #0F172A — Primary Text Slate: Primary headings, row titles, and high-contrast numerical metrics
- #64748B — Muted Text Gray: Secondary copy, row descriptions, and metric sublabels
- #2563EB — Focus Cobalt: Eyebrow tag, hero column border, and high-emphasis metric stats
- #E2E8F0 — Divider Border: Outer boundary borders and horizontal dividers between comparison rows
- #ECFDF5 — Success Mint Surface: Circular pill background for checkmark icons in the hero column
- #059669 — Success Mint Stroke: Icon stroke color representing solved capabilities
- #FFFBEB — Caution Amber Surface: Circular pill background for warning icons in legacy column
- #D97706 — Caution Amber Stroke: Icon stroke color indicating fragile or brittle legacy behavior
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.02em at display, 0.05em on eyebrow. The typography is disciplined, corporate, and technological, utilizing a modern grotesque sans-serif with geometric roundness. It communicates calm engineering confidence. Inter or Plus Jakarta Sans are optimal substitutes due to their tall x-height and exceptional tabular readability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1080px container, comfortable density.
DEPTH
Depth is handled almost entirely flat with a single surgical exception: the central 'Ramain' column. It creates visual foreground layering via a 1.5px cobalt outline and an ultra-soft ambient box-shadow, causing it to sit subtly above the shared comparison base plane.
IMAGERY
No photographic imagery is present. Visual interest is driven exclusively by geometric micro-icons, soft-tinted status discs (28px), and clean brand symbols (such as the dotted circular product logo). Introducing realistic photos or 3D assets would disrupt the systematic clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the center-column 'takeover card': an elevated, continuous vertical column bordered in 1.5px cobalt blue that overlaps the comparison matrix to position the proprietary product as the obvious, singular standard. It fails when applied to more than one column or rendered without surrounding white space.
MUST
- Keep the central solution column prominently framed with the 1.5px cobalt #2563EB border.
- Use semantic circular icon badges (28px) to establish instant vertical scanning.
- Maintain strict two-tier typography in each row: 14px bold title stacked over 13px muted description.
- Constrain maximum table width to approximately 1120px to prevent row dissociation.
AVOID
- Do not add solid heavy background colors to the featured column; keep it pure white.
- Do not use dark borders on the outer matrix; stick to subtle slate tints (#E2E8F0).
- Avoid harsh multi-layer drop shadows; keep elevation gentle and low-contrast.
- Do not omit the subtitle explanations underneath the row item headers.
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 中尝试 
