Design a dark-mode website section: luminous edge-computing canvas transitioning cleanly from orbital white daylight into deep midnight infrastructure.
LAYOUT
The page structure uses a dramatic two-tier stacked rhythm. The top tier is a center-aligned light-mode CTA funnel featuring centered eyebrow, 2-line display title, descriptive subhead, twin button group, and a four-part horizontal feature bar. Directly below, the viewport snaps into a multi-column enterprise footer composed of a heavy left brand block (logotype, positioning statement, operational pill, social dock), four structured navigation columns, and a right-aligned email capture module.
PALETTE (use these exact hex values)
- #ffffff — Hero Canvas: Primary light background for the conversion hero and orbital graphic zone
- #070d1a — Deep Midnight: Monolithic dark background underpinning the multi-column site footer
- #101828 — Input Surface: Fill color for newsletter email input inside the dark footer
- #1e293b — Border Subtle Dark: Dividers, social button borders, and input strokes within the footer
- #3b46f1 — Cobalt Accent: Primary interactive buttons, key focus states, and text gradient origin
- #ec4867 — Rose Radiant: Warm gradient terminus on headline emphasis and active telemetry dots
- #10b981 — System Operational Green: Pulsing indicator dot for system operational status chip
- #0b121e — Text Display Dark: Primary headline text rendered over the light canvas
- #f8fafc — Text Display Light: High-contrast headings, logo mark, and labels on dark surfaces
- #94a3b8 — Text Muted Dark: Navigation link labels, copyright, and secondary meta copy
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 60px display. Tracking -0.03em at display, 0.06em at uppercase labels. The typography communicates industrial precision and cutting-edge robotics infrastructure. Plus Jakarta Sans (or Inter Display) delivers crisp, authoritative geometric forms that feel engineered rather than decorative. The massive uppercase logotype anchors the technical authority, while tight headline tracking creates an urgent, modern AI narrative.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered flat and planar rather than through heavy multi-layer drop shadows. Subtle atmospheric depth is established on the white hero via faint concentric geometric radar rings and faint ambient radial glow. On the dark canvas, elevation is achieved exclusively through hairline borders (#1e293b) and slight value shifts from #070d1a background to #101828 input fills.
IMAGERY
There are no photographic assets or rendered product mockups present in this viewport. The visual vocabulary relies entirely on vector geometry: thin concentric orbital lines in the hero canvas, semantic status dot indicators, and sharp line icons. Any future imagery introduced must follow high-contrast technical line schematics, wireframe LiDAR visualizations, or dark telemetry UI screenshots.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the abrupt, unblurred horizontal plunge from a luminous white canvas inscribed with fine orbital lines directly into an abyss-navy enterprise footer anchored by the massive two-line 'GENERAL INSTINCT.' wordmark. To execute correctly, ensure the contrast between the pristine white conversion area and the deep navy footer is razor sharp with zero gradient masking at the seam.
MUST
- Retain the sharp horizon line between the upper white canvas and lower dark footer without gradients blending the two surfaces.
- Use uppercase tracking (+0.08em) for all column headings and category eyebrow labels at 11-12px size.
- Keep display headline text strictly stacked with the bottom sentence carrying the blue-to-pink gradient.
- Ensure the brand logotype 'GENERAL INSTINCT.' stays strictly bold, all-caps, and features its trailing period.
AVOID
- Do not blur or add drop shadows under the top section to separate it from the footer; keep the division razor-sharp.
- Do not apply multi-color gradients to body copy or footer navigational links.
- Never drop the trailing arrow icons from primary call-to-action buttons.
- Avoid making the system status dot static if interactive; it must preserve its live glow aura.
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 中尝试