I build a lot of dark-mode products and pricing tables are where AI output falls apart. The default is three equal cards, a wall of checkmarks, and one card with a garish "Most Popular" badge slapped on in bright green.
What changed it for me was describing pricing as a hierarchy of one recommended plan rather than three equal options, and giving explicit rules for elevation in dark mode (you can't use drop shadows the same way, so I ask for layered surface lightness instead). The recommended tier now earns its emphasis with surface tone and scale, not a loud badge.
Sharing the prompt. What do you do about the feature-comparison rows so they don't become an unreadable grid of ticks?
Build a dark-mode pricing section as a single responsive HTML file with inline CSS, no framework. Plans: {PLAN_LIST with name/price/who-it-is-for}. Recommended plan: {RECOMMENDED}.
DARK-MODE ELEVATION RULES: background is a near-black #0b0d10; express elevation with surface LIGHTNESS steps (#131720, #1a2130, #222b3d), NOT heavy drop shadows; hairline borders at 8% white for separation.
HIERARCHY: do not render three equal cards. The recommended plan is visually primary: ~1.06x scale, brightest surface, a 1px accent border in {ACCENT_HEX}, and the strongest CTA. Other plans are quieter. No colored 'Most Popular' pill; signal it with a small uppercase eyebrow label instead.
FEATURE ROWS: group features into 2-3 labeled sections; use tick + em-dash for present/absent, and for the recommended column highlight only the 2 features that differentiate it, dim the rest.
CONTRAST: body text >= 4.5:1 on its surface; price numerals are the largest type on the card.
CTA: primary on recommended is solid accent; others are ghost buttons. Add :focus-visible rings.
MOTION: none except a 120ms ease on hover elevation; respect prefers-reduced-motion.
Write real plan names and 6-8 realistic feature labels for the product; no placeholder rows.