Design a light-mode website section: clinical clarity meets high-trust enterprise compliance through disciplined typography and soft, reassuring lavender accents.
LAYOUT
The composition follows a strict top-down narrative hierarchy. It begins with the prominent floating 1200px CTA card, split into an asymmetric two-column layout: left-aligned pitch and action buttons opposite a 2x2 metric matrix framed by hairline crosshairs. Beneath this card, standard page rhythm yields to a generous 6-column footer layout (1 brand column, 4 link categories, 1 subscription column). It terminates in a horizontal legal bar partitioned by a faint 1px divider.
PALETTE (use these exact hex values)
- #f8f9fc — Canvas Muted: Outer container backdrop providing subtle contrast against floating elevated surfaces
- #ffffff — Surface Pure: Primary elevated card surface for high-converting CTA container
- #5138ed — Brand Violet: Primary interactive accent used for primary CTAs, text highlights, and arrow buttons
- #0f172a — Slate Headline: High-contrast headings, primary metric numerals, and prominent logotype
- #596780 — Slate Body: Descriptive paragraphs, metric subtext, and general explanatory copy
- #8c9ba5 — Slate Muted: Navigation column links, input placeholders, and tertiary legal disclaimers
- #eef2f6 — Border Subtle: Dividing grid lines between metrics and baseline footer separator
- #e05252 — Metric Coral: Chromatic focal accent specifically for the cycle-time performance metric
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 26px heading, 36px heading-lg. Tracking -0.02em on headings, 0 at body. The typographic tone is authoritative, scientific, and modern, typified by Plus Jakarta Sans. Its crisp geometry lends institutional authority without feeling archaic or overly academic. For drop-in open-source licensing, Inter or DM Sans serve as direct functional substitutes, provided tracking remains slightly tight on headings (-0.02em).
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled almost entirely flat, with only one prominent elevation moment: the main CTA card. The card features a faint, large-radius diffusion shadow (0 16px 48px -8px rgba(15, 23, 42, 0.04)) overlaid with a 1px border (#f1f5f9) to separate it from the slightly grey canvas (#f8f9fc). All subsequent components sit flush on the floor.
IMAGERY
Imagery is non-photographic, restricted strictly to thin-line vector iconography inside 36px pastel tinted badges (lavender, soft red, sky blue). Graphics emphasize precision symbols—stars/sparkles, stopwatches, verified documents, and security shields. Any photography, 3D clay illustrations, or noisy gradients would break the certified enterprise tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the split-tone CTA headline paired directly against an open-air 2x2 stat matrix partitioned solely by faint 1px crosshairs. The juxtaposition of a bold violet accented value proposition on the left with mathematically aligned trust proofs on the right creates instant enterprise authority.
MUST
- Highlight key headline endings in brand violet (#5138ed) for visual warmth and continuity.
- Use subtle 1px border dividers (#eef2f6) between stats rather than heavy enclosed containers.
- Enclose metric icons in circular pastel tint containers (36px) matching their metric semantic hue.
- Maintain high contrast by keeping primary metrics and category headers in deep slate (#0f172a).
AVOID
- Do not apply drop shadows to the footer columns or internal stat blocks.
- Never use generic dark backgrounds; the system relies strictly on crisp clinical light surfaces.
- Do not mix rounded pill buttons with square input fields; keep all interactive corners at 8px.
- Avoid colored backgrounds for footer navigation links; preserve neutral muted tones (#596780).
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 中尝试 
