Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: June 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:** June
- **Category:** Academy
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb726ab10d21a746c47bde_6acb6f10018523cfee2c6cc9_cms-a1bcdfeb5dc121bdd178a44b.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:** A playful educational landing page uses oversized navy/violet headings, pastel illustration, school-themed badges and bold yellow ticker strips.
- **Character:** Hand-drawn characters, emoji markers and irregular visual proportions make analytics lessons feel informal and accessible.
### Page composition
- **Capture:** The source measures 1440 × 6563 pixels. Dimensions below approximate image pixels; CSS scale is unverified.
- **Top strip:** A yellow horizontal ticker repeats topic labels and circular emoji icons, clipped at the viewport edges.
- **Hero:** A pale-lavender region pairs a very large two-line heading and short explanation left with an arched illustrated video panel right. School branding and a starburst badge sit above.
- **Signup:** A wide white outlined email/action bar overlaps the hero's lower boundary.
- **Library:** A large heading precedes a narrow level/progress sidebar and ten video cards arranged in an alternating two-column layout.
- **Teacher:** A split section pairs introductory copy and a large name heading left with an illustrated teacher/video panel and badge right.
- **Newsletter:** A peach band combines an illustrated inbox, oversized message and another overlapping signup bar.
- **Proof:** A large left-aligned heading sits beside a horizontally clipped collection of testimonial cards.
- **Closing:** A peach YouTube promotion with illustrated play symbols precedes a yellow emoji/text ticker at the bottom.
### Information hierarchy
- **Display type:** Huge headings dominate hero, library and lower promotional regions, with violet highlighting selected words.
- **Lesson cards:** Large thumbnails and circular play controls lead into bold titles and smaller grade/video metadata.
- **Progress:** The sidebar distinguishes level choices from a learned-lessons count, empty progress bar and next-lesson link.
- **Signup:** Oversized input text and filled violet actions create prominent conversion opportunities.
- **Badges:** Starburst stamps and short eyebrow labels reinforce the school theme.
### Typography
- **Family:** A bold geometric-looking sans serif contrasts with hand-drawn lettering inside artwork; exact identities are unverified.
- **Display:** Approximately 96–104 pixels, very bold, with tight line height.
- **Body:** Around 20 pixels with 30–32-pixel leading.
- **Card titles:** Approximately 24–26 pixels, bold; metadata around 16 pixels.
- **Sidebar:** Around 18 pixels, with bold group labels.
- **Signup:** Large placeholder text around 30–32 pixels and bold action labels around 32 pixels.
### Colors & surfaces
- **Measured base:** White #FFFFFF defines library and content areas.
- **Pastels:** Pale lavender #F0F1FE and warm peach #F8EFE7 appear in broad bands; nearby #FAF2E8 and #F9EFE4 occur in illustration surfaces.
- **Accent:** Blue-violet #5E79F4 is sampled in the action/accent system.
- **Contrast:** Deep navy headings contrast with lighter purple labels, while yellow tickers and badges introduce warmth.
- **Depth:** Thin pale borders and soft shadows define cards, play circles and large signup bars.
### Components
- **Hero video:** A tall arched panel has dark outline, colorful artwork and a large centered white play circle.
- **Signup bars:** Roughly 1120 pixels wide and 120 pixels high, with violet outline, 16-pixel corners, broad shadow and large inset action.
- **Lesson cards:** White rounded panels contain pastel thumbnails with centered play circles, bold titles and emoji-led metadata.
- **Variable grid:** Some lesson cards are broad and others narrow, alternating across rows rather than following identical widths.
- **Sidebar progress:** Level rows use emoji icons; later levels appear muted with small coming-soon markers. A pale rounded progress track appears below the count.
- **Teacher panel:** A large peach rounded rectangle contains a cartoon figure and white capsule audio waveform control.
- **Badges:** Jagged starbursts with black outlines, rotated text and offset shadow overlap section artwork.
- **Testimonials:** Thin outlined white cards combine avatar, name, handle, multiline text and muted timestamp.
- **YouTube art:** Two red hand-drawn play symbols sit opposite the large closing heading.
### Visual rhythm
- **Scale contrast:** Enormous headings alternate with compact lesson metadata and sidebar controls.
- **Section spacing:** Broad vertical gaps separate library, teacher, newsletter, proof and closing promotion.
- **Overlap:** Signup bars and badges deliberately cross section boundaries.
- **Cropping:** Tickers and testimonial collections extend beyond viewport edges; their clipped appearance is part of the captured composition.
### Responsive
- **Evidence:** Only desktop is observed; ticker motion, video playback and mobile behavior are unverified.
- **Recommended type:** Reduce display text substantially on narrow screens while preserving navy/violet emphasis.
- **Recommended grids:** Stack hero, teacher and newsletter columns; use one lesson-card column and a compact level selector.
- **Signup handling:** Stack input and action if needed, with readable text and comfortable targets.
- **Motion/accessibility:** Provide reduced-motion treatment for any animated ticker and labeled media controls.
### Adaptation guidance
- **Preserve:** Keep the school theme, hand-drawn pastel artwork, huge headings and overlapping signup treatment.
- **Build:** Use reusable lesson cards and explicit progress data rather than hard-coded visual counts.
- **Assets:** Maintain a consistent illustrated style and supplied media thumbnails.
- **Content fidelity:** Treat subscriber counts, testimonials and badge claims as visible content rather than independently verified facts.
- **Behavior:** Define video, filtering, progress and signup interactions explicitly; only captured appearances are established.
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.