Design a light-mode website section: crystalline enterprise robotics meeting deep nautical navy with kinetic ribbon transitions.
LAYOUT
The layout is strictly stacked in two vertical phases. Phase one is a centered, spacious CTA stack: display headline, supportive body paragraph, and a horizontal button cluster. Phase two is a wide 1200px bounded footer organized into a brand summary column, four categorical link columns, and a right-anchored newsletter and contact block, capped with a legal sub-bar.
PALETTE (use these exact hex values)
- #F8FAFD — Canvas Light: Background for the top CTA hero section
- #0E1B2A — Footer Navy: Deep structural background for the multi-column footer
- #0B63E5 — Electric Blue: Primary action button fill, headline emphasis, and accent brand elements
- #0C1929 — Text Primary Light Canvas: CTA headline text and primary dark labels on light surface
- #475569 — Text Secondary Light Canvas: Body copy and subtext in the CTA section
- #FFFFFF — Text Primary Dark Canvas: Column headers, logo title, and highlighted footer titles
- #8EA0B8 — Text Muted Dark Canvas: Navigation links, copyright, contact info, and legal sublinks
- #1E2D42 — Border Dark Subtle: Dividers, newsletter field stroke, and bottom bar separators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 18px subheading, 20px heading, 44px display. Tracking -0.03em at display, 0 at body. Clean, engineered, and corporate-authoritative. The neutral grotesque sans-serif (Inter match) conveys enterprise operational competence, while the high-contrast sizing jump between the 44px headline and 14px link rows establishes immediate clarity without typographic clutter.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is completely flat and planar. No drop shadows or raised cards are used; separation is established strictly through high-contrast boundary changes (light canvas meeting dark navy) and crisp 1px strokes (#1E2D42) for form inputs and dividers.
IMAGERY
The only graphic asset is the flowing, abstract vector ribbon along the bottom edge of the CTA section, blending icy cyan (#CBE8F7) and royal blue (#0B63E5) against white. Photography and 3D renders are entirely absent in favor of clean data-density and vector precision.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline transitioning over a multi-layered cyan-to-cobalt ribbon wave into a midnight navy footer. Misuse typically occurs by omitting the vector ribbon, which causes the light-to-dark transition to feel like a harsh render clipping error rather than an intentional atmospheric horizon.
MUST
- Retain the sharp shift from pale gradient CTA canvas directly into the dark #0E1B2A footer.
- Highlight key verbs or phrases in the display header with electric blue (#0B63E5).
- Keep footer column typography disciplined with 14px muted text (#8EA0B8) at 12px row gaps.
- Use a vertical thin border separator between link lists and newsletter subscription column.
AVOID
- Do not round buttons or inputs with fully rounded pill radii (keep at 6px).
- Do not use dark backgrounds for the top CTA; the stark light-to-dark transition is foundational.
- Never drop link contrast in the footer below #8EA0B8 against the dark navy base.
- Do not remove the organic layered cyan ribbon at the threshold between sections.
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 中尝试 
