## 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-1789073890-1.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

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and conversion goal the page should express. Then apply the principles below to create an original hero for that product—do not reproduce the reference content or identity.

## Build this section
Create a responsive SaaS marketing hero with a slim top navigation and a two-column hero area. The composition should feel calm, premium, technical, and spacious, with the main message carrying most of the visual weight.

### Layout and alignment
- Use a full-width white or near-white page background.
- Center the content within a max-width container of approximately 1160–1200px, with 56–64px horizontal padding on desktop and 24px on mobile.
- Place a compact brand mark and wordmark at the top left; keep navigation links grouped on the right.
- Use a navigation height of roughly 72–88px. Vertically center all nav items.
- Below the navigation, create a hero grid with approximately 54% text width and 46% visual width, aligned to the same left and right container edges.
- Give the hero generous top spacing—around 80–110px on desktop—and enough bottom spacing for the next section label or trust bar to peek into view.
- On mobile, stack the content and visual, keeping the text first and reducing the hero top spacing to 48–64px.

### Typography hierarchy
- Use a modern sans-serif with clean geometric or humanist forms. Use a heavier weight for the main heading and medium weight for navigation and buttons.
- Add an optional small announcement or eyebrow line above the heading, around 15–16px, semibold, with a subtle arrow or affordance.
- Make the headline very large and tightly tracked: approximately 72–84px line height 0.95–1.02 on desktop, reducing to 48–58px on mobile.
- Break the headline into two or three deliberate lines. Keep the first line dark and apply a colourful gradient only to the most important phrase or second line.
- Use supporting copy at approximately 18–20px with 1.45–1.6 line height, muted slate-grey, and a maximum width of 590–640px.
- Keep navigation and utility text around 14–15px. Use sentence case rather than all caps except for an optional small trust label.

### Colour and visual treatment
- Use a white background close to `#FFFFFF` or a faint cool white such as `#FCFCFE`.
- Use deep charcoal for primary text, approximately `#20252B` or `#242832`.
- Use a muted blue-grey for supporting copy, approximately `#68717D`.
- For the highlighted heading, use a left-to-right gradient blending violet `#8963E8`, periwinkle `#6E8EEB`, and sky blue `#55A7D9`. Ensure accessible contrast where the gradient is used.
- Use a saturated violet-to-blue gradient for the primary CTA, approximately `#7560E8` to `#626BE7`, with white text.
- Keep secondary actions text-only or ghost-like, using charcoal text and a small arrow.

### Controls, borders, and radius
- Style the primary CTA as a compact pill or softly rounded button, around 44–48px tall, with 16–20px horizontal padding and a 22–26px radius.
- Add a subtle shadow beneath the primary CTA, such as `0 8px 18px rgba(91, 85, 190, 0.20)`.
- Make the secondary CTA visually quieter and separate it from the primary button with 20–28px of horizontal gap.
- Use a rounded outline sign-in or utility button in the navigation with a very light border such as `#E5E7EB` and a 20px radius.
- For the right-side visual, create a stack of floating status or capability cards. Use white surfaces, 1px borders around `#EEF0F3`, 14–18px corner radii, and soft shadows such as `0 10px 30px rgba(36, 42, 54, 0.10)`.
- Behind the cards, add a restrained abstract field: a pale blue-violet glow, thin vertical or radial lines, and a fade into the page background. Keep it decorative and lightweight rather than illustrative.

### Right-side product visual
- Build the visual from several horizontally oriented cards with a small toggle or status indicator, a short neutral capability label, and a compact state badge.
- Vary card widths and vertical offsets slightly to create depth, while preserving a clear vertical rhythm.
- Use desaturated grey for inactive states and a pale mint or blue tint for enabled states.
- Fade the lowest and outermost cards into the background so the visual feels integrated into the hero rather than boxed into a rigid panel.
- Avoid making the visual dependent on a real product UI; it should communicate “capabilities becoming available” through abstract status rows.

### Interaction and responsive behaviour
- Navigation dropdown labels should open on click or keyboard activation and have visible focus states.
- Buttons and links should have hover, active, and focus-visible states; slightly darken or lift the primary CTA on hover.
- Keep the decorative card stack non-interactive unless the product requires it. If interactive, use subtle hover elevation only.
- On widths below approximately 800px, collapse navigation into a menu button, stack the hero, reduce heading size, and prevent decorative cards from causing horizontal overflow.
- Respect reduced-motion preferences; keep glows and card movement static or nearly static for users who prefer reduced motion.

## Never
- Never use the reference company’s logo, wordmark, product name, navigation labels, headline, body copy, or CTA copy.
- Never copy the exact card labels, status text, gradients, spacing measurements, or arrangement from the reference.
- Never include recognizable logos, product screenshots, illustrations, or imagery from the reference.
- Never make the decorative UI imply capabilities the user’s product does not actually offer.
- Never sacrifice readability or accessibility for the gradient treatment.