## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106476-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-stats

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and proof points they want to communicate. Then apply the principles below to create an original version for that product rather than reproducing a reference design.

## Build a proof-points stats section
Create a dark, high-trust credibility section for a modern software website. The section should present a compact row of quantitative proof points at the top, followed by a short trust statement and a quiet grid of customer or partner marks. It should feel editorial, premium, and restrained—not like a loud marketing dashboard.

### Layout and alignment
- Use a near-black background, approximately `#08080B` or `#09090C`, with a centered max-width container around `960–1120px`.
- Place the primary proof points in one horizontal row on desktop, vertically centered within the row.
- Use three statistic blocks followed by a review/rating block. Give each statistic a flexible width and separate adjacent blocks with very thin vertical rules.
- Keep the rules short—roughly the height of the metric and label group—and use low-contrast lines so they structure the row without dominating it.
- Each statistic should be center-aligned: a large value above a smaller explanatory label. The review block can use a compact badge or review-provider marker beside the rating and caption.
- Leave substantial vertical space between the stats row and the trust statement. Place the trust statement centered above a two-row customer-mark grid.
- Arrange the customer marks in four columns on large screens, with generous horizontal and vertical gaps. Treat them as muted monochrome text or simple neutral mark placeholders, not prominent logos.
- Finish the section with a subtle horizontal divider near the bottom of the container.
- On smaller screens, allow the stats to wrap into a two-column or single-column layout. Replace desktop vertical rules with horizontal separators where needed, and reduce the logo grid to two columns or a stacked list.

### Typography hierarchy
- Use a clean contemporary sans-serif with slightly tight letter spacing.
- Metric values should be large and prominent, approximately `46–52px` on desktop with medium weight and comfortable line height around `1.05`.
- Labels should be around `14px`, regular weight, and visibly muted. Keep them short and sentence case.
- The trust statement should be approximately `16px`, with medium-muted contrast and a little more breathing room than the labels.
- Customer marks or customer names should be small-to-medium, around `20–24px`, bold enough to remain legible but intentionally subdued.
- Use tabular numerals for statistics if available so values align cleanly.

### Colour and surface treatment
- Main background: approximately `#08080B`.
- Primary metric text: soft white, approximately `#F1F1F3`.
- Secondary labels and trust copy: cool gray, approximately `#92929D`.
- Customer marks: muted gray, approximately `#686870`, with no bright brand colours.
- Dividers: nearly invisible cool charcoal, approximately `#202126`, at roughly 60–80% opacity.
- If including a rating provider badge, place it in a small dark charcoal rounded square or pill using approximately `#171920`, with a thin border around `#2A2C34`; reserve a restrained accent colour only for the provider’s rating indicator.

### Borders, radius, and spacing
- Prefer a flat background with no card shadows, gradients, or decorative panels.
- Use 1px dividers and a subtle 1px border on any review badge.
- Use a small radius, approximately `10–12px`, for the review badge; keep the main section unboxed.
- Use roughly `32–48px` between metric value and the trust/logo area, and `32–40px` between the trust statement and the customer grid.
- Give the overall section generous top and bottom padding, approximately `72–104px` on desktop.
- Keep the design spacious enough that the stats feel like evidence, not a dense table.

### Interaction and accessibility
- This component can be static, but any review badge or customer mark that links to a source should have a clear hover state: slightly brighter text or border, never a dramatic scale effect.
- Preserve visible keyboard focus rings for links.
- Use semantic markup: a section with an accessible heading or label, a list for statistics, and a list or grid for customer references.
- Do not rely on colour alone to communicate rating or meaning; include accessible text labels.
- Ensure the layout remains readable at narrow widths and respects reduced-motion preferences.

## Never
- Never copy the reference’s logos, product names, exact statistics, review-provider branding, wording, or customer names.
- Never use the original brand’s illustrations, imagery, iconography, or decorative artwork.
- Never reproduce the exact layout dimensions or content; adapt the underlying hierarchy to the user’s product and brand.
- Never invent claims that the user has not supplied. Use clearly marked placeholders or ask for real proof points.
- Never make the section visually noisy with bright gradients, oversized badges, heavy shadows, or excessive animation.