Design a light-mode website section: crisp fintech comparison matrix where an elevated cobalt column asserts authority over amber legacy warnings.
LAYOUT
Centered single-column layout beginning with an eyebrow pill, large central headline, and short paragraph. Below a 48px gap sits the 4-column matrix, divided into 28% left capability column, 26% elevated brand column, and two 23% competitor columns. A standalone floating pill banner rests 32px underneath to resolve the page with a primary action button.
PALETTE (use these exact hex values)
- #ffffff — Pure Canvas: dominant background for the main viewport, table panels, and floating cards
- #2563eb — Electric Cobalt: headline focus word, prominent primary CTA button, and highlighted product column border
- #0f172a — Slate Deep: primary heading text, row capability titles, and bottom banner emphasis text
- #64748b — Muted Slate: explanatory subtitles, table cell descriptions, and section header labels
- #e2e8f0 — Grid Border: outer table boundary, row dividers, and horizontal cell separation lines
- #eff6ff — Badge Tint Blue: background fill for top eyebrow pill and left capability icon square containers
- #10b981 — Positive Mint: circular outlined checkmark icons verifying native agentic capabilities
- #f59e0b — Warning Amber: triangular warning icon strokes for legacy tooling and spreadsheet drawbacks
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px heading, 48px display. Tracking -0.03em on display headers, 0.05em on uppercase table headers. Inter or Geist gives the system an engineered, operational, and institutional fintech voice. Tight letter-spacing on bold display sizes (-0.035em) delivers high information density without sacrificing corporate restraint.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled strictly through perimeter contrast and stacked containment rather than dramatic drop shadows. The primary matrix floats above the background with a faint 0 4px 20px rgba(0,0,0,0.03) shadow, while the featured brand column uses an elevated vertical protrusion and 1.5px cobalt ring to pull forward optically.
IMAGERY
This interface intentionally avoids photography, 3D renderings, and illustrative scenes in favor of functional system iconography. Icons are strictly geometric, 2px stroke weight line drawings housed within 32px soft-tinted squircle badges or standing as pure semantic glyphs.
SIGNATURE DETAIL — the thing that makes this design itself
The vertically extended, blue-bordered featured column that breaks the top and bottom bounds of the outer comparison table. It turns an ordinary four-column grid into an unmistakable hierarchy where the proprietary product visually presides over competing legacy columns.
MUST
- Keep the second column visibly protruding past the outer table boundaries using a distinct 1.5px blue stroke.
- Use uppercase, widely tracked 11px text exclusively for column table headers like CAPABILITY and LEGACY TOOLS.
- Pair every comparison bullet with a clear status icon (emerald checkmark or amber warning triangle).
- Maintain pure white cell backgrounds rather than alternating zebra stripes to preserve structural cleanliness.
AVOID
- Do not use harsh red X marks; keep competitor shortcomings framed mildly with amber warning triangles.
- Do not allow the competitor columns to have custom background tints or highlighted card borders.
- Do not remove the vertical extension of the featured column; flattening it ruins the visual hook.
- Never use dark canvas backgrounds; this interface is calibrated strictly for high-clarity white surfaces.
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 中尝试 
