Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: PandaDoc 404 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:** PandaDoc
- **Category:** 404 Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c6b9147fed3b8373680_1659621432593-screenshot-device-1f48558b7dc63e38ea2d1eda03c453fb-1659600575280.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:** Spacious white error page with bold charcoal copy, green recovery action and a hand-drawn black-and-white 404 illustration.
- **Tone:** Light textured geometric artwork softens the error without obscuring the recovery path.
- **Scale:** The image measures 1440 × 1725 px and was inspected in two portions. Dimensions below are image estimates; CSS scale is unverified.
### Page composition
- **Header:** Centered wordmark/navigation row contains product links, demo/login and outlined trial action.
- **Error block:** A left text/action column pairs with a much larger 404 drawing on the right near the top of the page.
- **Whitespace:** Most of the lower page is empty white.
- **Cookie notice:** A rounded white notice overlays the lower-left area with small text, policy link and external close control.
### Information hierarchy
- **Error:** Page not found is the strongest text in the content block.
- **Explanation:** A short gray two-line apology clarifies the missing destination.
- **Recovery:** A green Jump to main page button provides one clear next step.
- **Context:** Standard navigation remains available above; the cookie notice is secondary.
### Typography
- **Family:** Heavy rounded sans-serif headline with smaller conventional copy; exact identities are unverified.
- **Heading:** Approximately 42–44 image px, bold, compact leading.
- **Body:** Around 19–20 px with 28 px leading in gray.
- **Action/navigation:** Approximately 15–16 px, bold for actions.
- **Notice:** Small compact sans-serif text with an underlined policy link.
### Colors & surfaces
- **Measured base:** ICC-aware sRGB sampling yields #FFFFFF and charcoal #242424.
- **Measured action:** Green #47B973 appears in the recovery treatment.
- **Neutrals:** Near-white/grays define notice shadow and textured illustration edges.
- **Brand:** Small blue/yellow logo detail adds limited color.
- **Depth:** Main content is flat; cookie notice uses a soft shadow and large corners.
### Components
- **404 art:** Oversized outlined numerals flank a textured black circle with small abstract marks and shapes.
- **Recovery button:** Approximately 200 × 50 image px green rectangle with white bold text and small corners.
- **Header trial:** Thin green outlined rectangle contrasts with plain navigation.
- **Cookie panel:** Wide low white rounded box contains multiline explanatory text and a small circular close X.
### Visual rhythm
- **Top balance:** Text and illustration occupy a shared horizontal band.
- **Spacing:** Heading, explanation and action have generous gaps.
- **Whitespace:** The large blank lower canvas emphasizes the compact recovery content.
- **Notice placement:** Cookie UI remains detached from the main error message.
### Responsive
- **Evidence limit:** Only desktop is shown; recommendations follow.
- **Layout:** Stack copy above artwork and scale the drawing proportionally.
- **Navigation:** Collapse the wide header.
- **Notice:** Keep cookie text/actions readable without obscuring recovery.
### Adaptation guidance
- **Reusable pattern:** Pair a clear missing-page message with one recovery action and light brand illustration.
- **State clarity:** Do not imply the destination exists or navigation succeeded.
- **Accessibility:** Use semantic error heading, descriptive recovery label and accessible cookie dismissal.
- **Visual restraint:** Keep decoration secondary to the return path.
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.