Design a light-mode website section: surgical enterprise comparison matrix structured through luminous lilac highlights and high-density typographic hierarchy.
LAYOUT
The page flows down a rigorous, centered vertical stack. It begins with a floating pill badge, moves to a 2-line high-contrast display statement, and descends into an expansive 4-column matrix. The first column defines benchmark criteria; the second stands elevated as the hero product; columns three and four document competitor shortcomings in uniform width, terminating in a unified bottom takeaway banner.
PALETTE (use these exact hex values)
- #FAF9FE — Canvas Background: Outer page background providing a whisper of atmospheric tint
- #FFFFFF — Surface Pure: Background for table cards, pill headers, and comparison columns
- #633FE8 — Primary Violet: Primary product focus, border of featured column, and success icon fill
- #F0EDFD — Soft Violet Tint: Background tint for pill tag, product avatar, and capability icons
- #EB6356 — Competitor Salmon: Negative indicators, warning avatars, and cross icon glyphs for legacy tools
- #7992BA — Competitor Denim: Neutral/weak indicators, spreadsheet avatars, and minus badges
- #111827 — Text Direct: Primary headings, category titles, and high-impact stat figures
- #6B7280 — Text Muted: Secondary cell descriptions, subheaders, and caption metadata
- #E5E7EB — Table Border: Row dividers and passive comparison table container boundaries
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Plus Jakarta Sans, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 42px display. Tracking -0.025em at display, -0.01em at body. The voice is analytical, confident, and unapologetically technical. By deploying an unembellished neo-grotesque sans-serif with negative letter tracking, it channels the precision of high-end developer documentation and fintech dashboards. System fonts like SF Pro or Inter maintain rapid render times and spotless legibility at tiny 11px caption scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1160px container, comfortable density.
DEPTH
Depth is created almost entirely through outline priority rather than heavy shadows. The passive matrix sits flat on the canvas, while the highlighted 'Corvera' column uses a crisp 1.5px violet stroke and an ultra-diffuse, faint violet ambient glow (0px 10px 30px rgba(99, 63, 232, 0.06)) to hover effortlessly above neighboring options.
IMAGERY
This design strictly eschews photography, illustrations, and decorative imagery in favor of pure semantic iconography. Micro-icons (sparkles, lightning, locks, data nodes) are housed in pale 32px rounded icon boxes (#F5F3FF) to visually categorize capability rows without clutter.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the 'sleeved' highlighted column: an elevated card with an unbroken 1.5px violet stroke and rounded corners that overlaps the table grid while preserving perfect row-divider baseline alignment with adjacent columns. Misuse occurs when designers displace the vertical height or misalign row baselines, breaking the scanning flow.
MUST
- Reserve the sharp violet border (#633FE8) strictly for the primary Corvera column.
- Use a two-tiered typography pattern within table cells: 14px bold title stacked over 13px muted body.
- Keep row line dividers consistent across both background table and highlighted card to preserve vertical alignment.
- Ensure competitor icons remain desaturated and soft to prevent them from overpowering the brand highlight.
AVOID
- Do not add dark shadows or colored drop-shadows beneath competitor columns.
- Never apply green checkmarks; positive validation is strictly brand violet (#633FE8).
- Avoid zebra striping across table rows; use thin 1px separators (#F3F4F6) only.
- Do not allow the highlighted column border to shrink below 1.5px or lose its 16px outer radius.
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 中尝试 
