Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Reducto 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:** Reducto
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad40fc910b3adf9e48d8f_6acad1ae3279c14eb676be93_cms-174e3f513a453fddd1e488ab.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 sophisticated document-AI landing page pairs large high-contrast serif display type with practical sans-serif copy, pale technical illustration, plum accents, and dark enterprise messaging.
- **Evidence:** Original dimensions are 2880 ร 19380 image pixels, inspected across seven readable crops at 1400 px width. Dimensions below are approximate CSS-scale estimates assuming a 1440 px layout at 2ร capture; device pixel ratio is unverified.
- **Motifs:** Fine grids, pixel-textured squares, outlined document stacks, and geometric construction drawings tie the page together.
### Page composition
- **Header and hero:** A restrained header places logo left, four central links, and login/outlined sales action right. A huge centered two-line serif headline, supporting copy, and paired trial/demo buttons lead into a wide document-processing illustration.
- **Proof and scale:** A thin divider precedes customer logos. A giant processed-pages figure sits over a pixel-square pattern and an isometric paper stack.
- **Product:** A centered product introduction leads into a split region: four product options at left and document artwork at right. Parse is expanded in the displayed state.
- **Use cases:** A large centered introduction precedes tab-like industry controls and a wide two-column panel. Finance is displayed, with description/CTA/testimonial left and spreadsheet-extraction artwork right.
- **Process:** A split heading/explanation introduces a central layered circular illustration, flanked by three short process explanations.
- **Feature matrix:** Six illustrated benefit cells form a three-by-two framed grid with dotted inner dividers and perforation-like edge dots.
- **Enterprise:** A full-width dark-brown band contains a centered title/action, central lock construction graphic, four surrounding benefit groups, and customer logos.
- **FAQ and footer:** A two-column question section has a large serif heading left and four rows right; the first answer is open. A deep-plum footer contains brand/prose, four link groups, and a huge textured wordmark clipped at bottom.
### Information hierarchy
- **Hero emphasis:** Most of the headline is dark serif text; one key word switches to bright purple sans serif. Paired actions sit below the short explanation.
- **Scale proof:** A very large serif number dominates its section, with small labels above and below; this is observed marketing content.
- **Product states:** The active Parse label is green with explanatory prose beneath; the three remaining options are muted and collapsed.
- **Industry state:** Finance has a colored icon and the visible content panel. Other industry tabs remain neutral; a darker trial tab sits at the end.
- **Enterprise proof:** White headings and muted supporting text contrast with the dark background. Small icons and a central technical lock organize the claims.
- **FAQ state:** The first row has a minus control and visible answer; three lower rows have plus controls and no visible answers.
### Typography
- **Families:** High-contrast serif type carries hero, section titles, large statistics, and the use-case quote. Neutral sans serif carries body, navigation, labels, and controls. Exact font identities are unverified.
- **Hero:** Approximately 80โ84 CSS px with 90 px line-height, regular weight, and tight tracking.
- **Section titles:** Roughly 64โ68 px with 78โ82 px line-height; many wrap across two centered lines.
- **Statistics:** The processed-pages figure is approximately 140โ150 px with compact leading.
- **Body:** Introductory copy is around 20 px with 30 px leading. Feature/process explanations are approximately 16โ18 px with 24โ28 px leading.
- **Controls and footer:** Buttons and navigation use about 14โ16 px; footer links are around 15โ16 px. Feature headings are around 19โ20 px medium weight.
### Colors & surfaces
- **Measured palette:** Source sampling found near-white #FAFAFA, warm off-white #F8F8F6, dark brown #2A2524, pale #FBFBFB and #FDFDFB, and deep plum #330634.
- **Semantic use:** Pale surfaces dominate; brown grounds display text and the enterprise band. Plum anchors branding and footer.
- **Accents:** Bright magenta-purple marks trial actions and selected illustration details. Blue, olive, rust, yellow, and pink distinguish section markers and small pixel motifs.
- **Borders:** Thin warm-gray outlines define documents, feature frames, buttons, and use-case panels. Large rounded floating cards are not the primary structural language.
- **Texture:** Pixel grids and faint technical linework remain low contrast so headings and document imagery stay prominent.
### Components
- **Hero actions:** A filled purple Try for free rectangle with arrow and a white outlined demo action sit side by side, around 56 CSS px high, with nearly square corners.
- **Document illustrations:** Layered outlined pages, small extraction labels, colored pixel markers, and a central brand symbol depict input-to-structured-data processing.
- **Product selector:** Four large icon/label rows use dotted separators. The active row expands with several lines of body copy.
- **Industry tabs:** Angular folder-like tabs include icons and labels. The displayed finance panel spans roughly 1150 CSS px and divides into equal text/artwork regions.
- **Process graphic:** Stacked elliptical disks and a letterform-construction surface sit centrally, with short text blocks to either side.
- **Feature cells:** Six large flat cells share a thin outer frame, dotted vertical/horizontal lines, illustrated upper zones, and icon/title/description lower zones.
- **Enterprise block:** A large geometric lock drawing sits inside a pixel frame. Two text benefits on each side are separated by dotted rules; a small white sales action sits above.
- **FAQ controls:** Small square outlined plus/minus buttons align right of each question; pale dotted rules separate rows.
- **Footer:** A small white logo with yellow symbol sits above descriptive copy and copyright; Product, Company, Social, and Legal columns align alongside it.
### Visual rhythm
- **Container:** Major content spans approximately 1150โ1280 CSS px with broad desktop gutters.
- **Centered landmarks:** Large serif titles create repeated calm pauses between denser technical diagrams.
- **Alternation:** Centered sections alternate with split layouts, preventing a long page from becoming a single repeated card pattern.
- **Spacing:** Large 100โ160 px section padding contrasts with 20โ32 px internal gaps. Illustrations often extend into surrounding whitespace.
- **Contrast progression:** Pale product and feature regions lead into the dark enterprise band, return to pale FAQ, and end in plum.
### Responsive
- **Observed limit:** Only desktop is shown; actual animation, breakpoint rules, tab changes, and accordion behavior are unverified.
- **Recommended type:** Scale large serif headings and statistics fluidly while preserving readable body size and deliberate line breaks.
- **Recommended layout:** Stack product/process/use-case columns; reduce the six-cell grid to two and then one column. Preserve active-content context beside or above selectors.
- **Recommended diagrams:** Simplify or provide textual equivalents when small document labels and construction details become unreadable.
- **Recommended footer and FAQ:** Stack heading/questions and footer groups, keep controls comfortably tappable, and clip decorative wordmark overflow independently from page content.
### Adaptation guidance
- **Preserve:** Retain the serif/technical-illustration contrast, pale foundations, plum conversion cues, and strong enterprise contrast break.
- **Build:** Use reusable section introductions, product selectors, industry panels, feature cells, enterprise benefits, and FAQ components with shared spacing tokens.
- **State handling:** Reproduce Parse, Finance, and first-FAQ-open as explicit reference states; define accessible keyboard and focus behavior independently.
- **Assets:** Treat document tables, pixel drawings, and metrics as designed content assets. Do not turn embedded artwork into functional controls without a separate requirement.
- **Accessibility:** Provide diagram equivalents, meaningful alternatives, visible focus, sufficient muted-text contrast, and reduced-motion support if decorative effects animate.
- **Validate:** Confirm original fonts, true CSS scale, responsive diagram cropping, tab/accordion states, and text wrapping. Performance, security, and customer claims are observations of the image rather than independently verified facts.
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.