Design a dark-mode website section: deep indigo canvas energized by high-speed fiber-optic light streaks framing a clinical, high-contrast porcelain command center.
LAYOUT
The header sits flush across a 1240px container with a left logo, centered text links, and right-aligned dual action links. The hero splits cleanly into an asymmetric two-column composition: the left 40% holds the value proposition stack and a floating metric card, while the right 60% holds the expansive command center mockup and a bottom row of three feature capability cards.
PALETTE (use these exact hex values)
- #0b0d19 — Obsidian Indigo: Deep foundational background canvas holding the luminous atmospheric effects and hero text
- #ffffff — Porcelain White: Primary surface for the main app simulation card, delivering crisp daytime software contrast
- #131628 — Dark Glass Slate: Opaque dark container for the bottom-left metric proof card with subtle border framing
- linear-gradient(135deg, #f26a6a 0%, #9061f9 100%) — Sunrise Gradient: High-conversion CTA background and brand iconography accent delivering warmth and urgency
- #38bdf8 — Cyan Luminescence: Directional top-right light streaks indicating fiber-optic speed and digital outbound transmission
- #0f172a — Midnight Slate: Primary high-contrast text color used across all light-surface cards and tables
- #94a3b8 — Muted Steel: Secondary hero typography, navigation links, and descriptive sub-labels on dark surfaces
- #22c55e — Signal Green: Live status indicator dot and positive performance metric badges
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0.06em at uppercase caption. The typographic tone is authoritative, technical, and frictionless. The geometric sans-serif communicates computational precision through tight display tracking, paired with highly legible, relaxed numerals across data tables and KPI summaries.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through chromatic luminescence and surface luminance shifts rather than heavy drop shadows. The backdrop feels vast and distant due to dark indigo tones, while bright light streaks create an illuminated focal stage that pushes the stark white application card forward into the immediate foreground.
IMAGERY
Avoid photographic assets or generic lifestyle imagery. Visual storytelling relies entirely on stylized, crisp UI vector wireframes, subtle data sparklines, and directional streaks of cyan and coral light resembling high-speed fiber optics.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the striking 'daylight inside nocturne' contrast: housing an immaculate, dense, white software dashboard directly inside an atmospheric deep-space indigo canvas illuminated by directional cyan and sunset-pink light beams. Misusing this by turning the dashboard dark destroys the visual punch and makes the UI recede into the background.
MUST
- Retain the high-contrast tension between the dark void background and the clean white dashboard mockup.
- Use tight letter-spacing (-0.035em) on display headlines above 48px to preserve typographic density.
- Apply subtle colored glass borders (1px solid #232742) to dark UI cards instead of heavy drop shadows.
- Wrap operational data and software UI components in pure white (#ffffff) to ensure clinical readability.
AVOID
- Do not invert the software mockup to dark mode; the light card against dark canvas is intentional identity.
- Do not use generic gray drop shadows on the dark background where light emission should dictate depth.
- Avoid centering hero text; keep the left column strictly left-aligned against the product preview.
- Do not make pill badges wider than their content; maintain snug 8px 16px padding.
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 中尝试 
