Design a dark-mode website section: deep navy obsidian canvas pierced by vertical fiber-optic light curtains and disciplined glassy legal telemetry.
LAYOUT
Asymmetric two-column split within a 1280px centered container. The left 55% hosts the editorial sequence (eyebrow, display title, descriptive paragraph, dual CTA cluster, and a 4-part horizontal credential rail). The right 45% is dedicated to atmospheric vertical light trails framing the floating glass dashboard card. The entire dark section concludes with an abrupt curve into a bright daylight content sheet.
PALETTE (use these exact hex values)
- #030914 — Abyssal Void: Dominant background canvas across the entire hero zone
- #08162b — Glass Slate: Fill for elevated dashboard card preview with low opacity
- #1e3048 — Subtle Stroke: Card borders, divider lines, and pill outlines
- #1a6aff — Hyper Blue: Primary CTA fill, focus states, and text gradient start
- #38bdf8 — Electric Cyan: Eyebrow text, secondary glowing filaments, and completed badges
- #f59e0b — Warp Amber: Warm background light columns providing chromatic tension against cyan
- #ffffff — Signal White: Primary headings, brand logo, and active navigational items
- #94a3b8 — Cool Slate: Body paragraphs, metadata subtitles, and inactive nav labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 56px display. Tracking -0.025em for display titles, +0.08em for uppercase tracking. The typography is clinical, modern, and authoritative. Using a precision neo-grotesque like Inter with tight negative tracking on large scales communicates legal gravitas combined with Silicon Valley engineering velocity. The clean sans-serif geometry avoids archaic serif legal clichés, instantly framing the product as an operating system rather than a traditional firm.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created via atmospheric luminous backlighting rather than traditional box-shadows. The preview card sits over a blurred luminous core, catching cyan ambient rim-light via a 1px border (rgba(56, 189, 248, 0.25)). Below the fold, the stark white sheet physically layers over the hero with a 24px top radius and clean elevation contrast.
IMAGERY
No photographic elements are present. The imagery language relies entirely on high-tech generative abstraction: razor-sharp vertical data streaks evoking data centers or fiber optics, contrasted with an architectural UI simulation widget featuring vector radars and minimalist sparkles.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-temperature vertical light curtain behind the UI preview card—where cool data-stream cyans cross-fade into warm amber filaments, perfectly framing a glassmorphic dashboard card without blowing out text contrast.
MUST
- Keep background vertical lines thin and fiber-like; blur slightly to simulate depth of field.
- Ensure the hero title uses -0.03em tracking for strict, confident editorial density.
- Restrict the amber tone exclusively to background light trails; never use it on action buttons.
- Anchor the right preview card with a hairline stroke tinted by ambient cyan reflection.
AVOID
- Do not introduce rounded cartoonish illustrations; imagery must remain strictly technical and schematic.
- Do not saturate the left side with color blooms; reserve glowing light columns for the right quadrant.
- Do not allow the blue-to-cyan text gradient to span more than two words.
- Do not use drop shadows on dark mode buttons; use surface luminance and sharp borders instead.
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 中尝试 
