Design a light-mode website section: clean enterprise hardware clarity anchored by deep cobalt accents and high-contrast telemetry viewports.
LAYOUT
A balanced asymmetric bento layout built within a 1360px grid container. The left side is dominated by a double-width, full-height flagship card that establishes brand narrative, hardware imagery, and validation stats. The right side is composed of a 2x3 grid of uniform micro-cards that deliver granular technical proofs like API schemas, scaling topologies, and latency charts.
PALETTE (use these exact hex values)
- #F4F5F8 — Base Wash: Global application canvas background providing subtle contrast behind white bento cards
- #FFFFFF — Card Surface: Primary surface for modular bento tiles, feature blocks, and metric containers
- #0D1117 — Telemetry Dark: Inverted viewport background for code blocks, terminal runners, and latency line charts
- #1855F4 — Cobalt Primary: Primary action button background, active links, brand icons, and emphasis highlights
- #0C111D — Ink Primary: High-contrast headings, main metric digits, and dominant structural titles
- #64748B — Slate Muted: Supporting body paragraphs, inactive stat labels, and descriptive feature subtitles
- #16A34A — Success Green: Efficiency badges, HTTP 200 statuses, terminal completion checks, and delta markers
- #E6E9EE — Subtle Border: Hairline perimeter borders separating white cards and defining internal module segments
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 38px display. Tracking -0.025em at display, 0.01em at body-sm. The typographical tone is rigorous, quiet, and hyper-competent. Inter or Geist delivers clinical legibility with zero decorative distraction, evoking high-performance developer documentation. Monospaced elements introduce authentic command-line precision without feeling unfinished.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is achieved through micro-contrast rather than layered drop shadows. Floating cards sit flat against the #F4F5F8 canvas with a whisper shadow (0 4px 20px -4px rgba(0,0,0,0.04)) reinforced by a clean hairline border. Inverted dark telemetry surfaces recede into the white cards, providing structural visual weight.
IMAGERY
Hero imagery is precision-rendered 3D hardware: matte black silicon packaging, gold trace pins, surface-mount components, and laser-etched die markings. The hardware rests on a faint axonometric floor grid that fades into clean white space. Abstract stock photos or human lifestyle shots are completely absent and forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-mode viewport integration: embedding obsidian dark-mode telemetry modules directly into pristine white bento cards. This bridges physical silicon enterprise reliability with modern developer DX. Misusing it means making entire cards dark rather than treating the dark surface as a surgical measurement instrument.
MUST
- Retain consistent 20px corner radii on all primary outer bento cards.
- Use hairline 1px borders (#E6E9EE) rather than heavy drop shadows for separation.
- Keep code, charts, and terminal snippets inside inverted dark-mode surfaces (#0D1117).
- Pair technical statistics with emerald green badges (#16A34A) to denote optimization gain.
AVOID
- Never use floating multi-colored gradients on the background canvas.
- Do not apply dark mode to the overall canvas; confine it to telemetry widgets.
- Avoid pill-shaped CTAs; primary action buttons must have disciplined 10px corners.
- Never replace vector iconography with colorful emoji or photographic cutouts.
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 中尝试 
