Kage Design logo kage
hyperframes.dev
HyperFrames Studio (Desktop) stats component

Design analysis

This section introduces the open-source project, presents four large credibility metrics in a single row, and ends with repository/package shortcuts and a dark social CTA.

Prompt preview
## 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/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266575-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266531375-full.webp
- Component on Kage: https://kage.design/component/hyperframes-studio-desktop-stats

## Before you start
Ask what community, open-source, customer, or usage proof your product can credibly show, and ask for the relevant brand colours and voice. Then build an original proof section using these principles.

Create a full-width credibility section with a thin top divider, a left-aligned heading, and one short supporting sentence containing an optional inline link. Below it, show a four-column metrics row. Each metric should use a large numeral, a smaller unit suffix when appropriate, and a compact descriptive label. Use vertical separators between columns on desktop, but collapse gracefully on mobile. Finish with a row of utility controls such as a package/install field, documentation link, and repository/community CTA.

Use a light neutral background around `#f7f6f2`, near-black text around `#151512`, muted labels around `#77766e`, and dividers around `#deded8`. Set the section heading around 30–34px, metric values around 52–60px with light-to-regular weight, and labels around 11–13px. Keep metric cards aligned to a shared baseline and give the section generous top and bottom padding. Render the install/package control as a rounded outlined field with a copy icon, secondary links as understated pills, and the main community CTA as a dark pill with high-contrast text. Provide copy-to-clipboard feedback and clear hover/focus states.

Never:
- Invent or copy the reference's statistics, repository names, package commands, product names, or exact copy
- Use the reference logo, brand mark, imagery, or visual assets
- Present unsupported numbers as factual proof

More components