Design a light-mode website section: luminous ethereal light field grounded by an obsidian footer for enterprise ai data infrastructure.
LAYOUT
The layout features a centered single-column hero block with headline, subcopy, button cluster, and trust markers aligned along the vertical axis. Floating contextual icon nodes flank the copy within an expansive max-width container. The lower section transitions into an asymmetrical 6-column grid footer, spanning brand meta, four categorized link lists, and a dedicated newsletter capture block, resolved by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #F8FAFD — Atmospheric Light Canvas: Primary light canvas background hosting the headline, subcopy, and action buttons
- #080D1A — Obsidian Ground: Deep structural background for the primary multi-column footer container
- #2563EB — Vibrant Royal: Primary action background on CTA buttons, brand icon highlights, and newsletter submission pill
- #38BDF8 — Cyan Luminescence: Ambient glow, soft blurred ribbon trails, and floating data particle accents
- #0F172A — Midnight Title: Main display headline typography on the upper light canvas
- #475569 — Slate Body: Secondary description copy and trust indicators on the light background
- #FFFFFF — Pure White: Footer column headers, input field text, and primary button labels
- #94A3B8 — Muted Steel: Footer navigation links, descriptive text, and legal copyright line
- #0F172A — Dark Inset Field: Subtle dark fill for the newsletter input field container
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 16px subheading, 18px body-lg, 48px display. Tracking -0.02em at display, 0 at body. The typographic tone is architectural, rational, and modern, conveyed through clean neo-grotesque letterforms with tall x-heights and tight display tracking (-0.025em). This styling signals enterprise readiness and algorithmic precision, removing decorative flair in favor of immediate scanning clarity. Plus Jakarta Sans or Inter serve as the ideal engine for this aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth on the light canvas is conveyed through soft atmospheric light fields, faint luminous cyan glows, and diffuse ambient blurs rather than hard box shadows. In the footer, depth is flat and structural, relying solely on surface tone differentiation between the base dark navy (#080D1A) and slightly elevated input containers (#0E1526).
IMAGERY
Abstract wave filaments, glowing particle meshes, and luminescent gradient sweeps evoke high-speed data flow and intelligence capture. Icons are minimal, enclosed in translucent rounded floating chips with pastel colored strokes (emerald, cyan, amber). Photography and illustrative characters are strictly avoided in favor of crisp infrastructure metaphors.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the stark horizon boundary where a glowing, cyan-infused light canvas terminates flush against an obsidian-dark architectural footer. This deliberate chromatic split bridges consumer-grade AI elegance with enterprise-grade data security in a single viewport.
MUST
- Keep the light-to-dark canvas transition sharp and planar without gradient masking between sections.
- Pair primary blue buttons with circular inset icon pills for consistent directional kinetic motion.
- Maintain generous line height (1.5 to 1.6) on body copy to ensure high legibility against airy backdrops.
- Set footer link columns with a strict 12px vertical rhythm and muted slate typography (#94A3B8).
AVOID
- Do not add complex multi-colored borders or heavy dark outlines to buttons on the light canvas.
- Avoid cluttering the floating ribbon background with dense iconography or opaque cards.
- Never use pure black (#000000) for the footer; stick to the deep obsidian navy (#080D1A).
- Do not center-align the footer links or newsletter intake container; keep them left-aligned within their grid columns.
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 中尝试 
