## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060755-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-feature-grid

## Before you start
Ask the user what their product is, who it is for, and what visual brand it should use. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Build this section
Create a responsive, editorial feature grid that showcases several product capabilities through a mix of large visual UI previews and short explanatory text. The composition should feel like a premium SaaS landing page: asymmetric, spacious, image-led, and easy to scan.

### Layout and alignment
- Use a centered content container with a maximum width of approximately 1200–1280px.
- Build a two-column bento-style grid on desktop. Make the primary feature card wider and taller than the supporting cards beside it.
- Let the large feature occupy roughly 58–60% of the grid width; stack two smaller cards in the remaining 40–42%.
- Align card edges to a shared grid, while allowing the visual compositions inside cards to feel intentionally offset or layered.
- Place the large card’s product preview in the upper two-thirds and its text block near the lower-left edge.
- Place supporting card previews above their text blocks, with enough negative space for the interface to remain legible.
- Collapse to one column below roughly 760px. Preserve the feature order, reduce visual height, and avoid overly wide cropped previews.
- Keep the section background warm and quiet so the cards provide most of the visual energy.

### Typography hierarchy
- Use a modern sans-serif with a polished, slightly humanist feel; use a system fallback stack if no brand font is available.
- Feature labels should be small, medium-weight, and understated, around 13–15px.
- Feature headlines should be compact but expressive, approximately 22–28px on desktop with tight line-height around 1.1–1.2.
- Use sentence case and short editorial statements rather than feature lists.
- Keep supporting copy high contrast and readable, but avoid making it compete with the product preview.

### Colour and visual treatment
- Use an off-white page background around `#F7F6F2` or a similarly warm neutral.
- Give cards distinct backgrounds instead of making every card identical:
  - vivid violet or indigo gradient around `#6D3FBA` to `#4F2B91` for the hero card;
  - deep navy-purple around `#20284D` for a secondary card;
  - soft stone gray around `#DFDDD8` for another secondary card.
- Use white or near-white text on dark and saturated cards, and deep charcoal around `#29272A` on light cards.
- Product previews should resemble abstracted interface snapshots: pale surfaces, subtle blue or purple accents, small labels, thin dividers, and gentle translucency. Keep them visually suggestive rather than fully functional.
- Use restrained gradients, blur, glow, or atmospheric blocks behind previews to create depth, but ensure text remains crisp.

### Borders, corners, and spacing
- Use large rounded corners, approximately 14–18px on cards.
- Avoid heavy borders. If separation is needed, use a low-contrast 1px border such as `rgba(40,35,45,.08)`.
- Use a generous grid gap of roughly 20–24px on desktop and 16px on mobile.
- Give card text blocks approximately 32px of horizontal padding and 30–36px of bottom padding.
- Maintain generous whitespace around the entire section, with approximately 72–120px of vertical breathing room depending on the surrounding page.
- Ensure the visual preview has enough height to feel immersive, but do not let decorative imagery push the messaging below the fold.

### Interaction and motion
- If cards are interactive, make the entire card discoverable with a subtle hover treatment: a slight upward translation, softened shadow, or gentle preview zoom.
- Keep motion fast and restrained, around 180–260ms with an ease-out curve.
- Do not add controls, carousels, or complex interactions unless the product genuinely needs them. The grid should work as a static section first.
- Respect reduced-motion preferences.

### Responsive and accessibility requirements
- Use semantic headings and a logical reading order that starts with the primary feature.
- Ensure all text meets accessible contrast requirements against its card background.
- Do not rely on color alone to distinguish cards.
- Treat interface previews as decorative unless they convey essential information; otherwise provide suitable accessible descriptions.
- Prevent decorative UI mockups from causing horizontal overflow on small screens.

## Never
- Never use logos, product names, or branded marks from the reference.
- Never reuse the reference’s exact feature copy, labels, interface text, or wording.
- Never copy the reference’s product screenshots, illustrations, gradients, or imagery directly.
- Never reproduce the exact card proportions, visual assets, or layout pixel-for-pixel; adapt the principles to the user’s product and brand.
- Never add irrelevant interface details merely to imitate the reference.