Design a light-mode website section: editorial fintech precision anchored by a luminous enterprise inversion and delicate hairline architecture.
LAYOUT
Centered vertical flow beginning with a pill category tag, followed by a large editorial serif headline and centered supporting paragraph. The central viewport is occupied by a 4-column equal-width pricing grid with 20px gap. Beneath the grid sits a wide single-row horizontal trust banner partitioned into three balanced feature columns.
PALETTE (use these exact hex values)
- #F6F8FE — Canvas Aurora: ambient viewport background with soft periwinkle gradient glow
- #FFFFFF — Card Surface Clean: primary light card background for initial three tiers and compliance bar
- #0B111D — Obsidian Surface: dominant high-tier container fill providing dramatic focal contrast
- #0F172A — Ink Primary: serif headline, card tier titles, and primary numerical values
- #64748B — Ink Muted: body copy, billing cycles, descriptions, and unchecked list features
- #3B66F5 — Growth Cobalt: growth tier solid button fill, feature checkmark icons, and active badges
- #34D399 — Mint Enterprise: enterprise call-to-action button, custom tier checks, and enterprise badge
- #E5E9F2 — Subtle Border: hairline boundary strokes on light cards, compliance bar, and ghost buttons
- #EEF2FF — Tinted Pill Blue: background fill for tier qualification pills and top pricing header badge
TYPOGRAPHY
Typeface Instrument Serif (or Newsreader, Playfair Display, EB Garamond), weights 400. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px heading, 44px display. Tracking -0.015em. The typographic pairing bridges traditional institutional banking and high-velocity fintech engineering. The high-contrast editorial serif headline establishes stability, prestige, and institutional authority, while clean Inter-style grotesque typography ensures maximum legibility for financial numbers and comparative limits.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through planar surface shifts rather than drop shadows. The three standard tiers hover subtly on the pale canvas via white fill and faint border definition, while the Enterprise card punches forward through total tonal inversion (#0B111D against light ambient background).
IMAGERY
No photographic or illustrative assets are present; the composition relies entirely on geometric iconography and interface containers. Icons are consistent 16-20px line glyphs housed in thin circular boundaries (checks, shield, lock, globe).
SIGNATURE DETAIL — the thing that makes this design itself
The stark asymmetric inversion where three identical white minimalist tiers are anchored on the right by a solitary obsidian-and-neon-mint Enterprise card. Misusing this means flipping multiple tiers to dark or softening the Enterprise card to gray, destroying the calculated visual gravity.
MUST
- Reserve the dark obsidian surface (#0B111D) strictly for the highest-value Enterprise tier.
- Pair the serif display headline with strictly neutral sans-serif typography across all card content.
- Keep card outlines delicate using hairline 1px strokes (#E5E9F2) rather than heavy drop shadows.
- Maintain uniform 18px border radii across all four pricing cards for rigorous column alignment.
AVOID
- Do not apply the serif typeface to pricing numbers, buttons, or list items.
- Do not make multiple cards dark; the single inverted tier creates the entire architectural focal point.
- Do not use dark muddy shadows under cards; maintain an airy, flat-to-surface technical plane.
- Do not mix button heights; every tier CTA must measure exactly 42px tall.
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 中尝试 
