Design a dark-mode website section: instrumented obsidian control plane balancing dense telemetry, luminous flow diagrams, and sharp monospaced execution blocks.
LAYOUT
The viewport begins with an asymmetrical header section: bold product proposition on the left paired with a 5-step numbered horizontal pipeline on the right. Below, an asymmetric 3-column bento grid organizes the lifecycle. Column 1 stacks Model & Runtime, Deployment, and Automation cards; Column 2 features a double-width canvas containing the visual pipeline, telemetry sparklines, and split code runner; Column 3 balances live device logs above an aggregated outcome summary.
PALETTE (use these exact hex values)
- #080b11 — Obsidian Canvas: Primary background canvas behind all bento cards and section headers.
- #0d121f — Card Surface: Standard background fill for primary bento grid container cards.
- #06080e — Terminal Inset: Deep recessed fill for code editors, sub-cards, and live feed tables.
- #1a233a — Hairline Border: Perimeter stroke on bento cards, dividers, and internal widget boundaries.
- #2563eb — Electric Sapphire: Step badge badges, active focus states, and central orchestrator glow.
- #10b981 — Telemetry Emerald: Active live indicators, device counters, growth tags, and success badges.
- #4f46e5 — Indigo Node: Source node container background and diagram telemetry flows.
- #f8fafc — Primary Text: Main headlines, primary metric figures, and active tab headers.
- #64748b — Muted Slate: Captions, property keys, code syntax punctuation, and inactive labels.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 38px display. Tracking -0.02em at display, 0 at body. The type language communicates uncompromising developer-grade reliability and low-level system performance. Inter provides neutral, highly legible UI mechanics, while JetBrains Mono establishes authentic developer credibility in the terminal areas. Licensing can be substituted seamlessly with Geist Sans and Geist Mono for identical contemporary tech authority.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through layered surface tones and optical backlighting rather than ambient drop shadows. Level 1 bento cards rest directly on the Level 0 background separated by subtle slate strokes (#1a233a). Focal components like the central 3D cube emit a diffuse 30px-40px radial blur of sapphire light (#2563eb at 25% opacity) to denote runtime activity.
IMAGERY
Abstract geometric 3D solids and schematic vector nodes represent technical infrastructure rather than photographic assets. The central orchestrator is portrayed as a stylized blue isometric cube surrounded by dashed routing paths and crisp hardware glyphs (Android, Apple, Linux). Any organic or human lifestyle photography would violate the technical precision of this system.
MUST
- Use 1px hairline borders in #1a233a to define surfaces against the deep canvas.
- Restrain vivid color to functional nodes, active toggle states, and live telemetry dots.
- Format model names, latencies, tokens, and code snippets in an aligned monospace font.
- Maintain a uniform 16px border-radius across all outer bento grid modules.
AVOID
- Do not use blurry multi-stop drop shadows; express depth strictly via surface illumination.
- Avoid bright white backgrounds or saturated panel containers anywhere in the viewport.
- Never drop below 11px for secondary data tables or monospaced runtime metadata.
- Do not crowd code lines; provide at least 1.5 line-height for readability.
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 中尝试 
