Design a light-mode website section: ethereal daylight precision descending into deep oceanic utility.
LAYOUT
Structured top-to-bottom in two major zones. The upper CTA zone is a 2-column split (roughly 55% copy and action cluster on the left, 45% visual metric simulation on the right). The lower footer zone opens with a 6-column horizontal grid (1 brand column, 4 navigation link stacks, 1 newsletter column) culminating in a thin divider and bottom legal sub-bar.
PALETTE (use these exact hex values)
- #FAFCFF — Canvas Daylight: Primary background for the CTA section with subtle ambient glow
- #0B131E — Midnight Footer: Base canvas for footer navigation and copyright sub-bar
- #E85B51 — Coral Signal: Primary CTA fill, icon accent, and leftward radial atmospheric glow
- #0F172A — Deep Text: Main headline typography in light CTA canvas
- #5D6A7E — Muted Slate: Body copy on light canvas and footer link labels
- #FFFFFF — Pure White: Primary headings, brand name, and CTA button text on dark surfaces
- #38BDF8 — Electric Cyan: Network node highlights, line graphs, and eyebrow gradient terminal
- #1E2C3F — Dark Border Slate: Outlines on dark inputs, social squares, and subtle footer 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 on headline, +0.08em on kickers. Pragmatic, scientific, and enterprise-grade. The clean geometric neo-grotesque sans-serif projects institutional stability and high-tech velocity, balancing confident heavy titles with light, highly legible micro-labels. Inter or Plus Jakarta Sans are optimal open-source replacements providing the exact technical cadence observed.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is flattened and atmospheric rather than skeuomorphic. The light hero achieves depth through faint ambient radial glows behind the network art, combined with backdrop-filtered translucent glass panels. In the footer, elevation is purely tonal, utilizing dark nested surface values (#111B27 on #0B131E) with hairline slate outlines.
IMAGERY
Abstract data topography rendered through hair-thin sinuous bezier curves and glowing connection nodes. Faint ambient coral and blue orbs blur in the background to suggest computational activity and power transmission. Literal photography of solar panels or turbines is absent, replaced by abstract, software-centric telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ethereal, light-mode topological CTA block sitting directly atop a deep midnight obsidian footer, unified by glowing node coordinates.
MUST
- Keep the horizontal split between daylight CTA (#FAFCFF) and midnight footer (#0B131E) sharp and unbordered.
- Use soft linear paths with micro circular data nodes in the illustration area to evoke infrastructure networks.
- Set footer category headers strictly to uppercase with at least 0.08em letter spacing.
- Keep the metric preview cards semi-translucent to let the background network vector lines show through.
AVOID
- Do not add drop shadows to the metric cards; use border-subtlety and glass translucency instead.
- Do not make the daylight CTA background pure sterile #FFFFFF; it requires gentle atmospheric tinting.
- Do not use dark rounded pills (radius 999px); stick to uniform 8-10px squircle geometry.
- Do not crowd the display heading with multi-color highlights; keep headline text strictly dark charcoal.
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 中尝试 
