framefields.dev
Design analysis
A ruled row of concise technical facts turns implementation details into quickly scannable proof points.
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/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476189-5.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476110643-full.webp - Component on Kage: https://kage.design/component/framefields-stats ## Before you start Ask which measurable facts matter most to the user's product and how the brand presents technical proof. Apply the principles below to that product rather than copying the reference. Create a full-width statistics section with a large two-line black heading above a five-column fact row. Separate columns with thin vertical rules (`#cfd2cf`) and add a strong horizontal rule above the row. Each item has a small uppercase or sentence-case eyebrow, a bold 24–32px metric or claim, and one or two lines of explanatory text. Keep the pale background around `#eef1ef`, black text, dark gray supporting text, and generous vertical whitespace. On mobile, turn columns into a two-column or stacked layout while maintaining the hierarchy. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage