Design a light-mode website section: quiet clinical precision expressed through translucent mint tiers, dotted telemetry lines, and measured editorial typography.
LAYOUT
The section follows a disciplined top-to-bottom rhythm within a 1200px max-width wrapper. The top tier features a split headline row with left-aligned editorial text and right-aligned descriptive paragraph plus CTA pair. The middle tier is a five-column horizontal sequence of equal-width cards bridged by a dotted connecting axis. The bottom tier closes the rhythm with a wide, single-row enterprise compliance bar.
PALETTE (use these exact hex values)
- #FAFAF7 — Canvas Ground: Primary page background providing a gentle off-white base warmer than pure white.
- #FFFFFF — Card Surface: Solid white fill for step cards, floating over the canvas with faint border framing.
- #F7F6F0 — Banner Surface: Subtle ecru tint applied to the full-width bottom compliance banner.
- #0E3B32 — Deep Pine: Primary button fill, connector nodes, display headings, and core identity element.
- #EAF7F0 — Mint Glaze: Soft green gradient base for icon badge squares and status chips.
- #2D6356 — Muted Sage: Icon glyph fills, step number indicators, and badge checkmark icons.
- #111816 — Charcoal Black: Main headline and step card title text with high legibility.
- #5A6763 — Clinical Slate: Card body copy, header descriptive paragraphs, and sub-labels.
- #EBECE6 — Card Border: Hairline perimeter stroke delineating white step cards from the canvas.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 18px heading, 44px display. Tracking -0.02em at display, 0.08em at kicker uppercase. The typographic tone is authoritative, understated, and medical-grade contemporary. Set in an unadorned neo-grotesque sans (Inter or Plus Jakarta Sans), the tight letter-spacing in the headline communicates precision without clinical sterility, while the uppercase kicker sets an instructional framework.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is deliberately flat and clinical. Depth is communicated entirely through tonal contrast between the warm canvas (#FAFAF7), pure white card surfaces (#FFFFFF), and hairline boundary borders (#EBECE6). No blurred drop shadows are permitted.
IMAGERY
Iconography consists of abstract, geometric vector symbols (sliders, interlocking nodes, four-pointed sparkle stars, user silhouettes, and growth trends) rendered in crisp dark teal. Visuals feel like telemetry instruments or clinical toolkits, avoiding photographic stock or decorative 3D illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The continuous horizontal dotted telemetry track passing through soft mint gradient badges, bridged by solid teal nodal dots between card gaps. This linear thread turns five disparate cards into a single cohesive, step-by-step conveyor belt.
MUST
- Keep all five step cards identical in width and padding to maintain a steady horizontal metronome.
- Use a single continuous dotted connector line positioned precisely at the vertical midpoint of the icon badges.
- Render the primary CTA in the darkest forest green (#0E3B32) rather than generic blue or pure black.
- Use soft mint radial gradients inside icon containers rather than solid flat fills.
AVOID
- Do not introduce sharp 0px or small 4px corners; maintain 24px on cards and 10px on buttons.
- Do not break the five-column desktop grid into staggered heights; align all card baselines.
- Do not use high-saturation green or neon emerald; all tones must remain muted, botanical, and clinical.
- Do not place heavy drop shadows beneath cards; rely exclusively on subtle 1px borders and surface contrast.
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 中尝试 
