Design a dark-mode website section: cosmic volumetric particle graphics juxtaposed sharply against sterile, editorial white footer architecture.
LAYOUT
The composition follows a two-tier horizontal stack. The top tier is an expansive 500-600px dark banner housing a left-aligned CTA lockup (eyebrow, H1, description, twin buttons) and right-aligned cosmic particle art. Directly underneath, without an intervening container gap, sits a 6-column editorial footer with brand/social in column 1, four link categories in columns 2-5, and a newsletter capture in column 6, culminating in an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #040405 — Cosmic Void: Deep black backdrop for the CTA section framing the generative galaxy artwork.
- #ffffff — Clean Slate: Primary surface for the multi-column footer container.
- #fafafa — Footer Tint: Subtle cool-white wash across footer grid areas.
- #ea382b — Nova Crimson: Primary button fill, brand accent mark, eyebrow text, and domain highlight link.
- #0f172a — Obsidian Text: Footer heading typography, brand name, and newsletter submit button background.
- #64748b — Muted Slate: Footer link items, copyright text, subcopy, and secondary text on light backgrounds.
- #ffffff — Star White: Main CTA display headline and primary button label.
- #94a3b8 — Nebula Mist: Descriptive copy inside the dark CTA hero area.
- #e2e8f0 — Dividing Rule: Hairline horizontal dividers and input outline borders in the footer.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 18px body-lg, 18px heading, 48px display. Tracking -0.02em at display, 0.01em at body. The typographic tone is architectural, rational, and developer-focused. Rendered in a modern neo-grotesque (Inter or similar match), the tight letter-spacing (-0.025em) on display sizes conveys technological precision without sacrificing readability. The switch to lower-contrast grey slate (#64748b) in the footer communicates structured utility.
GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 4px, buttons 6px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through visual imagery rather than CSS dropshadows. The swirling particle field provides an illusion of infinite physical depth, while UI controls, cards, and input fields remain strictly flat (0px elevation) with 1px border strokes.
IMAGERY
Features a high-resolution, physics-driven particle simulation resembling a cosmic whirlpool or astrophysical accretion disc. The particles migrate from deep crimson red along the lower arc into brilliant star-white dust at the upper right. Photography of human subjects or standard corporate 3D renders would completely break the technical immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unfeathered horizontal horizon line slicing the generative cosmic void directly into an ultra-clean, clinical white multi-column directory. This deliberate juxtaposition makes the interface feel simultaneously visionary and enterprise-reliable.
MUST
- Retain the binary color split between dark cosmic hero and immaculate white footer without gradient blending.
- Use tight 4-6px radii on inputs and buttons to preserve technical, engineered aesthetics.
- Maintain generous line height (1.6) on multi-line body text in the dark section to maintain legibility against particle dust.
- Align the left edge of the CTA text strictly with the left edge of the footer brand column.
AVOID
- Never soften the horizontal boundary between the dark hero and white footer with a gradient fade.
- Do not use saturated blues or greens; the accent palette strictly belongs to coral-crimson (#ea382b).
- Avoid fully rounded pill buttons in this layout; stick to 6px border-radius.
- Do not center-align the footer columns or the CTA headline.
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 中尝试 
