Design a light-mode website section: a dual-canvas split of sterile daylight control versus deep-space cosmic automation.
LAYOUT
The interface executes a structured top navigation bar followed by a balanced 2-column split-screen hero section. The left column houses category proof points, an oversized 3-line headline, supportive paragraph, dual-action button group, trust badges, and an ROI metric card. The right column dedicates its entire area to a comparative narrative graphic, visually reading from left-to-right (fragmented inputs -> central AI core -> structured outputs). Below the hero, the layout seamlessly returns to an expansive white field introducing a muted client logo ribbon.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface on the left half of the layout and top navigation background
- #060B1E — Deep Cosmic Navy: Primary surface for the right graphic pane, simulating deep space
- #2952E8 — Royal Indigo: Primary action button background and active badge highlights
- #703BFF — Ultraviolet Accent: Gradient ramp stop for hero text, central orb aura, and secondary highlights
- #38E1FF — Cyan Electric Glow: Luminescent particle filaments connecting central orb to resolved state cards
- #111827 — Obsidian Body Text: Main headline and dominant typography on light canvas
- #6B7280 — Subtle Slate Text: Supporting copy, inactive navigation links, and caption annotations
- #1E2538 — Dark Frosted Slate: Background fill for the unorganized 'Before' input tags
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, intelligent, and distinctly architectural. Setting a crisp geometric sans like Inter Display with tight negative tracking (-0.03em) prevents the large display headline from feeling loose, projecting high-end enterprise grade dependability. The restrained body hierarchy and compact badge typography keep technical details legible without fighting the vibrant illustration.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminescence rather than multi-layered drop shadows. In the dark quadrant, layers emerge via radial gradients, cyan bloom filters, and high-contrast white foreground cards that naturally pop off the deep indigo substrate. On the light half, elevation is restrained to razor-thin 1px grey borders (#E5E7EB) without heavy drop-shadowing.
IMAGERY
The imagery is entirely abstract-diagrammatic, depicting technological cognition as a celestial phenomenon. It relies on fiber-optic tendrils, glowing cosmic gradients, and clean vector iconography rather than photography or 3D character renders. Any inclusion of human lifestyle photography, generic SaaS screenshots, or 3D isometric clay objects would dilute the design's ethereal focus.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 'Bifurcated Transformation Threshold': a literal visual gradient where chaotic, low-contrast dark pills on the left pass through a glowing purple celestial nexus to emerge as luminous, crisp white organized tasks on the right. Misusing this pattern occurs when both sides share identical contrast, breaking the visual narrative of chaos being transformed into clarity.
MUST
- Maintain the strict dichotomy between the clean light-canvas copy and deep cosmic graphic visualization.
- Use electric cyan (#38E1FF) sparingly, strictly for active glow filaments and particle rays.
- Apply gradient typography only to the key promise phrase ('runs your life') to retain readability.
- Ensure all task cards on the right use 100% opaque white backgrounds to maximize visual relief against dark indigo.
AVOID
- Do not extend dark space backgrounds across the left-hand text column.
- Never use harsh, fully saturated solid blacks; anchor dark surfaces in deep indigo (#060B1E).
- Avoid sharp rectangular corners; everything must use at least 10px radius up to full pills.
- Do not render the central glowing AI orb in flat colors without the soft radial light spill.
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 中尝试 
