## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067843-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-card

# Before you start

Ask me what my product does, who it is for, and what its brand personality, colours, typography, and conversion goal are. Then apply the principles below to create an original version for my product—not a replica of the reference.

## Build this section

Create a polished SaaS product showcase section for a modern analytics, productivity, or business application. The section should combine three vertically stacked moments:

1. A large product-interface preview presented like a lightweight browser or app window.
2. A centered customer-proof block with a rating, testimonial, highlighted outcome, and compact attribution.
3. A pricing or plan comparison block introduced by a strong headline and simple interactive controls.

The composition should feel editorial and premium rather than like a dense admin dashboard. Keep the overall page background warm white, with a narrow readable content column and generous vertical separation between moments.

## Layout and alignment rules

- Use a centered max-width container around 960–1120px on desktop, with 24–32px side padding on smaller screens.
- Place the interface preview near the top, spanning most of the container width. Give it a subtle browser/app frame, a softly rounded outer shell, and enough internal padding that it reads as a product demonstration rather than a full-screen dashboard.
- Inside the preview, align a slim top bar, a metric strip, a chart area, and a lower data-table hint on a consistent grid.
- Position a circular or rounded-square play control over the chart near its visual center. It should be clearly discoverable but not overpower the dashboard.
- Below the preview, leave substantial whitespace before the proof block. Keep the testimonial narrow—roughly 420–560px—and center-align every element.
- Put the rating above the quote, the quote above the attribution, and use a small avatar or neutral avatar placeholder beside the person’s name and role/site.
- Use a bold highlighted phrase within the testimonial to draw attention to the measurable result. The highlight should be a pale warm yellow marker effect, not a filled badge.
- Follow the testimonial with another generous gap and a centered pricing heading. Under it, place a horizontal volume/usage control and a monthly/yearly toggle, then show two or more pricing cards in a responsive grid.
- On mobile, stack pricing cards vertically, allow the usage control to compress or scroll, and retain clear centered hierarchy without shrinking text excessively.

## Dashboard preview rules

- Use a very light surface, approximately #FFFFFF or #FCFCFB, against a warm page background around #FAF9F7.
- Add a thin neutral border around the preview in approximately #D9D9D5, with a 16–22px radius and a restrained shadow such as 0 8px 24px rgba(25,25,20,0.08).
- Use dark charcoal text around #20211F and muted labels around #7D7E79.
- Show 5–7 compact metrics in one horizontal row on desktop. Each metric has a small label and a larger bold value; keep inactive or unavailable values visually quiet.
- Use a thin blue or teal chart line, approximately #9BCBD6, with a very subtle pale fill beneath it around #EDF8FA. Keep grid lines low contrast, around #EEF0EE.
- Use a small coloured dot for a live/current metric indicator.
- The dashboard should suggest real analytical depth through labels, values, axes, and table headers, but avoid excessive density or tiny unreadable text.
- The play control should have a white or translucent surface, a subtle border and shadow, and a dark triangular icon. Add a hover state that slightly increases contrast or scale.

## Testimonial rules

- Use five small warm yellow stars, approximately #F3C928, with consistent spacing.
- Make the testimonial text 17–20px on desktop, with comfortable line-height around 1.55 and dark charcoal colour.
- Keep supporting attribution text smaller, approximately 13–15px, and muted.
- Use a small circular avatar treatment with a neutral border; do not make it visually dominant.
- The highlighted result should use a warm pale yellow such as #FFF1B8, with a slightly irregular marker-like background or soft rectangular padding.

## Pricing block rules

- Use a large, confident section heading around 40–52px on desktop, 32–38px on mobile, with tight line-height and near-black colour.
- Add a simple usage slider: a dark active segment, a pale grey track, and a circular thumb with a light border. Include a small dark tooltip above the thumb showing the selected range.
- Pair the slider with a compact segmented billing toggle. Give the selected option a white surface, subtle border/shadow, and dark text; leave the unselected option flatter and muted.
- If showing a savings annotation, use a small handwritten-feeling accent in muted coral, approximately #C98670, with a delicate curved arrow. Keep it optional and secondary.
- Use pricing cards with white surfaces, a 16–22px radius, a thin light-grey border around #E0E1DE, and a soft layered shadow or outer ring.
- Arrange the card content with generous internal padding: uppercase plan label, prominent price, billing unit, checklist of included features, then a full-width CTA.
- Use checkmarks in muted charcoal or soft grey; use a lighter grey and an × for unavailable features.
- Make the primary CTA a warm orange/coral rectangle, approximately #E9653D, with white text, 8–10px radius, medium-bold type, and a subtle hover darkening. Include a small directional arrow only if it suits the product’s brand.
- Add concise reassurance text beneath the CTA in small muted type, such as trial or payment reassurance, but write original copy for the user’s product.

## Typography and spacing

- Prefer a clean modern sans-serif with slightly humanist proportions. Use a heavy or semibold weight for headings and prices, regular weight for body text, and medium weight for labels and controls.
- Keep typography in a clear scale: eyebrow/labels 11–13px, metadata 13–15px, body 16–20px, card prices 34–42px, section heading 40–52px.
- Use an 8px spacing system. Typical gaps: 8–12px within controls, 16–24px within cards, 32–48px between component groups, and 96–150px between major page moments.
- Keep alignment intentional: dashboard elements align to a shared internal grid; testimonial content is centered; pricing card content is left-aligned for scanability while the section heading and controls remain centered or balanced.

## Interaction and responsive behaviour

- Make the play control keyboard-focusable and show a visible focus ring. It may open a modal or video player, but the component should still work as a static preview.
- Make the usage slider and billing toggle functional. Updating them should visibly change the selected usage label and, where appropriate, displayed prices.
- Add subtle hover states to pricing cards and CTAs without excessive motion.
- Respect reduced-motion preferences. Use short transitions around 150–220ms and avoid distracting chart animation.
- Ensure all controls have accessible labels, sufficient contrast, and touch targets of at least 44px.

## Never

- Never reuse the reference’s logos, product names, brand names, or exact copy.
- Never copy the reference’s testimonial wording, pricing values, metric values, plan names, or feature list.
- Never use the reference’s avatar, video still, illustrations, screenshots, or imagery.
- Never reproduce the exact chart shape, dashboard labels, or page composition pixel-for-pixel.
- Never make the design dependent on imagery; create an original interface preview with CSS, HTML, SVG, or the project’s existing component system.
- Never sacrifice responsive behaviour, semantic structure, keyboard access, or readable contrast for visual similarity.