Design a light-mode website section: structured white-tile bento grid orchestrating developer workflows with clinical precision and subtle semantic accents.
LAYOUT
The section adopts a structured asymmetric bento grid beneath a left-aligned header stack. The left column spans two vertically stacked step cards ('Set up' and 'Automate'). The center area accommodates a prominent double-height workflow engine card with flow diagram, code well, and feature checklist, flanked on the right by an 'Outcome' metrics card. The bottom tier balances this with a wide 'Review' data table card and a compact 'Rest easy' trust card.
PALETTE (use these exact hex values)
- #FBFBFB — Canvas Background: Outer canvas background providing low-contrast separation from white card surfaces
- #FFFFFF — Card Surface: Primary background for all bento containers, micro-views, and interactive modules
- #F8F9FA — Subtle Well Surface: Inner well fill for the code snippet container and table header row
- #EBECEF — Border Subtle: Hairline 1px borders delineating cards, table rows, node icons, and code panels
- #111827 — Text Primary: Section headline, card titles, key metric numbers, and strong label text
- #6B7280 — Text Secondary: Subheadings, descriptive body blurbs, metadata labels, and inactive node titles
- #E04D3C — Coral Accent: Primary workflow accent on kicker dot, step 1 icon border, brand node, and past-due pill
- #16A34A — Success Emerald: Success metrics (+28%), sparkline stroke, checkmark badges, and active status tags
- #2563EB — Indigo Cobalt: Step 2 lightning icon and compliance tag indicator dot
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 20px heading, 38px display. Tracking -0.025em for display, -0.01em for body, 0.05em for uppercase kickers. The typography conveys authoritative, developer-first engineering rigor through an immaculate neutral sans-serif (Inter/Geist style). Tight display tracking (-0.025em) lends modern enterprise authority to the H1, while strict monospaced typefaces ground the technical credibility. When substituting, prioritize neutral neo-grotesques with tabular numerals and tall x-heights over expressive humanist faces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is deliberately minimized in favor of surgical flat architecture. Cards rely on sharp 1px solid borders (#EBECEF) set against an off-white background (#FBFBFB) to achieve separation. Shadows are virtually imperceptible, restricted to a 0 1px 2px rgba(0,0,0,0.03) wash to prevent card clipping without creating spatial height.
IMAGERY
There is no photographic imagery or decorative abstract 3D art present. Visual weight is entirely driven by micro-UI abstractions: stylized app icon nodes, code editor snippets, sparkline vectors, and data tables. Any iconography must use 1.5px stroke weight outline vectors enclosed within rounded bounding boxes.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal process rail featuring rounded-square nodes linked by delicate dashed lines with arrowheads, terminating in a solid colored brand node and a green success pill. It translates abstract infrastructure into a tangible, legible supply chain. It is commonly misused by adding gradients, varying node dimensions, or omitting directional arrows, which destroys the feeling of a deterministic pipeline.
MUST
- Maintain a uniform 16px gap between all bento cards across rows and columns.
- Use exact 1px hairline borders (#EBECEF) for container delineation rather than heavy box shadows.
- Reserve vibrant color fills exclusively for meaningful UI states (success green, alert red, active blue).
- Keep code snippets rendered in true monospace fonts at 11px or 12px within a pale gray well.
AVOID
- Never apply colored gradients or saturated fills to the main card backgrounds.
- Do not use dark or heavy box-shadows; elevation must remain flat and clinical.
- Avoid mixing border radii; keep outer cards strictly at 16px and inner nodes at 8-10px.
- Do not let the display typography exceed -0.025em letter tracking.
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 中尝试 
