Design a dark-mode website section: radiant twilight glassmorphism contrasting chaotic crimson debt against luminous algorithmic order.
LAYOUT
The viewport is structured around a classic two-column asymmetric split within a 1360px container. The left side hosts brand narrative hierarchy: category pill badge, serif display headline, body paragraph, twin CTA buttons, and a bottom row of 3 stat metrics. The right side features a high-density interactive comparison widget divided down the center by a luminous vertical threshold separating tangled manual friction nodes from structured agent rosters.
PALETTE (use these exact hex values)
- #06090e — Void Canvas: Deep cosmic background canvas underpinning the entire viewport and hero landscape fade
- #0b1320 — Glass Panel: Semi-translucent container fill for agent dashboards and comparative before/after cards
- #2563eb — Luminous Electric Blue: Primary conversion button fill, display text italic emphasis, and active agent indicators
- #38bdf8 — Neon Cyan Glare: Vertical central light-beam divider, metric sparkline stroke, and hover state borders
- #f43f5e — Friction Crimson: Warning badge icons, chaotic nodal connectors, and legacy workflow problem cards
- #10b981 — Telemetry Emerald: Agent status indicators, 'On track' pill labels, and verified checkmarks
- #f8fafc — High Emittance White: Primary headline titles, high-priority metric numbers, and hero copy
- #94a3b8 — Atmospheric Slate: Subtitles, navigation links, secondary metadata tags, and descriptive captions
- #1e293b — Subtle Outline: Hairline perimeter borders on glass panels, ghost buttons, and pill tags
TYPOGRAPHY
Typeface Newsreader (or Playfair Display, Canela, Georgia), weights 400/500. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 64px display. Tracking -0.025em. The typographic identity pairs the literary gravitas of an editorial serif with the ultra-clean efficiency of a modern technical sans. Newsreader or Canela delivers humanistic warmth and institutional trust to high-level clinical claims, while Inter provides clinical, zero-nonsense legible precision for dense operational data, status badges, and telemetry outputs.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through atmospheric optical layering rather than physical drop shadows. Backdrops sit at the deepest level behind a dark vignette, overlaid by blurred translucent glass cards with 1px border strokes. Glowing luminous elements—notably the electric blue vertical divider and sparkline—cast ambient colored radial gradients that simulate real-world light emission against dark panels.
IMAGERY
The imagery features a real-world panoramic mountain horizon photographed at twilight, graded into deep nocturnal navy at the upper edges with a warm amber rim along the peaks. The landscape provides visceral organic grounding beneath technical agentic data graphics. Abstract 3D shapes or glossy floating cartoon mockups would completely break the design's calm, authoritative maturity.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the glowing laser transition beam flanked by chaotic crimson nodal threads on the left and immaculate cyan-hued agent roster cards on the right. This structural visual metaphor articulates transformation without needing explanatory text. It is misused if treated as a generic divider without maintaining the chromatic clash between problem chaos and solution harmony.
MUST
- Use high-contrast editorial serif exclusively for display headlines, switching to clean sans-serif for UI telemetry.
- Restrain vivid electric cyan (#38bdf8) and blue (#2563eb) to interactive highlights and the central beam.
- Employ the chaotic crimson palette strictly on the left 'Before' side to signal unresolved friction.
- Keep card surfaces semi-translucent with subtle backdrop-blur so the background landscape subtly filters through.
AVOID
- Never use serif fonts for dashboard UI cards, metrics, or table contents.
- Do not saturate the background; the mountain dusk backdrop must remain muted, low-exposure, and photographic.
- Avoid solid, opaque grey card backgrounds; always maintain 60-70% glass translucency.
- Do not bleed crimson problem styling into the right-hand automated agent sector.
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 中尝试 
