Design a dark-mode website section: cosmic particulate ribbons floating behind crisp glass interfaces and developer telemetry.
LAYOUT
The hero follows an immaculate single-column symmetrical stack. The header pins an ultra-wide logo and sparse navigation to the edges, dropping immediately to a centrally floating announcement badge. Directly beneath sits the two-line centered headline, a two-line supporting caption, a segmented metric capsule, and paired CTAs, all terminating in an oversized interactive preview terminal that anchors the fold.
PALETTE (use these exact hex values)
- #030712 — Space Abyss: Deepest canvas background behind all ambient particle fields and elements
- #0B1528 — Glass Navy: Semi-translucent container background for terminal, cards, and docked panels
- #1E293B — Subtle Border: Crisp 1px outline for cards, floating metric pills, and divider rules
- #38BDF8 — Cosmic Cyan: High-energy text highlights, success pings, and code syntax keywords
- #3B82F6 — Electric Blue: Primary action button background, active state rings, and ambient core glow
- #1D4ED8 — Deep Royal: Gradient stop for action buttons and glowing interactive hover states
- #34D399 — Mint Success: Benchmark progress bars, overall score rings, and evaluation status indicators
- #FFFFFF — Text Pure: Display headlines, active navigation links, and primary CTA labels
- #94A3B8 — Text Muted: Supporting subheads, metric descriptions, inactive tabs, and line numbers
TYPOGRAPHY
Typeface Inter (or Geist,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0 at body. The typography speaks with authoritative, technical clarity. The clean geometric neutral sans-serif communicates institutional scale and enterprise readiness, while the tabular code monospace evokes direct developer empowerment. Geist or Inter are natural substitutions, both offering the low-contrast precision necessary for technical tool dashboards.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through luminescence and translucency rather than traditional drop shadows. Elevated elements feature semi-opaque glass surfaces backed by deep ambient radial glows (#1D4ED8 at 15-25% opacity) that illuminate their perimeter borders (#1E293B). Recessed sub-panels use darker matte values (#050C1A) to establish internal stratification.
IMAGERY
The visual foundation is a sweeping, fiber-optic cosmic particle wave curving dynamically across the dark blue cosmos. The wisps feel luminous, digital, and algorithmic, like data streams coalescing in space. Photorealistic human imagery or cartoon vector illustrations would violently break this high-tech developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline anchored over sweeping algorithmic particle streams, directly paired with an integrated three-column code-and-telemetry interactive terminal card.
MUST
- Use deep dark blues (#030712 to #0B1528) for all structural backdrops to maintain the nocturnal atmosphere.
- Restrict bright saturated colors strictly to active status indicators, progress bars, and glowing hero words.
- Use 9999px pill radii for status badges, metric banners, and compact chip elements.
- Maintain high monospace fidelity (JetBrains Mono) for all payload bodies, latency figures, and code tabs.
AVOID
- Never use pure black (#000000); always retain rich deep indigo and blue tones in shadows.
- Do not use sharp 0px card corners; maintain soft 16px outer envelopes throughout.
- Never apply high-contrast white text across secondary metadata; use muted slate (#94A3B8).
- Avoid flat opaque card fills that completely occlude background particle ribbons.
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 中尝试 
