Design a dark-mode website section: deep space infrastructure illuminated by chromatic stardust and precision glass telemetry panels.
LAYOUT
The top CTA viewport is organized as an asymmetrical two-column split: text, conversion buttons, and trust indicators on the left 48%, with an elevated interactive dashboard window occupying the right 52%. Below, the layout transitions to a dense 5-column technical directory footer, concluding with a single horizontal legal bar bounded at top and bottom by spatial silence.
PALETTE (use these exact hex values)
- #050711 — Deep Cosmos Void: Primary hero and canvas background color absorbing ambient particle light.
- #020307 — Abyssal Ground: Deepest canvas background behind the site footer and bottom copyright baseline.
- #0b0f19 — Dashboard Obsidian: Solid background fill for the floating telemetry panel and interactive cards.
- linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #f97316 100%) — Primary CTA Gradient: High-priority conversion actions, headline accent wordmark, and submit buttons.
- #ffffff — Starlight White: High-contrast headings, active menu items, and primary button typography.
- #94a3b8 — Subtle Slate: Paragraph copy, input placeholders, inactive tabs, and footer column links.
- #475569 — Muted Horizon: Eyebrow tags, category labels, copyright strings, and subtle metadata.
- #1e293b — Nebula Border: 1px hairline strokes around dashboard containers, secondary buttons, and inputs.
- #22c55e — Terminal Emerald: Live system status pills, HTTP 200 responses, and positive metric deltas.
- #38bdf8 — Electric Cyan: Progress indicators, active telemetry sparks, and storage capacity bars.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px heading, 32px heading-lg, 46px display. Tracking -0.03em at display, 0.08em at uppercase micro. The typographic tone is disciplined, modern, and developer-centric. By employing an unadorned neo-grotesque sans (Inter) with tight letter-spacing in display roles, it conveys rigorous platform engineering without feeling bureaucratic. Micro typography relies on controlled letter-spacing and uppercase styling to evoke terminal telemetry readouts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via chromatic ambient backlighting rather than standard drop shadows. The floating telemetry card appears elevated through a subtle top-edge translucent rim-light and a soft, spread-out cosmic glow behind its perimeter. Elements sit within defined flat planes separated by 1px dark slate borders.
IMAGERY
The visual anchor is a high-density, computational particle cloud resembling celestial nebula matter with dual-spectrum coloration (peach-amber transitioning to pinkish-purple and cyan). Avoid stock galaxy photography, lens flares, or rendered 3D metallic shapes; the imagery must feel mathematically generated and granular.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal particle sweep that transitions from fiery peach-red stippling into cold violet space behind a razor-sharp product window. It combines organic, granular astrophotography aesthetics with tight developer dashboard telemetry to signal both immense scale and microscopic precision.
MUST
- Retain the fine-grained particle texture in the background rather than substituting smooth generic radial glows.
- Pair the warm orange/magenta stardust cluster strictly opposite the visual weight of the telemetry interface.
- Keep dashboard internal borders to exactly 1px using low-opacity slate (#1e293b).
- Use strict uppercase tracking (+0.12em) on 11px micro-labels and footer category headers.
AVOID
- Do not use full-saturation solid neon fills across large card surfaces.
- Never replace the custom particle stipple graphic with simple blurry CSS blobs; point granularity is mandatory.
- Do not drop footer text contrast below #64748b; keep technical labels legible on pure black.
- Avoid pill radiuses (9999px) on interactive buttons; maintain tight, precise 10px corners.
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 中尝试 
