## 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/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073892-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073860-full.webp
- Component on Kage: https://kage.design/component/workos-card

# Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build a calm product-benefits section
Create a wide, responsive section that explains several practical product benefits beside or partially beneath a subtle interface preview. The section should feel trustworthy, polished, and enterprise-ready, with generous whitespace and a clear visual path from product proof to benefit details.

### Layout and alignment
- Use a centered content container with a maximum width of approximately 1120–1200px and responsive horizontal padding of 24–64px.
- On large screens, divide the section into two visual zones: a larger left zone for a softly presented product UI preview and a right zone for the benefit list. Let the preview occupy roughly 45–50% of the width and the list the remaining space.
- Align the benefit list to a consistent two-column grid when space permits. Each item should have an icon above or beside a short title and supporting sentence; keep all text edges aligned.
- Use generous vertical whitespace between this section and adjacent sections. Allow the UI preview to be slightly cropped or offset at the section edge to create depth, but never let it obscure the content.
- On tablet and mobile, stack the preview and benefit list. Collapse the benefits to one column and preserve comfortable reading widths.

### Typography hierarchy
- Use the product’s brand typeface or a clean modern sans-serif fallback.
- Keep benefit titles medium-weight and compact, around 15–18px with a 1.35 line-height.
- Use supporting copy at 14–16px with a 1.5–1.65 line-height and muted contrast.
- If the section includes a heading, use a strong but not oversized display style—roughly 36–56px on desktop and 30–38px on mobile—with tight line-height.
- Avoid dense paragraphs; each benefit should communicate one concrete outcome in one or two short lines.

### Colour
- Use a warm or cool near-white page background, approximately #FFFFFF to #FAFAFC.
- Use a deep blue-violet or brand-dark colour for headings, approximately #25235A–#373477, adjusted to the product brand.
- Use a neutral slate for body text, approximately #697080–#737784.
- Render icons in a soft lavender/indigo tint, such as #6E68D8, on a very pale lavender tile such as #ECEBFF.
- Keep the product preview low-contrast and slightly faded so it functions as supporting evidence rather than a competing hero image.
- Maintain accessible text contrast and do not rely on colour alone to communicate meaning.

### Borders, surfaces, and depth
- Use hairline borders around preview panels and cards, approximately #E8E8EE or rgba(30,30,60,0.08).
- Give UI preview panels a modest radius of 8–14px; use smaller 6–10px radii for internal controls.
- Use soft, diffuse shadows only where they clarify stacked panels: for example, 0 14px 36px rgba(35,35,70,0.10). Avoid dramatic elevation.
- The benefits themselves should remain visually light—prefer open whitespace over individual bordered cards.
- Keep corners, icon tiles, and controls consistent across the section.

### Product preview treatment
- Build a generic dashboard or setup interface with abstract rows, fields, provider tiles, and a primary action to suggest a real product without using branded assets.
- Use layered panels or a faint gradient fade to make the preview feel integrated into the page.
- Keep interface text minimal and generic; the preview should be legible enough to establish credibility but not become the main interaction.

### Icons and interaction
- Use one consistent set of simple outline icons, approximately 20–24px, with rounded strokes.
- Make benefit items optionally interactive if they link to deeper documentation: on hover, shift the icon tile or text colour subtly and show a small translate or arrow cue.
- Use a restrained transition around 160–220ms; do not add distracting motion.
- Ensure focus states are clearly visible for keyboard users and touch targets are at least 44px when items are interactive.

### Responsive behavior
- At widths below roughly 800px, stack the preview above the benefits and switch to a single-column list.
- Reduce decorative cropping and shadows on mobile to avoid clipping and visual weight.
- Preserve the order: product proof first, then the concise benefit explanations, unless the product’s content hierarchy suggests otherwise.

## Never
- Never use logos, product names, or branded provider marks from the reference.
- Never copy the reference’s exact wording, benefit claims, layout proportions, or visual artwork.
- Never use illustrations or imagery from the reference; create a neutral, CSS-built interface preview or use original product-specific assets supplied by the user.
- Never make every benefit a heavy card with excessive borders or shadows.
- Never sacrifice readability, accessibility, or responsive behavior for visual similarity.