Design a dark-mode website section: deep-space midnight canvas illuminated by electric cobalt telemetry, monospace execution pipelines, and radial node topology.
LAYOUT
The header sits at the viewport ceiling with floating navigational links. Below, the hero splits into an asymmetric two-column grid: a bold 50% width left-hand typographic value proposition and a 50% width interactive execution card on the right. Anchoring the lower viewport is a full-width distributed horizontal network graph connecting the source caller, central orchestrator, and six modular downstream capabilities.
PALETTE (use these exact hex values)
- #030712 — Deep Midnight Canvas: Primary screen background setting extreme contrast for luminous blue accents and particle fields.
- #070D1E — Panel Surface: Background fill for interactive cards, terminal boxes, and floating operational nodes.
- #1E293B — Subtle Panel Stroke: 1px hairline borders delineating interface boundaries, input fields, and diagram containers.
- #2563EB — Electric Cobalt: Primary action triggers, hero highlight words, active send button, and central node aura.
- #60A5FA — Cyan Luminescence: Terminal syntax keys, text gradient ends, active status indicators, and wire connection pulses.
- #34D399 — Success Mint: Micro-indicators such as checkmarks in status pills and positive percentage yield metrics.
- #F8FAFC — Primary Text: Headline text, active input values, section headers, and primary button labels.
- #94A3B8 — Muted Code Text: Secondary documentation copy, inactive navigation links, metadata labels, and json property values.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px body-lg, 20px subheading, 24px heading, 64px display. Tracking -0.03em at display, 0em at body. The type system combines the clean, authoritative geometric precision of modern sans (Inter) with the rigorous execution feel of code monospacing (JetBrains Mono). It projects deep infrastructure credibility, high machine precision, and executive autonomous capability. For open-source deployment, Inter and JetBrains Mono provide the ideal zero-cost match.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created strictly via luminous phosphorescence rather than volumetric drop shadows. Surfaces appear layered through tiered background luminance (#030712 base to #070D1E panel) accented by razor-thin 1px strokes and ambient radial blue back-glows that simulate backlit glass displays in zero-gravity environments.
IMAGERY
No photographic imagery is used anywhere in the system. The visual world is defined entirely by synthetic code previews, schematic flow topologies, and a delicate radial particle constellation behind the central engine node. Any realistic imagery, 3D clay graphics, or photographic textures would immediately contradict the developer-infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the radial blue particle field blooming behind the central 'Revnu' router node in the topology diagram, connecting directly into modular infrastructure blocks. To execute properly, emit tiny low-opacity circular dots outward in concentric waves with a central luminous cobalt blur (#2563EB). It is commonly misused by making the particles too dense, turning it into a chaotic starry sky instead of a directed mathematical field.
MUST
- Anchor primary interactive interfaces with faint outer electric blue drop-shadows (0 0 40px rgba(37,99,235,0.12)).
- Use JetBrains Mono exclusively for parameters, JSON keys, endpoints, and terminal-derived metadata.
- Enclose input parameters in pill-shaped badges (radius 9999px) with 1px strokes.
- Maintain strict optical hierarchy where the gradient headline is 3-4x larger than surrounding body typography.
AVOID
- Never introduce saturated bright colors outside the electric blue and cyan functional spectrum.
- Avoid solid opaque light backgrounds for badges or chips; keep them translucent and stroke-driven.
- Do not drop the monospace font from terminal blocks or action state labels.
- Never use heavy drop shadows with black spread; use diffuse blue photon glows instead.
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 中尝试