Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Greenly Events 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:** Greenly
- **Category:** Events Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadbead05a3f53c0a86333_6acadb3c3ce5f4104ec04764_cms-51819be0b4bec5aba2696bd2.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:** Bold community-events page with heavy rounded typography, charcoal framing, playful stickers and colorful portrait collages.
### Page composition
- **Capture:** 2880 ร 12998 screenshot pixels; estimated 2ร CSS scale.
- **Structure:** Rounded navigation inside dark hero, location-filter tiles, two split upcoming-event cards, long past-event list, photo collage, expert carousel, purple community CTA and dark footer.
### Information hierarchy
- **Priority:** Oversized Events heading leads into location choices and upcoming dates. Past-event dates/actions align left while titles and speakers align right.
### Typography
- **Family:** Heavy rounded sans-serif headings with regular sans-serif supporting copy; exact families unverified.
- **Estimated CSS sizes:** Hero 80px, section headings 48px, card titles 26โ28px, body 16โ18px and uppercase filters 12px with tracking.
### Colors & surfaces
- **Measured palette:** Main #FAFAFA, white #FFFFFF, charcoal #272727, footer #1B1B1B, subtle card #F8F8F8 and event-art green #07503E.
- **Accents:** Lavender links/stickers, golden yellow buttons and sky-blue/yellow/purple expert cards.
### Components
- **Elements:** Outlined rounded navigation, wide location tiles, date/location badges, split event artwork, yellow Learn more buttons and large portrait carousel with vertical category lettering.
- **Estimated geometry:** Content approximately 1280px wide, cards 16px radius, 48px buttons and 32โ48px internal padding.
### Visual rhythm
- **Spacing:** Large upcoming cards transition to repetitive compact archive rows; dark expert section and purple CTA break the long light list.
### Responsive
- **Suggested adaptation:** Wrap filters, stack event text/artwork and archive columns, and retain swipe/arrow access to expert cards. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve the date-first event hierarchy and energetic portrait/sticker system. Use actual event information and clear upcoming/past distinctions.
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.