Design a dark-mode website section: deep navy substrates illuminated by spectral vertical fluting and crisp precision typography for high-stakes counsel.
LAYOUT
The section adopts a high-impact two-tier hierarchy. The top tier is an asymmetric Bento grid with a 60% hero conversion card on the left paired with two 40% stacked feature cards on the right separated by 20px gutters. Directly beneath, the layout shifts to a structured 6-column enterprise footer grid containing brand meta, four link silos, and an input group, terminating in a horizontal utility baseline.
PALETTE (use these exact hex values)
- #07090E — Canvas Ground: Deepest background tone covering page floor and lower footer bedrock.
- #0C111A — Card Surface: Base dark card fill providing contrast against the darker canvas.
- #1A2232 — Border Subtle: Hairline perimeter stroke on cards, inputs, and icon frames.
- #4F6BFF — Action Indigo: Primary button fill and submit button indicator for high-intent actions.
- linear-gradient(135deg, #10B2D4 0%, #4F6BFF 45%, #D946EF 100%) — Spectral Gradient: Volumetric fluted backdrop inside key feature cards and light accents.
- #FFFFFF — Text Primary: Primary headings, brand logo, and active control labels.
- #8E9BAE — Text Secondary: Descriptive body copy, input placeholders, and inactive links.
- #526071 — Text Tertiary: Footer subheaders, meta labels, and copyright notices.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 40px display. Tracking -0.025em at large scale, 0.08em for uppercase tokens. Clean, analytical, and authoritative. A modern engineered grotesque typeface (Inter/Plus Jakarta match) gives legal tech the feeling of high-speed computation and infrastructure. Tightly kerned large headings project institutional weight, while generous line-height on small slate metadata ensures long-term legibility.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through optical luminosity and dark value stacking rather than drop shadows. Base canvas sits at the lowest luminosity (#07090E), while card components (#0C111A) are delineated by 1px translucent slate borders (#1A2232). Interior lighting blooms forward via underlying spectral gradients, creating an illusion of backlit optical glass.
IMAGERY
Abstract generative light ribbons resembling vertical pleated silks or optical fiber arrays. The colors range seamlessly across cyan (#10B2D4), ultramarine (#4F6BFF), and fuchsia (#D946EF) over dark grounds. Photography of people, stock offices, or representational illustration is strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vertical chromatic light curtain—a fluted, pleated ribbon of cyan-to-magenta spectral light emerging from the dark canvas within Bento cards. Commonly misused by making the gradient too chaotic or opaque, it works here because it is strictly masked within dark container geometry and stays subdued behind crisp white text.
MUST
- Use tight negative tracking (-0.02em to -0.03em) exclusively on headers above 24px.
- Restrict the spectral vertical fluting texture to background accents behind white text.
- Maintain consistent 20px radius across all primary bento container cards.
- Style section kickers in uppercase 12px tracking with exact 0.08em letterspacing.
AVOID
- Do not introduce pure black (#000000); preserve the midnight blue floor (#07090E).
- Do not apply spectral multi-stop gradients as text fills or button backgrounds.
- Do not use drop shadows or heavy blurs; depth is generated strictly by edge borders and luminous backdrops.
- Do not mix serif typefaces into this strictly technical sans-serif architecture.
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 中尝试 
