Design a dark-mode website section: deep midnight glass framing vibrant twilight gradients and crisp telemetry widgets.
LAYOUT
The header spans the full width with a left logo, centered text links, and a right pill CTA. Below, an asymmetric two-column hero splits evenly: the left column stacks the category kicker, headline, copy, action row, and metric bar, while the right column houses a stacked 2x2 grid of simulated product components (composer above, three KPI tiles below). The section terminates in a dramatic convex white curve transitioning into the light content realm.
PALETTE (use these exact hex values)
- #080b13 — Canvas Midnight: Primary page background across the dark hero zone.
- #111726 — Glass Surface: Background for floating dashboard cards and metric displays with 80% opacity.
- #1e293b — Surface Border: Hairline 1px border stroke on cards and inputs to define boundaries.
- linear-gradient(90deg, #5a8aff 0%, #f065a8 100%) — Aurora Gradient: Primary action button background and key headline accent gradient.
- #ffffff — Text Primary: Main headlines, active prompt texts, and major stat readouts.
- #94a3b8 — Text Secondary: Supporting descriptive copy, inactive chip labels, and navigation items.
- #34d399 — Success Mint: Status badges, CSAT metrics, and resolution indicator badges.
- #38bdf8 — Telemetry Cyan: Sparkline telemetry graphs and agent performance progress line.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, 0 at body. The typography is disciplined, corporate-technical, and ultra-modern. The tight negative tracking on display headings projects urgency and engineering precision, while generous leading on body text ensures high legibility on dark glass. Inter or Plus Jakarta Sans are optimal open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 16px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through layered luminescence and semi-transparent surfaces rather than traditional drop shadows. Ambient indigo and violet glow spheres cast soft light behind cards, while cards use 1px border strokes with faint inner highlights to visually float over the midnight backdrop.
IMAGERY
Abstract mathematical waveforms and generative vector thread ribbons provide textural context inside telemetry cards and footer transitions. Traditional photography and corporate illustration are completely omitted in favor of live-rendered interactive software mockups and glowing wireframes.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone blue-to-magenta aurora gradient paired with the prominent prompt composer card and curved light-mode section peel. Commonly misused by making the gradient too saturated across body copy instead of restricting it to terminal heading phrases and primary interactive triggers.
MUST
- Use the signature blue-to-pink gradient strictly for primary actions, headline focal points, and active borders.
- Maintain strict 24px outer radii on all UI preview cards and 9999px pills for controls.
- Pair large bold metrics (24px-32px) directly with small, muted two-line descriptions (12px).
- Wrap input fields in subtle glowing gradient borders against dark recessed surfaces (#0a0f1d).
AVOID
- Do not use sharp corners or box-shadows with hard edges anywhere in the interface.
- Avoid applying the brand gradient to all buttons; reserve it for exactly one primary CTA per view.
- Do not allow card backgrounds to become pure opaque black; keep subtle dark navy-slate tinting.
- Never use generic high-contrast white borders; use low-opacity rgba strokes (10%-15% white).
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 中尝试 
