Design a light-mode website section: precision developer metrics paired with human validation across a crisp architectural white canvas.
LAYOUT
The layout is divided into two distinct horizontal registers. The top tier splits 40/60 between a punchy headline/intro statement on the left and a 4-column row of vertical metric cards on the right. The lower tier matches this division with a 2x2 grid of customer testimonial cards on the left, paired with an expansive, unified 'Running in production' technical proof card on the right containing live metrics, pipeline nodes, and security validation points.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: overall page backdrop providing gentle separation for pure white card elements
- #FFFFFF — Card Surface: primary container background for stat modules, testimonial cards, and workflow panels
- #0F172A — Text Primary: main page headings, stat numbers, author names, and prominent labels
- #64748B — Text Muted: supporting descriptions, subtitles, quote bodies, and metadata labels
- #E5E7EB — Border Subtle: structural 1px strokes enclosing cards, nodes, and horizontal divider paths
- #6366F1 — Indigo Brand: top badge text, link action text, and first workflow node accents
- #EEF2FF — Badge Tint Background: pill background for the header category badge
- #F97316 — Coral Accent: second stat card highlight and planning step border in workflow
- #0284C7 — Sky Blue Accent: rating metric accent and testing step container highlight
- #9333EA — Purple Accent: throughput metric accent and pull-request pipeline node highlight
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 16px body-lg, 18px subheading, 32px heading, 36px display. Tracking -0.02em for display, 0 for body, 0.05em for caps. The voice is confident, technical, and understated, embodying modern engineering rigor through a precision-balanced grotesque sans-serif (Inter match). The high contrast between the 36px display header and 11-13px data attributes projects professional velocity without promotional fluff. Inter or Geist are ideal drop-in options.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and flat, relying entirely on subtle tonal layering. White cards (#FFFFFF) sit upon an off-white background (#F8F9FA) bounded by a crisp 1px solid hairline border (#E5E7EB). There are no heavy gaussian blurs or multi-stop drop shadows present.
IMAGERY
The visual language uses circular photographic headshots of real engineers (36px diameter) alongside minimal monochrome SVG enterprise logo marks (e.g. Box, Datadog-style glyphs). Photography is natural, well-lit, and candidly framed. Abstract 3D shapes or decorative illustrations are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal pipeline visualizer connecting modular workflow steps with centered circular junction pins on hairline connector lines. To reproduce, nest 8px-radius step nodes with tinted 1px borders along a centered horizontal line, terminating in an integrated third-party ecosystem icon (e.g. GitHub). Avoid wrapping steps onto multiple rows, as this breaks the visual conveyor-belt metaphor.
MUST
- Use 1px border (#E5E7EB) on all white cards against the #F8F9FA canvas.
- Pair each stat metric with a distinct, muted pastel accent icon container.
- Maintain strict 12-16px gaps between grid cards to sustain modular cadence.
- Keep testimonial text concise and direct, restricted to 13px with #0F172A color.
AVOID
- Do not apply heavy drop shadows; depth is strictly defined by border strokes.
- Do not color entire cards; color is reserved strictly for glyphs, badges, and node outlines.
- Do not break the alignment of connecting lines between workflow nodes.
- Do not use dark backgrounds for stat cards; remain strictly on white.
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 中尝试 
