Design a dark-mode website section: deep-space precision engineering rendered with illuminated telemetry flows and obsidian glass surfaces.
LAYOUT
The layout is composed in two stacked functional tiers over a 1240px container. The upper conversion band features an asymmetrical two-column grid: 40% width on the left holding the display headline, copy, and dual CTA buttons; 60% on the right displaying a multi-stage 3x2 interactive system flowchart. A sharp 1px divider (#111726) cleanly bifurcates this hero CTA from a structured six-column corporate footer containing the brand mark, four distinct link categories, and an inline newsletter signup widget.
PALETTE (use these exact hex values)
- #050811 — Cosmic Obsidian: Deep foundational background spanning the entire canvas
- #0B101D — Void Elevated: Background for workflow nodes, newsletter input, and subtle card surfaces
- #1B2337 — Subtle Border: Default 1px wireframe border for flowchart nodes, separators, and inputs
- #111726 — Deep Divider: Horizontal rule demarcating the CTA hero block from the lower footer columns
- linear-gradient(135deg, #5755D9 0%, #A262F6 100%) — Orbital Glow Gradient: Primary CTA button fill, active OS highlight node glow border, and gradient text accent
- #765CE7 — Active Core Violet: Accent text on 'aerospace?', social icons hover, and active node glows
- #FA5D43 — Telemetry Coral: Accent border and icon fill for the terminal delivery flow node
- #FFFFFF — Pure Starlight: Headlines, node titles, primary button text, and company wordmark
- #8E97A8 — Muted Spec Slate: Body copy, flowchart descriptions, and active column links
- #50596B — Dim Telemetry: Copyright text, placeholder inputs, and legal disclosure subtext
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 38px display. Tracking -0.025em on display, 0 on body. The typography speaks with the cold, authoritative confidence of aerospace instrumentation and avionics documentation. Set in a tight, clean neo-grotesque sans-serif with negative letter tracking on large sizes, it feels utilitarian, rigorous, and technologically advanced. Readily achievable via Google Fonts using 'Inter' or 'Plus Jakarta Sans'.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered flatly through luminance rather than physical casting of shadows. Surfaces float at the same elevation plane, distinguished primarily by border luminosity and dark tonal shifts (#050811 base vs #0A0F1A card). The only pseudo-elevation is a faint ambient blur (0px 0px 20px rgba(118, 92, 231, 0.2)) applied exclusively to the central active platform card.
IMAGERY
The design entirely eschews raster photography in favor of high-precision isometric and monoline technical diagrams. Visuals consist of simplified CAD-style wireframe icons (hexagonal battery cells, microchips, data cylinders, and cube envelopes) rendered in clean vector lines. Introducing lifestyle photos, textures, or skeuomorphism would destroy the aerospace avionics precision.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive technical flowchart positioned directly adjacent to the CTA headline, functioning as a concrete product diagram rather than decorative illustration. Its power relies on the central violet-haloed 'OS' hub connecting strictly via 90-degree circuit traces to peripheral engineering milestones, ending in a singular coral-outlined delivery card. It is misused if turned into arbitrary curved illustrations or populated with generic marketing icons.
MUST
- Use 1px wire borders (#1B2337) to delineate nodes against the deep dark canvas (#050811).
- Highlight key verbs or keywords within headlines using the purple brand gradient.
- Maintain strictly orthogonal (90-degree) routing for all workflow connector lines.
- Use distinct accent strokes (#FA5D43 coral, #765CE7 purple) very sparingly to indicate special node states.
AVOID
- Do not introduce photorealistic imagery; diagrammatic telemetry replaces all photography here.
- Do not use curved or diagonal connector lines across the architecture flow.
- Do not make all flowchart cards colorful; keep at least 70% in neutral dark borders (#1B2337).
- Do not increase headline font weights beyond semi-bold/bold; avoid heavy black weights.
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 中尝试 
