Design a dark-mode website section: deep navy cockpit illumination for mission-critical ai operations and high-velocity trade telemetry.
LAYOUT
Asymmetric two-column split at the top (45% narrative anchor on the left, 55% angled application interface showcase on the right). Directly beneath the narrative sit three horizontal stats, followed by dual action buttons. The bottom section resolves into a balanced 4-column feature row tied together by a continuous horizontal cyan accent thread.
PALETTE (use these exact hex values)
- #07090E — Void Canvas: deepest background surface across full viewport canvas
- #0D111A — Console Surface: fill color for floating dashboard container and primary feature cards
- #131926 — Card Trench: nested widget fills inside the application mockup
- #2563EB — Electric Blue: primary cta background, active icons, and primary chart line highlights
- #38BDF8 — Cyan Glow: secondary edge glow, metric badges, and interactive icon strokes
- #10B981 — Emerald Status: success badges, verified tags, and affirmative metrics
- #1E2538 — Border Hairline: standard 1px borders on modules, cards, and input boundaries
- #FFFFFF — Pure White: hero headlines, metric values, and primary card titles
- #8A99AD — Muted Slate: explanatory body text, timestamps, and secondary captions
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.08em at micro uppercase. Disciplined, technical, and authoritative. Inter (or similar neo-grotesques like Geist) is styled with aggressive letter-spacing reductions at scale to evoke enterprise computational speed, balanced by generously spaced uppercase micro-labels for operational clarity.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical rim-lighting and layered borders rather than diffuse black shadows. Surfaces rise from canvas #07090E to panel #0D111A and nested wells at #131926. A strong right-side cyan and cobalt linear gradient edge-glow provides the illusion that the mockup is floating off the plane.
IMAGERY
No photographic imagery is present. Visual fidelity is carried exclusively through high-precision vector UI simulation: interactive charts with glowing area fills, pill indicators, monospace-adjacent tabular records, and crisp iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The brilliant cobalt-cyan perimeter flare on the angled product chassis, paired with the horizontal blue bus-bar that visually threads through the bottom quad-card grid.
MUST
- Keep background tones strictly in cold deep navy spectrums (#07090E to #0D111A), never neutral charcoal.
- Use hairline 1px borders (#1E2538) to delineate modules instead of solid drop shadows.
- Isolate bright accents (blue and emerald) strictly to data states, interactive triggers, and telemetry graphs.
- Maintain strict typographical hierarchy by using 56px for main display and stepping directly down to 15px for body.
AVOID
- Do not use warm gray, beige, or pure grayscale darks; the identity relies on blue-tinted darkness.
- Do not allow cyan and blue glow effects to spill onto typography or degrade contrast.
- Do not introduce multi-colored icon sets; keep icons monochrome cyan or muted slate line art.
- Do not soften corner radii past 14px on internal cards, preserving an operational cockpit feel.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
