Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Intercom 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:** Intercom
- **Category:** Academy
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbd3916b0a1061299e0fdc_6acbd1b3dd83b3a9f6091c6b_cms-efd48f3b499ceb283ed328b8.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:** Playful learning catalogue with warm paper tones, bold serif headings and collage-like geometric illustrations.
### Page composition
- **Canvas:** 1440 ร 1168 screenshot px.
- **Structure:** Brand and Sign In above a centered hero; irregular paper-like lower edge; three equal cards below, including two course cards and one dashed idea-submission card.
### Information hierarchy
- **Priority:** Large academy heading and concise description introduce the catalogue. Illustrated covers precede serif card titles and descriptions.
### Typography
- **Family:** Bold editorial serif headings paired with clean sans serif body/navigation; exact fonts unverified.
- **Scale:** Estimated screenshot hero 44 px, card titles 28 px, body 20 px and small metadata 14โ16 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; warm paper #F4F0EB/#F3EFEA; turquoise #77F8F0; violet #864DEF/#8550FB; black #000000.
- **Accents:** Yellow, coral and blue geometric shapes, eyes, ladders and thin expressive linework.
### Components
- **Course cards:** Thin gray outlines, small corner radii, large colorful collage covers, padded text and bottom count/duration separated by a rule.
- **Suggestion card:** Warm fill, dashed border, large lightbulb graphic and underlined bottom action.
- **Hero:** Pale textured blocks and scattered decorative symbols surround centered text; black rectangular Sign In button.
### Visual rhythm
- **Spacing:** Estimated screenshot card gaps 56โ60 px; generous 28โ32 px internal padding. Three aligned bottoms create a stable catalogue row.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack cards, preserve artwork proportions and keep course metadata aligned; reduce hero decorations around narrow text.
### Adaptation guidance
- **Preserve:** Serif/sans contrast, warm paper backdrop and colorful illustrated learning modules.
- **Replace:** Use supplied courses, actual durations and original collage artwork.
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.