Feature-Rich Showcase
Also called: Product tour page, Feature-heavy landing, SaaS feature page
A long, organised product tour: a feature index, an overview grid, alternating deep-dive rows, tabbed screenshots and a plan comparison table.
Design keywords
Say these words to ask for this style.
A landing pattern for products with a lot to explain. Instead of one big promise it walks the visitor through everything: a split hero with a product shot and a clickable feature index, a compact grid of all features, then alternating left/right rows that zoom into the top three (each with its own colour and a framed product window), a tabbed product tour, and a plan-by-plan comparison table with checkmarks. Density is higher than usual, but every block is boxed, labelled and colour-coded so the page stays scannable.
Best for
- B2B SaaS and productivity tools
- Platforms with many modules or integrations
- Product pages that must compare plans
- Developer and data products
Avoid for
- Single-offer campaigns and paid-ads pages
- Brands that sell a feeling more than features
- Very early products with two features
✓ Do
- Give every feature a numbered label (01, 02…) and its own tint from the chart palette, with a darker text shade for small labels (amber → #B45309, pink → #BE185D, teal → #0B7F75, blue → #2563EB) so numbers and links stay ≥ 4.5:1
- Frame screenshots in a window with a 36px title bar and three dots
- Alternate image/text sides every row, with a 96px vertical gap between deep-dive rows (56px below 960px)
- End with a comparison table: plans as columns, features as rows, check or dash in every cell
- Six features cycle back to the first colour; never add a 6th hue
✕ Don't
- Don’t make every section the same 3-card grid — vary grid, rows, tabs and table
- Don’t use full-bleed photography; the product UI is the imagery
- Don’t hide the plan differences in prose
Not to be confused with
On mobile
Turn the feature index into a horizontally scrolling chip row, stack alternating rows (screenshot first, then text), collapse the comparison table into one card per plan with checklists, and keep the colour-coding per feature.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.