Design a dark-mode website section: precision telemetry etched onto obsidian plates with surgical neon telemetry glows.
LAYOUT
The section follows a disciplined bento grid architecture anchored by a central header stack. Below the header, the grid is arranged across a 3-row, multi-column modular format: Row 1 features a prominent 2-column core platform anchor card paired with two vertical stacked capability cards; Row 2 houses a high-density 3-card array showing workflows, logs, and coverage; Row 3 spans three equal-width cards covering threat categorization, identity graphs, and audit history.
PALETTE (use these exact hex values)
- #07090e — Void Canvas: Deepest background base behind the grid container and header titles.
- #11151d — Panel Surface: Primary card background providing elevation and contrast over canvas.
- #0b0e14 — Sub-Surface Charcoal: Nested inset backgrounds for code blocks, terminal mockups, and graph stages.
- #1e2533 — Panel Stroke: Subtle 1px perimeter outline defining panel and container boundaries.
- #3b82f6 — Luminous Cobalt: Central isometric device glow, active nodes, pills, and interactive states.
- #22c55e — Signal Green: Success badges, 200 OK statuses, latency markers, and terminal highlights.
- #f59e0b — Warning Amber: Review state pill and synthetic ID alert tags.
- #ef4444 — Danger Red: Blocked status pills and high-risk threshold tags.
- #f8fafc — Primary Text: Section headlines, card titles, and high-priority readout strings.
- #8b94a5 — Muted Slate Text: Body copy, card descriptions, code keys, and meta labels.
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.02em at display, 0 at body, 0.05em at uppercase pills. The typographic tone is ultra-engineered, clinical, and developer-first. The neutral geometric sans-serif (Inter) delivers clean neutral clarity in headlines without organic quirks. Paired with a precise monospaced companion (JetBrains Mono) for telemetry and raw data, the hierarchy projects institutional reliability and low-latency performance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 6px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, tight density.
DEPTH
Depth is created purely through layered surface values and light contrast rather than diffuse drop shadows. Level 0 canvas (#07090e) recedes behind Level 1 panels (#11151d), while internal interactive modules (Level 2, #0b0e14) appear sunken into the cards. Subtle localized radial glows behind key visual assets (the isometric blue cube and node graph) provide ambient illumination without lifting cards off the planar grid.
IMAGERY
Visual assets are strictly schematic, programmatic, and technical. Imagery consists of isometric 3D-styled hardware/software nodes, stylized world map dot-matrices with pinpoint coordinates, and relational graph node trees. Purely decorative stock photos or illustrative human figures are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the glowing isometric nexus node on the lead anchor card, where a dark glass badge with neon edge lighting connects via glowing cyan-blue vectors to peripheral micro-plates. To replicate this identity, integrate a singular physical-software artifact at the core of the feature grid that visually radiates data streams directly into adjacent code or signal widgets.
MUST
- Use deep obsidian black (#07090e) as the base canvas to allow neon telemetry nodes to glow.
- Enclose each bento card in a consistent 16px corner radius with a 1px border (#1e2533).
- Keep descriptive body text restricted to muted cool grey (#8b94a5) to maintain high contrast with titles.
- Use monospace fonts exclusively for JSON, API paths, code blocks, and audit log data.
AVOID
- Never use white or light backgrounds for any surface or pill badge.
- Do not use heavy drop shadows with high spread; rely on 1px stroke borders for edge definition.
- Avoid decorative gradients across card backgrounds; keep surfaces flat dark charcoal.
- Do not mix multiple font families outside the primary sans-serif and code monospace.
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 中尝试 
