## 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-1789073891-3.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-feature-grid

## Before you start
Ask what the user's product is, who it is for, and what their brand personality, colour palette, and type choices are. Then apply the principles below to create an original feature section for that product—not a copy of the reference.

## Build this section
Create a responsive feature-grid section for a modern B2B software product. The section should communicate that the product offers a broad, cohesive set of capabilities, then make those capabilities easy to scan.

### Structure and layout
- Use a very light neutral section background, approximately `#F8F8FA` or a colour adapted from the user's brand.
- Keep the content inside a centred max-width container of roughly 1160–1240px, with 56–72px horizontal padding on desktop and 24px on mobile.
- Start with a generous top area split into two columns: text on the left and a quiet product-related visual treatment on the right. Use approximately a 46/54 or 48/52 split, with the text vertically centred.
- The left column should contain, in order:
  1. A short eyebrow in the product's accent colour.
  2. A large, compact headline spanning two lines where appropriate.
  3. A short explanatory paragraph with a readable measure of about 520px.
  4. One prominent call-to-action button.
- The right side may use an abstract interface placeholder, layered panel, or product UI visual that supports the message. Keep it subordinate to the text: avoid busy imagery, and use soft depth rather than a hard illustration.
- Below the introduction, place six feature items in a two-column grid. Each item is a horizontal row with a compact square icon tile followed by a text block.
- On desktop, align the two columns consistently and use generous row gaps. On smaller screens, stack the introduction and then stack feature items into one column.
- Do not put each feature inside a full bordered card. The open background and whitespace are part of the visual system.

### Alignment and spacing
- Align the eyebrow, headline, paragraph, and button to the same left edge.
- Use approximately 12px between eyebrow and headline, 22px between headline and paragraph, and 28px between paragraph and CTA.
- Leave roughly 72–104px between the introduction and the feature grid.
- Give feature rows at least 28–36px of horizontal gap and 48–64px of vertical separation.
- Use an 8px spacing scale, with occasional 12px, 20px, 32px, 48px, and 72px values.
- Allow the section to breathe; it should feel premium and calm rather than compressed.

### Typography
- Use the user's brand font if available; otherwise use a modern sans-serif such as Inter, Geist, or a similar neutral grotesk.
- Eyebrow: 18–24px, semibold, tight line-height, accent colour.
- Main heading: approximately 48–58px on desktop, 38–44px on mobile; bold or semibold, with a tight 0.95–1.05 line-height and slight negative tracking.
- Body copy: 18–20px, line-height around 1.5, in a muted slate grey.
- Feature titles: 19–21px, semibold, dark ink.
- Feature descriptions: 16–17px, line-height around 1.4–1.5, muted grey, constrained to avoid overly long lines.
- Preserve a clear hierarchy: the headline dominates, feature titles are easy to scan, and descriptions remain secondary.

### Colour, borders, and depth
- Use dark ink around `#273238` for primary text and muted slate around `#737984` for supporting copy.
- Choose one vivid brand accent for the eyebrow and CTA; an electric violet/blue around `#665BEA` is a useful starting point, but adapt it to the user's brand.
- CTA buttons should use the accent as a solid fill, white text, a pill radius of about 999px, and a subtle shadow such as `0 8px 18px rgba(70, 65, 190, 0.20)`.
- Feature icon tiles can use varied, softly tinted backgrounds rather than literal logos or copied artwork. Use a consistent square footprint around 72–80px, a 14–18px radius, and enough contrast for the symbol to remain legible.
- Avoid heavy borders. If separation is needed, use a barely visible line around `#E8E9EE` or a soft shadow.
- The optional right-side visual can use white layered surfaces, a 24–32px radius, and diffuse shadows such as `0 18px 40px rgba(30, 35, 55, 0.10)`.

### Interaction and accessibility
- Make the CTA visibly interactive with hover and keyboard-focus states: slightly brighten or darken the fill and lift it by 1–2px.
- If feature items are links, provide a subtle hover state that changes the title to the accent colour or shifts the icon tile, without causing layout movement.
- Use `:focus-visible` outlines with sufficient contrast.
- Give decorative visuals empty alt text and meaningful accessible labels to any actionable element.
- Ensure the grid remains readable at tablet widths, and never rely on colour alone to communicate meaning.

### Responsive behaviour
- At around 900px, reduce the introduction gap and scale the heading down slightly.
- At around 720px, stack the intro columns, place the visual below or beside the text depending on available width, and convert the feature grid to one column.
- On mobile, use 24px side padding, 40–56px section spacing, 38–44px heading text, and 24–32px gaps between feature rows.
- Keep icon tiles and text vertically aligned at the top so multi-line descriptions do not create awkward centring.

## Never
- Never use logos, product names, brand marks, or exact copy from the reference.
- Never reproduce the reference's specific feature names, CTA wording, or interface text.
- Never copy its illustrations, icon artwork, screenshots, or imagery; create neutral placeholders or original visuals suited to the user's product.
- Never turn the section into a dense collection of bordered cards.
- Never assume the reference's purple palette, typography, or content hierarchy is appropriate without adapting it to the user's brand.