Design a light-mode website section: precision biomanufacturing intelligence grounded in luminous pastel gradients, clinical typography, and frosted modular control surfaces.
LAYOUT
The header spans the top boundary at a fixed ~72px height, perfectly aligned with the main container. The hero splits horizontally into a 45/55 distribution: editorial copy, pill badge, and dual buttons on the left; an expansive app mockup canvas on the right. Directly below, pinned with an even top/bottom margin of ~48px, spans a full-width horizontal ribbon articulating the four-step process flow.
PALETTE (use these exact hex values)
- #FAFAFD — Canvas Background: Global background tone providing an optical white foundation for ambient gradients
- #FFFFFF — Pure Surface White: Background for floating dashboard modules, navigation pills, and interactive cards
- linear-gradient(135deg, #2563EB 0%, #7C3AED 55%, #C054BA 100%) — Primary Gradient: Hero headline accent span and high-emphasis primary button fill
- #0F172A — Slate Text Primary: Primary headings, bold titles, metric readouts, and active navigation labels
- #64748B — Slate Text Muted: Paragraph descriptions, card body copy, inactive steps, and secondary metrics
- #E2E8F0 — Subtle Border Gray: 1px hairline strokes separating card modules, step dividers, and badges
- #0D9488 — Success Teal: Metric positive trend highlights, delta pill text, and upward trendline curves
- #EEF2FF — Soft Indigo Tint: Background fill for icon container squares and notification chips
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 28px heading-lg, 52px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans conveys rigorous clinical authority blended with contemporary digital warmth. The wide apertures and clean geometry ensure complex data readouts remain instantly legible at 12px, while heavy bold weights command presence at display scale. Suitable drop-in open source alternatives include Inter and Archivo.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a layered 'frosted sheet' paradigm rather than harsh physical shadows. Ambient light radiates from the tinted background through semi-translucent white cards, grounded by hairline 1px borders (#E2E8F0) and diffuse shadows like 0 12px 32px rgba(15, 23, 42, 0.05). Floating modules like the process ribbon appear weightlessly lifted above the canvas floor.
IMAGERY
Imagery features ethereal 3D parametric representations of complex data landscapes—specifically iridescent, ridged topological terrain rendered in luminous cyan, violet, and white. Avoid literal factory photos or harsh stock laboratory shots; visual metaphors must feel mathematical, fluent, and computationally advanced.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious synthesis of a glowing scientific 3D data terrain nested inside a crisp, clinical white dashboard, complemented by the blue-to-magenta gradient accenting the hero text. It balances rigorous biotech compliance with next-generation AI luminescence; misusing it by applying neon gradients indiscriminately collapses the delicate clinical tone into generic crypto aesthetics.
MUST
- Keep background blur shapes ultra-soft, using blur values between 80px and 140px with opacities under 25%.
- Restrain gradient text strictly to key thematic keywords (e.g. 2-3 words) to preserve readability.
- Use clean, hairline 1px borders (#E2E8F0) around all elevated cards to preserve a crisp clinical aesthetic.
- Maintain high padding (20px to 24px) inside white card modules to convey calm, enterprise precision.
AVOID
- Do not use dark, muddy drop shadows; keep elevation shadows strictly translucent (rgba(15,23,42,0.04)).
- Do not apply the multi-stop gradient to the entire headline, only to the emphasized concluding clause.
- Do not use sharp 90-degree corners on containers or buttons; the system requires smooth 10px-24px radii.
- Do not fill process step cards with vibrant saturated colors; keep step backgrounds clean white or pale gray.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
