Design a dark-mode web interface screen: celestial dark interface where community networks orbit glowing nodes of real-time intelligence and cyan telemetry.
LAYOUT
The page unfolds in a centered, structured grid spanning 1200px max width with 96px vertical section margins. The hero section divides into a prominent left-hand typographic value proposition and a right-hand celestial orbital network alongside a compact floating pricing module. Below, a three-column bento analytics grid transitions into a split two-column channel integration module, culminating in a three-card product feature matrix.
PALETTE (use these exact hex values)
- #050B14 — Midnight Cosmos: Primary screen background across the entire viewport.
- #08101E — Obsidian Surface: Background fill for bento modules, pricing widgets, and feature panels.
- #132238 — Hairline Slate: 1px structural borders defining card boundaries and inner dividers.
- #38BDF8 — Electric Cyan: Primary action buttons, active card halo outlines, and emphasis highlights in headlines.
- #22C55E — Vivid Green: Positive metrics, growth indicators, and projected community impact tags.
- #A855F7 — Deep Violet: Secondary telemetry charts, category segments, and node halo glows.
- #FFFFFF — Signal White: Hero headers, primary card titles, and high-emphasis numerical data.
- #94A3B8 — Steel Muted: Body copy, subtitles, descriptive card paragraphs, and supporting labels.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 38px heading-lg, 52px display. Tracking -0.035em at display, 0.12em at overlines. Plus Jakarta Sans delivers a modern, highly engineered, and confident digital product personality. Its wide counters, clean geometric apertures, and tight negative display tracking evoke high-performance SaaS infrastructure while retaining pristine legibility down to 11px micro-labels.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through luminescence and luminous proximity rather than classic multi-layered drop shadows. Cards hover subtly over the midnight canvas via faint inner fills and 1px hairline perimeter strokes, while focal elements emit soft, wide-dispersion cyan or green radial blurs (0 0 24px rgba(56,189,248,0.15)).
IMAGERY
Visual assets consist of programmatic cybernetic diagrams, concentric orbital paths, and vector vector charts interspersed with small, circular, photographic user portraits. All avatar portraits are nested within glowing chromatic borders to look integrated into the network graph rather than like detached stock photos.
SIGNATURE DETAIL — the thing that makes this design itself
The Celestial Orbital Radar: concentric hairline cyan/slate orbits anchoring glowing participant avatar nodes around an isometric core nexus. This visual metaphor conveys interconnected community intelligence and instantly distinguishes the interface from conventional static SaaS dashboards.
MUST
- Ground every card in deep navy-obsidian (#08101E) surrounded by 1px stroke (#132238).
- Use Electric Cyan (#38BDF8) as the sole high-frequency focal accent.
- Format overlines in uppercase with 0.12em letter spacing and cyan or light slate coloring.
- Maintain pure white (#FFFFFF) strictly for headers to preserve crisp luminance against dark backgrounds.
AVOID
- Never introduce pure black (#000000) or warm muddy gray backdrops.
- Do not use high-opacity white cards or inverted light themes anywhere.
- Avoid thick borders greater than 1px except on the active glowing cyan focus card.
- Do not use saturated primary red or yellow outside of specific avatar accent rings.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
