Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Airtable 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:** Airtable
- **Category:** Events Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272d473c01a2286af8285_1660055013355-2595e376-d5ad-42ab-b80b-4d7b173f1242-name%3DAirtableEventsPage.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:** Cheerful events directory with pastel category blocks, illustrated navigation and documentary event photography.
### Page composition
- **Canvas:** 1440 ร 4091 screenshot px.
- **Sequence:** Minimal centered-brand header; centered invitation heading; four illustrated category links; four large pastel sections; embedded proposal form; past-event carousel; planning-resource callout; yellow signup footer.
### Information hierarchy
- **Priority:** Category illustrations provide immediate browsing paths. Each corresponding section has a bold heading, brief explanation and either empty-state text, event detail or form.
### Typography
- **Family:** Friendly humanist sans serif, exact font unverified.
- **Scale:** Estimated screenshot page heading 34 px, section headings 30โ32 px, body 18 px and metadata/category labels 14โ16 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; pink #FBECF1; pale yellow #FEF5DA; blue #E8EFFF; lavender #F5EEFE; footer yellow #FBD66E.
- **Illustrations:** Matching yellow, pink, blue and purple monochrome category art; richer purple form banner and multicolor confetti.
### Components
- **Sections:** Large rounded pastel rectangles, approximately 16 px corners and 64 px internal padding; empty states are centered within generous open space.
- **Conference row:** Event name, clock/date and location columns with small blue icons.
- **Past events:** Wide central photograph flanked by partial images, caption and pagination dots; embedded proposal form shows patterned purple header and email input.
### Visual rhythm
- **Spacing:** Large approximately 100โ140 screenshot px gaps between hero, sections and lower features; 32 px gaps between pastel panels.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Wrap category links into two columns, stack event metadata and keep embedded form responsive. Maintain photographs' readable focal points.
### Adaptation guidance
- **Preserve:** Color-coded event categories, explicit empty states and playful illustration/photo mix.
- **Replace:** Use actual schedules, event images and valid proposal form; do not reuse historical event information.
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.