Design a light-mode website section: disciplined dispatch orchestration wrapped in deep spruce green and crisp mint architectural cards.
LAYOUT
The section is organized into three distinct horizontal strata. The top block is a 5:7 split between a left-aligned display header block and a wide dark process schematic. The middle block unfolds into a symmetrical 4-column grid of procedural phase cards. The bottom block closes the section with a single unified full-width reassurance bar divided into metadata segments.
PALETTE (use these exact hex values)
- #F5F8F6 — Canvas Ice Mint: Global background canvas providing subtle tint beneath white and sage containers.
- #0A2925 — Spruce Canopy: Deep forest surface for the primary automated logic diagram and visual anchor.
- #EDF5F1 — Tinted Sage Card: Background fill for alternating step cards (01 and 03) and diagram callout highlights.
- #FFFFFF — Pure White: Background fill for step cards (02 and 04) and footer ribbon card.
- #28C76F — Signal Green: Primary indicator for step chips, connection nodes, checkmarks, and eyebrow text.
- #11211E — Spruce Deep Ink: Primary heading typography, high-impact titles, and prominent metrics.
- #5A6E67 — Muted Fir: Secondary descriptors, unselected details, and subtext across cards.
- #DCE7E1 — Hairline Spruce Border: Subtle bounding borders for cards, internal dividers, and icon boundaries.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Helvetica Neue, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 20px heading, 44px display. Tracking -0.03em at display, 0 at body. The type is calm, analytical, and authoritative. Inter (or similar neutral grotesque sans-serifs) gives the product an operational, logistics-grade clarity without feeling overly decorative. The tight letter spacing on display titles (-0.035em) delivers high visual density suitable for enterprise efficiency software.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat and tonal rather than through drop shadows. Hierarchy relies entirely on surface contrast: pure white (#FFFFFF) against pale sage (#EDF5F1), bordered with crisp 1px lines (#DCE7E1). The only stark contrast jump is the dark spruce container (#0A2925), which behaves as an inset schematic window.
IMAGERY
No photographic elements are used. The visual identity relies solely on schematic flowcharts, dotted connection vectors, and clean line-art pictograms (18-24px, 1.5px stroke width). Photography or organic drop illustrations would disrupt the precise operational tone.
SIGNATURE DETAIL — the thing that makes this design itself
The alternating 4-card sequence (pale sage #EDF5F1 transitioning to pure white #FFFFFF) anchored immediately below a deep spruce schematic board. Misusing this means either painting all cards identical white or dropping the dark hero container, which destroys the technical workflow tension.
MUST
- Alternate card background fills between #EDF5F1 and #FFFFFF to maintain visual cadence.
- Render all process step integers (01, 02, etc.) in Signal Green (#28C76F) at 600 weight.
- Keep hairline internal card dividers at precisely 1px solid #DCE7E1 with 16px vertical margin.
- Maintain the dark spruce canvas (#0A2925) strictly for technical schematic diagrams.
AVOID
- Do not introduce standard pure blue or purple links into this organic spruce-and-mint palette.
- Never apply heavy, dark drop shadows; boundary definition must come from borders and fills.
- Do not collapse the 4-column card row into uneven card heights; enforce equal column stretching.
- Avoid solid black (#000000); use deep fir (#11211E) for high-contrast dark text.
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 中尝试 
