Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Sketch Features 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:** Sketch
- **Category:** Features Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6df00e8221f13083667e_6acb6bdd6670525038122ad0_cms-48bdb67c0962ef98fe8973a8.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 bold design-tool feature page combines oversized black typography, white editorial sections and colorful geometric gradients.
- **Imagery:** Large application screenshots provide proof, while dimensional cursor, typography and puzzle graphics add a playful creative theme.
### Page composition
- **Capture:** The original is 1440 ร 10754 image pixels, inspected throughout. Dimensions approximate image pixels; CSS scale is unverified.
- **Hero:** Navigation overlays a warm yellow/peach geometric background, with left headline/copy/action and a large dimensional cursor right.
- **Design chapters:** Flexible design and Consistent design combine large headings, broad application screenshots and four explanatory text groups each.
- **Native chapter:** A charcoal section pairs white heading, ten checkmarked benefits and a dark application screenshot.
- **Growth chapter:** A centered introduction leads into another broad screenshot and four text explanations.
- **Extensions:** A split introduction with floating puzzle pieces precedes six plugin summaries in two columns.
- **Closing:** Two update tiles, a green signup banner, testimonial, newsletter and five-column footer complete the page.
### Information hierarchy
- **Hero:** Heavy two-line display type and black CTA lead the opening.
- **Product evidence:** Large screenshots precede detailed explanations, giving each chapter a clear overview-to-detail sequence.
- **Lists:** Bold subsection titles organize compact paragraphs; plugin names lead descriptions and small type/author metadata.
- **Conversion:** Black signup actions repeat in hero and final green banner.
### Typography
- **Family:** Rounded sans serif is used; exact identity is unverified.
- **Hero:** Approximately 76 pixels, very bold, with tight leading.
- **Chapter headings:** Around 56 pixels and heavy; supporting introductions about 21 pixels with 28-pixel leading.
- **Details:** Bold titles around 20 pixels precede 17-pixel paragraphs with 24-pixel leading.
- **Footer:** Links and newsletter text use approximately 15 pixels; testimonial around 24 pixels and semibold.
### Colors & surfaces
- **Measured base:** White #FFFFFF dominates.
- **Measured contrast:** Charcoal #212123 and black #000000 anchor type, actions and native-app chapter.
- **Measured pale surface:** #F8F7F8 supports UI/soft surfaces.
- **Measured accents:** Green #C4D378 appears in the closing banner; warm yellow #F5CF6F appears in the opening palette.
- **Gradient relationships:** Peach/yellow, mint/teal and pink/purple geometric backgrounds vary between chapters.
### Components
- **Screenshots:** Large rounded application windows show sidebar, canvas and inspector, with soft shadows and occasional floating prototype windows.
- **Actions:** Compact black rectangles have small radii and bold white labels.
- **Detail groups:** Four unboxed title/paragraph blocks align in a narrow column beside large decorative shapes.
- **Native checklist:** White checkmarks precede regularly spaced muted-white lines.
- **Plugin summaries:** Square service marks align beside title, description and a small lavender Plugin pill.
- **Update tiles:** Two pale rounded rectangles center simple icons above text links.
- **Signup banner:** A large green rounded panel includes logo, heavy title, paragraph and black button.
- **Newsletter:** Email field, gray action and consent checkbox sit beside introductory copy.
### Visual rhythm
- **Container:** Most content spans roughly 1200 pixels with 120โ150-pixel side margins.
- **Scale:** Oversized screenshots and large white gaps create distinct long chapters.
- **Alternation:** Detail columns switch sides, balancing colorful geometric backgrounds.
- **Grid:** Plugin and update areas use consistent two-column spacing.
### Responsive
- **Observed state:** Only desktop is supplied; compact behavior is unverified.
- **Recommended flow:** Stack screenshots and text, simplify decorative shapes and reduce grids to one column.
- **Recommended type:** Scale heavy headings fluidly and preserve readable body widths.
- **Recommended forms:** Stack newsletter controls and keep consent labels readable.
### Adaptation guidance
- **Preserve character:** Retain heavy typography, large product evidence and selective geometric color.
- **Maintain chapters:** Keep flexible, consistent, native, growth and extension regions distinct.
- **Content fidelity:** Treat product claims and plugin availability as captured information rather than current verified functionality.
- **Accessibility:** Provide useful screenshot alternatives, visible focus and labeled newsletter 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.