## 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/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067517-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067491-full.webp
- Component on Kage: https://kage.design/component/raycast-feature-grid-5

## Before you start
Ask the user what their product does, who it is for, and what visual brand they want to use. Apply the principles below to their product and brand—do not reproduce the reference literally.

## Build this section
Create a dark, premium product-marketing section that moves from credibility to practical product value. It should feel calm, focused, and highly polished, with restrained contrast and generous negative space.

### Structure and layout
- Use a near-black page background, approximately `#08090A` or `#090A0C`.
- Constrain the content to a centered max-width of roughly 1040–1160px with responsive side gutters of 24px on mobile and 40–64px on desktop.
- Begin with a centered two-line credibility heading near the top of the section. Keep the first line bright and assertive; make the supporting line visibly dimmer.
- Below the heading, create a horizontal row of three customer or audience profile items. The middle item is the active emphasis: place it inside a subtle bordered, rounded rectangular surface with a faint glow or shadow. The outer items should be flatter and lower contrast.
- On smaller screens, stack or horizontally scroll these profiles while preserving the active item as the visual anchor.
- Add a thin, low-contrast horizontal divider spanning the content width before the product-detail area.
- The next area is a two-column editorial split. The left column contains two compact metadata rows, each with a small muted monospace label and a pill-like feature token followed by a short explanatory sentence. The right column contains a large testimonial or product statement, separated by a fine vertical rule on desktop. On mobile, remove the vertical rule and stack the columns.
- Maintain substantial vertical space between this editorial area and the next feature showcase so each message has room to breathe.
- Introduce the next feature with another centered two-line heading: a crisp primary line and a subdued supporting line.
- Below it, place a wide rounded feature card. Use a dark surface with a thin border and a split composition: descriptive content on the left and an abstract, product-specific UI preview or interaction mockup on the right. The preview should demonstrate a workflow rather than merely decorate the card.

### Alignment and spacing
- Use an 8px spacing system.
- Keep headings centered, while the metadata and feature-card copy align to the left.
- Use approximately 72–104px between major blocks, 24–32px between heading lines, 24px around profile content, and 16–24px between metadata elements.
- Let the feature card feel substantial: use at least 32px internal padding on desktop and 24px on mobile.
- Align the split columns to a shared baseline where practical, but allow the statement block to feel slightly more editorial and spacious.

### Typography
- Use a modern sans-serif with a clean, slightly technical feel. Use a monospace or monospaced-looking face only for small category labels.
- Main headings: 18–22px, medium or semibold, with tight line-height around 1.2.
- Supporting heading lines: the same or slightly smaller size, regular weight, and reduced opacity.
- Profile names and feature labels: 14–16px, medium weight.
- Supporting descriptions: 14–15px with approximately 1.5 line-height.
- Testimonial or key statement: 20–24px on desktop, 18–20px on mobile, with strong line-height and selective emphasis for the most important phrase.
- Avoid oversized hero typography; this composition relies on hierarchy, contrast, and spacing rather than scale.

### Colour and surfaces
- Base background: approximately `#08090A`.
- Primary text: `#F2F3F5`.
- Secondary text: `#8A8D93`.
- Tertiary or inactive text: `#555960`.
- Borders and dividers: translucent white, approximately `rgba(255,255,255,0.10)`; use `rgba(255,255,255,0.06)` for quieter rules.
- Card surfaces: `#0D0F11` to `#111315`.
- Highlight active content with a very restrained cool-white glow and, only where appropriate to the user's brand, a dim accent gradient inside the product preview.
- Keep the surrounding page nearly monochrome so the actual interface demonstration is the strongest point of contrast.

### Borders, radius, and depth
- Use 1px borders with low opacity rather than heavy outlines.
- Use 10–14px radius for profile and feature cards; use 6–8px radius for compact pills and labels.
- Apply soft shadows sparingly, such as `0 12px 40px rgba(0,0,0,0.28)`, primarily to the active profile or raised preview.
- Avoid glossy glassmorphism, excessive blur, and decorative gradients that compete with the content.

### Interaction and motion
- If profile items are interactive, make the active state obvious through border brightness, surface elevation, and a subtle glow—not through loud colour.
- Allow selecting a profile to update the testimonial or supporting details, with a short 150–220ms fade or crossfade.
- Make feature-card previews feel lightly interactive: for example, a focused input, selectable item, command row, or button state can change on hover or focus.
- Provide visible keyboard focus states using a 2px outline with a brand-appropriate accent colour.
- Respect reduced-motion preferences and ensure the section remains fully understandable without animation.

### Responsive behaviour
- Preserve the centered, quiet composition on narrow screens.
- Stack the two-column editorial area and feature-card content vertically below approximately 720px.
- Keep the primary statement readable at mobile widths; do not force long testimonial lines into a narrow column.
- Ensure pills, profile rows, and UI previews never overflow the viewport.

## Never
- Never use the reference product's logo, product name, feature names, customer names, testimonial copy, or brand-specific wording.
- Never copy the exact layout content, illustrations, interface screenshots, avatars, or imagery from the reference.
- Never invent a direct visual replica; create new copy, new workflow examples, and a preview appropriate to the user's product.
- Never rely on low contrast that harms accessibility; preserve readable text contrast and visible focus states.
- Never add ornamental imagery when a simple product interaction or structured UI preview can communicate the feature more clearly.