Design a dark-mode website section: deep navy twilight illuminated by kinetic cyan-emerald fiber optics and precision data typography.
LAYOUT
The layout follows a two-tier stacked hierarchy enclosed in a centered max-width container (~1280px). The top section is a self-contained heroic CTA module with a 60/40 text-to-graphic split on top and a 4-column feature row below. The bottom tier is a comprehensive multi-column footer consisting of brand/socials on the far left, four link directories in the center, and a newsletter capture form on the right, anchored by a legal sub-footer.
PALETTE (use these exact hex values)
- #020813 — Canvas Background: Root page background behind containers and lower footer section
- #061325 — Card Surface: Background fill for the prominent elevated CTA banner container
- #0F2B48 — Border Subtle: Hairline 1px borders on the CTA card, dividers, and input field
- #38D9A9 — Emerald Mint: Primary button fill, accented headline text, and brand logo mark
- #4EEDB8 — Cyan Highlight: Gradient stop and icon glow tint on the kinetic particle wave
- #FFFFFF — Text Primary: High-emphasis display headlines, titles, and button labels
- #8B9EB7 — Text Secondary: Subtext, descriptive body paragraphs, footer navigation links, and icons
- #4B617C — Text Muted: Copyright text, placeholder text in input fields, and inactive links
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 48px display. Tracking -0.025em at display, 0 at body. Clean, technical, and authoritative sans-serif styling matching Inter or Geist. Tight tracking on large display headings conveys an engineered, modern enterprise SaaS feel, while standard tracking on body text ensures high legibility against deep dark surfaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and relies on tonal surface progression. The ground level starts at void navy (#020813), elevates to card container level at #061325, and gains definition through a 1px border (#0F2B48) rather than drop shadows. Contrast and focal pull are generated via glowing cyan fiber-optic illumination on dark planes.
IMAGERY
Abstract 3D ray-traced wave graphics featuring fine, luminous cyan-emerald fiber lines and floating bokeh particles. The graphic enters diagonally from the right, tapering off before interfering with left-aligned typographic content. Photorealistic human imagery or flat 2D vector illustrations are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated feature-tray CTA card: a unified dark card housing hero copy, radiant fiber-wave art, and an embedded 4-column value bar divided by hairlines at the bottom. Misuse happens when designers detach the bottom grid into floating cards, destroying the monolithic container architecture.
MUST
- Reserve vibrant mint green (#38D9A9) strictly for core headlines and interactive click targets.
- Use 1px borders (#0F2B48) to delimit sections inside dark surfaces rather than drop shadows.
- Maintain left alignment for all primary CTA typography and value proposition blocks.
- Set secondary text strictly in muted blue-grey (#8B9EB7) to avoid competing with pure white headlines.
AVOID
- Do not use multi-color gradients on text other than clean solid transitions to emerald.
- Never introduce harsh drop shadows; depth is achieved solely through subtle surface fills and luminescence.
- Do not place bright colored backgrounds behind secondary or tertiary links.
- Avoid centered alignment for footer columns or headline text.
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 中尝试 
