Design a light-mode website section: crystalline operational light transitioning into deep telemetry night with stippled algorithmic depth.
LAYOUT
The composition follows a top-down progression from cognitive introduction to system foundation. The upper half features a dual-column hero layout with left-aligned typographic pitch and right-aligned preview console. Below this daylight zone, the page snaps decisively into a four-to-five column dark footer layout featuring brand identity and newsletter intake on the left and neatly categorized reference links on the right, capped by an edge-to-edge legal sub-footer.
PALETTE (use these exact hex values)
- #020817 — Abyssal Slate: Deep structural canvas for the comprehensive footer, creating high-contrast night grounding.
- #f8fafc — Luminous Off White: High-key primary canvas for hero section and daylight workspace environment.
- #ffffff — Pure White: Dashboard preview container background, light-mode card surfaces, and primary footer typography.
- #1d6bf3 — Electric Royal: Primary interactive button fill, active metric curves, logo insignia background, and link accents.
- linear-gradient(135deg, #1d6bf3 0%, #6366f1 100%) — Gradient Indigo Accent: Hero display text gradient highlight and subtle luminous background particle tints.
- #0f172a — Charcoal Black: Primary high-contrast typography in the daylight hero section.
- #94a3b8 — Muted Slate: Secondary captions, inactive navigation links in footer columns, and metric micro-labels.
- #10b981 — Telemetry Emerald: System status indicators, positive delta percentage pills, and live verification checks.
- #0f1d32 — Subtle Border Dark: Hairline division between footer columns, newsletter input border, and social icon boundaries.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, calculated, and distinctly enterprise AI-native. Utilizing Plus Jakarta Sans (or Inter), the family balances modern humanist clarity with the geometric rigour of high-performance developer tools. The tight display tracking (-0.035em) gives headlines an engineered punch, while 13px body metadata in muted slate ensures effortless scanning across high-density reference matrices.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through atmospheric contrast rather than structural layering. The daylight hero uses an ultra-soft 0 20px 40px -15px rgba(0,0,0,0.08) drop shadow on the dashboard card to gently detach it from the #f8fafc backdrop. In the dark footer section, elevation is flat and architectural, relying solely on 1px stroke borders (#0f1d32) and deep tonal shifts to distinguish inputs and buttons from the void canvas.
IMAGERY
Visual assets consist of algorithmic generative dot-matrix fields, stippled sphere volumes, and vector audio-style vertical frequency lines flanking the viewport margins. Dashboard interfaces inside the preview card utilize clean vector sparklines, SVG line charts with subtle area fills, and micro-avatar badges. Photographic imagery is entirely absent in favor of clinical, computational vector telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The defining structural move is the razor-sharp transition between an airy, high-key operational daylight hero and an abyssal starry-slate footer flanked by stippled point-cloud particle fields. This dual-state canvas visually signals that while using the platform is clear and simple (light mode), the underlying engine runs on deep, complex enterprise intelligence (dark mode). A common misuse is softening the boundary with a muddy gradient fade rather than maintaining the crisp, authoritative edge cut.
MUST
- Maintain strict binary split between the clean daylight hero canvas and the midnight footer foundation.
- Render the keyword accent in headings using a linear gradient from royal blue #1d6bf3 to indigo #6366f1.
- Pair system verification metrics with explicit 6px emerald status markers to signal real-time telemetry.
- Confine footer newsletter components to a single integrated input row with nested primary blue button.
AVOID
- Never add noisy high-contrast drop shadows underneath dark footer UI elements.
- Do not use high-saturation warm colors (red, orange, yellow) outside of critical system failure states.
- Avoid pill-shaped roundings (9999px) on footer input fields or social buttons; keep them strictly at 8px.
- Do not center footer navigation columns; maintain strict left-alignment across all link stacks.
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 中尝试 
