Design a light-mode website section: dual-track diagnostic framing that shifts from friction red to algorithmic precision blue across an explicit transformational bridge.
LAYOUT
The hierarchy reads top-down from a centered, high-level thesis (kicker pill, 40px headline, concise summary copy) into a massive horizontal comparison staging ground. The staging ground allocates 30% width to the legacy failure mode, a subtle transition anchor, and 65% width to the unified solution features and dashboard screenshot. The section finishes with a grounding 4-column metric bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: Primary outer background and elevated data card fills throughout the comparison frame
- #F4F7FB — Substrate Slate: Muted macro-container background that encloses the comparison arena and isolates the problem-solution duality
- #0F172A — Obsidian Body: High-contrast headings, heavy lead copy, and primary numeric readouts
- #64748B — Laboratory Grey: Secondary technical descriptions, metadata units, and muted chart axes
- #E11D48 — Friction Rose: Problem icons, problem badge highlight, and time bottleneck indicators
- #FFF1F2 — Friction Wash: Background fill for problem state icon badges and cautionary tags
- #0284C7 — Precision Cyan: Solution checkmarks, interactive action buttons, data charts, and verified markers
- #F0F9FF — Precision Wash: Tints behind solution capability glyphs and pill filters
- linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #2563EB 100%) — Bridge Gradient: Fill for the circular directional transition node bridging legacy to modern workflows
- #E2E8F0 — Structural Line: Precision 1px bounding box outlines on metric tiles and dashboard views
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 22px subheading, 28px heading, 40px display. Tracking -0.025em for headings, +0.05em for micro badges. The typographic tone is authoritative, analytical, and uncluttered, projecting enterprise-ready scientific rigor. Highly legible numerals, neutral grotesques, and compact vertical metrics keep complex biochemical terminology accessible without becoming decorative.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled strictly through flat surface stepping and crisp 1px borders rather than visible cast shadows. Level 0 is white (#FFFFFF), Level 1 is tinted comparison framing (#F4F7FB), and Level 2 contains the pure white component cards that visually float above the substrate through edge definition alone.
IMAGERY
Avoids photography, human figures, or abstract conceptual 3D art completely. The imagery consists entirely of an ultra-realistic, low-contrast life-sciences software UI displaying intact mass spectrometry peaks, experiment counters, and data quality metrics.
SIGNATURE DETAIL — the thing that makes this design itself
The floating gradient transition node (#EC4899 to #3B82F6 arrow) intersecting the divide between the left problem panel and the right software solution. It mechanically symbolizes automated data ingestion and transformation, converting a static checklist into a dynamic operational pipeline.
MUST
- Strictly reserve #E11D48 accents for legacy friction and #0284C7 for platform capabilities.
- Use 1px borders in #E2E8F0 to bound white cards against the #F4F7FB substrate container.
- Keep all chart lines clean and clinical with thin 1.5px to 2px strokes in brand cyan.
- Maintain uniform 12px to 16px padding within stacked feature breakdown cards.
AVOID
- Never introduce dark saturated backgrounds; maintain high-key clinical white and soft slates.
- Do not use blurry drop shadows; rely on hairline borders and subtle 0 2px 8px rgba(0,0,0,0.04).
- Avoid decorative illustrations; ground all visual proof in realistic interface UI mockups.
- Never reverse the color semantics by placing blue icons inside the problem column.
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. Try in DraPub 
