Design a light-mode website section: dual-realm technical clarity: luminous lavender-frosted hero transitioning sharply into an obsidian architectural command console.
LAYOUT
The page transitions vertically from an open split hero into a dense six-column modular footer. The hero allocates 45% of width to the text stack and CTA cluster, while the remaining 55% houses the dynamic topology graph. The footer is bounded by a full-width dark backdrop, organizing brand info on the far left, four link columns in the center, and a newsletter capture block on the far right, terminating with a discreet baseline legal/status strip.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Light: Primary surface for the hero section and diagram presentation area.
- #080E1A — Console Abyss: Base dark background for the entire footer block and sub-footer.
- #FFFFFF — Pure White: Background for floating interactive nodes and primary diagram elements.
- #2B59FF — Cobalt Engine: Primary call to action background, gradient starts, and brand vectors.
- #B55FE6 — Orchid Pulse: Hero serif gradient terminal color and node badge highlight accent.
- linear-gradient(135deg, #2B59FF 0%, #B55FE6 100%) — Brand Gradient: Gradient fill applied to italic brand title and newsletter subscribe CTA.
- #0B101D — Ink Primary: Primary headlines and heavy display text on light surfaces.
- #5D6678 — Slate Neutral: Paragraph body copy on light surfaces and secondary footer links.
- #F1F5F9 — Starlight White: Column headings and high-contrast text in dark footer.
- #1E293B — Midnight Border: Dividers, inputs, and icon square borders in dark mode footer.
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Playfair Display, Source Serif Pro), weights 400/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 54px display. Tracking -0.03em. The typography pairs the literary, intellectual gravitas of an editorial serif with the clinical legibility of a digital system sans. The serif headline brings an aura of high trust, academic rigor, and maturity, especially when italicized with gradient styling. For open-source or web use, Newsreader or Instrument Serif alongside Inter establishes this exact cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through light and soft tonal gradients rather than muddy shadows. On the light canvas, cards use ultra-soft multi-layer blurs (0 6px 24px rgba(43,89,255,0.06)) over ambient radial backlights. The dark footer remains almost completely planar, relying on 1px stroke boundaries (#1E293B) and surface value shifts rather than drop shadows.
IMAGERY
Diagrammatic visualisations take the place of photography, utilizing 3D-styled vector cylinders with translucent gradients and isometric precision. Floating node cards mimic developer architecture blueprints, connected by pale ortholine vectors with circular port pins. Abstract illustrative art or stock people photos are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive italicised gradient serif wordmark embedded directly inside the primary headline, echoed visually by the concentric illuminated rings encircling the centralized database sandbox node.
MUST
- Pair classic high-contrast serif headlines with modern geometric sans for micro-copy.
- Use subtle, circuit-style curved connector lines (1px #CAD5E2) between floating node cards.
- Ensure the hero brand accent mixes #2B59FF and #B55FE6 via an italicised serif font style.
- Keep footer column titles in 11px uppercase with tracked letter-spacing (+0.08em).
AVOID
- Do not use dark mode in the hero architecture diagram; it must remain pristine white and soft blue.
- Never substitute the serif headline with an all-sans typeface; the editorial tension is vital.
- Avoid sharp right-angled rectangles; cards must hold at least 14px border radii, CTAs 9999px.
- Do not clutter the dark footer with heavy solid white borders; keep borders at #1E293B.
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 中尝试 
