Design a dark-mode abstract background artwork: an electric chartreuse vortex spiraling into deep obsidian space, balancing technical precision with kinetic data flow.
LAYOUT
The viewport adopts an asymmetrical split layout bounded within a 1360px container. The left 45% is dedicated to a vertically stacked hierarchy: status badge, display headline, two-line subcopy, CTA button row, and a 3-column metric cluster. The right 55% remains uncluttered to showcase the cosmic particle vortex receding into an offset center-right aperture.
PALETTE (use these exact hex values)
- #06090e — Obsidian Void: deep background canvas absorbing light across the full viewport
- #e5fa37 — Kinetic Chartreuse: primary interactive CTA fill, headline serif highlight, and particle core luminance
- #00e5c9 — Bioluminescent Cyan: mid-frequency particle dust and secondary atmospheric depth glow
- #f5d433 — Solar Gold: dense inner vortex particle highlights and status accents
- #ffffff — Starlight White: primary heading text, high-emphasis icons, and selected states
- #8c9ea6 — Subtle Cyan Grey: body copy, metrics descriptions, and inactive navigation links
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 64px display. Tracking -0.03em on display, 0 on body. The typography communicates hyper-modern infrastructure paired with cerebral elegance. Grounded geometric sans provides industrial authority, while the sudden pivot to an expressive italic serif ('what's next') injects a human, forward-looking editorial flair. For production environments, Plus Jakarta Sans and Instrument Serif provide an exact open-source match.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely by luminescence and particle size attenuation rather than box shadows. The pitch-black background sits on level 0, particle clouds form a volumetric midground, and sharp typography and translucent pill surfaces hover crisply on the top plane.
IMAGERY
Imagery consists exclusively of generative, code-driven particle fields forming a spiraling black-hole vortex. Real-world photography, raster product mockups, or flat 2D vector illustrations are strictly off-brand and prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-engine headline lockup pairing a crisp white geometric sans with a vibrant chartreuse italic serif, set against a dark generative particle vortex. This exact typographic tension turns an otherwise technical developer platform into an elite visionary statement. Misusing it across multiple lines or non-accent words instantly ruins its impact.
MUST
- Reserve #e5fa37 strictly for primary interactive anchors and singular typographic emphasis moments.
- Use 999px border radii universally for all buttons, badges, and tag components.
- Pair geometric sans-serif structure with a curated italic serif highlight inside key narrative titles.
- Keep background imagery strictly particle-based, generative, and emerging from deep pitch black (#06090e).
AVOID
- Do not use rectangular or low-radius (4px-8px) buttons anywhere in this design.
- Never tint the primary background canvas with flat saturated colors or bright gradients.
- Do not apply drop shadows to buttons; depth is created through particle luminescence and contrast.
- Avoid rendering the italic serif on plain body copy or secondary navigation labels.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
