Design a dark-mode abstract background artwork: deep midnight data canvas illuminated by an undulating bioluminescent particle wave.
LAYOUT
The viewport is governed by an asymmetrical 12-column split. The left 6 columns hold the brand story: eyebrow, 64px display headline, 16px body copy, dual-button action group, and a 4-column metric strip. The right 6 columns remain empty of DOM text to showcase the crest of the particle simulation.
PALETTE (use these exact hex values)
- #040918 — Void Canvas: Deepest backdrop layer behind particle field and left-aligned text column.
- #22d3ee — Cyan Bioluminescence: Primary brand accent used for solid CTA buttons, logo marks, and focal headline keywords.
- #ff725c — Warm Flare: Secondary ambient lighting tone within the background particle stream creating depth.
- #ffffff — Pure White: High-contrast headings, main metric values, and primary button labels.
- #94a3b8 — Muted Slate: Subordinate body copy, nav links, icon outlines, and metric descriptors.
- #38bdf8 — Cyan Tinted Blue: Tracking eyebrow uppercase text and subtle ambient node points.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 24px heading, 64px display. Tracking -0.025em for display, 0.12em for eyebrow, normal for body. The typographic tone is technical, premium, and calm, leaning on modern neo-grotesque geometry without quirky idiosyncrasies. Plus Jakarta Sans provides clean legibility that balances the visual complexity of millions of points of light. Inter or General Sans work as seamless zero-cost drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 120px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical lighting and depth-of-field within the particle field rather than CSS drop shadows. Crisp foreground typography floats above mid-ground luminous trails and soft out-of-focus background bokeh. Component surfaces remain strictly flat or lightly frosted glass.
IMAGERY
The visual hero is a mathematically precise 3D particle field resembling celestial synapses, neural nets, or flowing fiber-optic data. It blends cool cyan nodes with warm orange-pink crests in an organic S-curve. Flat vector illustrations, stock photography, or standard 2D charts are strictly prohibited here.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric juxtaposition of a high-density, luminous 3D particle wave against crisp, flat left-aligned white typography. This element is commonly ruined by centering text directly over the wave crest or using low-resolution bitmap particle artwork instead of deep volumetric render effects.
MUST
- Keep typography strictly left-aligned within the left 50% to 55% column to allow particles to breathe.
- Use pill border radii (9999px) for all primary and secondary button actions.
- Reserve the saturated cyan (#22d3ee) strictly for interactive primaries and single-word emphasis.
- Set the tracking on all-caps eyebrow labels to a generous 0.12em or higher.
AVOID
- Do not center-align the headline or CTA stack over complex particle waves.
- Never place opaque cards or heavily drop-shadowed containers over the particle backdrop.
- Do not use rectangular or sharp-cornered buttons in this system.
- Avoid multi-colored text gradients; use solid white and a single cyan highlighted word.
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 中尝试 
