Design a light-mode website section: crisp developer tooling ergonomics meeting floating translucent physical computing in an airy white workspace.
LAYOUT
The section is structured in a balanced two-tier vertical rhythm. The top tier is a split two-column layout: left column contains the pill badge, headline, and supporting thesis; the right column accommodates the angled floating terminal console. The bottom tier transitions into a four-column grid of equal-width step cards connected linearly by a subtle center axis rule.
PALETTE (use these exact hex values)
- #FAFBFC — Canvas Background: Global page canvas background providing pristine optical clarity behind cards and visual assets.
- #FFFFFF — Card Surface: Pure white background for lower process cards and interactive surfaces.
- #141824 — Terminal Void: Deep slate navy for the 3D tilted CLI console window and metric overlay badge.
- #4E67F6 — Electric Indigo: Primary focal accent for hero text emphasis, icon fills, and flow diagram nodes.
- #22C55E — Terminal Neon Green: Evaluation pass indicators, metric score percentage, and CLI chip run dots.
- #0F172A — Deep Text Slate: Dominant color for display headlines, card titles, and high-emphasis body copy.
- #475569 — Muted Slate: Subtitles, card descriptions, and secondary metadata.
- #EAEFF6 — Subtle Border Gray: Delicate stroke surrounding process cards, command chips, and container edges.
- #F4F6FC — Command Pill Surface: Soft neutral background for inline CLI terminal pills across step cards.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 52px display. Tracking -0.03em at display, -0.01em at body. The typography balances humanistic clarity with precise developer efficiency. Plus Jakarta Sans delivers a confident, modern SaaS presence that avoids geometric coldness thanks to open counters and clean apertures. Pairing this with JetBrains Mono firmly anchors the aesthetic in technical credibility, communicating precision, automated workflows, and engineering rigour.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using gentle multi-layered drop shadows rather than heavy structural borders. Lower process cards feature an ambient blur (rgba(15,23,42,0.04) 0px 4px 16px), while the 3D terminal mockup casts a directional, diffuse blue-tinted shadow (rgba(20,24,36,0.22) 0px 24px 48px -12px) that elevates it cleanly off the canvas. Translucent frosted glass blocks underneath the terminal ground the floating hardware in physical space.
IMAGERY
The imagery consists entirely of rendered vector UI components and pseudo-physical hardware mockups. Interfaces are rendered in perspective with hyper-clean dark panels, glowing green evaluation indicators, and a neon blue sparkline graph. Stock photography, hand-drawn illustrations, or cartoon iconography would contradict the strict developer-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the 3D tilted dark terminal window resting atop extruded, frosted translucent keycaps, paired immediately below with horizontal step cards linked by blue connecting nodes. Misusing this pattern occurs when keycaps are rendered completely opaque or when the 3D perspective angle is exaggerated beyond 5 degrees, which causes visual distortion instead of subtle physical grounding.
MUST
- Keep card backgrounds pure #FFFFFF to contrast crisp against the #FAFBFC canvas.
- Use the royal periwinkle accent (#4E67F6) strictly for interactive or focal moments.
- Set CLI and terminal commands in a clean monospace with active green status pips.
- Maintain uniform 24px internal padding across all lower workflow cards.
AVOID
- Do not color the entire headline blue; restrict accent color to the key transformation word.
- Do not use dark mode across the full canvas; preserve the bright light-mode ground.
- Avoid harsh black borders; limit strokes to delicate #EAEFF6 or translucent slates.
- Do not remove the monospace font from terminal badges or CLI chips.
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 中尝试 
