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.

“Feature tour”Landing Page PatternsEra: 2015 → today (SaaS marketing)TrustworthyTechyFriendly

Open full screen ↗

feature-rich-showcase / landingEN

feature-rich-showcase / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md10pxRadius lg16pxRadius xl24pxDensity×0.9Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

alternating feature rowsfeature index chipsoverview feature gridtabbed product tourcomparison table with checkmarksframed product screenshotscolour-coded featuresnumbered mono feature labels (01, 02…)

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

Bento Box Grid →Bento packs features into one mosaic of tiles; Feature-Rich Showcase spreads them over many sections — grid, alternating rows, tabs and a comparison table.Interactive Product Demo →Interactive demos let visitors use a live product in the page; the showcase explains features with framed static screenshots and copy.Conversion-Optimized →Conversion pages strip content down to one form and one button; the showcase is long and informative with many sections.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPlus Jakarta Sans · 600/700/800

The quick brown fox

Heading · ThaiPrompt · 600/700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinPlus Jakarta Sans · 400/500/600/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Prompt’s clean geometric loopless forms match Plus Jakarta’s modern geometric headings; Anuphan keeps long Thai feature copy friendly and compact at body sizes.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.08)`
Display	`clamp(2.5rem, 5.2vw, 4.25rem)`
Motion	`220ms cubic-bezier(.2,.8,.2,1)`
Density	`×0.9`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Feature-Rich Showcase (feature-rich-showcase) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 16px;
  --background: #FFFFFF;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #0F172A;
  --popover: #FFFFFF;
  --popover-foreground: #0F172A;
  --primary: #5B4CF0;
  --primary-foreground: #FFFFFF;
  --secondary: #0F172A;
  --secondary-foreground: #FFFFFF;
  --muted: #F5F6FA;
  --muted-foreground: #536075;
  --accent: #F5F6FA;
  --accent-foreground: #0F172A;
  --destructive: #DC2626;
  --border: #E3E6EF;
  --input: #E3E6EF;
  --ring: #5B4CF0;
  --chart-1: #5B4CF0;
  --chart-2: #0D9488;
  --chart-3: #F59E0B;
  --chart-4: #EC4899;
  --chart-5: #3B82F6;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0F172A;
  --sidebar-primary: #5B4CF0;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F5F6FA;
  --sidebar-accent-foreground: #0F172A;
  --sidebar-border: #E3E6EF;
  --sidebar-ring: #5B4CF0;
}

.dark {
  --background: #0B0D17;
  --foreground: #EEF0FF;
  --card: #12152A;
  --card-foreground: #EEF0FF;
  --popover: #12152A;
  --popover-foreground: #EEF0FF;
  --primary: #8B7DFF;
  --primary-foreground: #0B0D17;
  --secondary: #EEF0FF;
  --secondary-foreground: #0B0D17;
  --muted: #181C35;
  --muted-foreground: #A3A9C7;
  --accent: #181C35;
  --accent-foreground: #EEF0FF;
  --destructive: #F87171;
  --border: #262B4A;
  --input: #262B4A;
  --ring: #8B7DFF;
  --chart-1: #8B7DFF;
  --chart-2: #2DD4BF;
  --chart-3: #FBBF24;
  --chart-4: #F472B6;
  --chart-5: #60A5FA;
  --sidebar: #12152A;
  --sidebar-foreground: #EEF0FF;
  --sidebar-primary: #8B7DFF;
  --sidebar-primary-foreground: #0B0D17;
  --sidebar-accent: #181C35;
  --sidebar-accent-foreground: #EEF0FF;
  --sidebar-border: #262B4A;
  --sidebar-ring: #8B7DFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Feature-Rich Showcase (feature-rich-showcase) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F6FA;
  --color-text: #0F172A;
  --color-text-muted: #536075;
  --color-primary: #5B4CF0;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0F172A;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0D9488;
  --color-border: #E3E6EF;
  --color-success: #16A34A;
  --color-warning: #B45309;
  --color-danger: #DC2626;
  --color-chart-1: #5B4CF0;
  --color-chart-2: #0D9488;
  --color-chart-3: #F59E0B;
  --color-chart-4: #EC4899;
  --color-chart-5: #3B82F6;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 2px 4px rgba(15,23,42,0.04), 0 24px 64px rgba(15,23,42,0.14);
  --font-heading: "Plus Jakarta Sans", "Prompt", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0B0D17;
  --color-surface: #12152A;
  --color-surface-2: #181C35;
  --color-text: #EEF0FF;
  --color-text-muted: #A3A9C7;
  --color-primary: #8B7DFF;
  --color-on-primary: #0B0D17;
  --color-secondary: #EEF0FF;
  --color-on-secondary: #0B0D17;
  --color-accent: #2DD4BF;
  --color-border: #262B4A;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-chart-1: #8B7DFF;
  --color-chart-2: #2DD4BF;
  --color-chart-3: #FBBF24;
  --color-chart-4: #F472B6;
  --color-chart-5: #60A5FA;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Feature-Rich Showcase (feature-rich-showcase). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9647,
            0.9804
          ],
          "hex": "#f5f6fa"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0902,
            0.1647
          ],
          "hex": "#0f172a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3255,
            0.3765,
            0.4588
          ],
          "hex": "#536075"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.298,
            0.9412
          ],
          "hex": "#5b4cf0"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0902,
            0.1647
          ],
          "hex": "#0f172a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.5804,
            0.5333
          ],
          "hex": "#0d9488"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.902,
            0.9373
          ],
          "hex": "#e3e6ef"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.6392,
            0.2902
          ],
          "hex": "#16a34a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3255,
            0.0353
          ],
          "hex": "#b45309"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.149,
            0.149
          ],
          "hex": "#dc2626"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.298,
            0.9412
          ],
          "hex": "#5b4cf0"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.5804,
            0.5333
          ],
          "hex": "#0d9488"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.6196,
            0.0431
          ],
          "hex": "#f59e0b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.2824,
            0.6
          ],
          "hex": "#ec4899"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.5098,
            0.9647
          ],
          "hex": "#3b82f6"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.051,
            0.0902
          ],
          "hex": "#0b0d17"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0824,
            0.1647
          ],
          "hex": "#12152a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.1098,
            0.2078
          ],
          "hex": "#181c35"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9412,
            1
          ],
          "hex": "#eef0ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6627,
            0.7804
          ],
          "hex": "#a3a9c7"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.4902,
            1
          ],
          "hex": "#8b7dff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.051,
            0.0902
          ],
          "hex": "#0b0d17"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9412,
            1
          ],
          "hex": "#eef0ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.051,
            0.0902
          ],
          "hex": "#0b0d17"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.8314,
            0.749
          ],
          "hex": "#2dd4bf"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.1686,
            0.2902
          ],
          "hex": "#262b4a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.8706,
            0.502
          ],
          "hex": "#4ade80"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.4431,
            0.4431
          ],
          "hex": "#f87171"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.4902,
            1
          ],
          "hex": "#8b7dff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.8314,
            0.749
          ],
          "hex": "#2dd4bf"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.4471,
            0.7137
          ],
          "hex": "#f472b6"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3765,
            0.6471,
            0.9804
          ],
          "hex": "#60a5fa"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0588,
              0.0902,
              0.1647
            ],
            "hex": "#0f172a",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0588,
              0.0902,
              0.1647
            ],
            "hex": "#0f172a",
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0588,
              0.0902,
              0.1647
            ],
            "hex": "#0f172a",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0588,
              0.0902,
              0.1647
            ],
            "hex": "#0f172a",
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 4,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0588,
              0.0902,
              0.1647
            ],
            "hex": "#0f172a",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 64,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Plus Jakarta Sans",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Plus Jakarta Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.9
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!