Design a light-mode website section: airy enterprise pricing anchored by soft pastel tinting, crisp periwinkle hierarchy, and asymmetric trust-led framing.
LAYOUT
The page follows a structured top-down narrative: centered badge and two-line hero title with gradient keyword, followed by explanatory subtext. Below, the page splits into a 5-column arrangement: 1 column for the brand trust overview rail, followed by 4 identically sized tier cards. A centered dual-line footnote at the base closes the layout.
PALETTE (use these exact hex values)
- #f8faff — Canvas Background: ambient page background offering subtle cool contrast against bright white cards
- #ffffff — Card Surface: pure white card surface creating soft contrast over canvas background
- #0f172a — Primary Text: deep slate for primary titles, tier names, and numerical prices
- #64748b — Muted Text: cool slate for descriptions, frequency labels, and list items
- #3b66f5 — Cobalt Accent: featured card highlight border, highlighted button fill, and gradient origin
- linear-gradient(135deg, #3b66f5 0%, #7c5cfc 100%) — Brand Gradient: display text emphasis on key heading keywords
- #e8edf5 — Subtle Border: hairline boundary on cards, buttons, and decorative pill wrappers
- #e0f2fe — Starter Cyan Tint: background for Starter tier icon box
- #ffe4e6 — Pro Rose Tint: background for Pro tier icon box
- #f3e8ff — Enterprise Violet Tint: background for Enterprise tier icon box
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 20px heading, 36px heading-lg, 44px display. Tracking -0.025em at display, -0.01em at body. The typographic tone is precision-driven, modern, and calm. Utilizing an Inter-style neutral grotesque sans-serif allows the complex pricing table to read effortlessly, while tight display tracking on the headline injects confidence. The gradient text on 'AI adoption' functions as the single expressive brand statement.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled with extreme restraint. There are virtually no visible dark shadows; elevation is inferred by placing crisp pure-white (#ffffff) cards over a pale icy canvas (#f8faff). The featured tier relies on a 1.5px colored border rather than an exaggerated z-index or box shadow.
IMAGERY
Imagery is purely programmatic and icon-based. Line icons (16px to 20px) inhabit square 40px rounded pastel containers that denote category metaphors (person, user-group, building). Photographic elements or 3D illustrations are strictly excluded to preserve an analytical B2B tone.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the asymmetric combination of a left-hand trust/positioning rail alongside four horizontally uniform tier cards, unified by individualized pastel icon badges and a top-centered 'Most popular' pill hugging the cobalt-bordered card.
MUST
- Reserve the vivid periwinkle-to-violet gradient exclusively for the main title emphasis.
- Assign each pricing tier a distinct pastel hue for its category icon box.
- Keep card stroke weights strictly at 1px (#e8edf5) except the featured card (1.5px #3b66f5).
- Pair the 36px price figure with an inline 12px slate frequency label (/month).
AVOID
- Do not use dark or heavy drop shadows; cards should rely on borders and subtle surface contrast.
- Avoid filling non-featured buttons with solid dark colors.
- Do not vary card widths across the four main pricing columns.
- Never make bullet checkmarks thick or colored high-saturation green.
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 中尝试 
