Design a light-mode website section: crisp b2b metrics and sequential capabilities wrapped in glowing clinical white surfaces.
LAYOUT
The grid uses an asymmetric two-tier architecture inside a 1200px container. The top zone splits into a 5-column editorial text block on the left and a dense 7-column 2x2 metric matrix on the right. Below, a balanced 5-column horizontal grid houses the chronological feature steps. The structure terminates with a single full-width utility ribbon containing an AI assertion and primary action link.
PALETTE (use these exact hex values)
- #f8fafc — Atmospheric Canvas: Global backdrop providing subtle cool contrast against bright white foreground cards
- #ffffff — Card Surface: Elevated foreground surface for metric modules, feature columns, and action banners
- #edf2f7 — Card Outline: Delicate boundary line defining component perimeters and badge containers
- #0f172a — Primary Text: High-contrast headings, numeric metric labels, and step titles
- #64748b — Secondary Text: Body copy, supporting metric subtext, and metadata annotations
- #2563eb — Velocity Blue: Primary display headline accent, velocity metrics, and navigational link highlights
- #059669 — Financial Emerald: Cost efficiency metrics, financial badges, and audit-ready indicators
- #7c3aed — Governance Violet: Compliance percentages, quality metrics, and category eyebrow overline
- #eff6ff — Tinted Blue Badge: Pill background for efficiency outcome tags
- #ecfdf5 — Tinted Emerald Badge: Pill background for cost outcome tags
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 28px heading, 36px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is authoritative, technical, and relentlessly quantitative. Using a clean grotesque sans-serif with negative tracking in large sizes conveys aerospace reliability and precision software rigor. Inter or Geist Sans are ideal matches, balancing tabular numbers with crisp text clarity.
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 created through subtle luminance contrast rather than heavy drop shadows. Crisp white cards (#ffffff) sit on an off-white substrate (#f8fafc) bordered with delicate 1px hairline strokes (#edf2f7) and an ultra-diffused 0 4px 20px -2px rgba(0, 0, 0, 0.03) shadow. Diffuse, atmospheric violet/blue glows float behind the canvas margins to give an illuminated aerospace glass aesthetic.
IMAGERY
No photographic imagery is present. Visual rhythm is carried entirely by crisp outline/duotone vector glyphs housed within pastel rounded squares (36x36px). Iconography uses standardized 1.75px stroke widths depicting tools, clocks, currency, shields, and team nodes.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline directly tied to a five-column sequenced capability ladder, where each column mirrors the exact color-coded metric badges established in the preceding hero block. This links narrative claims directly to visual numeric proof without breaking grid continuity.
MUST
- Use semantic color mapping consistently (emerald for money, blue for velocity, violet for compliance).
- Split display headlines cleanly between neutral dark and vibrant accent blue across two lines.
- Enclose step indexes in discrete mini rounded borders above the column icons.
- Maintain uniform card height across all five workflow sequence columns.
AVOID
- Do not use dark backgrounds; the identity relies on clinical high-key white space.
- Avoid heavy dark borders or harsh black box shadows around cards.
- Do not mix accent colors randomly within a single metric card or outcome tag.
- Never drop the step-ordering numbers ('01' to '05') from the capability sequence.
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 中尝试 
