## 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-5.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-2

## Before you start
Ask what the user's product does, who it is for, and what its brand identity is. Then apply the principles below to create an original hero section for that product rather than reproducing the reference.

## Build this component
Create a responsive hero that introduces a technically complex platform or integration capability through a strong visual transition: a dark, atmospheric upper field gives way to a bright, editorial lower content area with a subtle systems diagram.

### Layout and alignment
- Use a full-width hero with two visually connected zones.
- Make the upper zone a deep navy canvas occupying roughly 45–50% of the component height. Keep it mostly atmospheric and low contrast, with a faint abstract circuit, network, or infrastructure pattern.
- Add a soft curved horizon or elliptical boundary where the dark zone meets the light zone. The curve should feel like a protected system layer or rising surface, not a hard divider.
- Place the main content in the lower light zone, aligned to a centered max-width container of approximately 1120–1200px. On desktop, use a left content column around 55–60% wide and reserve the right side for the diagram.
- Vertically position the lower content so the section label, headline, description, and CTA have generous breathing room above and below. The diagram should extend beyond the content area and can be partially cropped at the bottom or right edge.
- On mobile, stack the content above a simplified diagram, reduce the upper dark area, and preserve the curved transition without allowing it to consume the entire viewport.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly technical character.
- Set the eyebrow or section label in a medium-weight 18–22px size with a vivid indigo or violet accent.
- Use a large, tight headline around 52–72px on desktop, 40–48px on tablet, and 34–40px on mobile. Keep it to two or three short lines with a confident, conversational rhythm.
- Use near-black blue-gray for the headline, approximately #202B35.
- Set supporting copy at 18–20px with 1.45–1.6 line height and a muted slate color around #68717D. Constrain it to roughly 600px for readability.
- Use a bold 15–16px label inside the CTA.

### Colour and atmosphere
- Use a dark upper background around #070A2B or #080B2F, with subtle tonal variation toward #101745.
- Use a warm near-white lower background around #F8F8FA or #FAFAFB.
- Add barely visible blue-violet circuit or network traces in the dark field, using low-opacity colours around #202A5A and #34437D.
- Use an indigo-to-violet accent for the primary CTA, approximately #6264E8 to #7657E8, with a soft blue-violet shadow.
- For diagram nodes, use a restrained range of cyan, violet, and purple accents such as #22AEDD, #5D5BE8, and #9C55E8. Keep the overall composition quiet so the content remains dominant.

### Borders, surfaces, and geometry
- Avoid heavy borders. Use hairline connector strokes and very subtle off-white or cool-gray outlines around diagram containers.
- Give the CTA a fully rounded pill shape with approximately 999px radius, horizontal padding around 24px, and vertical padding around 13–15px.
- Use soft shadows only for floating diagram nodes and the CTA; shadows should be diffuse rather than sharp.
- Draw the diagram with thin, low-contrast paths that branch from a larger off-screen system or container. Place small circular or rounded nodes along those paths, each containing a simple abstract user/system glyph or geometric mark.
- Keep the technical illustration decorative and secondary. It should suggest synchronization, identity, or connected services without requiring the user to decode it.

### Interaction and responsiveness
- Make the CTA visibly interactive with a subtle lift, brighter gradient, or shadow increase on hover and keyboard focus. Preserve a clear focus ring.
- If the connector diagram is animated, use very slow opacity or path-drawing motion and respect `prefers-reduced-motion`; never let motion compete with the headline.
- Ensure the hero remains readable over the dark field and that the curved boundary does not obscure text at any breakpoint.
- Keep decorative traces and nodes behind the content with appropriate z-index and hide or simplify them on narrow screens for performance and clarity.

### Content behavior
- Use a concise category label, a direct benefit-led headline, one short explanatory paragraph, and one primary action.
- Adapt the wording to the user's product and brand. The message should make a difficult technical capability feel easy, reliable, and approachable.

## Never
- Never use the reference's logo, product name, company name, or exact copy.
- Never reproduce the reference's specific illustration, node icons, circuit pattern, or connector geometry one-for-one.
- Never reuse the reference's brand assets, imagery, or distinctive visual marks.
- Never make the diagram more visually prominent than the product message.
- Never sacrifice accessibility: maintain colour contrast, semantic heading order, keyboard focus, responsive behavior, and reduced-motion support.