Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Airtable Landing 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:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca451c60a5c550269046a_1659675277300-62ec9cb3c09ba302ab0c05eb_screenshot-device-8384402e4eb6a8e1a5fd5663620f8b26-1659619826769.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:** A product-led landing page with large dark sans-serif headlines, blue actions, alternating pastel bands and extensive interface imagery.
- **Evidence scale:** Original 1440 ร 7384 pixels, inspected through all six readable crops. Dimensions are image-pixel estimates; CSS scale is unverified.
### Page composition
- **Header:** Pale announcement strip above a white navigation row with logo, product links and sales/signup/login actions.
- **Hero:** Pale-blue split section pairs a four-line headline, bold explanatory copy and blue signup button left with a large workplace photo right.
- **Social proof:** Six gray customer wordmarks span a neutral horizontal band.
- **Feature sequence:** Centered introduction precedes alternating text/screenshot sections for unified work, Interface Designer and data synchronization.
- **Getting started/scale:** Two split sections combine large screenshots with underlined text tabs and explanatory copy, followed by small captions and outlined actions.
- **Customer proof:** Cream section contains a large heading and a portrait/quote panel.
- **Closing/footer:** Large centered signup statement and blue button precede a navigation/social row, five link columns and a pale legal/store-badge strip.
### Information hierarchy
- **Hero:** Oversized headline and strong blue action establish the main proposition.
- **Features:** Large headings pair with regular explanatory copy and blue arrow links.
- **New feature:** Purple NEW badge marks Interface Designer.
- **Tabbed regions:** Active labels are dark and underlined; inactive alternatives are gray.
- **Testimonial:** Customer logo, large quotation, author/role and video link sit beside a portrait.
- **Footer:** Bold group labels, small colored NEW/POPULAR badges and show-more links support secondary discovery.
### Typography
- **Hero/closing:** Unverified sans-serif, approximately 64โ68 px bold, 70โ74 px line height and tight tracking.
- **Feature headings:** Around 48 px semibold with 56 px line height.
- **Body:** Approximately 20 px regular, 24โ28 px line height; hero body around 24 px bold.
- **Links/tabs:** Around 18 px semibold.
- **Testimonial:** Approximately 24 px medium, 32 px line height.
- **Navigation/footer:** Around 14โ16 px regular/medium.
### Colors & surfaces
- **Base:** Measured white #FFFFFF and near-white #FCFBFC.
- **Feature band:** Pale blush #F9F2F5 and neighboring #FCF2F6.
- **Hero:** Pale blue #EBF8FD.
- **Testimonial:** Warm cream #FAF6EA.
- **Utility bands:** Pale gray-blue #F2F3F7.
- **Ink/actions:** Dark #333333 headings; vivid blue actions/links, purple badge and colorful product-interface headers.
### Components
- **Hero image:** Approximately 590 ร 390 px rounded workplace photo with a small interface overlay visible within the scene.
- **Primary actions:** Blue rectangular buttons, roughly 46 px tall with 8 px radii and large white labels.
- **Timeline screenshot:** Large unboxed product view with pink header and yellow/green bars.
- **Interface preview:** Broad white application screenshot with content sidebar, media asset and related-asset cards.
- **Sync illustration:** Laptop/table view surrounded by eight circular app-logo discs and dotted connector lines.
- **Tabbed previews:** Three text tabs above each large screenshot; active state uses a dark underline.
- **Secondary buttons:** White outlined rectangular actions with modest radii.
- **Testimonial panel:** Large split photo/white quote card, slightly rounded outer corners.
- **Footer:** Five text columns, social icons, small status badges and mobile-store badges in the final strip.
### Visual rhythm
- **Section padding:** Large 100โ160 px intervals surround major headings and feature pairs.
- **Alternation:** Screenshots switch sides while text retains a stable narrower measure.
- **Background cadence:** Blue hero, blush features, near-white product sections and cream testimonial provide distinct chapters.
- **Grid alignment:** Repeated approximately 140 px side insets align feature content, while footer uses wider bounds.
### Responsive
- **Observed limit:** Desktop page only; responsive behavior is unverified.
- **Recommendation:** Stack feature pairs, reduce display type and preserve image aspect ratios.
- **Tabs/sync art:** Allow tabs to wrap and simplify peripheral logo placement without hiding core information.
- **Footer:** Collapse link columns and wrap legal/store controls with comfortable spacing.
### Adaptation guidance
- **Retain:** Explain the product through successive concrete interface examples, then close with customer proof and one clear signup action.
- **Implement:** Use pale section backgrounds, strong blue actions and alternating text/image layouts.
- **Verify:** Confirm fonts, dimensions and current product/customer claims separately; no signup, video playback or product change was performed.
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.