Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Albato 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:** Albato
- **Category:** Academy
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acada62a43009b06fe6f28c_6acad9f7fbf1299940ab7810_cms-7131160b3daf52effda16230.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:** Educational academy landing page with gray/white bands, bright orange CTAs, course cards, and friendly illustration.
### Page composition
- **Canvas:** 2880 ร 10482 image px; CSS estimates assume an unverified 2ร capture.
- **Hero:** Navigation, certification headline/copy left, connected-app illustration right.
- **Sections:** Three course cards; three value cards; alternating certification timeline; three creator portraits; two-column FAQ; footer.
- **Background:** Soft wavy transitions separate pale and white sections.
### Information hierarchy
- **Primary:** Certification headline with orange highlighted phrase.
- **Courses:** Preview image, title, summary, instructor, and enrollment action.
- **Path:** Four timeline milestones explain progression.
- **Trust:** Creator portraits and FAQ support enrollment.
### Typography
- **Family:** Neutral sans serif; exact family unverified.
- **Hero:** Approximately 48โ56 CSS px, bold.
- **Section headings:** Approximately 40px, bold.
- **Card titles:** Approximately 24px, semibold.
- **Body:** Approximately 14โ16px with 22px line-height.
- **Precision:** Values and scale are estimates.
### Colors & surfaces
- **Canvas:** #FFFFFF.
- **Pale bands/cards:** #F4F5F6.
- **Orange:** #FF4604 and #FF4600.
- **Primary dark:** #2A3534.
- **Artwork pale blue:** #F4F8FF.
- **Muted text:** #B3AFB9.
- **Precision:** Sampled flat colors; imagery adds gradients.
### Components
- **Course cards:** Rectangular preview banner, pale body, instructor avatar, orange Enroll, Free label.
- **Value cards:** White rounded/elevated cards; center option solid orange.
- **Timeline:** Thin vertical line, orange glowing nodes, alternating text.
- **Creators:** Circular portraits on orange backplates.
- **FAQ:** Two columns with orange bottom rules and chevrons.
- **Footer:** Brand, links, social/contact icons, attribution.
### Visual rhythm
- **Spacing:** Broad section gaps, centered section headings, consistent three-column grids.
- **Timeline:** Alternating alignment adds vertical movement.
- **Color:** Orange repeats for actions and milestones without filling all surfaces.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack course/value grids and timeline entries; keep enrollment actions visible.
- **FAQ/footer:** Reduce columns and allow natural wrapping.
### Adaptation guidance
- **Preserve:** Learning-path sequence, course-first discovery, orange action system, and creator proof.
- **Content:** Use supplied courses, instructors, certification terms, and links.
- **Behavior:** Enrollment, timeline navigation, and FAQ expansion unverified.
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.