Design a dark-mode website section: dense nocturnal operations grid bathed in luminous cobalt glows and crisp monospace data telemetry.
LAYOUT
The section is organized around an asymmetric CSS grid within a 1280px container. The top holds a left-aligned eyebrow badge and H1 headline. Beneath, the grid splits into a prominent 60% spotlight card on the left paired with a 2x2 cluster of compact 40% satellite cards on the right, finishing with a two-column bottom tier balancing a media/process trigger against a developer API terminal.
PALETTE (use these exact hex values)
- #040711 — Canvas Midnight: Root page background behind all grid sections and containers
- #0a101d — Card Surface: Base fill for feature containers, modules, and secondary cards
- #0f172a — Card Surface Elevated: Nested panels, terminal backgrounds, and mock document wrappers
- #16233b — Stroke Subtle: Outer borders for cards, dividers, and pill wrappers
- #1d68f6 — Cobalt Active: Primary action buttons, active timeline nodes, and spotlight accents
- #22c55e — Success Mint: Validation checkmarks, completed statuses, and readiness badges
- #f59e0b — Warning Amber: In-progress timeline indicator dots and alert points
- #ffffff — Text Pure: Primary headings, active stats, and high-priority labels
- #94a3b8 — Text Muted: Descriptive body copy, secondary column values, and metadata
- #475569 — Text Dimmed: Line numbers in code blocks, sub-captions, and inactive hints
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.025em on headings, 0 on body. The typographic tone is ultra-precise, technical, and restrained. Headings utilize tight tracking (-0.025em) and medium-to-bold weights to convey modern software authority, while body text stays highly legible and low-contrast. Inter or Geist Sans should be prioritized to preserve the clean, clinical enterprise software aesthetic.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminance layering and 1px borders rather than diffuse drop shadows. The lowest plane is the void canvas (#040711), cards sit on top at #0a101d with #16233b outlines, and inner interactive widgets rise to #0f172a. Rare focal elements employ a faint, localized radial blue glow directly behind priority components.
IMAGERY
The visual system avoids lifestyle photography or abstract 3D shapes entirely. Instead, it relies on high-fidelity synthetic UI modules, vector line icons (Feather/Lucide style, 16px, 1.5px stroke), and structured timeline schematics that simulate live software operation. Any non-technical illustrative artwork is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of embedded software simulation cards featuring pill-based checklist verifications (#22c55e) and connected step nodes directly adjacent to enterprise feature metrics. To use it correctly, never treat UI previews as static screenshots; build them as living components with native typography, borders, and buttons. It fails if replaced by flattened raster images.
MUST
- Maintain consistent 14px corner radius across all outer container cards.
- Use 1px borders (#16233b) to define component edges instead of heavy drop shadows.
- Pair numeric statistics (e.g., '72%') with small two-line muted descriptions directly underneath.
- Reserve vibrant blue (#1d68f6) strictly for primary interactions and active state nodes.
AVOID
- Do not use high-saturation gradients across card backgrounds; keep fills flat and dark.
- Never use pure black (#000000); maintain the deep midnight navy tint (#040711).
- Avoid multi-colored status badges outside the established green (#22c55e), blue (#1d68f6), and amber (#f59e0b) hierarchy.
- Do not omit borders on cards; cards must separate clearly from the background canvas.
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 中尝试 
