Design a light-mode website section: clinical corporate white editorial split seamlessly against an electric neon-lit technical deep-space diagram.
LAYOUT
The header spans full-width with a left logo, centered category navigation, and right-aligned authentication actions. Below, the hero splits into two distinct halves: a left-aligned vertical stack (category pill, H1, paragraph, dual buttons, trust card) and a right-aligned dark tech canvas containing a 4-step horizontal stepper above a 3-layer tiered schematic, sealed by a compliance footer bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background for the left column, navigation header, and metric cards.
- #2357F6 — Electric Cobalt: Primary CTA fill, headline accent span, badge bullet, and active icon strokes.
- #070B19 — Dark Tech Void: Background container fill for the right-side technical architecture diagram.
- #0C111D — Ink Slate: Primary typography for headlines, logo text, and high-emphasis labels.
- #4B5563 — Muted Slate: Body paragraph copy, navigation items, and secondary microcopy.
- #E2E8F0 — Subtle Border: Outlines for secondary CTA buttons and the bottom-left trust metric card.
- #38BDF8 — Cyan Glow: Glow highlights on the process nodes, vertical seam gradient, and AI layer plane.
- #F97316 — Amber Ember: Warm radiant fringe along the far right margin to offset cold blues.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, SF Pro Display), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px heading, 60px display. Tracking -0.03em at display, 0.05em at caps. The geometric sans carries an assertive, precise cadence suited for modern enterprise counsel. Tight display tracking (-0.035em) gives the 60px headline structural authority, while widely tracked uppercase labels (0.08em) evoke technical rigor. Inter or Plus Jakarta Sans easily delivers this balanced legal-tech tone.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely via luminance contrast rather than traditional blurred shadows. On the light side, elements sit flush with crisp hairline borders (#e2e8f0). On the dark side, layered planes employ semi-transparent backdrop blurs and glowing linear boundary strokes that emit localized radial light.
IMAGERY
Avoids human photography entirely, replacing it with an authoritative digital system diagram. The aesthetic combines clean schematic iconography, isometric frosted glass plates, and subtle neon atmospheric gradients. Anything illustrative, cartoony, or literal stock photography would immediately break the elite enterprise tone.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric light-to-dark transition boundary, where crisp white corporate legal editorial smoothly cross-fades into a backlit dark-mode computational engine diagram with neon-edged glass shelves.
MUST
- Keep the left content zone pure white with ample breathing room to preserve legal gravity.
- Restrict the radiant cobalt (#2357f6) in headings to no more than 2-3 critical anchor words.
- Maintain a seamless vertical gradient transition between the white canvas and the dark technical diagram.
- Use geometric dashed lines (1px stroke, 3px dash) to link circular process milestones horizontally.
AVOID
- Do not cast drop shadows under the white trust proof card; rely purely on delicate 1px borders.
- Do not color the entire headline in blue; doing so destroys the editorial weight of the black text.
- Avoid placing photographic or realistic stock imagery inside the technical right-hand void.
- Do not use high-opacity solid backgrounds for the architecture tiers; they must remain translucent.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
