Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Surfer SEO Academy
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Surfer SEO
- **Category:** Academy
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbd083b6b24eada54885a_6acbbc4d857cbd7f46b5a352_cms-e44d803ccecb8d8068246ea7.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:** Energetic training hub with deep-purple gradients, rounded display typography and pink-to-orange action accents.
### Page composition
- **Canvas:** 2880 × 9258 screenshot px; CSS estimates assume 2× capture.
- **Sequence:** Split academy hero, four-item learning selector beside video, centered benefits with three overlapping cards, white event/short-video catalogue, two community/masterclass promotions, large gradient CTA and black footer.
### Information hierarchy
- **Priority:** Hero and video provide orientation; horizontal dark media cards distinguish upcoming sessions and short lessons.
### Typography
- **Family:** Heavy rounded display sans serif paired with neutral body sans; exact fonts unverified.
- **Scale:** Estimated CSS hero 56 px, section headings 42–48 px, card headings 24 px and body 18 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; deep purple #11051D/#180A29/#26084F/#1E0C34/#220B42; near-black #000001.
- **Accents:** Coral-to-orange gradients on buttons and highlighted words; purple outlines and glows.
### Components
- **Media:** Rounded video embed, outlined selector tiles with gradient active border, wide session cards and tall short-video cards.
- **Promotions:** Cutout instructor portraits over colorful rounded panels; three benefit cards overlap dark/white section boundary.
- **Geometry:** Estimated CSS card radii 16–24 px, buttons 10–12 px; soft shadows under overlapping cards.
### Visual rhythm
- **Spacing:** Approximately 100–160 CSS px major-section gaps; alternating dark and white regions organize the long catalogue.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack hero/video selector, make media rows scrollable and reduce display type while preserving card readability.
### Adaptation guidance
- **Preserve:** Deep-purple media identity, friendly type and warm action gradients.
- **Replace:** Use actual sessions, authorized imagery and accurate course benefits; do not copy dates or outcomes.
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.