Design a light-mode website section: airy white space anchored by kinetic generative ribbons and clinical telemetry cards.
LAYOUT
Asymmetric two-column split grid within a 1240px container. Left column (roughly 55% width) holds vertical narrative stack: announcement pill, display headline, body paragraph, button cluster, and micro-features. Right column hosts visual epicenter: layered kinetic ribbon vortex with a glowing core and three offset floating metric cards. Section anchors with a full-width divider line and centered caps label over a four-metric social proof bar.
PALETTE (use these exact hex values)
- #FFFFFF — Pure White: Primary background canvas and floating card surface fill
- #0C111D — Deep Slate: Dominant heading type, metric numbers, and primary button labels
- #5F6D7E — Muted Slate: Supporting descriptive copy, chart subtitles, and microcopy
- #0062FF — Electric Royal Blue: Primary CTA fill, headline focal accent, and core orb background
- #E4E7EC — Subtle Border Slate: Dividing lines, floating card borders, and secondary button outline
- #EEF4FF — Soft Blue Tint: Background for announcement badge and feature icon containers
- #ECFDF5 — Soft Mint Tint: Background container for resolve faster feature icon
- #FFFBEB — Soft Amber Tint: Background container for prevention feature and metric icons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 22px subheading, 28px heading, 54px display. Tracking -0.03em at display, 0.08em at uppercase captions. Engineered, clinical, and reassuringly precise. Modern geometric sans-serif (Plus Jakarta Sans or Inter) with tight headline tracking gives an authoritative technical presence without feeling cold. Generous body line heights ensure long technical descriptions remain effortless to parse.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through white-on-white elevation rather than tone changes. Floating telemetry cards use a 1px #E4E7EC hairline border complemented by a multi-layered diffuse drop shadow (0 4px 6px -1px rgba(0,0,0,0.02), 0 12px 24px -4px rgba(12,17,29,0.06)). The central orb utilizes a radial diffusion gradient extending 48px beyond its diameter to anchor the generative ribbons.
IMAGERY
Abstract generative particle ribbon rendering resembling fluid dynamics or multi-line vector paths in cyan, blue, and gold. Surrounding UI contains vector telemetry cards simulating miniature analytics widgets (line graphs, vertical bar series, status indicators). Photography and photorealistic renders are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The swirling dual-tone particle ribbon vortex wrapping organically around floating telemetry widgets and an illuminated blue node. To execute correctly, render thin vector splines that weave both behind and in front of elevated UI surfaces to create three-dimensional layered telemetry. Avoid flattening it into a static background image or increasing line thickness into heavy solid stripes.
MUST
- Keep the canvas pure white (#FFFFFF) to preserve high contrast with graphic ribbons.
- Restrict the colored headline emphasis to exactly one or two words in #0062FF.
- Use 10px radius on all action buttons and 12px on floating cards for visual hierarchy.
- Surround floating telemetry cards with soft blur shadows (0 12px 32px rgba(12,17,29,0.06)).
AVOID
- Do not introduce dark or gradient page backgrounds behind the main hero layout.
- Do not use sharp 0px or pill 999px radii on functional dashboard metric cards.
- Do not saturate secondary body copy; keep it restricted to calm slate (#5F6D7E).
- Do not let the swirling visual graphic overlap and obscure the primary left copy.
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 中尝试 
