Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Albato 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:** Albato
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acada63a43009b06fe6f2b3_6acad9f66cd44b3ad4d8ba58_cms-ad617d7132ba3a692d87ec6a.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 playful automation landing page with heavy dark-green headings, orange actions, pale-gray surfaces and hand-drawn/emoji-like illustrations.
- **Evidence scale:** Original 2880 ร 12458 pixels, inspected through five readable crops. CSS estimates assume an unverified 2ร capture scale.
### Page composition
- **Hero:** Navigation above centered two-line headline, subtitle and paired actions; floating app-logo discs surround the message.
- **Proof:** Carousel arrows, review badges, product badge and three large usage metrics sit below.
- **Builder:** Wide rounded panel contains paired app/trigger/action selectors and an orange trial action.
- **Problems/CTA:** Speech bubbles with expressive avatars precede a centered automation invitation.
- **Features:** Four pill tabs above a large white text/illustration panel; a second split section pairs automation-builder image and three-step explanation.
- **Proof/resources:** Three testimonial cards with faded continuation, four tutorial items and a lavender final CTA.
- **Footer:** Brand/contact, popular apps/integrations/company links, social/use-case card and legal row.
### Information hierarchy
- **Display:** Heavy headings and large metric numerals dominate.
- **Actions:** Orange signup/try controls contrast with outlined secondary buttons.
- **Selected state:** SaaS ecosystem tab is dark filled; other tabs are outlined.
- **Testimonials:** Quote text and avatar/name/role identify social proof.
- **Tutorials:** Colorful thumbnails precede category/time metadata, bold titles and excerpts.
### Typography
- **Hero:** Unverified sans-serif around 56 px heavy, 64 px line height.
- **Sections:** Approximately 44โ48 px bold with 52โ56 px line height.
- **Body:** Around 16โ20 px regular, 24โ28 px line height.
- **Card titles:** Approximately 20โ22 px bold.
- **Metadata/footer:** Around 13โ16 px; metric figures around 40 px heavy.
### Colors & surfaces
- **Base:** Measured #F4F5F6 and white #FFFFFF.
- **Secondary:** Near-white #F3F4F6/#F7F6F7.
- **Ink:** Dark green-gray #2A3534.
- **Lavender:** #EFEBFB and #DDD9F5 support closing/artwork regions.
- **Accent:** Orange primary actions and branding; app logos supply varied secondary colors.
### Components
- **Hero discs:** White circular app-logo containers scattered around centered copy.
- **Buttons:** Approximately 48โ60 px rounded rectangles, orange filled or pale outlined.
- **Workflow panel:** Large approximately 32 px radius shell, white paired selector areas and small central connector symbol.
- **Problem bubbles:** Rounded gray speech boxes with floating expressive avatars.
- **Feature artwork:** Black outlined hands/puzzle pieces with orange accent.
- **Testimonials:** Three equal white rounded cards, roughly 24 px radii; faded lower previews and Show more control.
- **Tutorial grid:** Four wide thumbnails with rounded corners and compact metadata pills.
- **Closing:** Lavender illustrated rounded banner with centered heading/action.
- **Footer:** Five content columns and orange chat bubble.
### Visual rhythm
- **Sections:** Broad 100 px-plus gaps and wavy boundaries separate chapters.
- **Alignment:** Most content shares a centered roughly 1220 px region.
- **Contrast:** White feature panels sit inside gray page fields; orange actions repeat predictably.
- **Density:** Builder controls and tutorial grid balance spacious centered statements.
### Responsive
- **Observed limit:** Desktop only.
- **Recommendation:** Stack builder selectors and split sections; reduce tutorial/testimonial columns.
- **Artwork:** Reposition floating logos/avatars outside text and wrap feature tabs.
### Adaptation guidance
- **Retain:** Let visitors see app-to-app workflow anatomy before deeper benefits.
- **Implement:** Use consistent rounded surfaces, dark-green typography and orange actions.
- **Verify:** Confirm fonts, scale and current usage/integration claims separately; no automation was created.
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.