Design a light-mode website section: executive authority softened by deliberate violet accents, tailored serif headlines, and immaculate tabular alignment.
LAYOUT
Centered single-column layout stacked vertically: category eyebrow tag, dual-line display hero, descriptive body paragraph, and a segmented billing pill. Beneath lies a five-column grid: one feature key column followed by four pricing tiers. The page concludes with a four-metric horizontal proof strip.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface for cards, floating toggles, and base background canvas.
- #F8FAFC — Cool Light Grey: Background for secondary containers, stat cards, and inactive toggle states.
- #E5E7EB — Hairline Border: 1px structural dividers framing plan columns, toggles, and metric cards.
- #0F172A — Deep Charcoal: Dominant color for display titles, tier names, and price numerals.
- #64748B — Muted Slate: Support copy, frequency labels, feature descriptions, and chevron icons.
- #5945FD — Electric Violet: Primary tier highlight border, CTA button fill, and italic emphasis text.
- #F0EDFF — Soft Lavender: Background tint for category tag pill and icon circular containers.
- #E05638 — Enterprise Coral: Accent color for Enterprise tier checkmarks, tag pill, and outline button.
TYPOGRAPHY
Typeface Instrument Serif (or Playfair Display, Cormorant Garamond, New York), weights 400. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 18px subheading, 36px heading, 48px display. Tracking -0.02em. The display serif evokes high-end intellectual authority and strategic advisory capability, contrasting sharply with utilitarian sans-serif numbers and feature labels. This combination signals enterprise dependability without feeling antiquated.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through crisp physical perimeter lines rather than volumetric shadows. The single highlighted tier uses an active 2px colored border (#5945FD) and high-contrast solid button to step forward from surrounding outline cards.
IMAGERY
No photographic imagery is present. Visual rhythm relies entirely on clean geometric line-art iconography (16px and 20px stroked glyphs), delicate badge fills, and precise typography.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an elegant, italicized editorial serif statement ('Priced for impact') directly above a mathematically disciplined, hairline-bordered feature ledger.
MUST
- Use a high-contrast serif font specifically for the top headline, italicizing the second sentence line.
- Reserve the intense #5945FD violet exclusively for conversion-critical paths and single tier highlights.
- Strictly synchronize line heights across the feature legend and all four pricing columns for tabular alignment.
- Enclose all individual tier cards and the bottom proof bar in uniform 16px rounded borders.
AVOID
- Do not apply heavy multi-layered shadows to elevate the featured plan column.
- Do not mix multiple serif families across the page; keep serifs strictly confined to the hero text.
- Do not allow pricing rows to desynchronize vertically when feature labels wrap onto multiple lines.
- Do not fill every tier button with solid brand color; only the featured tier receives solid fill.
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. Try in DraPub 
