Design a light-mode website section: a cosmic shift from gritty stippled chaos to crystalline planetary precision.
LAYOUT
The hero uses an asymmetric two-column grid within a maximum 1360px container. The left column (roughly 42% width) stacks the eyebrow chip, main headline, narrative body paragraph, dual CTA buttons, and a three-column metric summary. The right column (roughly 58% width) contains the transformation diagram, bounded by 'Before' and 'After' vertical feature lists and anchored by an overlaid floating telemetry card.
PALETTE (use these exact hex values)
- #fbfbfe — Canvas Background: Global backdrop providing an airy, luminous base layer across the hero.
- #111317 — Obsidian Deep: Primary heading typography, brand mark, and high-emphasis navigation elements.
- #5e6573 — Muted Slate: Body paragraph, subtle list items, and metric context descriptions.
- #5b52f9 — Electric Violet: Primary conversion button background, checkmark icons, and active state indicators.
- linear-gradient(90deg, #5b52f9 0%, #d85779 100%) — Cosmic Magenta Gradient: Accent text fill for key value proposition words in the primary display headline.
- #10b981 — Signal Green: Telemetry status dot indicating active runtime model health.
- #e5e7eb — Border Subtle: Thin outlines on secondary buttons, tag chips, and vertical metric divider lines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 54px display. Tracking -0.03em at display, 0 at body. The typographic tone is objective, scientific, and authoritative, enabled by a precise neo-grotesque sans serif. Tight negative letter spacing at display scale gives the typography an engineered, mechanical density, while loose tracking on uppercase chips preserves legibility at small sizes. Inter or Plus Jakarta Sans are optimal open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, airy density.
DEPTH
Depth is created through soft layered z-planes rather than traditional directional shadows. The floating edge device card uses a frosted glass effect with 1px translucent white border and an expansive, diffuse 24px blur shadow. The celestial graphic utilizes stippled depth and luminous ring gradients to simulate vast atmospheric distance.
IMAGERY
The visual language blends fine-grain retro stippling with photorealistic 3D rendering of planetary rings and celestial spheres. The left side represents legacy tech as textured monochrome dust, while the right side transitions into glossy, illuminated ultraviolet surfaces. Flat photographic human imagery or casual illustrations would strictly violate this high-tech aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The diagonal transformation split: a celestial particle field rendered in gritty, tactile black stipple on the left that physically flows through a central directional threshold to become a luminous, smooth purple ringed sphere on the right.
MUST
- Use high-contrast linear gradient text strictly on the terminal line of the main display heading.
- Maintain hairline 1px borders with subtle alpha channels on all floating card containers.
- Pair monochromatic stipple textures with radiant smooth gradients to emphasize the architectural transformation.
- Keep navigation links low-contrast (#5e6573) to preserve dominant focus on the hero graphic.
AVOID
- Do not introduce dark theme containers on the main page canvas; maintain the airy white environment.
- Avoid solid drop shadows; use diffuse multi-stop shadows or ambient outer glows instead.
- Never apply gradients to navigation links or standard utility text.
- Do not make button corner radiuses larger than 10px unless rendering a fully circular or pill chip badge.
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 中尝试 
