Design a light-mode website section: pristine white enterprise canvas energized by high-velocity spectral violet-to-coral linear gradients.
LAYOUT
Vertically stacked top-to-bottom funnel flow. The top block is a centered conversion hero: pill badge, two-line display headline, two-sentence subcopy, and dual CTA buttons. Below a seamless whitespace break sits a five-column footer: a heavy 40% width left column (brand name, description, newsletter module, social icons) and four equal 15% width link columns. A hairline horizontal border anchors the terminal bottom bar.
PALETTE (use these exact hex values)
- #FFFFFF — Base Surface: Primary background canvas across hero CTA and footer panels
- #F8F7FF — Ambient Violet Tint: Subtle atmospheric wash and backdrop glow behind headline
- #111827 — Deep Onyx Text: Dominant text color for headlines, logo mark, and primary headers
- #4B5563 — Muted Slate Text: Body copy, supporting explanations, and newsletter descriptors
- #6B7280 — Subtle Link Gray: Footer link lists and legal copyright text
- #6366F1 — Electric Indigo: Pill badge status dot, category header text, and gradient origin
- linear-gradient(90deg, #6366F1 0%, #A855F7 50%, #FB7185 100%) — Spectral Gradient: Dynamic headline highlight and primary CTA button fill
- #E5E7EB — Subtle Hairline Border: Dividers between CTA section, footer body, and bottom utility bar
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 20px heading, 52px display. Tracking -0.03em at display, 0.05em on badges. Authoritative, mathematical, and hyper-modern. The geometric sans-serif (Plus Jakarta Sans or Inter) uses robust x-heights and tight negative tracking on display weights to project high-conviction institutional engineering. Open-source Google Fonts (Inter or Plus Jakarta Sans) serve as flawless, cost-free production substitutes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Flat, modern light aesthetic with zero skeuomorphic drop shadows. Depth and visual hierarchy are established entirely through saturated gradient fills against white surfaces and gossamer 1px border dividers (#E5E7EB). Ambient lightness is suggested via subtle spherical wireframe vector lines and diffuse radial purple glows.
IMAGERY
No photographic imagery is present. Visual interest is driven exclusively by abstract math/wireframe vector line work faintly layered in the hero canvas right quadrant. Any added imagery must stick to monochrome product UI captures or precision vector charts.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line headline juxtaposition, where clinical jet-black lettering ('Make better bets.') directly crowns an electric multi-stop purple-to-coral gradient line ('Move faster with agents.'). It instantly communicates technical credibility transitioning into explosive agentic velocity. Never dilute this effect by applying the gradient to multiple paragraphs or non-hero elements.
MUST
- Reserve the spectral purple-to-coral gradient strictly for high-priority CTA actions and the single accent heading line.
- Use uppercase tracking (0.08em) only for the top micro-badge; maintain natural tracking everywhere else.
- Style footer column category headers in tinted indigo (#4338CA) to establish immediate structural clarity over gray links.
- Ensure the hero section background uses an ultra-faint radial glow rather than an aggressive solid gradient fill.
AVOID
- Do not apply drop shadows to the primary CTA button; depth is communicated purely through high-chroma gradient contrast.
- Never use dark background fills in this system; the entire identity relies on airy white negative space.
- Do not render the footer link lists in saturated purple; keep secondary navigation strictly neutral gray (#6B7280).
- Avoid boxy 0px sharp corners; adhere consistently to 8px for controls and inputs.
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 中尝试