Design a light-mode website section: clinical precision suspended in a soft violet ether of particle streams and rounded data tiles.
LAYOUT
The top section utilizes an asymmetric two-column split: left-aligned headline block with eyebrow badge, body copy, and dual button cluster, counterbalanced on the right by an orchestrated 6-step loop diagram encircling a central system card. Below, a generous gap leads into a 6-column global footer covering brand identity/contacts, four navigation link lists, and a right-anchored newsletter capture form, anchored by a legal sub-bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Gradient Top: uppermost clean background providing high contrast for the headline and primary badge
- #F1F4FD — Canvas Gradient Base: cool lilac-tinted floor tinting the footer foundation and ambient canvas
- #FFFFFF — Card Surface: opaque elevated layer for workflow diagram modules and newsletter input fields
- #6366F1 — Bio Indigo: primary interactive fill for cta buttons, highlighted header text, and active node markers
- #0F172A — Deep Slate: primary display typography, brand logo text, and high-emphasis column headers
- #475569 — Muted Slate: supporting body text, diagram subtexts, and secondary navigation links
- #E2E8F0 — Subtle Violet Border: perimeter outlines on secondary buttons, input controls, and diagram connection paths
- #EDE9FE — Pill Violet Wash: soft lavender backing for the uppercase category badge
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.025em on headings, 0.05em on badges. Plus Jakarta Sans delivers a technical yet approachable cadence with its humanist geometries and wide apertures. It balances biological sophistication with semiconductor rigor, avoiding the generic coldness of standard neo-grotesques. If licensing is restricted, Inter or DM Sans serve as reliable drop-in alternatives with minimal visual divergence.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through atmospheric layering rather than harsh z-index stacking. Floating diagram tiles cast an ultra-soft ambient shadow (0px 8px 24px rgba(99, 102, 241, 0.06)), allowing them to hover delicately above the glowing particulate background. Borders remain exceptionally fine at 1px solid to define boundaries without heavy visual weight.
IMAGERY
The primary illustrative element is an ethereal computational swarm: thousands of tiny stippled cyan and indigo dots arranged in organic sweeping waves around schematic nodes. Hardware iconography is minimal, single-stroke (1.5px stroke weight), and geometric. Heavy 3D renders or photographic stock would violate the clinical, bio-computational aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive hallmark is the ethereal bio-computational particle mist swirling around clean, clinical schematic cards. It merges abstract biotech fluid dynamics with the exacting logic of circuit design. Misusing it involves making the particle density too intense or using high-opacity solid gradients, which drowns out the legible diagram cards.
MUST
- Reserve the sharp violet hue (#6366F1) for active links, buttons, and semantic focal text.
- Maintain crisp 12px to 14px border radii on all rectangular content cards.
- Use subtle, thin 1px lines (#CBD5E1 to #E2E8F0) for diagram wiring to sustain an engineering look.
- Let ample atmospheric whitespace breathe between the hero module and footer links.
AVOID
- Do not introduce heavy black drop shadows; keep elevations soft and tinted with slate or indigo.
- Do not use saturated multi-color palettes; restrict accents entirely to cyan-blue and violet spectra.
- Do not enclose the footer in a dark container; it must stay within the light crystalline theme.
- Do not shrink the display headline line-height below 1.1 or tracking beyond -0.03em.
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 中尝试 
