Design a dark-mode website section: industrial operations automated beneath vertical fluted curtains of deep cobalt and electric rose.
LAYOUT
The header spans full-width with a centered navigation cluster and right-aligned dual action links. The hero splits into two columns: a structured text stack on the left (eyebrow pill, split display headline, body copy, CTA pair, metric card) and an interconnected technical schema on the right linking a JSON response card to an automated pipeline rail.
PALETTE (use these exact hex values)
- #030712 — Void Canvas: Deepest foundation background tone behind all visual elements and ambient glow curtains.
- #0b1120 — Glass Smoked Surface: Semi-transparent backdrop for code inspect panel, pipeline nodes, and metric cards.
- #2563eb — Cobalt Light Beam: Dominant cool vertical fluted light wash running through the midground and left canvas.
- #f43f5e — Magenta Light Beam: Vertical warm gradient rays on the right side of canvas behind pipeline stages.
- #60a5fa — Headline Azure Accent: Second phrase of main display headline and prominent directional iconography.
- #22c55e — Status Green: Used for live status indicators, 200 OK badge, and telemetry live indicators.
- #ffffff — Primary Text: Top-tier headings, high-contrast button labels, active state icons, and metric values.
- #94a3b8 — Muted Text: Secondary descriptors, navigation links, code punctuation, and inactive pipeline subtitles.
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Geist Sans, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 24px subheading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The voice is authoritative, modern, and mathematically exact. Inter provides hyper-clean, neutral UI clarity, while the dual-color display treatment creates dramatic cadence without typographic gimmicks. JetBrains Mono lends developer-grade credibility to the automated agent execution narrative.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical translucency rather than heavy drop shadows. Frosted dark glass containers with faint hairline white borders hover over an ethereal, vertical fluted light backdrop, producing multi-layered optical atmospheric depth.
IMAGERY
No photographic imagery is used. The aesthetic relies entirely on programmatic artifacts: clean monospace JSON code representations, iconography in pill nodes, sparkline curves, and procedural neon light fluting resembling theatrical fiber-optic curtains.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the vertical fluted light curtain—an array of parallel cylindrical light beams transitioning smoothly from deep cobalt on the left to vibrant magenta on the right—shining directly behind translucent technical glass panels.
MUST
- Use dramatic vertical fluted gradients that fade to deep void (#030712) at top and bottom edges.
- Split display headings into white and cobalt (#60a5fa) to separate customer intent from autonomous fulfillment.
- Encase code and workflow modules in translucent glassmorphism with 1px hairline borders (rgba(255,255,255,0.12)).
- Pair live green status pips (#22c55e) strictly with active system states like 200 OK and autonomous operations.
AVOID
- Never replace the vertical auroral fluting with generic circular radial glow blobs.
- Do not use opaque solid grey backgrounds for cards; always retain backdrop transparency.
- Avoid warm accent colors on interactive buttons; keep primary actions strictly in cobalt (#2563eb).
- Do not drop the 1px white-frosted borders on dark cards as they ensure legibility over the colored curtains.
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 中尝试 
