Design a light-mode website section: clinical enterprise white canvas grounded by surgical application frames and punchy dual-tone chromatic type accents.
LAYOUT
The section is organized into two primary tiers. The upper tier employs an asymmetrical two-column layout: left column contains the pill badge, headline, summary text, and three bullet points; the right column accommodates the high-density automation UI simulator. The lower tier consists of a 4-column horizontal grid highlighting key operational metrics and architectural assurances.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Outermost page backdrop providing subtle warmth and contrast against pure white cards.
- #FFFFFF — Surface White: Main background for the product preview card, bottom metric tiles, and button states.
- #E2E8F0 — Border Subtle: Single-pixel hairline dividing layout panes, dashboard sections, and pill containers.
- #0F172A — Text Primary: High-contrast headings, task titles, active statuses, and prominent numeric metrics.
- #64748B — Text Muted: Explanatory subtext, secondary descriptions, inactive step details, and execution timestamps.
- #2563EB — Electric Cobalt: Primary button fill, initial headline accent word, badge icons, and execution progress track.
- #E11D48 — Vivid Magenta: Second half of the headline callout and soft icon badge fills for transformation metrics.
- #10B981 — Signal Green: Active process pill indicator dot and validated workflow step checkmarks.
- #EFF6FF — Tinted Blue Soft: Pill badge backdrop and workflow icon chip background.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px heading-lg. Tracking -0.025em at display, -0.01em at body. The typographic tone is authoritative, analytical, and modern, driven by a neutral neo-grotesque sans-serif. Tight tracking on display headlines creates punch and authority, while generous vertical rhythm at 13px and 14px sizes guarantees legibility inside complex data layouts. Inter or Geist serves as an ideal open-source foundation.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated almost entirely without blurred drop shadows. The design instead uses crisp 1px borders in #E2E8F0 and nested surface tone transitions (from #F8FAFC canvas to #FFFFFF cards, down to #F1F5F9 sub-panels) to construct physical hierarchy.
IMAGERY
No photographic imagery is present. The visual language relies purely on an authentic, high-fidelity mock user interface showing browser shells, bounding-box document extractions ($6,129.47 callout), and clean vector iconography. Unstyled screenshots or realistic 3D renders would completely break the technical precision.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-word chromatic headline highlight ('real operations' transitioning from #2563EB blue to #E11D48 magenta) set against an ultra-clinical, border-defined software simulation card. This contrast bridges high-level marketing energy with granular enterprise utility; misusing it by highlighting too many words destroys its focal pull.
MUST
- Use pure white (#FFFFFF) for internal cards against the cooler #F8FAFC canvas.
- Restrict multi-color text treatments exclusively to the primary hero heading emphasis words.
- Maintain hairline 1px borders in #E2E8F0 rather than heavy ambient blur drop shadows.
- Represent completed steps using small 16px circular badges with solid green checkmarks (#10B981).
AVOID
- Do not apply heavy multi-stop drop shadows; keep elevation planar and border-defined.
- Do not use saturated backgrounds for icon tiles; keep them softly tinted under 10% opacity.
- Do not allow headline line-height to exceed 1.2, which fragments the visual lockup.
- Never use dark canvas backgrounds; this design relies entirely on crisp light mode clarity.
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 中尝试 
