Design a dark-mode website section: deep navy void pierced by a luminous particle curve and warm coral action points.
LAYOUT
Vertically stacked top-to-bottom rhythm. The upper half features a centered hero CTA block with pill tag, display headline, body copy, and twin button actions. Beneath a subtle full-width divider line sits a six-column footer architecture containing brand bio, four nav stacks, and an email capture card, resolving in a copyright baseline.
PALETTE (use these exact hex values)
- #060B13 — Cosmic Void Canvas: Deepest structural background layer underlying the entire screen.
- #0B1320 — Subtle Surface Elevation: Background tone for embedded input bars and social media icon enclosures.
- #162232 — Divider Midnight: Hairline separator lines dividing the CTA body, footer grid, and legal baseline.
- #E05A47 — Coral Accent Primary: Primary interactive color applied to main CTA buttons, submit arrows, and pill tags.
- #38BDF8 — Luminous Cyan Flare: Top particle curve illumination fading from electrical blue into cosmic dark.
- #FFFFFF — Text Crisp White: High-emphasis display typography, company logotype, and active button text.
- #8C9BAE — Text Slate Muted: Body descriptions, footer navigation link states, and copyright statements.
- #4F5E72 — Text Ghost: Input placeholder text, inactive borders, and legal pipe dividers.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.02em at display, 0.08em on uppercase labels. Disciplined, modern B2B SaaS clarity. The clean geometric grotesque sans-serif delivers an authoritative yet frictionless developer-grade feel. Free Google Fonts like Inter or Plus Jakarta Sans are pixel-perfect equivalents for production.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than traditional drop shadows. The dark midnight blue backdrop acts as base zero, over which an atmospheric cyan-and-coral particle arc shines from the bottom-right perimeter, illuminating surface items naturally.
IMAGERY
Abstract cosmic particle geometry. The dominant visual asset is a curved planetary rim composed of dense digital stipple dots that transition along an arc from cool electric blue to burning coral-orange. Vector or realistic photography is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping celestial particle arc curving from cyan in deep space down to incandescent coral along the right horizon, perfectly mirroring the coral CTA button on the left.
MUST
- Keep the primary headline tightly wrapped across two centered lines for maximum punch.
- Restrict the vibrant coral (#E05A47) exclusively to interactive affordances and key branding accents.
- Maintain the continuous thin 1px horizontal rule (#162232) cleanly separating the CTA from footer links.
- Ensure the glowing planetary curved graphic remains partially masked in the right background without obscuring text.
AVOID
- Do not introduce pure black (#000000); maintain the tinted midnight navy (#060B13).
- Do not apply drop shadows to buttons; depth is governed by background luminosity, not box-shadows.
- Never make footer column links bright white; reserve white strictly for headers and primary CTAs.
- Do not make the newsletter input fully pill-shaped; keep it at an 8px radius matching other inputs.
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 中尝试