Design a dark-mode website section: deep oceanic dark canvas illuminated by emerald nebula particle fields and precise cobalt interactive accents.
LAYOUT
The view features a floating rounded billboard section directly above a full-width structured footer. Inside the billboard, content flows from top status pill to a 48px display headline, supporting paragraph, paired CTA buttons, and a bottom row of four icon trust signals. Below, the footer is organized into a brand summary column, four categorical link stacks, and a newsletter subscription block.
PALETTE (use these exact hex values)
- #060d17 — Canvas Midnight: Deepest canvas background behind the footer and surrounding layout
- #040914 — Container Navy: Background fill of the prominent hero CTA section card
- #14233a — Border Subtle: Hairline 1px borders on the CTA card, pill badge, and newsletter input
- #1a56db — Cobalt Blue: Primary action button fill for Start Free and Subscribe
- #40e0a0 — Emerald Mint: Highlighted hero text 'AI', badge indicator dot, and particle glow highlights
- #ffffff — Text Crisp White: Primary headings, active brand mark, and high-emphasis labels
- #94a3b8 — Text Soft Slate: Body copy, supporting descriptions, and primary footer column links
- #475569 — Text Muted Navy: Input placeholder text, footer category headings, and copyright text
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px heading-lg. Tracking -0.03em at display, 0.05em at caps metadata. Clean, neutral, and hyper-modern grotesque sans-serif (Inter / Plus Jakarta Sans) tuned for technical authority. The heavy 700 display weight communicates institutional stability, while light-weight body copy maintains legibility in dark mode.
GEOMETRY & SPACING
Corner radii — cards 28px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through lighting and luminance layering rather than drop shadows. Bioluminescent cyan-emerald particles radiate light over a deep #040914 surface, bounded by 1px #14233a borders that softly separate elevation planes.
IMAGERY
The visual identity is defined by algorithmic, 3D particle vortex fields composed of thousands of points graded from cyan to bright emerald. They suggest computational flow and neural clusters; photographic assets or cartoon vector art would completely degrade the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-sided emerald-and-teal particle storm framing a centered typography cluster within a large rounded dark slate container. It evokes organic artificial intelligence without cluttering the readable central column.
MUST
- Retain the sharp contrast between pure white headline text and the dark navy #040914 billboard.
- Highlight specific high-impact acronyms like 'AI' using vibrant mint #40e0a0.
- Frame the billboard with dual, asymmetrical glowing organic stardust particle fields.
- Group trust proof points in a single horizontal four-column row at the base of the card.
AVOID
- Do not use sharp 0px corners; the container requires a smooth 28px radius.
- Never replace the particulate point-cloud art with flat vector illustrations or stock photography.
- Avoid bright white backgrounds or light mode overlays that break dark-canvas immersion.
- Do not drop the dashed baseline underline on the secondary 'Book a Demo' trigger.
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 中尝试