Design a dark-mode website section: dark-room clinical intelligence where elevated spotlight columns reveal modern precision against legacy friction.
LAYOUT
The layout is divided into an asymmetrical top hero split and a centered 3-column structured matrix. The hero pairs a commanding left-aligned H1 with a right-aligned three-line summary paragraph. Below, the comparison grid allocates roughly 30% to capabilities, 38% to the emphasized spotlight column, and 32% to legacy processes, anchored by a centered reassurance link bar at the base.
PALETTE (use these exact hex values)
- #020612 — Obsidian Deep: Deepest canvas background providing high-contrast backdrop for clinical comparison matrix
- #080e1e — Slate Void: Primary matrix container background with subtle slate undercurrent
- #0b1733 — Spotlight Core: Center column active fill representing the modern platform surface
- #38bdf8 — Electric Cyan: Hero emphasis text, glowing borders, active check icons, and eyebrow glyph
- linear-gradient(180deg, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0) 100%) — Cyan Halo Gradient: Subtle top inner glow illuminating the recommended column header
- #ffffff — Pure White: Display headings, column titles, and affirmative feature titles
- #94a3b8 — Clinical Slate: Descriptive copy, legacy comparison labels, and body explanations
- #475569 — Muted Ash: Negative check glyphs, tracking category headers, and column dividers
- #1e293b — Container Stroke: Faint structural boundary enclosing the comparison table and capability icon badges
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 18px heading, 42px display. Tracking -0.02em at display, 0.08em at uppercase captions. The typographic tone is authoritative, analytical, and uncluttered. Rendered in Inter (or equivalent clean grotesque sans), the type mimics scientific precision instrumentation while remaining highly accessible. The italicized sky-blue emphasis word injects subtle humanity into an otherwise rigid enterprise taxonomy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly planar and luminescent rather than physical. No blurred drop shadows are cast downward; instead, the spotlight column advances toward the user through a radiant top-edge linear gradient (#38bdf8) and a slight elevation in background surface luminance from #080e1e to #0b1733.
IMAGERY
This design rejects figurative photography and decorative 3D illustrations in favor of precise vector iconography. Icons are strictly geometric, monochromatic, and housed in uniform 36px rounded dark tiles. Abstract or lifestyle imagery would destroy the clinical, audit-ready software atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The elevated center column with an incandescent top border halo. By wrapping only the proprietary offering in a glowing cyan container while leaving adjacent columns flat and desaturated, the design physically segregates the 'future' from the 'legacy' without needing overt sales badges.
MUST
- Reserve the electric cyan highlight (#38bdf8) solely for the proprietary solution column and primary CTA.
- Maintain strict horizontal baseline alignment across all three columns for every capability row.
- Use uppercase tracking (letter-spacing: 0.1em) for table column headers to establish clear data categorization.
- Apply italic styling selectively to exactly one word in the main headline for emotional cadence.
AVOID
- Never introduce warm colors (reds, oranges, yellows) even for the negative legacy column indicators.
- Do not give the outer matrix card a heavy drop shadow; depth must be achieved through surface luminosity alone.
- Avoid solid background fills on buttons or pills within this section to maintain quiet clinical rigor.
- Never collapse the 24px vertical row gap; dense text degrades scanning in high-stakes clinical comparisons.
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 中尝试 
