## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073860-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073673776.webp
- Design on Kage: https://kage.design/designs/workos-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, type choices, logo, imagery). Wait for their answers before proceeding. Apply the following system to that product, using its own content and brand rather than copying the reference.

## Page structure
1. **Global header:** Build a slim white navigation bar with a compact brand mark at left, grouped product/documentation/customer/resource links in the center-right, pricing, and a restrained outlined sign-in control.
2. **Hero:** Use a generous two-column layout. Place a small announcement eyebrow above a very large two-line headline on the left, with the second line using a vivid purple-to-blue gradient; follow with concise supporting copy and primary/secondary actions. On the right, show a faded, layered enterprise-feature interface illustration with stacked cards and a soft blue-violet glow.
3. **Trusted-by logo wall:** Add a small uppercase label, then a wide three-row grid of customer marks in pale bordered cells. Keep the logos monochrome and low contrast, with a centered link beneath.
4. **All-in-one solution section:** On a very light gray/lavender background, introduce the main platform with a purple eyebrow, large heading, paragraph, and CTA on the left, and a floating rounded sign-in UI mockup on the right. Follow it with a two-column-by-three-row feature list; each item pairs a small colorful rounded-square icon with a bold title and muted explanatory text.
5. **Developer/API section:** Make a deliberate full-width transition to deep navy. Center a teal eyebrow and large white heading at the top, then use a two-column content area: explanatory copy, glowing CTA, secondary API-key link, and six compact capability items on the left; a large dark rounded code editor with language tabs and syntax-highlighted lines on the right. Fade an abstract network/platform graphic into the lower background to extend the section vertically.
6. **Directory sync section:** Return to white/light gray with a purple eyebrow, large left-aligned heading, short paragraph, and CTA. Use a pale branching connector diagram across the lower/right area, terminating in two soft 3D integration cards for provisioning and HRIS, with small purple/blue circular nodes along the path.
7. **Admin setup section:** Center the eyebrow, heading, supporting paragraph, and two actions on a white field. Below, place a large angled/layered identity-provider configuration browser mockup on the left and a two-column list of six admin benefits with small lavender icon tiles on the right.
8. **Why/product-market section:** Use a mostly open white section with a faint oversized lavender gradient shape entering from the right. Set a left text block with eyebrow, heading, and two short paragraphs; pair it with a video thumbnail/card and linked title on the right.
9. **Customer story/testimonial:** Add a centered “powered by” label and a large raised white testimonial card with thin dark top accent, subtle offset backing cards, customer mark, oversized quote, and small avatar/name attribution. Beneath it, show a horizontal customer-story selector with muted logos, one selected logo in darker contrast and an underline, plus a centered stories link.
10. **Footer:** Finish with a very light gray footer. Place the brand symbol in the first column and organize dense but small navigation links into Products, Developers, Resources, and Company columns. Include copyright at bottom-left and restrained social icons at bottom-right.

## Design language
- Build hierarchy through scale and whitespace: use oversized 56–72px desktop headlines with tight line-height, 16–18px body copy, small uppercase/letter-spaced eyebrows, and short section labels in purple or teal.
- Keep the main canvas near white (`#ffffff`) and use very pale cool surfaces (`#f7f7fb`, `#f4f3ff`) to separate product blocks without heavy borders.
- Use a saturated violet-to-blue gradient for hero emphasis and primary buttons, approximately `#7357e8` through `#3f9de8`; reserve cyan/teal (`#2ce2d0`) for developer-focused emphasis and dark-section CTAs.
- Treat the developer/API section as the main rhythm break: use deep navy (`#05082d` or `#070b35`), white headings, muted blue-gray copy, a charcoal-indigo editor panel, and subtle electric blue/purple glows.
- Pair a modern geometric sans-serif with strong weight contrast: heavy headings, medium labels, and relaxed gray body text. Keep paragraphs narrow enough to read comfortably even in wide sections.
- Use rounded UI mockups, feature icon tiles, and CTA buttons with moderate radii around 10–18px. Product illustrations should feel like floating layered cards with broad, soft shadows rather than hard skeuomorphic borders.
- Keep logos, dividers, and secondary controls low contrast. Use thin pale grid lines for the logo wall and almost invisible connector lines for diagrams; let colour and scale, not outlines, carry emphasis.
- Alternate density deliberately: airy hero and logo wall, denser capability grids, a highly technical dark code panel, then spacious setup/video/testimonial areas before a compact information-dense footer.
- Use interaction cues sparingly: gradient filled primary buttons can lift with a soft shadow on hover, text links can gain a chevron, tabs in the code editor can show a bright underline, and testimonial selectors can switch the active logo with an underline.
- If adding motion, keep it subtle and functional: slow floating/blurred movement for abstract integrations, gentle card elevation on hover, and restrained fade/slide reveals as sections enter the viewport.

## Never
- Do not use the reference company’s logos, wordmarks, product names, copy, illustrations, photography, customer names, testimonial text, or icon set.
- Do not reproduce WorkOS branding or present the result as WorkOS.
- Create an original visual system and content for the user’s product while retaining only the reusable layout logic, spacing rhythm, contrast strategy, and component patterns described above.