Design a light-mode website section: crisp celestial halftone gradients grounding enterprise precision on an ethereal white canvas.
LAYOUT
The page opens with an unbordered horizontal navbar distributing brand mark left, navigation links dead-center, and a CTA pill right. The hero divides into an asymmetrical two-column layout: the left column stacks an announcement badge, multi-line display title, concise value proposition, dual CTA group, and trust metric. The right column showcases the halftone illustration anchored in the upper corner with the command card overlapping its trajectory toward the bottom center.
PALETTE (use these exact hex values)
- #fcfcfd — Canvas White: Primary light viewport background sustaining airy negative space
- #ffffff — Surface Card: Elevated card background providing crisp separation over cosmic backdrop artwork
- #0b0f19 — Obsidian Body: High-contrast headings, primary logo text, and core query phrasing
- #475467 — Muted Slate: Supporting paragraph descriptions, secondary metadata, and inactive nav items
- #1b59f5 — Electric Royal Blue: Primary button fill, brand dot accent, and start tone for core gradients
- #8b5cf6 — Astral Violet: Terminus tone in headline text gradient and halftone illustration fade
- #12b76a — Status Emerald: Live system status badge indicator dot and success telemetry icon
- #eaecf0 — Subtle Border: Hairline perimeter boundaries for pill badges, outline buttons, and preview containers
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 24px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, clean, and architecturally sound, anchored by a neutral Neo-Grotesque with pronounced ink traps and geometric stability. It conveys high-reliability enterprise capability without descending into sterile corporate boredom. Geist or Inter acts as the ideal freely available alternative, especially when rendered with tight tracking and aggressive line heights on large weights.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through a gentle layering technique where halftone background art sits flat on the base canvas (Level 0), while active interactive previews float overhead on Level 1. The floating card employs an expansive, low-opacity shadow (0 20px 48px -12px rgba(11, 15, 25, 0.08)) paired with a crisp 1px perimeter line. Micro elements such as icon plates remain completely flat or slightly recessed.
IMAGERY
The imagery system avoids standard SaaS UI screenshots in favor of technical retro-futuristic space diagrams created with halftone dot patterns and directional dither streaks. Celestial bodies, planetary rings, and 4-point orbital stars evoke exploration and high-order infrastructure. Renderings must strictly use cyan, royal blue, and violet halftone textures; photographic or glossy photorealistic assets are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the stippled halftone celestial vector that transitions across a luminous cyan-to-purple gradient behind floating operational UI. To implement it correctly, construct the vector from variable-density geometric dots that suggest celestial mass and cosmic velocity without solid fills. It is commonly misused by turning it into a blurry radial gradient mesh, which completely destroys the analog technical screenprint character.
MUST
- Render large background graphics exclusively using vintage halftone dot grids to maintain textural restraint.
- Apply the electric blue to violet gradient solely to the terminal headline phrase and the primary micro-triggers.
- Keep navigation and pill button radiuses fully rounded at 9999px.
- Use 1px borders with high transparency (#eaecf0) to separate white surfaces from the canvas.
AVOID
- Do not use dark backgrounds; the identity relies on crisp high-key white-space illumination.
- Never replace halftone raster vectors with smooth generic vector blurs or 3D renders.
- Avoid sharp right-angled buttons; all interactive touchpoints must be pills.
- Do not use heavy, saturated drop shadows; keep elevation soft and widely dispersed.
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 中尝试 
