Design a light-mode website section: luminous spectral gradients and pristine frosted white cards guiding complex enterprise biomanufacturing data into clarity.
LAYOUT
The layout follows a centered vertical stack: an eyebrow pill above a two-line display headline, a constrained max-width subtitle, and a primary CTA. Below this sits the hero timeline grid containing 5 equal columns bridged by a continuous horizontal vector line. The section resolves with a wide horizontal compliance card anchored at the bottom.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Overall screen background providing low-contrast warmth behind floating white surfaces
- #FFFFFF — Card Surface: Pristine white container background for process step cards and lower compliance pill
- #0F172A — Primary Deep Slate: Primary typography for headers, card titles, and high-emphasis labels
- #64748B — Muted Slate: Secondary descriptive copy, meta captions, and subheaders
- #0052FF — Vibrant Royal Blue: Primary CTA button background, step 1 badge, and connecting dot highlights
- linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #DB2777 100%) — Gradient Heading Magenta: Applied to the secondary half of the main display title across decisions text
- #D946EF — Step Orchid Pink: Step 02 milestone badge and associated topological surface illustration highlights
- #7C3AED — Step Purple Indigo: Step 03 milestone badge and cluster scatterplot visual motif
- #06B6D4 — Step Aqua Teal: Step 04 milestone badge and action micro-ui indicator
- #E2E8F0 — Subtle Border Line: Horizontal timeline connecting line and light outer borders on containers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 15px body, 17px body-lg, 20px heading, 48px display. Tracking -0.03em on display, 0.05em on micro-caps. The typographic tone is objective, scientific, and enterprise-grade. Rendered in a clean neo-grotesque sans-serif (Inter / Plus Jakarta Sans), it blends tight display tracking on the headline with spacious, clinical tracking on upper-case metadata and badges to evoke certified precision and laboratory reliability.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered gently and atmospherically. The background is a flat, pale-tinted canvas upon which pure white cards cast broad, diffuse shadows (0 12px 32px rgba(15, 23, 42, 0.04)). The only high-intensity depth element is the primary CTA button, which projects a saturated ambient blue glow beneath its pill silhouette.
IMAGERY
Visuals are exclusively technical, scientific, and procedural: 3D point cloud topographies, synthetic manifold meshes, scatterplot risk clusters, clean UI recommendation mockups, and pink-to-blue sparkline trends. Graphic styles favor point grids, isometric charts, and delicate micro-typography rather than photography or playful hand-drawn illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The interconnected 5-step timeline with centered step-number nodes sitting on a persistent horizontal axis above pristine white cards. It immediately communicates an orderly, end-to-end biological and computational pipeline. To preserve it, maintain consistent node diameters (28px) and let each node introduce its column's signature accent hue.
MUST
- Use a continuous 1px horizontal connector line (#E2E8F0) precisely aligned through the center of all step badges.
- Keep card graphics abstract, mathematical, and data-centric (scatterplots, 3D meshes, sparklines, tag clouds).
- Apply gradient text strictly to key impact words in the heading, never across the entire title.
- Maintain uniform 20px card border radii and exact 20px horizontal gaps between workflow columns.
AVOID
- Never use dark high-contrast borders around the cards; stick to #EEF2F6 or subtle translucent strokes.
- Do not use generic stock photography; all step visuals must resemble specialized biotech/data interfaces.
- Avoid changing card widths across the five steps; all five columns must remain strictly equal.
- Never tint the workflow card backgrounds—they must stay pure #FFFFFF to contrast against #F8FAFC.
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 中尝试 
