Design a dark-mode website section: academic rigor meets modern developer infrastructure in a split midnight-to-daylight canvas.
LAYOUT
The page structure is split into two stark horizontal movements. The top two-thirds is a dark 1280px container split into a 5:7 grid: left side anchors the pill tag, serif headline, descriptive body, dual buttons, and a 3-part feature triad; right side anchors the telemetry card. The bottom movement transitions abruptly into a full-width light footer organized into a 6-column matrix (brand summary, four navigation tiers, and a dedicated newsletter capture).
PALETTE (use these exact hex values)
- #08090E — Obsidian Base: Dominant deep background for the hero section and telemetry backdrop
- #10121C — Telemetry Surface: Dark container background for dashboard previews, cards, and secondary buttons
- #F8F9FC — Porcelain Day: Crisp high-contrast foundation for footer links, legal metadata, and inputs
- #7056F5 — Electric Iris: Primary CTA backgrounds, key metrics, active tab markers, and focal points
- #8B77FD — Lavender Glow: Headline keyword highlight and glow aura behind dashboard visualization
- #1E2235 — Dark Border Slate: Subtle container outlines, table row dividers, and dark button strokes
- #E2E8F0 — Light Border Gray: Subtle borders on light email subscription input and social media icons
- #FFFFFF — Text Pure White: Primary headline text, hero button labels, and high-priority metrics
- #9DA3B4 — Text Muted Lavender: Hero paragraph descriptions, inactive tabs, and telemetry labels
- #0F172A — Text Light Primary: Footer section titles, company logo, and newsletter headlines
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, EB Garamond, Frank Ruhl Libre), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 60px display. Tracking -0.025em. The voice balances intellectual rigor with modern engineering speed. The headline uses an editorial serif (Newsreader / Instrument Serif) that evokes peer-reviewed research and mathematical precision, preventing the product from looking like a toy. All body, dashboard UI, and footer content use Inter, delivering neutral clarity and tabular legibility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a diffuse violet radial atmospheric glow (#7056F5 at roughly 25% opacity with a 120px blur radius) placed strictly behind the telemetry dashboard. The dark dashboard itself sits flat on level 1 (#10121C) with a crisp 1px stroke (#1E2235) rather than a traditional drop shadow. The daylight footer relies completely on flat planes, subtle 1px gray borders (#E2E8F0), and crisp tonal contrast.
IMAGERY
No photographic imagery is used. Visual interest is driven entirely by high-density vector UI representations—specifically an authentic dark-mode analytics console complete with line graphs, tabular evaluation statuses, and telemetry counters. Graphics must look functional, developer-grade, and precise, avoiding decorative 3D abstract shapes or generic marketing illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the radical contrast collision between an editorial serif dark-mode hero featuring a single illuminated violet verb ('reason') and the sudden, razor-sharp cutoff into an ultra-clean, daylight porcelain footer. To execute it properly, the headline must maintain its academic serif weight while the light footer below uses strict slate architecture with zero color bleed.
MUST
- Retain the high-contrast serif font for the main headline to establish an academic, verified tone.
- Isolate the purple keyword accent to exactly one conceptual word in the headline.
- Use a single radial blur (#7056F5 at ~20% opacity) behind the hero telemetry card for depth.
- Keep footer background cleanly divided on #F8F9FC with crisp slate typography (#64748B).
AVOID
- Never use sans-serif for the primary hero display headline.
- Do not extend the dark background into the footer; the stark light footer cut is deliberate.
- Never apply harsh drop shadows; rely on low-opacity violet radial backlight for separation.
- Do not color the entire headline purple; only the focal verb should carry accent tone.
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 中尝试 
