Design a light-mode website section: crisp developer schematics floating against a luminous cosmic vortex with royal cobalt precision.
LAYOUT
The header sits at the top margin on a 1320px maximum container with wide 32px nav padding. The hero is horizontally asymmetrical: the top-left contains the display headline, paragraph, and dual CTAs, leaving the top-right open for the cosmic nebula. Directly underneath, spanning the full container width, sits the four-stage sequential pipeline leading down to a centered scroll prompt and a curved bottom edge.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Dominant background base across the entire interface and interior of inactive step cards
- #0d55cf — Cobalt Blue: Primary brand accent used for highlighted headline text, primary button fill, and active flow step border
- #0a0f1d — Deep Obsidian: High-contrast headings, primary brand wordmark, and strong emphasis text
- #525f7f — Slate Neutral: Body copy, secondary navigation links, and step descriptive copy
- #e2e8f0 — Hairline Border: Subtle card outlines, secondary button stroke, and connecting pipeline trace lines
- #f5f8ff — Active Node Tint: Faint blue tinted background for active workflow cards and indicator badges
- #10b981 — Success Emerald: Validation checkmarks, passing tests, and healthy status node dots
- #f59e0b — Warning Amber: Alert flags and error injection status lines within simulation panels
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 20px heading, 52px display. Tracking -0.025em at display, 0.08em at uppercase captions. The typographic tone is ultra-precise, technical, and executive. A clean geometric/neo-grotesque sans-serif (Inter or Geist) delivers authoritative readability across code parameters, hardware schematics, and punchy marketing declarations. It balances mathematical coldness with the human polish of calibrated tracking.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1320px container, comfortable density.
DEPTH
Depth is achieved through atmospheric layering rather than drop shadows. Crisp flat vector cards (#ffffff) sit directly atop the nebulous, photorealistic spiral galaxy background. Hairline 1px borders (#e2e8f0) provide surgical definition without any blur or elevation offsets.
IMAGERY
The imagery features an ethereal, photorealistic cosmic spiral galaxy rendered in ice blue, soft cyan, and white starlight. It is confined entirely to the upper right background, blending smoothly into the blank white canvas. Avoid neon sci-fi tropes, dark black-hole visuals, or cartoonish vector illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the juxtaposition of an expansive, soft celestial vortex bleeding into pure white space behind an uncompromisingly crisp, 1px hairline horizontal hardware pipeline diagram.
MUST
- Keep the background strictly white (#ffffff) fading seamlessly into the pale blue atmospheric vortex.
- Use solid cobalt blue (#0d55cf) selectively for actionable elements and key declarative typography.
- Maintain 1px hairlines (#e2e8f0) with round connection nodes between horizontal pipeline cards.
- Preserve tight negative letter-spacing (-0.025em) on display headlines above 40px.
AVOID
- Do not tint the overall background dark or use a dark mode galaxy backdrop.
- Do not add drop shadows to cards; use flat 1px hairlines to maintain technical schematic feel.
- Do not color the entire headline blue; strictly split between obsidian black and cobalt blue.
- Do not break the linear flow line connecting the four interactive pipeline cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
