Design a dark-mode website section: deep midnight canvas electrified by cyan particle streams radiating from biometric smart hardware.
LAYOUT
The hero employs a balanced asymmetrical 2-column layout framed by a clean fixed navbar above and an SDK panel below. The left column holds the product category pill, a massive two-tone headline, supporting copy, dual CTA buttons, and a horizontal feature spec row. The center-right stage hosts the floating smart ring enveloped by glowing telemetry trails that terminate in a vertical mood legend along the far right edge.
PALETTE (use these exact hex values)
- #030712 — Midnight Void: Deepest primary background canvas across the entire landing page
- #090d16 — Subtle Navy Surface: Background fill for lower code containers and badge highlights
- #38bdf8 — Electric Cyan: Primary action button, highlight headline span, and active telemetry dot
- #2dd4bf — Bioluminescent Teal: Mid-spectrum particle streams and secondary biometric tag highlights
- #ffffff — Pure White: Primary typography headings, brand logo, and prominent values
- #94a3b8 — Muted Slate: Secondary copy, navigation links, and descriptive feature subtitles
- #475569 — Dim Slate: Inactive tab selectors, tertiary icons, and subtle metadata labels
- #1e293b — Glass Border: Thin translucent bounding outlines on pill buttons, cards, and icon badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 36px heading-lg, 58px display. Tracking -0.03em on display headers, 0.05em on badges. The typography is clinical, ultra-modern, and premium, evocative of modern cybernetics and elite wellness tech. It relies on a high-precision geometric sans-serif that balances cold tech authority with human empathy. If Inter or Plus Jakarta Sans is used, tighter letter spacing on display weights is mandatory to preserve the sleek hardware aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 12px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through optical bioluminescence rather than traditional drop shadows. Hardware assets and particle clouds float on an absolute deep-space black canvas with radial cyan glow halos, while interactive cards and buttons use delicate 1px borders (rgba(255,255,255,0.08)) to separate foreground elements from the dark background.
IMAGERY
The imagery centers on an ultra-crisp 3D hardware render of a dark matte smart ring illuminated by internal LED edge-lighting. Flowing organically from the wearable is a dense stream of fiber-optic bioluminescent particles shifting from electric cyan to emerald and violet. Stock photos of human faces or cluttered lifestyle settings are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the organic 'emotion stream'—a dense particle ribbon of cyan-to-emerald light that pours out from the wearable ring across the black canvas. To execute properly, anchor the particles directly inside the product hardware and let them disperse into discrete telemetry icons without obscuring textual legibility.
MUST
- Keep the canvas strictly dark and deep (#030712) to let cyan particle glows shine vividly.
- Use full pill (9999px) border radii for all standalone hero buttons and category indicators.
- Reserve solid electric cyan (#38bdf8) exclusively for the primary CTA and key phrase highlight.
- Set hero typography with aggressive negative tracking (-0.025em to -0.03em) for a tight editorial look.
AVOID
- Do not introduce pure warm colors (orange, red, yellow) into structural buttons or primary UI fills.
- Do not use sharp 0px or boxy square corners for interactive pill elements.
- Do not allow particle glow effects to bleed beneath copy without adequate luminance contrast.
- Do not use heavy drop shadows; create depth purely via luminance gradients and 1px borders.
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. 在 DraPub 中尝试 
