Design tips
Impossible follows design best practices by default. These tips help you get the most out of your prompts.
Spacing and layout
- Section padding: 64–96px vertical between major sections
- Between elements: 16–32px spacing
- Base scale: 8px (8, 16, 24, 32, 48, 64, 96, 128px)
When prompting, you can say things like: “Add 64px padding between sections” or “Use consistent 24px spacing between the feature cards.”
Typography
- Hierarchy: Headings should be clearly larger than body text (h1 > h2 > h3)
- Line length: 65–75 characters for body text (readable)
- Fonts: At most 2 font families — one for headings, one for body
Example prompts: “Make the headline 2x larger than the subtitle” or “Use a clear heading hierarchy.”
Color and contrast
- Balance: Aim for ~60% neutral, 30% secondary, 10% accent
- Accessibility: Body text needs sufficient contrast (WCAG AA: 4.5:1)
- Consistency: Use your site’s existing palette; extend rather than replace
Example: “Use the site’s accent color for the CTA button” or “Ensure the body text has good contrast.”
Design patterns
Impossible knows these common patterns:
| Pattern | Description |
|---|
| Hero | Benefit-driven headline, subheadline, primary CTA, optional hero image |
| Features grid | 3–4 cards with icon/title/description; stacks on mobile |
| Split content | Image and text columns that alternate by section |
| Social proof | Testimonials, logos, ratings, or stats near CTAs |
| CTA banner | High-contrast section with concise headline and one clear action |
| FAQ | Collapsible questions with short, trust-building answers |
Landing page best practices
- Primary CTA: Repeat 2–3 times (hero, mid-page, closing section)
- Trust signals: Place near conversion points
- Proof points: Use specific numbers (“10,000+ customers,” “4.9/5 rating”) instead of vague claims
- Hierarchy: Left-aligned body text, strong heading contrast, consistent spacing
Responsive design
Impossible builds mobile-first by default:
- Single-column layouts that enhance at larger breakpoints
- Fluid typography and relative units
- Images that scale (max-width: 100%)
- Touch targets at least 44x44px
Use the preview device toggles (desktop, tablet, mobile) to verify layouts.
Common mistakes to avoid
- Same-size elements that compete for attention
- Center-aligned body text (harder to read)
- Generic placeholder text (Lorem ipsum)
- Too many fonts or colors
When you want a specific look, describe it: “Use a two-column layout with the image on the left” or “Match the spacing of the hero section.”