## 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-6.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-hero-3

## Before you start
Ask the user what their product does, who the hero is for, and what their brand identity feels like. Then apply the principles below to create an original hero for that product—do not reproduce the reference’s wording, branding, or imagery.

## Build a centered enterprise SaaS hero
Create a polished, spacious hero for a technical B2B software product. The hero should communicate a clear operational benefit, establish credibility with a restrained interface preview, and make the primary conversion action immediately obvious.

### Structure and layout
- Use a nearly white page background, approximately `#ffffff` or `#fcfcfd`.
- Build the hero as a vertical composition with three layers:
  1. A generous top visual area containing a soft, abstract product/integration preview.
  2. A centered text block with an eyebrow, headline, supporting paragraph, and actions.
  3. A partially visible lower product mockup or feature preview that continues below the fold.
- Keep the main content centered within a max-width of roughly `960px–1100px`.
- Give the text block substantial breathing room: approximately `96px–140px` above it and `64px–100px` below it on desktop.
- The preview should feel connected to the hero but remain secondary. Use cropped browser panels, cards, or dashboard fragments rather than a full-screen screenshot.
- On mobile, stack everything vertically, reduce the preview height, and prevent decorative UI from pushing the headline too far below the fold.

### Typography hierarchy
- Use a modern sans-serif with a technical, highly legible character. Prefer the product’s existing brand font; otherwise use a neutral system or geometric sans-serif.
- Add a small, medium-weight eyebrow above the headline in a vivid brand accent. Target `18px–24px` on desktop.
- Set the headline in a dark charcoal, approximately `#273238`, at about `52px–64px` with tight line-height around `0.98–1.08`. Keep it to one or two concise lines.
- Use a supporting paragraph in muted slate gray, approximately `#6f747d`, at `18px–20px` with `1.45–1.6` line-height and a readable max-width around `680px`.
- Make the eyebrow, headline, and paragraph clearly distinct in scale and contrast; the headline is the visual anchor.

### Actions and interaction
- Place the actions in a centered horizontal row below the paragraph with a gap of approximately `24px–32px`.
- Use one filled primary button with a saturated periwinkle-to-violet brand colour, approximately `#6867e8` or `#7068ed`, white text, medium-to-bold weight, and a pill radius around `999px`.
- Give the primary button generous padding, around `14px 24px`, and a subtle tinted shadow such as `0 8px 18px rgba(92, 86, 220, 0.22)`.
- Add a secondary text action for watching a demo, viewing a tour, or exploring the product. Pair it with a small outlined play icon and use dark gray text rather than another filled button.
- Add hover states: slightly darken or brighten the primary button, lift it by `1px–2px`, and change the secondary link to the brand accent. Keep transitions around `160ms–220ms`.
- Ensure both actions have visible keyboard focus rings and large enough hit areas.

### Product preview language
- Use low-contrast interface fragments in the upper and lower visual areas: white or very pale gray cards, thin cool-gray borders, and understated shadows.
- Approximate border colours: `#eef0f4` and `#e4e7ed`; use `1px` borders.
- Use soft card radii around `18px–28px` and gentle shadows such as `0 14px 40px rgba(40, 48, 70, 0.08)`.
- The preview can show setup cards, configuration panels, integration nodes, or a browser window relevant to the user’s product. Keep details simplified and partially cropped so the hero message remains dominant.
- Use small accent UI elements in the same violet/periwinkle family, with occasional teal or green status indicators only where they communicate state.
- Avoid heavy gradients, dark dashboard walls, noisy data, and excessive decoration. The visual should feel frictionless, calm, and enterprise-ready.

### Responsive and accessibility rules
- Preserve the centered reading order on small screens: eyebrow, headline, paragraph, primary action, secondary action, then preview.
- Let actions wrap or stack cleanly below `420px` without shrinking text excessively.
- Maintain a minimum body contrast ratio of WCAG AA, provide meaningful button labels, and treat decorative previews as hidden from screen readers.
- Do not rely on animation to communicate the value proposition. If adding motion, use a subtle fade/slide-in for the preview and respect reduced-motion preferences.

## Never
- Never use any logo, product name, brand name, or trademark from the reference.
- Never reuse the reference’s headline, eyebrow, paragraph, CTA labels, or other copy.
- Never copy the reference’s screenshots, device mockups, interface layouts, icons, or integration marks.
- Never include the reference’s illustrations, photography, imagery, or recognizable visual assets.
- Never make the hero a pixel-for-pixel recreation; adapt the layout principles and visual hierarchy to the user’s product and brand instead.