Design a dark-mode website section: deep midnight canvas electrified by cyan telemetry glows, precise metrics, and rounded dark surfaces.
LAYOUT
The layout follows a two-tier architectural grid. The upper hero divides into an asymmetrical split with marketing copy and conversion CTAs on the left (45% width) and a dense interactive telemetry window on the right (55% width). The bottom section transitions seamlessly into a wide footer with brand credentials, five neat text navigation columns, an integrated newsletter bar, and an enterprise callout card.
PALETTE (use these exact hex values)
- #03070C — Canvas Midnight: Root background canvas providing maximum contrast for glowing cyan elements.
- #0B131E — Card Surface: Background fill for telemetry dashboard, footer callouts, and contained panels.
- #1E293B — Subtle Surface Border: Hairline 1px border separating cards, inputs, table rows, and inner metric cells.
- #2EE2E6 — Electric Cyan: Primary interactive accent used on primary CTA buttons, badges, and headline accents.
- #38BDF8 — Sky Blue Accent: Secondary accent for link chevrons, sparklines, and active inline text states.
- #10B981 — Emerald Spark: Status indicator dot and positive telemetry sparkline strokes.
- #FFFFFF — Text Primary: High-emphasis display typography, metric values, and primary headings.
- #94A3B8 — Text Muted: Body copy, navigation links, table headers, and metadata captions.
TYPOGRAPHY
Typeface Inter (or Geist,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em at display, 0 at caption. The typographic tone is authoritative, developer-centric, and intensely technical without feeling academic. A tight, geometric neo-grotesque sans-serif with negative letter tracking conveys precision and velocity at large sizes. Geist or Inter serve as the ideal substitutes, giving tabular metrics crisp legibility while headlines punch with dense, confident weight.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved entirely through luminous glow fields and layered translucency rather than drop shadows. Cards rely on 1px stroke borders (#1E293B) over deep midnight surfaces (#0B131E) to lift off the canvas. Ambient background radial gradients in emerald and teal produce an atmospheric underglow behind the hero text.
IMAGERY
The interface avoids photographic imagery entirely, relying on rendered vector telemetry interfaces and data sparklines as its visual payload. The mock dashboard acts as hero artwork, reinforcing technical competence and live latency guarantees. Any illustrative imagery must remain abstract, wireframe, or schematic in cyan line-art.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline typography paired with an ambient teal-cyan background bloom and matching electric cyan CTA pill. The glow softly illuminates the canvas behind the words 'light speed' while the primary button directly mirrors that luminous cyan hue. Misusing it involves scattering the cyan tint across all headings or over-saturating the canvas background into a bright gradient.
MUST
- Keep background canvases deeply dark (#03070C) to preserve high visual contrast with cyan accents.
- Use pill radius (999px) strictly for interactive primary action buttons and header badges.
- Enclose complex data and metrics within distinct 1px bordered containers (#1E293B) with 16px corner radius.
- Highlight key headline verbs and final words using electric cyan (#2EE2E6).
AVOID
- Do not use sharp 0px corners on cards or inputs; maintain 10px to 16px rounding throughout.
- Never use saturated background fills behind full sections; keep fills dark and restrict saturation to glows.
- Do not render primary CTA text in white over cyan; use near-black (#03070C) for accessible legibility.
- Avoid thick, heavy borders; keep all structural dividers and card outlines at exactly 1px.
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 中尝试 
