Design a light-mode website section: crisp white architectural boards illuminated by electric blue logic conduits and dense, calibrated telemetry cards.
LAYOUT
The frame is structured into three primary horizontal zones. The top section introduces the headline and subtitle on the left, balanced by whitespace. The middle section splits into a two-column operational matrix: a left vertical stack of 4 sequenced steps, and a right composite block containing an architecture flowchart over 4 telemetry metric cards. The bottom zone finishes with a balanced 4-column trust and documentation bar.
PALETTE (use these exact hex values)
- #F4F6F9 — Outer Slate: Outer canvas background providing low-contrast separation for the main dashboard enclosure
- #FFFFFF — Card White: Primary surface for modular cards, process steps, and interactive workflow diagrams
- #E2E8F0 — Stroke Neutral: 1px hairline borders demarcating container boundaries, diagrams, and step blocks
- #0066FF — Electric Core: Active step numbers, telemetry charts, progress tracks, and primary brand badges
- #EFF6FF — Tinted Blue: Fill for step badges, icon roundels, and active pipeline groupings
- #0F172A — Deep Midnight: Headings, telemetry values, step titles, and background fill of the code snippet card
- #64748B — Cool Slate: Body copy, supporting step captions, axis labels, and inactive flowchart descriptors
- #10B981 — Pulse Green: Live indicators, connection confirmation dots, and positive percentage trend pills
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 28px heading, 36px display. Tracking -0.02em at headings, -0.005em at body. The typographic tone is deterministic, precise, and executive-ready. Using a clinical neo-grotesque like Plus Jakarta Sans or Inter at heavy weights conveys institutional reliability, while tabular numerals in the KPI widgets ensure data alignment. If substituting, choose modern geometric Grotesques with tight apertures and avoid expressive or serif fonts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is flattened and almost entirely structural, communicated via crisp 1px borders in #E2E8F0 on white surfaces. Subtle ambient occlusion is hinted only by the outermost panel sitting on a slightly darker #F4F6F9 backdrop. No colored glows or diffuse fuzzy shadows are permitted.
IMAGERY
There is zero photographic imagery; the visual identity is purely diagrammatic and typographic. Visual interest is derived from functional UI artifacts: line charts, node-and-wire flowcharts, status badges, and syntax-highlighted code blocks. Any non-functional decorative art or 3D render would violate this operational ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-engine layout pairing numbered modular step cards on the left with a live systemic blueprint on the right, punctuated by electric blue logic traces and micro-telemetry cards.
MUST
- Use 1px borders in #E2E8F0 to delineate every modular block rather than blurry shadows.
- Render step numerals in fixed-size rounded square badges with #EFF6FF fill and #0066FF text.
- Reserve vibrant green (#10B981) strictly for live states, status dots, and positive deltas.
- Connect workflow boxes using dashed 1px lines with subtle directional arrowheads.
AVOID
- Do not introduce dark theme panels except within the designated API terminal code card.
- Never use heavy or colored drop shadows; keep elevation planar and hairline-defined.
- Do not use full opacity primary blue as a card background fill.
- Avoid decorative illustrations; diagrams must depict literal technical architecture and data schemas.
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 中尝试 
