Design a light-mode website section: developer-grade technical clarity grounded in deep slate surfaces and sweeping cyan-to-violet particle halftones.
LAYOUT
The page opens with a restrained 64px navigation bar, followed by an asymmetrical two-column hero section bounded inside a 1240px container. The left column spans approximately 52% of the width, containing an eyebrow pill, a massive 58px two-line headline, a paragraph subhead, dual CTAs, and a trio of benefit items. The right column holds the floating 480px-wide code terminal suspended directly in the gravitational center of the stippled orbital graphic.
PALETTE (use these exact hex values)
- #FBFBFE — Canvas Base: Global page canvas background providing pristine, bright technical contrast
- #0F1523 — Code Obsidian: Terminal window and telemetry surface background creating visual anchor
- #5352EC — Electric Indigo: Primary interactive buttons, key headline emphasis, and active icon accents
- #0E121B — Ink Carbon: Headings, logo mark text, and primary high-priority labels
- #5A6578 — Slate Muted: Body descriptive copy, sub-bullets, and unselected navigation items
- #E2E7F0 — Border Subtle: Outlined button perimeter, badge borders, and telemetry divider lines
- #60A5FA — Telemetry Cyan: JSON property values, latency metrics, and particle highlight zones
- #22C55E — Status Emerald: Active deployment status indicator dot and live health confirmation
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 32px heading, 58px display. Tracking -0.03em display, -0.01em body. The typographic tone is authoritative, clean, and developer-centric. Plus Jakarta Sans conveys structural modernity with ultra-tight tracking at large sizes, while JetBrains Mono injects undeniable production-grade credibility into the code payload. For open-source replacements, pair Inter Display with Geist Mono.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using extreme chromatic contrast rather than multiple soft shadow layers. The bright off-white canvas sets a flat field upon which the obsidian card floats via a singular deep, directional shadow (0px 24px 48px -12px rgba(15, 21, 35, 0.28)) and a 1px inner border highlight (#1E273A). Buttons and tags remain intentionally flat with crisp 1px borders.
IMAGERY
The visual identity is defined by mathematical stipple/halftone vector particle fields forming an elliptical accretion disk or torus behind the UI card. The particle color transitions smoothly from cyan-tinted blues to warm magenta specks on the peripheral fringes. No organic photography, stock humans, or 3D clay illustrations are permissible.
SIGNATURE DETAIL — the thing that makes this design itself
The algorithmic stipple particle torus sweeping behind an obsidian developer code card. This pointillist celestial field visually communicates millions of distributed edge devices without relying on cliché world maps or literal server racks. Misusing it as a generic blur or placing it behind the text column destroys both legibility and the metaphor of a focused central runtime.
MUST
- Reserve #5352EC exclusively for key verbs and interactive CTA triggers to preserve color hierarchy.
- Render the orbit graphic as fine discrete stipple dots, varying particle density rather than solid opacity.
- Use JetBrains Mono exclusively inside the code inspector and data readouts, never for marketing body text.
- Maintain strict 16px corner rounding on dark elevated cards and 8px on buttons.
AVOID
- Never replace the stippled halftone effect with a continuous blurry radial gradient.
- Do not style the primary hero card with a light background; it must remain #0F1523 to anchor contrast.
- Avoid pill radius on action buttons; keep them strictly at 8px to maintain developer tool aesthetics.
- Do not use saturated brand indigo for body paragraphs or secondary text elements.
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 中尝试 
