Design a dark-mode website section: deep midnight obsidian canvas anchored by luminescent electric blue actions and precision emerald telemetry.
LAYOUT
The upper section uses a balanced 2-column split with an assertive left-aligned value proposition (eyebrow, H1, paragraph, action cluster, trust proofs) flanked by a dimensional dashboard mock on the right. A razor-thin glowing horizon divider provides breathing space before entering a structured 5-column utility footer (brand summary, 4 link groups, newsletter capture) crowned by a minimal copyright sub-bar.
PALETTE (use these exact hex values)
- #050811 — Void Canvas: Deepest structural background layer underlying all content and hero layout
- #0a1220 — Slate Surface: Telemetry dashboard mockup container and nested input background
- #162338 — Subtle Border: Hairline structural strokes on dashboard widgets, secondary buttons, and footer inputs
- #1d68f6 — Electric Blue: High-priority CTA buttons and prominent interactive focal points
- #38bdf8 — Horizon Glow: Luminous horizontal divider beam separating conversion hero from footer navigation
- #34d399 — Telemetry Emerald: Data visualizations, active status pips, and positive opportunity indicators
- #ffffff — Text Stark: H1 titles, numerical metrics, column headers, and primary button labels
- #8ba0b8 — Text Muted: Descriptive body copy, footer links, and microcopy annotations
- #4e6178 — Text Dim: Copyright text, inactive labels, and auxiliary meta information
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.03em at display, 0 at body. The typographic tone is ultra-engineered, objective, and executive. Neutral grotesque letterforms (exemplified by Inter) ensure dense data telemetry inside the app mockup remains as clear as the bold display headline above it. Free Google Font substitutes like Inter or Plus Jakarta Sans perfectly replicate this developer-first precision.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation avoids traditional drop shadows in favor of localized luminous bloom and hairline border illumination. Surfaces tier upwards from the void canvas (#050811) to cockpit slate (#0a1220) using a 1px border stroke (#162338) that catches an asymmetric cyan edge light on the top and right margins.
IMAGERY
Imagery is purely interface telemetry: precision vector charts, a radial circular progress dial, and micro-app interface components. Raster photography or lifestyle illustrations are completely absent and would break the computational machine aesthetic.
MUST
- Use pure white text (#ffffff) only for primary titles, metric digits, and active button text.
- Render the horizon divider as a centered cyan-blue flare fading cleanly into void canvas edges.
- Restrict telemetry green (#34d399) strictly to quantitative value highlights, badges, and verification icons.
- Pair primary blue actions with ghost/outlined secondary actions having transparent fills.
AVOID
- Never introduce warm colors like red, orange, or yellow into the primary telemetry.
- Do not use flat gray backgrounds; all dark surfaces must carry a subtle cold navy undertone.
- Never eliminate the glowing center highlight from the section transition rule.
- Do not give secondary buttons solid background fills that compete with the blue CTA.
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 中尝试 
