Design a light-mode website section: an editorial dichotomy contrasting fragmented legacy discovery with structured, violet-tinted computational clarity.
LAYOUT
A two-column symmetric grid anchored under a top-center flow pill. The left column presents the problem narrative with high-contrast serif headlines, followed by four distinct floating cards. The right column mirrors the headline hierarchy but consolidates four feature rows into one unified card, anchored at the bottom by a four-cell tabular metric strip.
PALETTE (use these exact hex values)
- #F9F9FB — Canvas Background: ambient viewport background across the full comparison section
- #FFFFFF — Pure Surface: card container fills for both problem items and unified solution blocks
- #F2F4FD — Metric Well Surface: subtle indigo-tinted foundation for the bottom statistical breakdown grid
- #E7E8ED — Border Hairline: structural card perimeters, column dividers, and navigation pill boundaries
- #1B1C20 — Charcoal Primary: primary serif headlines, solution feature titles, and bold metric labels
- #6C6F7D — Muted Slate: secondary explanatory body text, metric footnotes, and eyebrow labels
- #DE6551 — Friction Terracotta: problem headline highlight text, problem icon paths, and alert badges
- #FDF3F1 — Friction Tint: background fill for circular problem icon badges
- #4E55A9 — Resolution Indigo: the solution eyebrow text, solution icons, and prominent statistical figures
- #ECEFFC — Resolution Tint: rounded-square backdrops behind solution feature icons
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Playfair Display, EB Garamond), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 15px subheading, 24px heading, 38px display. Tracking -0.015em. The typographic pairing bridges traditional natural sciences with contemporary deep-tech computation. The editorial serif (Newsreader match) imparts academic authority and historical legacy, while the crisp geometric sans (Inter match) conveys modern computational rigor and telemetry.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is handled entirely without blurred drop shadows. Depth and visual stratification rely strictly on flat planar stacking: a 1px border (#ECECF0) outlining pure white surfaces (#FFFFFF) placed against an off-white canvas (#F9F9FB), alongside tinted inner wells like the metric base (#F2F4FD).
IMAGERY
Vector lineart only. Very light, low-opacity topographic contour lines are placed in the upper-left quadrant to hint at subsurface geoscience without cluttering readability. Heavy photography, 3D renders, or saturated isometric illustrations are entirely excluded.
SIGNATURE DETAIL — the thing that makes this design itself
The philosophical contrast in structural encapsulation: four isolated, separated cards on the left signaling 'fragmented workflows', directly opposing a singular unified white container with an attached metric pedestal on the right signaling 'integrated resolution'.
MUST
- Retain the chromatic split: warm terracotta (#DE6551) strictly for problems, cool indigo (#4E55A9) strictly for solutions.
- Use serif typography solely for primary display headers while maintaining clean neo-grotesque sans-serif for UI rows.
- Stack the problem side into disjointed individual cards to visually evoke fragmentation and friction.
- Enclose the solution side in a unified single container to communicate integration and coherence.
AVOID
- Never interchange the accent hues by putting terracotta icons in the solution block or indigo in the problem list.
- Do not break the problem list into a single merged card; the visual fragmentation is deliberate.
- Avoid heavy drop shadows; depth is strictly articulated via subtle #ECECF0 borders and slight tonal contrast.
- Never render body copy or statistical metrics in the serif font family.
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 中尝试 
