Design a light-mode website section: pristine daylight infrastructure grounded by a deep midnight control deck via sculpted horizon transitions and telemetry nodes.
LAYOUT
The upper section utilizes an asymmetrical two-column hero layout (left 45% copy/actions, right 55% interactive system visualizer) wrapped in a 1280px max-width boundary. A full-width beveled transition boundary cleanly separates light infrastructure from dark ops. Below the horizon, the dark footer adopts a disciplined 6-column matrix layout, grouping brand info on the left, four standardized navigation link columns in the center, and a dedicated newsletter capture module on the right.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Light: Dominant upper background canvas providing high legibility for hero messaging and light-mode UI cards.
- #040816 — Midnight Deck: Deep navy base canvas anchoring the footer, newsletter block, and legal directories.
- #175CFF — Electric Royal: Primary interactive buttons, key headline accent span, active telemetry badges, and orbital core glow.
- #0B132B — Slate Headline: High-contrast dark typography on upper light canvas including main headline and card titles.
- #64748B — Muted Slate: Supporting descriptive copy, subtitle labels, breadcrumbs, and inactive metadata tags.
- #94A3B8 — Deck Muted Text: Secondary footer links, subheadings, and legal disclaimer copy against midnight surface.
- #10B981 — Telemetry Emerald: Pulsing live indicators on node cards and bottom operational status pills.
- #FFFFFF — Translucent Card: Floating telemetry card backgrounds with fine 1px borders and blurred dropshadows.
- #0C1527 — Deck Surface Field: Background fill for footer email input and social media icon enclosures.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em at display, 0.01em at body. The typographic tone is authoritative, clean, and developer-grade, conveyed through Plus Jakarta Sans. Its wide apertures and crisp geometric curves balance enterprise security with modern AI product polish. If licensed alternatives are needed, Inter or General Sans provide an identical structural cadence.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through atmospheric diffusion rather than stepped material cards. The light upper section uses a faint dot matrix background and ultra-soft, diffused dropshadows (0 12px 32px rgba(15,23,42,0.06)) on floating node cards. The shift to the dark footer acts as a physical dimensional cut, using an engineered shelf border to create the feeling of looking into an operational control trench.
IMAGERY
Visual assets are strictly schematic and synthetic: glowing particle fields, waveform radial cores, and vector interface diagrams. Photography is completely avoided in favor of crisp iconography (16px line weight) and high-fidelity simulated UI cards. Any photorealistic portraits or casual lifestyle imagery would break the deep-tech infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-horizon transition: an engineered downward-sloping shoulder cut that bisects the screen, transitioning an ethereal daylight product canvas into an enterprise midnight control deck. To implement properly, curve the transition edges inward with a wide radius (40px-60px) and align the dark footer content immediately beneath it without an intervening white buffer.
MUST
- Use semantic electric cobalt (#175CFF) strictly for actionable elements, live badges, and primary highlights.
- Maintain high visual density in node cards using 12px-13px tabular lists paired with 6px status dots.
- Apply negative letter spacing (-0.025em to -0.035em) to headlines above 32px to ensure optical compactness.
- Anchor the footer with a stark dark container that contrasts immediately with the upper hero canvas.
AVOID
- Do not use warm hues (yellow, orange, red) except for critical error telemetry; stick to royal blue, cyan, and emerald.
- Do not drop the dark horizon shelf without the smooth concave corner shoulder transition.
- Do not clutter satellite node cards with body text; restrict contents to single-line items and status pips.
- Do not allow footer text links to use pure white; keep default navigation state muted at #94A3B8.
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 中尝试 
