Design a dark-mode website section: deep galactic void punctuated by electric chartreuse traces and pinpoint architectural wiring diagrams.
LAYOUT
Symmetric, vertically stacked single-column hero that flows into an asymmetric three-tier schematic diagram. The top anchors with a standard horizontal navbar, followed by an announcement pill, high-impact headline, paragraph, dual CTA buttons, and reassurance checklist. The lower half expands into a left-to-right infrastructure diagram (Sources -> Control Plane Core -> Workloads -> Utilization Metrics).
PALETTE (use these exact hex values)
- #070d0d — Abyssal Canvas: Deep background canvas behind all hero elements and ambient starfields.
- #0d1719 — Node Surface: Background fill for pills, diagram boxes, and metric cards.
- #1d2b2e — Subtle Border: Hairline 1px borders on architectural nodes, pills, and secondary buttons.
- #c4f242 — Electric Chartreuse: High-visibility primary action button, highlighted display text, and dynamic progress bars.
- #2cd483 — Vortex Emerald: Particle glow, data circuit traces, and control plane iconography.
- #f3f4f6 — Pure Text White: Primary headline text, hero title line one, and active node titles.
- #8e9ea2 — Muted Slate: Paragraph description text, navigation links, and dormant metric values.
- #183b3e — Deep Teal Rail: Inactive metric bar backgrounds and faint connecting trace circuits.
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 64px display. Tracking -0.03em at display, 0.05em at uppercase micro. Clean, authoritative, and computational. The font choice reads as precision infrastructure—austere neo-grotesque sans with zero calligraphic warmth, engineered to sit alongside monospace data traces and technical system architecture.
GEOMETRY & SPACING
Corner radii — cards 10px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through luminous optical glow rather than drop shadows. Flat, dark surfaces (#0b1517) layer above the base canvas (#070d0d) via crisp 1px borders (#1d2b2e) and radiant green particle backlights (#2cd483) radiating from behind the central core.
IMAGERY
Abstract generative particle swirl evoking a spiral galaxy, rendered in pinpoint dots transitioning from bright chartreuse to deep emerald green. No photographic assets or human imagery are present; the visual language is purely algorithmic, astrophysical, and schematic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline ('Unlock wasted' in #f3f4f6, 'GPU capacity.' in #c4f242) suspended directly above a luminous green particle vortex that anchors interactive architectural pipeline nodes. Misusing it means scattering chartreuse haphazardly across body copy or turning the particle storm into a messy solid gradient.
MUST
- Reserve electric chartreuse (#c4f242) strictly for primary CTA, key headline accents, and winning metric bars.
- Render connection traces as thin 1px lines with distinct anchor nodes and glowing green path turns.
- Use tight negative tracking (-0.03em) on the 64px display headline to maintain cohesive typographic mass.
- Enclose all diagram items and pill chips in dark, semi-translucent fills (#0d1719) with 1px borders (#1d2b2e).
AVOID
- Never introduce warm colors like red, orange, or magenta; all accentuation stays within the green-cyan spectrum.
- Do not use full-width heavy solid cards; keep diagram cards small, floating, and tethered by trace lines.
- Avoid thick button borders; secondary buttons must not exceed 1px stroke weight.
- Do not drop the dark canvas below #070d0d into light greys; atmospheric depth depends on near-black tones.
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 中尝试 
