Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: WorkOS Landing Page
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** WorkOS
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6adebf2e69a0c03b6a9c_6acb6a16c8e486b21179235a_cms-601a9670a4d929a273985acb.webp
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** A polished enterprise developer landing page blends airy white sections with a deep-navy technical chapter.
- **Identity:** Iridescent three-dimensional forms, softly raised white icon tiles and violet-to-cyan gradients create a luminous visual system.
### Page composition
- **Capture scale:** The source is 2880 × 16078 pixels, inspected throughout. A 2× capture is plausible but unverified; dimensions below estimate CSS pixels at half source resolution.
- **Hero:** Navigation sits above a left-aligned two-line headline and actions, balanced by a large floating iridescent brand sculpture. An announcement pill and eight customer marks follow.
- **Authentication:** A pale section pairs SSO copy with a raised login illustration, then four icon-led capabilities in two columns.
- **Developer chapter:** A deep-navy region contains API explanation, feature icons, tabbed code example and response panel, extending into a large circuit-board illustration.
- **Directory:** A pale section introduces synchronization, with branching connector lines linking two raised icon/copy groups.
- **Admin portal:** Centered introduction leads into overlapping browser mockups and six small icon-led benefits.
- **Closing:** A market-expansion/video split precedes stacked testimonial cards, customer-logo selector and pale four-column footer.
### Information hierarchy
- **Hero:** The large gradient Enterprise Ready phrase is the strongest opening emphasis.
- **Section framing:** Violet eyebrow labels precede dark large headings and muted explanatory copy.
- **Technical proof:** Code and response panels contrast sharply against the dark developer region.
- **Trust:** Customer marks at opening and layered testimonial cards near the end bookend the feature story.
### Typography
- **Family:** A modern sans serif is used for marketing, with monospace code; exact identities are unverified.
- **Hero:** Approximately 80 pixels, bold with compact leading.
- **Section headings:** Around 50–52 pixels, bold; eyebrow labels around 28 pixels.
- **Reading roles:** Main copy is around 20 pixels with 30-pixel leading; small capability descriptions roughly 14–16 pixels.
- **Testimonial:** Approximately 32 pixels and bold, with smaller muted attribution.
- **Code:** Compact monospaced text uses syntax colors and line numbers.
### Colors & surfaces
- **Measured base:** White #FFFFFF alternates with pale lavender-gray #F9F9FB.
- **Measured dark palette:** #030527, #0E102F and #030422 establish the navy technical chapter; #191B39 contributes raised code surfaces.
- **Accent relationships:** Violet actions and labels pair with cyan/mint highlights and purple-blue-green headline gradients.
- **Depth:** Large soft gray-violet shadows appear beneath raised tiles, floating sculpture and layered customer cards.
### Components
- **Hero actions:** A violet capsule button with soft shadow pairs with a simple sales text link and chevron.
- **Raised tiles:** Large rounded white squares contain lock, keys, envelope/link and authentication-code illustrations.
- **SSO mockup:** A large rounded white login panel includes user icon, email field and gradient-accented action.
- **Code example:** A rounded dark panel has multiple language tabs, active underline and syntax-highlighted lines; a separate response panel sits below.
- **Directory diagram:** Pale branching paths connect circular user symbols to two illustrated capability blocks.
- **Admin mockups:** Overlapping browser windows show provider-choice grids; small benefit icons form a two-column list.
- **Testimonial stack:** Three overlapping white cards use thin top accents and shadows; the foreground includes logo, quote and avatar attribution.
- **Footer:** A muted brand symbol and four link groups sit above copyright and social icons.
### Visual rhythm
- **Container:** Most content aligns within roughly 1200 pixels with around 120-pixel side margins.
- **Section pauses:** Large vertical spaces separate features and create a slow, spacious reading pace.
- **Density contrast:** Compact code/benefit lists alternate with oversized decorative visuals and open white regions.
- **Observed overlap:** The developer headline and content visibly crowd one another in the supplied capture; some admin-section action content also appears partially obscured.
### Responsive
- **Observed state:** Only desktop is supplied; compact layouts are unverified.
- **Recommended stacking:** Place hero artwork, code panels, directory groups and admin mockups below their explanatory copy.
- **Recommended resilience:** Prevent the observed headline/content overlap with normal-flow spacing and flexible heights.
- **Recommended code:** Allow horizontal scrolling and preserve legible syntax rather than shrinking code excessively.
### Adaptation guidance
- **Preserve identity:** Keep luminous violet/cyan accents, iridescent artwork and soft raised tiles.
- **Balance technical proof:** Retain authentication, API, directory and admin-portal chapters as separate regions.
- **Content fidelity:** Treat code, provider marks and customer quotations as captured illustrations; do not execute or infer credentials/functionality.
- **Layout correction:** Match the visual language while correcting visible overlap through responsive flow.
- **Accessibility:** Provide decorative-image treatment where appropriate, descriptive functional imagery and labeled tab/carousel controls.
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.