Design a light-mode website section: clinical devtools precision grounded by organic waves of generative particle telemetry.
LAYOUT
The hero uses a deliberate asymmetrical two-section split within a 1240px container. The left 40% houses the typographic hierarchy (eyebrow, two-line H1, subtext, CTA cluster, stack pills). The right 60% is dedicated to a four-stage horizontal pipeline diagram with connected micro-cards, underlaid by a panoramic wave pattern spanning the entire bottom half of the section.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure White: Primary background for the entire hero layout, navigation, and top-level cards
- #f8fafc — Card Recessed White: Background for workflow stage containers, tech stack tags, and secondary containers
- #1e293b — Terminal Void: Interior snippet card background in the diagnostic phase block
- #434eee — Electric Indigo: Primary button fill, brand mark elements, active focus highlights, and step numbering
- #0f172a — Heading Slate: Main H1 headings, brand name text, and workflow card primary titles
- #64748b — Muted Body Slate: Descriptive copy, step summaries, stack label text, and nav links
- #e2e8f0 — Border Grey: Thin outlines on secondary buttons, stack chips, and stage cards
- #ef4444 — Alert Red: Incident detection hexagon background, issue indicators, and diff removals
- #10b981 — Success Emerald: Fix validated icon badge and diff insertion highlights
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, razor-sharp, and developer-focused, spearheaded by Inter's geometric, high-x-height clarity. The display headline uses -0.035em tracking with tight leading (1.05) to communicate speed and efficiency, while JetBrains Mono provides disciplined, legible syntax inside terminal and diff viewports.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved primarily through micro-borders (#e2e8f0) paired with diffused, ultra-soft drop shadows (0 4px 20px rgba(15, 23, 42, 0.04)). The cards appear to hover millimetres above the canvas, separating themselves cleanly from the background particle texture without harsh planar contrast.
IMAGERY
The visual anchor is a generative mathematical particle field composed of thousands of stippled dots in greyscale and cobalt hues, forming a 3D topographic wave. Concrete interface fragments—code blocks, diff views, and status badges—rest atop this wave to ground the abstract data theme in tangible devtools utility.
SIGNATURE DETAIL — the thing that makes this design itself
The undulating topographic dot-matrix particle wave that sweeps through the lower canvas beneath discrete, elevated workflow cards. It balances rigid, structural devtools UI with dynamic, fluid mathematical telemetry.
MUST
- Keep typography tight and commanding, using negative tracking on headings above 32px.
- Pair clean white card surfaces with extremely subtle borders (#e2e8f0) and slight elevation.
- Use electric indigo (#434eee) strictly for interactive primary actions and active sequence indices.
- Anchor technical illustrations to real UI artifacts like diffs, hexagons, and dark terminal code windows.
AVOID
- Do not use dark mode canvases; keep the overall tone bright, clinical, and airy.
- Do not use saturated drop shadows; keep elevation borders crisp and shadows below 0.06 opacity.
- Do not use serif or whimsical fonts; the aesthetic demands austere engineering clarity.
- Do not crowd the step progression cards; ensure generous horizontal guttering between pipeline phases.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
