Design a light-mode website section: clinical scientific clarity transforming chaotic research pipelines into structured compound workflows.
LAYOUT
The layout is governed by a strict top-down symmetric rhythm leading into a 2-column comparative grid. The top block features centered category eyebrow, large display title, and explanatory subtitle. The middle section contains two 1:1 width comparative cards separated by a 24px gap with a centered transition pill. The bottom row aligns auxiliary validation copy on the left with a primary link callout on the right.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Ground: dominant backdrop providing warm neutral foundation behind white comparison containers
- #FFFFFF — Card Surface: pristine white fill for main comparison cards and interactive node elements
- #0D121F — Console Dark: high-contrast terminal and telemetry panel surface anchoring the structured right card
- #E4E7EC — Border Subtle: structural boundary dividers, card outlines, and workflow connector boxes
- #101828 — Ink Primary: dominant headline copy, card titles, node titles, and terminal code text
- #475467 — Ink Secondary: subtitles, metadata timestamps, file tags, and terminal commentary copy
- #039855 — Positive Mint: checkmarks, status badges, pipeline success indicators, and sparkline trends
- #ECFDF3 — Positive Tint: background pill fill for asterlab workflow steps and completed pill tags
- #F04438 — Negative Red: error icons, chaotic state markers, and 'before' state summary badges
- #F79009 — Chart Highlight Orange: focal terminus data point in the dark telemetry sparkline graph
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 48px display. Tracking -0.02em display, 0.05em eyebrow uppercase. The typographic tone is austere, methodical, and deeply credible. Inter or equivalent neutral grotesque sans-serifs convey an engineering and lab-grade seriousness without feeling sterile. Tight display tracking (-0.025em) commands authority in the headline, while standard tracking across technical tags guarantees readability.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated through flat planar surface layering rather than dramatic box shadows. White primary cards sit quietly against the off-white ground (#F8F9FA) bordered by crisp 1px strokes (#E4E7EC). The only elevated floating element is the circular central transition node, which carries a soft 0 4px 12px rgba(0,0,0,0.06) shadow to bridge the divide.
IMAGERY
No photographic imagery is used. The visual language consists entirely of synthetic UI schema: vector document icons, bezier node connectors, modular UI pipeline blocks, and SVG sparkline charts. Introducing photo-realistic or illustrative human characters would break the precise, developer-scientific ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual is the side-by-side contrast between loose, tangled dashed lines connecting scattered file chips and rigid, sequential horizontal pipeline nodes paired with a dark telemetry sparkline. This immediately communicates 'entropy resolved into infrastructure' without reading a single word.
MUST
- Use 24px radius consistently across primary comparison card containers.
- Pair chaotic dashed connectors strictly with disordered file layouts in grey (#98A2B3).
- Reserve deep dark navy (#0D121F) exclusively for the telemetry/runtime console widget.
- Keep eyebrow text strictly uppercase with letter-spacing of 0.05em to 0.08em.
AVOID
- Never introduce colorful saturated backgrounds; canvas must remain #F8F9FA.
- Do not use dark console panels in the chaotic 'before' state card.
- Never omit the central transition node arrow connecting the two cards.
- Avoid using curved organic connectors in the systematic pipeline on the right.
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 中尝试 
