Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Folio 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:** Folio
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb67fac08cd859ff86939f_6acb66dbb226993977e0a5ed_cms-fe659c90b96e6ce8046cb3bd.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
- **Style:** Dark interactive-demo SaaS landing page with vivid violet actions, multicolor gradient headline accents and numerous product illustrations.
- **Character:** Near-black navy canvas, white heavy sans-serif headings, muted gray body copy and slightly lighter rounded cards.
- **Surface treatment:** Fine grid backgrounds, dark product frames, soft borders and selective glow/gradient detail rather than broad drop shadows.
### Page composition
- **Capture scale:** 2880 × 20342 image px. CSS estimates assume an unverified 2× capture, approximately 1440 × 10171 CSS px.
- **Header:** Logo left, five navigation groups center, outlined Sign In and violet free-access action right.
- **Hero:** Centered multiline headline mixes white and blue/violet/pink/orange gradient phrases. Two-line description and violet CTA sit above a large demo-editor preview.
- **Demo preview:** Broad dark application frame contains a bright central onboarding card, editing toolbar and violet Next action.
- **Showcase overview:** Centered heading precedes six compact feature cards in three columns and two rows.
- **Audience introduction:** Large centered heading and description lead into five role tabs; Marketing is selected violet.
- **Role sections:** Five alternating image/text rows cover marketing, sales, customer success, product and support. Each includes icon/label, bold outcome heading, two bullets and a subdued Learn More action.
- **Feature grid:** Another centered heading precedes six larger illustrated cards in three columns and two rows, covering capture, flow, customization, guides, personalization and collaboration.
- **Integrations:** Left-aligned heading/copy balance two staggered columns of logo cards on the right.
- **Articles:** Three image-led cards sit beneath a centered heading, followed by a browse-all control.
- **Closing CTA:** Large violet grid-backed banner combines white conversion copy/action left and a cropped demo-library screenshot right.
- **Footer:** Brand/location/social links left, four text-link columns right, separated from the page by a fine rule.
### Information hierarchy
- **Hero emphasis:** White outcome phrase is framed by colorful gradient text; the primary CTA remains a solid violet rectangle.
- **Overview hierarchy:** Small feature cards use icon, bold label and short muted explanation.
- **Audience hierarchy:** Role tabs establish context before alternating detailed use-case rows.
- **Product demonstration:** Dark screenshots and annotated illustrations provide concrete examples beside each outcome.
- **Secondary content:** Integration logos and articles appear after the main feature explanation.
- **Captured states:** Marketing tab is selected and several product illustrations show editing overlays. Their interactive behavior is not established.
### Typography
- **Family:** Heavy rounded modern sans serif for headings, neutral sans serif for supporting copy. Exact identities are unverified.
- **Hero:** Approximately 60–64 CSS px bold with 72 px leading; the lower gradient phrase is slightly smaller.
- **Major section headings:** Approximately 48–54 px bold with 58–64 px leading.
- **Use-case headings:** Approximately 30–34 px bold with 38–42 px leading.
- **Card titles:** Approximately 18–20 px bold.
- **Body:** Approximately 16–18 px with 26–30 px leading; card descriptions are smaller, around 14 px.
- **Navigation/actions:** Approximately 14–16 px medium/semibold.
- **Measurement limit:** Values are visual CSS estimates under the assumed 2× capture.
### Colors & surfaces
- **Main canvas:** Sampled sRGB #0B101C dominates the page.
- **Cards:** Sampled #181E29 and #151A24 provide slightly lighter dark surfaces.
- **Product details:** Sampled #11111F and #21252F provide related dark interface references.
- **Primary violet:** Sampled #460BF9 supplies the saturated action/banner accent.
- **Foreground:** Sampled #FFFFFF supplies the strongest heading/label contrast.
- **Gradient accents:** Blue, violet, magenta, coral and orange blend across selected headline phrases and product imagery; these are not one flat UI token.
- **Secondary copy:** Muted cool-gray text remains quieter than white headings; fine dark-gray rules establish grids and card edges.
### Components
- **Header actions:** Small outlined dark rectangle and filled violet rectangle with modest 5–6 px radii.
- **Hero CTA:** Approximately 200 × 50 CSS px, violet fill and white bold text.
- **Editor preview:** Large dark bordered rounded frame with central white modal, gradient brand image, floating text-format controls and small Next button.
- **Overview cards:** Approximately 385 × 145 CSS px, dark fill, 14–16 px radii, icon left and stacked copy. Some have small violet HTML corner badges.
- **Audience tabs:** Icon/text buttons with dark outlined surfaces; selected Marketing uses solid violet.
- **Use-case illustrations:** Rounded dark panels containing marketing messages, demo lists, chat bubbles, dashboard annotations and help-center examples.
- **Large feature cards:** Approximately 385 px wide, with illustrative upper area and title/description below.
- **Integration tiles:** Dark rounded horizontal rectangles with white logo squares and small service labels, fading near the section edges.
- **Article cards:** Rounded image top and dark metadata/title area below.
- **Closing banner:** Broad violet rounded rectangle with faint square grid and large cropped product image.
- **Footer icons:** Small gray social symbols beneath the brand.
### Visual rhythm
- **Long-page pacing:** Hero, compact overview, audience use cases, feature grid, integrations, articles and final CTA create a layered sales narrative.
- **Alternation:** Five role rows switch image/text placement to vary the reading direction.
- **Grid repetition:** Three-column cards and repeated rounded product panels unify the many content types.
- **Whitespace:** Large vertical gaps separate major headings and use-case rows.
- **Accent economy:** Solid violet marks actions and selected states; gradients remain concentrated in display phrases and demonstrations.
### Responsive
- **Evidence limit:** Only desktop is shown; recommendations below are not observed behavior.
- **Hero recommendation:** Reduce display type and preserve natural wrapping without squeezing gradient phrases.
- **Rows recommendation:** Stack each use-case's text and image in a consistent reading order.
- **Grid recommendation:** Reduce three-column layouts to two and then one column.
- **Tabs recommendation:** Allow role tabs to scroll accessibly or wrap with clear selection.
- **Image recommendation:** Crop product previews intentionally and provide close-ups if tiny interface text matters.
- **Footer recommendation:** Stack link groups and preserve clear legal/social routes.
### Adaptation guidance
- **Preserve concrete explanation:** Pair audience outcomes with genuine product demonstrations.
- **Use verified claims:** Replace free-access offers, integration logos, capabilities and commercial statements with accurate target material.
- **Match breadth:** Include only relevant roles/features; do not fabricate sections to reproduce the page length.
- **Retain visual consistency:** Use dark navy, lighter card surfaces, white headings and one violet action accent.
- **Keep implementation detail secondary:** Describe user benefits before detailed editor imagery.
- **Accessibility recommendation:** Validate dark-theme contrast, tab semantics and image alternatives; interaction behavior is not verified by the capture.
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.