Design a light-mode website section: luminous spectral refraction meeting crisp deep-navy infrastructure and analytical clarity.
LAYOUT
Structured in two distinct stacked macro-blocks: an airy left-aligned hero block sitting against edge-to-edge optical textures, followed immediately by an architectural 6-column footer grid. The hero content aligns firmly to the left half with comfortable white space to the right. The footer distributes 4 categorical navigation columns centrally, brand metadata to the far left, and newsletter capture to the far right, terminating in a single-line horizontal legal rail.
PALETTE (use these exact hex values)
- #0a1017 — Footer Deep Navy: structural solid background grounding the entire multi-column footer block
- linear-gradient(90deg, #fceee8 0%, #fae8d4 30%, #e2f7ea 65%, #8fd8f7 85%, #5a8fee 100%) — Spectral Backdrop: ambient textured hero backdrop representing multi-spectral earth imaging and light diffraction
- #ef5350 — Coral Ember: primary conversion action fill for hero demo button and newsletter submit
- #111827 — Charcoal Black: primary high-contrast display text against the light refracted background
- #374151 — Slate Body: subordinate copy in the hero section
- #ffffff — Pure White: high-contrast text on coral buttons and brand logotype in dark footer
- #94a3b8 — Cool Steel Muted: body links, categories, descriptions, and legal footnotes in the dark footer
- #34d399 — Status Jade: live operational status pip within the top eyebrow badge
- #1e293b — Border Dark Charcoal: subtle boundaries for input fields, divider rules, and social icon rings
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 17px body-lg, 20px subheading, 52px display. Tracking -0.03em at display, 0.08em at uppercase labels. Clean, technical neo-grotesque sans-serif (Inter / Geist match) exuding engineering precision and boardroom reliability. The type pairs high display weights with tight -0.03em tracking against wide-tracked uppercase micro-labels for an aerospace instrumentation feel. It is neutral, legible, and unpretentious, allowing the spectral colors to provide the emotional resonance.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved solely through stark atmospheric planar contrast rather than layered drop shadows. The boundary between the luminous light spectral top half and the deep navy base (#0a1017) provides an absolute spatial horizon. Sub-elements like input boxes recede through dark border values rather than inset shadows.
IMAGERY
The upper background mimics optical dispersion through fluted glass or spectral sensor data, moving across warm sunset hues into vivid electric teal and blue vertical micro-lines. It avoids literal drone photography in this view, relying on abstract physical optics to signal precision sensing and spectral telemetry. Any photographic insertions must avoid muddy earth tones that clash with the clean spectral light.
SIGNATURE DETAIL — the thing that makes this design itself
The sharp bisection between a multi-spectral fluted light diffusion field and a deep obsidian command-center footer, unified by identical coral action triggers (#ef5350). To execute it correctly, ensure the spectral gradient looks like refracted physical light with delicate vertical lineation, not a generic blurry radial mesh.
MUST
- Retain the sharp horizontal dividing line between the light spectral hero and deep navy footer.
- Pair the coral primary action color (#ef5350) consistently across both light and dark background contexts.
- Use uppercase tracking (0.08em) strictly on small 11px category labels and eyebrow status pills.
- Keep footer column headers in pure white to maintain distinct category groupings from muted slate links.
AVOID
- Do not add drop shadows or glow effects to buttons or input fields.
- Do not use dark backgrounds inside the hero section; reserve #0a1017 entirely for the footer base.
- Avoid pill radiuses on buttons; keep action buttons strictly at 8px rounded corners.
- Do not allow the spectral hero background to muddy text contrast; keep text zone clear and pale.
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 中尝试 
